grids

leo picadobackcountry.com

agenda

1. What?2. Why?3. Why not?4. When?5. Our competition6. Who’s the boss?7. Framework analysis8. Comparison9. Good ideas

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 Dash tutsplus.com

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/

why use one?

» Rapid development» Cross-browser» Cohesion» SEO Impact» UX is using them!

why not?

» Learning curve.» Bug fixing is complicated.» Presentation and Content get tangled up.

when?

» Rapid development is needed» Designers abuse them» Cohesion is needed

our competition

» REI is not using them» Altrec is not using them» Sierra Trading Post is using a custom version of

960.gs

who's the boss?

» Fixed˃ Blueprint-CSS˃ 960.gs˃ YAML˃ StackLayout

» Responsive˃ Golden Grid System˃ 1140px˃ LESS˃ Columnal˃ inuitcss˃ Susy˃ Semantic

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)?

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)

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

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)

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

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)

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

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, 88 lines (includes content and css)˃ 5,14kb total (on page css can be externalized and compressed)

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.

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, 67 lines (includes content and css)˃ 9,4kb total (on page css can be externalized and compressed)

1140px

» Pros:˃ Responsive (uses JS/CSS for IE)˃ Uses concept of ‘rows’.

» Cons˃ 12 Column based.˃ Not customizable.˃ Lacks pull/push and empty columns.

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)

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.

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)

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.

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)

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

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)

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.˃ Context is tricky.˃ All elements must be declared inside the grid˃ No pull/push

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.

comparison

Blueprint-css 960.Gs Susy

HTML Lines 81 81 66

CSS 2,43kb 2,52kb 8kb

Watchers 4,365 1,397 269

Pull/Push Y Y N

Pad (pre+suf) Y Y Y

Name Separator Dash Underscore N/A

Able to replicate mock

Y Y Y

good ideas

» 1140px’s/columnal’s ‘row’» GoldenGrid Grillet: 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’s bg image

clone the examples

» git://github.com/leopic/grids-comp.git