Upgrade to Pro — share decks privately, control downloads, hide ads and more …

responsive_grids.pdf

Cd62d88a83461e0b1daa8f2fa31c4dcb?s=47 Dan Denney
August 12, 2011

 responsive_grids.pdf

Cd62d88a83461e0b1daa8f2fa31c4dcb?s=128

Dan Denney

August 12, 2011
Tweet

Transcript

  1. and the browsers that hate them.

  2. How did we get here?

  3. None
  4. None
  5. Basic, fixed-width grid CSS .grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6,

    .grid-7, .grid-8, .grid-9, .grid-10, .grid-11 { float: left; position: relative; margin-right: 20px; } .grid-1 { width: 77px; } .grid-2 { width: 174px; } .grid-3 { width: 271px; } .grid-4 { width: 368px; } .grid-5 { width: 465px; } .grid-6 { width: 562px; } .grid-7 { width: 659px; } .grid-8 { width: 756px; } .grid-9 { width: 853px; } .grid-10 { width: 950px; } .grid-11 { width: 1047px; } .grid-12 { width: 1144px; margin: 0px auto; } .first { clear: left; } .last { margin-right: 0px !important; }
  6. None
  7. None
  8. None
  9. Okay, so Ethan was right.

  10. None
  11. Our goal was to make ffGrid as flexible as possible.

    $col_count: 12; // the total number of grid columns $gutter: 2; // gutter width, in % $nesting_level: 2; // number of levels of grid nesting $class_prefix: 'grid-'; // grid column class prefix // create push classes? $create_push: true; $push_prefix: 'push-'; // class prefix to append to push classes // create pull classes? $create_pull: true; $pull_prefix: 'pull-'; // class prefix to append to pull classes
  12. Sass lets us automate the boring bits. @for $grid_num from

    1 through $col_count { .#{$class_prefix}#{$grid_num} { width: grid_width($grid_num); } } @function grid_width($grid_num, $nesting: 0, $parent_grid_num: 0) { @if $nesting == 0 { @return ((col_gutter_width() * $grid_num) - $gutter)#{"%"}; } @else { $coef : nesting_coef($parent_grid_num, $nesting); @return ((col_gutter_width() * $grid_num) - $gutter) * $coef#{"%"}; } }
  13. The results .grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8,

    .grid-9, .grid-10, .grid-11 { float: left; position: relative; margin-right: 2%; } .grid-1 { width: 6.5%; } .grid-2 { width: 15%; } .grid-3 { width: 23.5%; } .grid-4 { width: 32%; } .grid-5 { width: 40.5%; } .grid-6 { width: 49%; } .grid-7 { width: 57.5%; } .grid-8 { width: 66%; } .grid-9 { width: 74.5%; } .grid-10 { width: 83%; } .grid-11 { width: 91.5%; } .grid-12 { width: 100%; } .first { clear: left; } .last { margin-right: 0px !important; }
  14. But then, WebKit was like SRY, NOPE.

  15. The problem is pixels.

  16. 25% 25% 25% 25% 453px 113.25px 113.25px 113.25px 113.25px

  17. Further reading on sub-pixel issues: http://bit.ly/badpx

  18. So we’re left with… Javascript?

  19. We need your help!

  20. ffGrid is on GitHub: http://github.com/jaredfager/ffGrid