CSS Grid Systems
Download as pptx, pdf3 likes1,105 views
Presentation made for Backcountry.com, comparing different grid systems to be used for a site migration.
More Related Content
Similar to CSS Grid Systems (20)
Recently uploaded (20)
CSS Grid Systems
- 2. agendaWhat?Why?Why not?When?Our competitionWho’s the boss?Framework analysisComparisonGood 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.nettaken from http://susy.oddbird.net/
- 5. why use one?Rapid developmentCross-browserCohesionSEO ImpactUX is using them!
- 6. why not?Learning curve.Bug fixing is complicated.Presentation and Content get tangled up.
- 7. when?Rapid development is neededDesigners abuse themCohesion is needed
- 8. our competitionREI is not using themAltrec is not using themSierra Trading Post is using a custom version of 960.gs
- 9. who's the boss?FixedBlueprint-CSS960.gsYAMLStackLayoutResponsiveGolden Grid System1140pxLESSColumnalinuitcssSusySemantic
- 10. blueprint-csspros:open sourcecustom grid-ablea lot of tutorials to start off with (even some in spanish)dash based class namesruby based (plugin ready)cons:960 != 1000px, needs to be customizedbloated (forms, typography)?
- 11. blueprint-css@github:last commit on: 06/06/11Watched by: 4,365 peopleforked: 385 timesHNR 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.gspros:open sourcecustom grid-ablevery well documentedwidely used: drupal, sony music, twitter (blog), woothemes, etc.pre-made templates availablealfa/omegacons:960 != 1000px, needs to be customizednot widely used as blueprintunderscore based class names
- 13. 960.gs@github:last commit on: 06/24/11Watched by: 1,397 peopleforked: 105 timesHNR 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. YAMLprosstable (more than 5+ years)form styles readytemplates availableconsold (supports IE 5.5+)shady CSS techniqueshtml * {font-size:100.01% }* html body * { overflow:visible }BIG learning curveawful naming conventionnot straightforward at alllicensing issuesrequires additional css files for IEdiv order can’t be changednot very usedrequires heavy nesting of divs
- 15. YAMLNot in githubSingle developerSelf hostedLast Update 3.3.1 in 06/2011HNR GridDiscarted due to complexity and weight.23,7kb – base framework (can’t be compressed due to hacks)
- 16. StackLayoutPros: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 timeWhen properly used, content can clear inner floats and have full widthConsVirtually unusedp.firstChild>a:StackLayoutPercentage Based (not column based), so we only have ‘columns’ of: {50%}, {33%, 66%}, {25%, 75%}, {20%, 40%, 60%, 80%}Adds extra element to wrap contentNo gutter.No whitespaced columns
- 17. StackLayout@github:last commit on: 07/06/11Watched by: 127 peopleforked: 11 timesHNR GridImpossible 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. GGSPros:Responsive (pseudo)Golden griletConsDisconnect between the frameworks column count and mockups (16 cols based).Works only with pair multiplesMedia-query dependent, doesn’t provide reliable IE7/IE8 fallback.Can’t be called a full-time grid framework.
- 19. GGS@githublast commit on: 08/27/11Watched by: 463 peopleforked: 31 timesHNR GridImpossible 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. 1140pxPros:Responsive (uses JS/CSS for IE)Uses concept of ‘rows’.Cons12 Column based.Not customizable.Lacks pull/push and empty columns.
- 21. 1140px@githublast commit on: 08/27/11Watched by: 463 peopleforked: 31 timesHNR GridImpossible 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. LessPros:“Responsive”Cons“It does not contain any predefined column classes, pre-compilers, or other wizardry.”It pretty much just adds a base of media queries into the mix.
- 23. Less@githublast commit on: 08/27/11Watched by: 463 peopleforked: 31 timesHNR GridImpossible 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. columnalPros:ResponsiveRow/Column basedSolves IE6~IE8 with a fixed width layoutConsCan’t customize column/width count.Classes are underscored based.No pull/push.
- 25. columnal!githubSingle developerSelf hostedLast version: 0.85, no changelogHNR GridGot 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. inuitcssPros:CustomizableGets rid of ‘last’ class.Cute logo.ConsNo pull/push.No prefix/suffix.Can’t nest grids when using a fluid layout
- 27. inuitcss@githublast commit on: 06/30/11Watched by: 331 peopleforked: 27 timesHNR Grid0,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. SusyPros:Made for CompassCustomizableBuilt-in grillet!Adds new elements into standard grids (ie pads)More ‘semantic’.ConsLack of cols classes can make debugging hard.Contextis tricky.All elements must be declared inside the gridNo pull/push
- 29. Susy@githublast commit on: 06/14/11Watched by: 269 peopleforked: 16 timesHNR Grid8kb – 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. goodideas1140px’s/columnal’s ‘row’GoldenGridGrillet: http://javascriptgrid.org/Match cols 1 to 1 with UX960’s naming convention for first/last classesinuitcss’s debug classSusy’s/Semantic’s semanticsSusy’sbg image