We’re targetting into “using a grid CSS framework” in HTML development. The reason is: using grid helps a lot in defining the layout structure, make it better, more efficient. However, there are a lot of CSS Grid frameworks out there. We need a comparision and benchmark. So, how?
I did a quick research this morning and write this short article for the team. I let them do the next step. This article is just a short introduction in term of concept based on some articles I’ve read.
Concepts
To make the page flexible enough in term of layout, there are 2 approaches till now:
- Adaptive layout: using the media query to make the CSS specific rules to adapt different kinds of layout. Each range condition is considered as breadkpoint.
- Fluid layout: using percentage to make the layout scale.
What are criterias to compare CSS Grid system?
Mostly, when doing comparision among different CSS Grid frameworks – the community is focusing on below criterias:
- The number of column: some CSS Grid frameworks limits the number of column that user can define, some does not. It’s better if we have the max number of column that we can define.
- Dependencies: some CSS Grid frameworks cannot work independently, they need to run with some other CSS framework like LessCSS, SaaS … However, this dependencies is not a big deal.
- Fluid layout support: Some CSS Grid frameworks are designed to work only on Fluid OR Adaptive approach. It’s good to have both in supporting of the CSS framework. (Ref: http://coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/)
- Semantic: CSS grid systems don’t allow for a proper separation of mark-up and presentation. Grid systems require that Web designers add .grid_x CSS classes to HTML elements, mixing presentational information with otherwise semantic mark-up.
- Nestable: allow nestable grid structure or not.
- Can work with IE6: :), you know why this is a condition to consider, right?
- Work without Javascript: Some CSS Grid framework are designed to run with some JS code behind. The heavy JS processing, the heavy layout is.
Where I can find reference benchmark?
This is a good link that I have found:
http://socialcompare.com/en/comparison/css-grids-amp-responsive-frameworks-comparison
References for this articles
http://www.lullabot.com/articles/responsive-adaptive-web-design
http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/
http://csswizardry.com/2011/08/building-better-grid-systems/