I was talking to someone about Flexbox, and he said Flexbox is a library/light-framework which sounds a bit weird to me and now I'm confused.
Is it a framework or not?
Flexbox is just pure CSS, not a framework
The CSS3 Flexible Box, or flexbox, is a layout mode providing for the
arrangement of elements on a page such that the elements behave
predictably when the page layout must accommodate different screen
sizes and different display devices. For many applications, the
flexible box model provides an improvement over the block model in
that it does not use floats, nor do the flex container's margins
collapse with the margins of its contents
Flexbox is a commonly used term that refers to the CSS Flexible Box Layout, which is a CSS technology. It is just plain CSS.
Of course, in the same way jQuery is derived from JavaScript, there are various frameworks that have been derived from flexbox (e.g., Angular, React Native, Bulma, Flexbox Grid, Basis, etc.)
I don't think so. According to wikipedia, a framework is software used to alleviate a lot of the work associated with web development (source). I would not consider flex a framework simply because it is default/native/included browser behavior. No external software is needed to use flex in your website.
I don't think there is one definition for what a framework is, but I have never considered default html/css behavior to be a framework. To me, a framework is code that I have to install or download to be able to use in my website.
CSS3 (unlike its predecessors) is a collection of specifications.
CSS Flexible Box Layout (or Flexbox) is one of these CSS specifications.
Others include:
CSS Color Level 3
CSS Selectors Level 3
CSS Media Queries
CSS Multi-column Layout
CSS Shapes Level 1
CSS Grid Layout Level 1
CSS Writing Modes Level 3
and so on.
For the entire range of CSS Specs currently completed or in development, see:
Descriptions of all CSS specifications
CSS Current Work (summary)
Related
I recently started using Tailwind CSS and I notice it states (and recommends) to use unprefixed classes for mobile and prefixed classes for larger screens.
This is in contrast to Bootstrap which does the exact opposite.
What are the pros and cons of those mobile-first approach?
Quoting bootstrap 5.0 official documentation here
Mobile first, responsive design is the goal. Bootstrap’s CSS aims to apply the bare minimum of styles to make a layout work at the smallest breakpoint, and then layers on styles to adjust that design for larger devices. This optimizes your CSS, improves rendering time, and provides a great experience for your visitors.
Pretty much all the CSS frameworks use that kind of approach nowadays.
It's always easier to have some basic layout for smaller screen resolutions and bigger one adapted w/ some additional styling.
Also, this website is saying that 55.73% of the web traffic is mobile. Even the 41.46% of desktop stats do have some small enough resolutions to fit styling considered as "mobile" (like the 1280x720 one).
TLDR: make your website look good for the biggest amount of users possible with as less styling as possible, then apply specific CSS for wider resolutions.
I don't know any specific cons of starting by a mobile version but maybe the case in which your webapp is targeted towards an admin kind of layout, who will be used 95% of the time on a desktop.
Are there an open source code for css grid layout, am aware of the existence of frameworks such as bootstrap and masonry,
am wondering if there are any way of getting grid layout without using these frameworks?
Sure there are many just grid frameworks without the overhead of full ui css framework, really just google css grid frameworks
old classic
http://960.gs/
responsive
http://getskeleton.com/
http://www.responsivegridsystem.com/
Sass
http://susy.oddbird.net/
Newer Flexbox based grid frameworks
http://flexboxgrid.com
http://studio51.github.io/gridlecss/
http://fclaussen.github.io/Flexbox-Framework/
Newest is the Css Grid Layout spec, from what I have read all major browser makers are committed to this spec, Chrome Canary has a good working implementation, Firefox is working on it. Webkit is also working on it.
See these resources for Css Grid Layout
Rachael Andrews site
http://gridbyexample.com/
Pollyfill
https://github.com/FremyCompany/css-grid-polyfill
Igalia shows how to enable in different browsers plus other examples
http://igalia.github.io/css-grid-layout/
With the Grid Layout spec you will no longer need a framework to layout a grid, hopefully by 2016 it will be in all major browsers
Also see flexbox based grids above as they seem to be gaining popularity.
But I am really excited about the Css Grid Layout Spec and having grid capabilities built right into the browsers
Can anyone please enlighten me on how the new Flexbox layout model is any better than current tables way? (display:table and all those are includedin my case) ?
It's not supported at all under IE10 which isn't very good for the near future, and I just can't see any benefits over table layout. But still, the internet is starting to get full of "worshipers" of this new CSS method of layout, and all the examples I see can be easily done with normal css without problems.
Update 25.12.15:
I have been using flexboxes a lot since they were introduced to modern browsers and had stopped using display:table and so on, because flexboxes are more powerful and easy to use.
There are three distinctions I can think of between using flexbox and using table display values or floats to layout a page:
Being able to re-order elements irrespective of the HTML source order, while keeping elements in the normal flow - you can do this by specifying an integer value with the order property.
It requires less typing than traditional float layouts (you don't need all of the pseudo-elements for clearing purposes) and is more semantic, while using floats or tables for layouts obviously isn't.
The ability for flex-items to grow and shrink to fill horizontal and vertical space based on an ancestor elements' dimensions - by using the flex-grow and flex-shrink properties.
The problem (as you've pointed out) is that support is still pretty bad; In fact Firefox is still implementing an older version of the flexbox module, so you have to account for minor discrepancies in syntax and behavior, depending on which browser you're using. It has been said quite a bit, though, that it is the future for layouts, especially for complex web apps that are popping up more often. It's worth learning if you're okay with making an inevitably wise investment - at the cost of not really being useable right now.
I also suggest you take a look at this smashing magazine article for a friendly introduction to flexbox (it's fairly recently written)
The Flexbox model is more powerful than display table. Flexbox supports layouts for right to left languages for example. And yes indeed, flexbox is a bit complex and that's an entry barrier. Float and clearfix layouts are a (clever) hack, somehow in the same way table layouts are a hack, flexbox is meant for layout.
The browser support is getting better lately, some say we should use it now. Bootstrap 3 does however not make use of flexbox, but i can imagine that the next version will.
Simply put, it's something that'll be beneficial in a few years. Like many advanced css techniques, HTML5, etc., a few people will adopt them with painful fallbacks and shims/shivs for the next couple of years.
When browsers support it in the future, we'll have a party and all hate on the 'old' browsers that don't support them :).
Flexboxes are more flexible and semantically appropriate since tables were never meant to be used for layout. From MDN introduction to Flexbox:
Why Flexbox?
For a long time, the only reliable cross-browser compatible tools available for creating CSS layouts were features like floats and positioning. These work, but in some ways they're also limiting and frustrating.
The following simple layout designs are either difficult or impossible to achieve with such tools in any kind of convenient, flexible way:
Vertically centering a block of content inside its parent.
Making all the children of a container take up an equal amount of the available width/height, regardless of how much width/height is available.
Making all columns in a multiple-column layout adopt the same height even if they contain a different amount of content.
As you'll see in subsequent sections, flexbox makes a lot of layout tasks much easier. Let's dig in!
I am using Flex 4.9. I thought that with the newest SDK, they finally made Flex and CSS components tags to work. But they did not.
I tried to set horisontalAlign and verticalAlign of spark HGroup vie CSS style, so I could manage it smoothly and save some code typing. HGroups didnt respond to CSS style I applied, ok, I thought that at least I will set their width. It also did not work! Nor pixel width or percent value.
Does Flex CSS styling is really so limited or am I missing something?
horizontalAlign, verticalAlign, width and height are all properties of the HGroup class, not styles. Hence you cannot set these properties through stylesheets.
What you seem to be missing is that Flex is not HTML and that the same semantics do not apply. In Flex 4 we separate the content from the way it is presented mainly through a process called skinning: we declare components and their logic in one class (usually in ActionScript) and we define its visual representation in another (usually written in MXML).
With this separation already in place there is hardly any need for stylesheets. In fact, if you would put a CSS on top of that, you would kind of artificially try to separate the layout into two separate entities which doesn't make much sense. Not to mention it would make the code much harder to read.
There is a case where CSS comes in handy though, that is when you want to apply a certain visual style throughout your application. A Button could have five different skins, but through CSS you could set the font color of all five to a specific color without repeating that in each skin.
Since I new with CSS, I just started to work with CSS Grid system. I would like to know if are there any technical issues in use CSS grids? I mean, which are the reasons for you to not use grid?
Thanks
Flexibility
Once you start using the grid, you are stuck with it. Any other issues you might wind up finding you will have to conform to.
In my opinion (and every other designer I've talked to) it is far easier to simply define your own columns and default sizes as classes and apply them as-needed. A custom grid if you will. Then changing the styling is as easy as changing a line or two of CSS, instead of either re-generating the grid system or redesigning the site and sacrificing in order to use the grid.
I'm a fan resets and some minor love from Blueprint (especially the Typography), but that's about it.
I've just started using object oriented CSS (OOCSS). I'm really enjoying it because it provides a very basic and minimalistic grid system. It allows you to create relative sized grids by dividing an element into halves, thirds, fourths, or fifths. The divided elements are infinitely nestable.
OOCSS is more of a philosophy than a framework. It's all about how you extend a very basic foundation.
Check out these links:
http://oocss.org/
http://developer.yahoo.net/blogs/theater/archives/2009/03/website_and_webapp_performance.html
http://www.youtube.com/watch?v=j6sAm7CLoCQ
The only real reason is that they can lead to bloated markup, sometimes you have to do some serious nesting depending on the layout and desired effects+flexibilty.
They also lead to excessive class name lists on elements. However, you can avoid this at least if you move the CSS to semantic classes/ids before deploying... but thats can be alot of extra work. Blueprint is the excpetion here because it has acommand line tool to allow you to apply the rules from its framework classes to semantic selectors.
Overall i generally use them because its alot easier to teach a designer how to use a grid template. That why im not do alot of production art tasks when i go to slice things down. It jsut makes the whole process smoother IMO.
If your site has a column layout AND repeatable design patterns throughout the site... then there aren't any reasons not to include a grid. A grid adds: organization, proportion and alignment to your page. So why not keep that consistent? There is no reason.
Just don't Overuse A Grid
Some people say a grid is inflexible? That's not totally true - you can use it where you need it. You can always remove it or adjust. Just don't overuse it.
It depends on the grid system. Most grids have a fixed amount of columns, which restrict you in how you create your layout. For example, they don't allow you to combine 30%/30%/40%, 50%/50%, 25%/75% and whatever other combinations you can think of.
Some grid systems also don't allow nesting. That means you can't use a grid element as a grid for child elements in those grid systems, which makes it a lot more difficult for many layouts to be coded to HTML.
Also, some grid systems use techniques that don't work in older browsers. Before you use a grid system, you should always make sure it supports the browsers you need to support with your project.
There are frameworks out there without such restrictions, though. Cascade Framework, in fact, has a grid system far more flexible than that of any other framework out there and works fine in both IE6-8 and modern browsers alike.