CSS Grid Systems

1,776 views
1,709 views

Published on

Presentation made for Backcountry.com, comparing different grid systems to be used for a site migration.

Published in: Technology, Education
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,776
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
19
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

CSS Grid Systems

  1. 1. grids<br />leopicadobackcountry.com<br />
  2. 2. agenda<br />What?<br />Why?<br />Why not?<br />When?<br />Our competition<br />Who’s the boss?<br />Framework analysis<br />Comparison<br />Good ideas<br />
  3. 3. what is a grid?<br />“…they’re an invisible foundation used to achieve visual cohesion in magazine and newspaper page design and layout. They essentially amount to a lattice that divides horizontal and vertical space in consistent units where text, headlines, images, and advertising can be placed.- Raj Dashtutsplus.com<br />
  4. 4. come again?<br />“…a “grid” is a set number of “columns” and intervening “gutters” inside a “container” of any width and flexibility. The container can have optional “side-gutters” that pad the grid from the surrounding “document”.…” – OddBirds - oddbird.net<br />taken from http://susy.oddbird.net/<br />
  5. 5. why use one?<br />Rapid development<br />Cross-browser<br />Cohesion<br />SEO Impact<br />UX is using them!<br />
  6. 6. why not?<br />Learning curve.<br />Bug fixing is complicated.<br />Presentation and Content get tangled up.<br />
  7. 7. when?<br />Rapid development is needed<br />Designers abuse them<br />Cohesion is needed<br />
  8. 8. our competition<br />REI is not using them<br />Altrec is not using them<br />Sierra Trading Post is using a custom version of 960.gs<br />
  9. 9. who's the boss?<br />Fixed<br />Blueprint-CSS<br />960.gs<br />YAML<br />StackLayout<br />Responsive<br />Golden Grid System<br />1140px<br />LESS<br />Columnal<br />inuitcss<br />Susy<br />Semantic<br />
  10. 10. blueprint-css<br />pros:<br />open source<br />custom grid-able<br />a lot of tutorials to start off with (even some in spanish)<br />dash based class names<br />ruby based (plugin ready)<br />cons:<br />960 != 1000px, needs to be customized<br />bloated (forms, typography)?<br />
  11. 11. blueprint-css<br />@github:<br />last commit on: 06/06/11<br />Watched by: 4,365 people<br />forked: 385 times<br />HNR grid:<br />2,43kb – base framework (compressed)<br />3,75kb – html, 81 lines (includes content and css)<br />6,18kb total (on page css can be externalized and compressed)<br />
  12. 12. 960.gs<br />pros:<br />open source<br />custom grid-able<br />very well documented<br />widely used: drupal, sony music, twitter (blog), woothemes, etc.<br />pre-made templates available<br />alfa/omega<br />cons:<br />960 != 1000px, needs to be customized<br />not widely used as blueprint<br />underscore based class names<br />
  13. 13. 960.gs<br />@github:<br />last commit on: 06/24/11<br />Watched by: 1,397 people<br />forked: 105 times<br />HNR grid:<br />2,52kb – base framework (compressed)<br />3,79kb – html, 81 lines (includes content and css)<br />6,31kb total (on page css can be externalized and compressed)<br />
  14. 14. YAML<br />pros<br />stable (more than 5+ years)<br />form styles ready<br />templates available<br />cons<br />old (supports IE 5.5+)<br />shady CSS techniques<br />html * {font-size:100.01% }<br />* html body * { overflow:visible }<br />BIG learning curve<br />awful naming convention<br />not straightforward at all<br />licensing issues<br />requires additional css files for IE<br />div order can’t be changed<br />not very used<br />requires heavy nesting of divs<br />
  15. 15. YAML<br />Not in github<br />Single developer<br />Self hosted<br />Last Update 3.3.1 in 06/2011<br />HNR Grid<br />Discarted due to complexity and weight.<br />23,7kb – base framework (can’t be compressed due to hacks)<br />
  16. 16. StackLayout<br />Pros:<br />Lightweight (1,1kb when compressed)<br />Based on inline-block, instead of floats (no clearfix)<br />Elements won’t have more than 1 grid class at the time<br />When properly used, content can clear inner floats and have full width<br />Cons<br />Virtually unused<br />p.firstChild>a:StackLayout<br />Percentage Based (not column based), so we only have ‘columns’ of: {50%}, {33%, 66%}, {25%, 75%}, {20%, 40%, 60%, 80%}<br />Adds extra element to wrap content<br />No gutter.<br />No whitespaced columns<br />
  17. 17. StackLayout<br />@github:<br />last commit on: 07/06/11<br />Watched by: 127 people<br />forked: 11 times<br />HNR Grid<br />Impossible to get the same layout only using the framework.<br />1,1kb – base framework (compressed)<br />4,04kb – html, 88lines (includes content and css)<br />5,14kb total (on page css can be externalized and compressed)<br />
  18. 18. GGS<br />Pros:<br />Responsive (pseudo)<br />Golden grilet<br />Cons<br />Disconnect between the frameworks column count and mockups (16 cols based).<br />Works only with pair multiples<br />Media-query dependent, doesn’t provide reliable IE7/IE8 fallback.<br />Can’t be called a full-time grid framework.<br />
  19. 19. GGS<br />@github<br />last commit on: 08/27/11<br />Watched by: 463 people<br />forked: 31 times<br />HNR Grid<br />Impossible to get the same layout only using the framework.<br />6kb – base framework (compressed)<br />3,4kb – html, 67lines (includes content and css)<br />9,4kb total (on page css can be externalized and compressed)<br />
  20. 20. 1140px<br />Pros:<br />Responsive (uses JS/CSS for IE)<br />Uses concept of ‘rows’.<br />Cons<br />12 Column based.<br />Not customizable.<br />Lacks pull/push and empty columns.<br />
  21. 21. 1140px<br />@github<br />last commit on: 08/27/11<br />Watched by: 463 people<br />forked: 31 times<br />HNR Grid<br />Impossible to get the same layout only using the framework.<br />3,89kb – base framework (externalizing media queries)<br />4,23kb – html, 89 lines (includes content and css)<br />8,12kb total (on page css can be externalized and compressed)<br />
  22. 22. Less<br />Pros:<br />“Responsive”<br />Cons<br />“It does not contain any pre­defined column classes, pre-compilers, or other wizardry.”<br />It pretty much just adds a base of media queries into the mix.<br />
  23. 23. Less<br />@github<br />last commit on: 08/27/11<br />Watched by: 463 people<br />forked: 31 times<br />HNR Grid<br />Impossible to get the same layout only using the framework.<br />3,89kb – base framework (externalizing media queries)<br />4,23kb – html, 89 lines (includes content and css)<br />8,12kb total (on page css can be externalized and compressed)<br />
  24. 24. columnal<br />Pros:<br />Responsive<br />Row/Column based<br />Solves IE6~IE8 with a fixed width layout<br />Cons<br />Can’t customize column/width count.<br />Classes are underscored based.<br />No pull/push.<br />
  25. 25. columnal<br />!github<br />Single developer<br />Self hosted<br />Last version: 0.85, no changelog<br />HNR Grid<br />Got close of achieving the same layout but not quite.<br />13,53kb – base framework (compressed)<br />4,24kb – html, 98 lines (includes content and css)<br />17,77kb total (on page css can be externalized and compressed)<br />
  26. 26. inuitcss<br />Pros:<br />Customizable<br />Gets rid of ‘last’ class.<br />Cute logo.<br />Cons<br />No pull/push.<br />No prefix/suffix.<br />Can’t nest grids when using a fluid layout<br />
  27. 27. inuitcss<br />@github<br />last commit on: 06/30/11<br />Watched by: 331 people<br />forked: 27 times<br />HNR Grid<br />0,5kb – base framework (compressed)<br />3,83kb – html, 89 lines (includes content and css)<br />4,13kb total (on page css can be externalized and compressed)<br />
  28. 28. Susy<br />Pros:<br />Made for Compass<br />Customizable<br />Built-in grillet!<br />Adds new elements into standard grids (ie pads)<br />More ‘semantic’.<br />Cons<br />Lack of cols classes can make debugging hard.<br />Contextis tricky.<br />All elements must be declared inside the grid<br />No pull/push<br />
  29. 29. Susy<br />@github<br />last commit on: 06/14/11<br />Watched by: 269 people<br />forked: 16 times<br />HNR Grid<br />8kb – base framework (compressed)*<br />3,2kb – html, 66 lines (includes content and css)*<br />11,2kb total<br />* Susy requires that all CSS is contained in SASS files,thus the framework includes some styling.<br />
  30. 30. comparison<br />
  31. 31. goodideas<br />1140px’s/columnal’s ‘row’<br />GoldenGridGrillet: http://javascriptgrid.org/<br />Match cols 1 to 1 with UX<br />960’s naming convention for first/last classes<br />inuitcss’s debug class<br />Susy’s/Semantic’s semantics<br />Susy’sbg image<br />
  32. 32. clone the examples<br />git://github.com/leopic/grids-comp.git<br />

×