Forget Frameworks: Create Your Own Flexible Grid System

Transcript

1. Steve Hickey — UI Designer & Front-End Developer Forget Frameworks: Create Your Own Flexible Grid System
2. Hi, I’m Steve. I design/code applications for Fresh Tilled Soil in Watertown.
3. They create order from chaos. We Use Grids Because They’re Awesome
4. <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; } But they can be difficult to do well on the web. This is why we have so many frameworks, but they have issues.
5. Let me tell you a story about Pat and Andy...
6. Marketing: Looks great, but it needs our partner quotes. We need to make them feel special.
7. CEO: Close, but where’s my picture? I work very hard! In fact, get all the execs on here. But make them smaller than me.
8. CTO: I hear responsive design is pretty big right now. Why isn’t this responsive, aren’t we paying you enough?
9. The stress has made them lunatics. We can prevent this from happening to you.
10. Let’s Get SASS-y SASS 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. We’ll use SASS to apply styles to pre-existing semantic classes with some mixins. These styles will be calculated with SASS functions so our elements adjust automatically when we change variables.
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. Next, our grid. I used this one because math is hard.
14. • Total width of 1000px. • 6 columns @ 150px wide each • 20px gutters Percentages are calculated with target / context = result to get flexible widths: 15% columns with 2% gutters.
15. $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 We’ll store this information in some SASS variables.
16. @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; } Then we’ll define some helpful mixins. They have use beyond our grid system and should be defined globally.
17. @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); } Now, the fun stuff: This function uses variables to make flexible column widths. * Borrowed and modified from the excellent Bourbon.io
18. @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); } And this function helps us get the correct width for gutters. * Borrowed and modified from the excellent Bourbon.io
19. 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 } } We’ll use these functions on elements like so:
20. 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 } And they’ll output this:
21. @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 } } For a full grid system we’ll need to define a few more behaviors. This mixin helps to control nesting elements.
22. @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 } And this one tells elements to behave like rows.
23. @function offset-columns($columns) { $margin: $columns * $column-width + $columns * $gutter-width; @return $margin; } For a more advanced layout we’ll need to offset elements. This function handles the calculations for us.
24. @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); } } And we can apply it using our offset mixin.
25. There’s one more pesky problem to deal with: the last element in any row... @mixin last { margin-right: 0; float: right; }
26. Note: I tried :last-child, :first-child and :nth-child(). They would be good solutions, but support is bad or intent is wrong.
27. github.com/freshtilledsoil/forget-frameworks-demo-bfe The Final Product
28. Thanks! @stevehickeydsgn http://stevehickeydesign.com http://freshtilledsoil.com