CSS Grid Systems

  • 1,477 views
Uploaded on

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

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

More in: Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,477
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
18
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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