View
2.024
Download
4
Category
Tags:
Preview:
DESCRIPTION
Presentation made for Backcountry.com, comparing different grid systems to be used for a site migration.
Citation preview
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
Recommended