Forget Frameworks:Create Your Own Flexible Grid SystemSteve Hickey — UI Designer & Front-End Developer
Hi, I’m Steve.I design/code applications for Fresh Tilled Soil in Watertown.
We Use Grids Because They’re AwesomeThey create order from chaos.
But they can be difficult to do well on the web. This is why wehave so many frameworks, but they have issues. <div class="r...
Let me tell you a story about Pat and Andy...
Marketing: Looks great, but it needs our partner quotes. We needto make them feel special.
CEO: Close, but where’s my picture? I work very hard! In fact, getall the execs on here.But make them smaller than me.
CTO: I hear responsive design is pretty big right now. Why isn’t thisresponsive, aren’t we paying you enough?
The stress has made them lunatics.We can prevent this from happening to you.
Let’s Get SASS-ySASS is a CSS pre-processor. It allows us to do things like: 1. Nest selectors 2. Use variables 3. Extend ...
We’ll use SASS to apply styles to pre-existing semantic classeswith some mixins.These styles will be calculated with SASS ...
First, our markup. Our class names are all semantic and clean. <div class="container">     <header role="banner">...</head...
Next, our grid. I used this one because math is hard.
• Total width of 1000px.• 6 columns @ 150px wide each• 20px guttersPercentages are calculated with target / context = resu...
We’ll store this information in some SASS variables. $max-width:        1000px;   // set page max-width $column-width:    ...
Then we’ll define some helpful mixins. They have use beyondour grid system and should be defined globally. @mixin clearfix...
Now, the fun stuff:This function uses variables to make flexible column widths.  @function columns($columns, $container-col...
And this function helps us get the correct width for gutters.  @function gutter($container-columns: $maximum-columns, $gut...
We’ll use these functions on elements like so: div.parent {   width: columns(3);        // takes 1 arg: column span   marg...
And they’ll output this: div.parent {    width: 49%;                // spans 3 columns    margin-right: 2%;          // 1 ...
For a full grid system we’ll need to define a few more behaviors.This mixin helps to control nesting elements. @mixin nest...
And this one tells elements to behave like rows. @mixin row {   width: 100%;             // make sure to fill its containe...
For a more advanced layout we’ll need to offset elements. Thisfunction handles the calculations for us. @function offset-co...
And we can apply it using our offset mixin. @mixin offset($from-direction: left, $columns) {     @if $from-direction == lef...
There’s one more pesky problem to deal with:the last element in any row... @mixin last {     margin-right: 0;     float: r...
Note:I tried :last-child, :first-child and :nth-child(). They would begood solutions, but support is bad or intent is wrong.
The Final Productgithub.com/freshtilledsoil/forget-frameworks-demo-bfe
Thanks!@stevehickeydsgnhttp://stevehickeydesign.comhttp://freshtilledsoil.com
Upcoming SlideShare
Loading in …5
×

Forget Frameworks: Create Your Own Flexible Grid System

8,370 views

Published on

Talk on creating your own flexible grid system delivered at the Boston Front-End Developers Meetup on January 23, 2012.

http://www.meetup.com/Boston-Frontend-Developers/events/91356942/

Forget Frameworks: Create Your Own Flexible Grid System

  1. 1. Forget Frameworks:Create Your Own Flexible Grid SystemSteve Hickey — UI Designer & Front-End Developer
  2. 2. Hi, I’m Steve.I design/code applications for Fresh Tilled Soil in Watertown.
  3. 3. We Use Grids Because They’re AwesomeThey create order from chaos.
  4. 4. But they can be difficult to do well on the web. This is why wehave so many frameworks, but they have issues. <div class="row"> <h2 class="span4">It slices!</h2> <h2 class="span4">It dices!</h2> <h2 class="span4">It juliennes!</h2> </div> /* ================================================================== */ .row { margin-left: -20px; } .row:before, .row:after { display: table; line-height: 0; content: ""; } .row:after { clear: both; } .span4 { width: 300px; }
  5. 5. Let me tell you a story about Pat and Andy...
  6. 6. Marketing: Looks great, but it needs our partner quotes. We needto make them feel special.
  7. 7. CEO: Close, but where’s my picture? I work very hard! In fact, getall the execs on here.But make them smaller than me.
  8. 8. CTO: I hear responsive design is pretty big right now. Why isn’t thisresponsive, aren’t we paying you enough?
  9. 9. The stress has made them lunatics.We can prevent this from happening to you.
  10. 10. Let’s Get SASS-ySASS is a CSS pre-processor. It allows us to do things like: 1. Nest selectors 2. Use variables 3. Extend classes with mixins 4. Avoid repetition
  11. 11. We’ll use SASS to apply styles to pre-existing semantic classeswith some mixins.These styles will be calculated with SASS functions so ourelements adjust automatically when we change variables.
  12. 12. First, our markup. Our class names are all semantic and clean. <div class="container"> <header role="banner">...</header> <div role="main"> <section class="hero">...</section> <section class="partner-quotes"> <h2>Quotes From Our Partners</h2> <div class="cosby">...</div> <div class="jobs">...</div> <div class="wilde">...</div> <div class="letterman">...</div> <div class="franklin">...</div> <div class="twain">...</div> </section> <section class="executive-team"> <h2>Our Executive Team</h2> <div class="ceo">...</div> <div class="other-executives"> <div class="cto">...</div> <div class="cmo">...</div> <div class="coo">...</div> <div class="cio">...</div> </div> </section> </div> <footer role="contentinfo">...</footer> </div>
  13. 13. Next, our grid. I used this one because math is hard.
  14. 14. • Total width of 1000px.• 6 columns @ 150px wide each• 20px guttersPercentages are calculated with target / context = resultto get flexible widths: 15% columns with 2% gutters.
  15. 15. We’ll store this information in some SASS variables. $max-width:        1000px; // set page max-width $column-width:     15%;     // set column width $gutter-width:     2%;      // set gutter width $maximum-columns: 6;       // set max number of columns
  16. 16. Then we’ll define some helpful mixins. They have use beyondour grid system and should be defined globally. @mixin clearfix {  zoom: 1;  &:before, &:after { content: ""; display: table; }  &:after { clear: both; } } @mixin border-box {  -webkit-box-sizing: border-box;     -moz-box-sizing: border-box;          box-sizing: border-box; }
  17. 17. Now, the fun stuff:This function uses variables to make flexible column widths. @function columns($columns, $container-columns: $maximum-columns) {  $width: $columns * $column-width + ($columns - 1) * $gutter-width;  $container-width: $container-columns * $column-width + ($container-columns - 1) * $gutter-width;  @return percentage($width / $container-width); }* Borrowed and modified from the excellent Bourbon.io
  18. 18. And this function helps us get the correct width for gutters. @function gutter($container-columns: $maximum-columns, $gutter: $gutter-width) {  $container-width: $container-columns * $column-width + ($container-columns - 1) * $gutter-width;  @return percentage($gutter / $container-width); }* Borrowed and modified from the excellent Bourbon.io
  19. 19. We’ll use these functions on elements like so: div.parent {  width: columns(3); // takes 1 arg: column span  margin-right: gutter; // no args required  div.child {    width: columns(1, 3); // takes 2 args: span, span of parent    margin-right: gutter(3); // takes 1 arg: span of parent  } }
  20. 20. And they’ll output this: div.parent {  width: 49%; // spans 3 columns  margin-right: 2%; // 1 gutter width } div.parent div.child {  width: 30.61224%; // spans 1 column, 3 column parent   margin-right: 4.08163%; // 1 gutter width, 3 column parent }
  21. 21. For a full grid system we’ll need to define a few more behaviors.This mixin helps to control nesting elements. @mixin nesting { padding: 0; // no padding so nested elements fit & > div { // affect only immediate children float: left; margin-right: gutter; @include border-box; // math is hard. let’s use border-box } }
  22. 22. And this one tells elements to behave like rows. @mixin row { width: 100%; // make sure to fill its container max-width: $max-width; // but no more than our max width margin: 0 auto; @include clearfix; // clear our floats @include nesting; // add nesting styles to rows }
  23. 23. For a more advanced layout we’ll need to offset elements. Thisfunction handles the calculations for us. @function offset-columns($columns) { $margin: $columns * $column-width + $columns * $gutter-width; @return $margin; }
  24. 24. And we can apply it using our offset mixin. @mixin offset($from-direction: left, $columns) { @if $from-direction == left { float: left; margin-left: offset-columns($columns); } @if $from-direction == right { float: right; margin-right: offset-columns($columns); } }
  25. 25. There’s one more pesky problem to deal with:the last element in any row... @mixin last { margin-right: 0; float: right; }
  26. 26. Note:I tried :last-child, :first-child and :nth-child(). They would begood solutions, but support is bad or intent is wrong.
  27. 27. The Final Productgithub.com/freshtilledsoil/forget-frameworks-demo-bfe
  28. 28. Thanks!@stevehickeydsgnhttp://stevehickeydesign.comhttp://freshtilledsoil.com

×