Exciting things

Comparision of CSS Grid frameworks

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://semantic.gs/

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/

http://spyrestudios.com/css-grid-systems/

Leave a Reply

Your email address will not be published. Required fields are marked *