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

1. grids leopicadobackcountry.com

2. agenda What? Why? Why not? When? Our competition Who’s the boss? Framework analysis Comparison Good ideas

3. what is a grid? “…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

4. come again? “…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 taken from http://susy.oddbird.net/

5. why use one? Rapid development Cross-browser Cohesion SEO Impact UX is using them!

6. why not? Learning curve. Bug fixing is complicated. Presentation and Content get tangled up.

7. when? Rapid development is needed Designers abuse them Cohesion is needed

8. our competition REI is not using them Altrec is not using them Sierra Trading Post is using a custom version of 960.gs

9. who's the boss? Fixed Blueprint-CSS 960.gs YAML StackLayout Responsive Golden Grid System 1140px LESS Columnal inuitcss Susy Semantic

10. blueprint-css pros: open source custom grid-able a lot of tutorials to start off with (even some in spanish) dash based class names ruby based (plugin ready) cons: 960 != 1000px, needs to be customized bloated (forms, typography)?

11. blueprint-css @github: last commit on: 06/06/11 Watched by: 4,365 people forked: 385 times HNR grid: 2,43kb – base framework (compressed) 3,75kb – html, 81 lines (includes content and css) 6,18kb total (on page css can be externalized and compressed)

12. 960.gs pros: open source custom grid-able very well documented widely used: drupal, sony music, twitter (blog), woothemes, etc. pre-made templates available alfa/omega cons: 960 != 1000px, needs to be customized not widely used as blueprint underscore based class names

13. 960.gs @github: last commit on: 06/24/11 Watched by: 1,397 people forked: 105 times HNR grid: 2,52kb – base framework (compressed) 3,79kb – html, 81 lines (includes content and css) 6,31kb total (on page css can be externalized and compressed)

14. YAML pros stable (more than 5+ years) form styles ready templates available cons old (supports IE 5.5+) shady CSS techniques html * {font-size:100.01% } * html body * { overflow:visible } BIG learning curve awful naming convention not straightforward at all licensing issues requires additional css files for IE div order can’t be changed not very used requires heavy nesting of divs

15. YAML Not in github Single developer Self hosted Last Update 3.3.1 in 06/2011 HNR Grid Discarted due to complexity and weight. 23,7kb – base framework (can’t be compressed due to hacks)

16. StackLayout Pros: Lightweight (1,1kb when compressed) Based on inline-block, instead of floats (no clearfix) Elements won’t have more than 1 grid class at the time When properly used, content can clear inner floats and have full width Cons Virtually unused p.firstChild>a:StackLayout Percentage Based (not column based), so we only have ‘columns’ of: {50%}, {33%, 66%}, {25%, 75%}, {20%, 40%, 60%, 80%} Adds extra element to wrap content No gutter. No whitespaced columns

17. StackLayout @github: last commit on: 07/06/11 Watched by: 127 people forked: 11 times HNR Grid Impossible to get the same layout only using the framework. 1,1kb – base framework (compressed) 4,04kb – html, 88lines (includes content and css) 5,14kb total (on page css can be externalized and compressed)

18. GGS Pros: Responsive (pseudo) Golden grilet Cons Disconnect between the frameworks column count and mockups (16 cols based). Works only with pair multiples Media-query dependent, doesn’t provide reliable IE7/IE8 fallback. Can’t be called a full-time grid framework.

19. GGS @github last commit on: 08/27/11 Watched by: 463 people forked: 31 times HNR Grid Impossible to get the same layout only using the framework. 6kb – base framework (compressed) 3,4kb – html, 67lines (includes content and css) 9,4kb total (on page css can be externalized and compressed)

20. 1140px Pros: Responsive (uses JS/CSS for IE) Uses concept of ‘rows’. Cons 12 Column based. Not customizable. Lacks pull/push and empty columns.

21. 1140px @github last commit on: 08/27/11 Watched by: 463 people forked: 31 times HNR Grid Impossible to get the same layout only using the framework. 3,89kb – base framework (externalizing media queries) 4,23kb – html, 89 lines (includes content and css) 8,12kb total (on page css can be externalized and compressed)

22. Less Pros: “Responsive” Cons “It does not contain any pre­defined column classes, pre-compilers, or other wizardry.” It pretty much just adds a base of media queries into the mix.

23. Less @github last commit on: 08/27/11 Watched by: 463 people forked: 31 times HNR Grid Impossible to get the same layout only using the framework. 3,89kb – base framework (externalizing media queries) 4,23kb – html, 89 lines (includes content and css) 8,12kb total (on page css can be externalized and compressed)

24. columnal Pros: Responsive Row/Column based Solves IE6~IE8 with a fixed width layout Cons Can’t customize column/width count. Classes are underscored based. No pull/push.

25. columnal !github Single developer Self hosted Last version: 0.85, no changelog HNR Grid Got close of achieving the same layout but not quite. 13,53kb – base framework (compressed) 4,24kb – html, 98 lines (includes content and css) 17,77kb total (on page css can be externalized and compressed)

26. inuitcss Pros: Customizable Gets rid of ‘last’ class. Cute logo. Cons No pull/push. No prefix/suffix. Can’t nest grids when using a fluid layout

27. inuitcss @github last commit on: 06/30/11 Watched by: 331 people forked: 27 times HNR Grid 0,5kb – base framework (compressed) 3,83kb – html, 89 lines (includes content and css) 4,13kb total (on page css can be externalized and compressed)

28. Susy Pros: Made for Compass Customizable Built-in grillet! Adds new elements into standard grids (ie pads) More ‘semantic’. Cons Lack of cols classes can make debugging hard. Contextis tricky. All elements must be declared inside the grid No pull/push

29. Susy @github last commit on: 06/14/11 Watched by: 269 people forked: 16 times HNR Grid 8kb – base framework (compressed)* 3,2kb – html, 66 lines (includes content and css)* 11,2kb total * Susy requires that all CSS is contained in SASS files,thus the framework includes some styling.

30. comparison

31. goodideas 1140px’s/columnal’s ‘row’ GoldenGridGrillet: http://javascriptgrid.org/ Match cols 1 to 1 with UX 960’s naming convention for first/last classes inuitcss’s debug class Susy’s/Semantic’s semantics Susy’sbg image

32. clone the examples git://github.com/leopic/grids-comp.git