Percentage Based "Grid"

percentage_grid.sass

//
// How I would approach a fluid grid:
//
// [1] Let the name reflect the % width,
//     eliminating "1 of 12" guesswork.
//
// [2] Also, put 10px of padding to either
//     side, to stack and make a 20px gutter.
//
// [3] Make the box-sizing = border-box, so that
//     50% + 20px total side padding = 50%, etc.
//
// [5] Have a class of "is_parent" to kill off
//     the padding on units with nested children.
//
// [*] Note: Because the gutters are done via padding,
//     this means there's no prefix_XX or suffix_XX.
//

// `Container
//----------------------------------------------------------------------------------------------------

.container
  margin-left: auto
  margin-right: auto
  padding-left: 10px
  padding-right: 10px
  max-width: 1200px // Or whatever.

// `Clear floated elements.
//----------------------------------------------------------------------------------------------------

// http://sonspring.com/journal/clearing-floats

.clear
  clear: both
  display: block
  overflow: hidden
  visibility: hidden
  width: 0
  height: 0

// http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified

.clearfix:before,
.clearfix:after,
.container:before,
.container:after
  content: '.'
  display: block
  overflow: hidden
  visibility: hidden
  font-size: 0
  line-height: 0
  width: 0
  height: 0

.clearfix:after,
.container:after
  clear: both

// `Percentage based widths.
//----------------------------------------------------------------------------------------------------

.width_5,
.width_10,
.width_15,
.width_20,
.width_25,
.width_30,
.width_33,
.width_35,
.width_40,
.width_45,
.width_50,
.width_55,
.width_60,
.width_65,
.width_66,
.width_70,
.width_75,
.width_80,
.width_85,
.width_90,
.width_95,
.width_100
  box-sizing: border-box
  float: left
  padding-left: 10px
  padding-right: 10px

.is_parent
  padding-left: 0
  padding-right: 0

.width_5
  width: 5%

.width_10
  width: 10%

.width_15
  width: 15%

.width_20
  width: 20%

.width_25
  width: 25%

.width_30
  width: 30%

.width_33
  width: 33.33333%

.width_35
  width: 35%

.width_40
  width: 40%

.width_45
  width: 45%

.width_50
  width: 50%

.width_55
  width: 55%

.width_60
  width: 60%

.width_65
  width: 65%

.width_66
  width: 66.66666%

.width_70
  width: 70%

.width_75
  width: 75%

.width_80
  width: 80%

.width_85
  width: 85%

.width_90
  width: 90%

.width_95
  width: 95%

.width_100
  width: 100%

// `Push & Pull, to rearrange column order (for potential "SEO").
//----------------------------------------------------------------------------------------------------

.push_5,
.push_10,
.push_15,
.push_20,
.push_25,
.push_30,
.push_33,
.push_35,
.push_40,
.push_45,
.push_50,
.push_55,
.push_60,
.push_65,
.push_66,
.push_70,
.push_75,
.push_80,
.push_85,
.push_90,
.push_95,
.pull_5,
.pull_10,
.pull_15,
.pull_20,
.pull_25,
.pull_30,
.pull_33,
.pull_35,
.pull_40,
.pull_45,
.pull_50,
.pull_55,
.pull_60,
.pull_65,
.pull_66,
.pull_70,
.pull_75,
.pull_80,
.pull_85,
.pull_90,
.pull_95
  position: relative

//
// Push:
//

.push_5
  left: 5%

.push_10
  left: 10%

.push_15
  left: 15%

.push_20
  left: 20%

.push_25
  left: 25%

.push_30
  left: 30%

.push_33
  left: 33.33333%

.push_35
  left: 35%

.push_40
  left: 40%

.push_45
  left: 45%

.push_50
  left: 50%

.push_55
  left: 55%

.push_60
  left: 60%

.push_65
  left: 65%

.push_66
  left: 66.66666%

.push_70
  left: 70%

.push_75
  left: 75%

.push_80
  left: 80%

.push_85
  left: 85%

.push_90
  left: 90%

.push_95
  left: 95%

//
// Pull:
//

.pull_5
  left: -5%

.pull_10
  left: -10%

.pull_15
  left: -15%

.pull_20
  left: -20%

.pull_25
  left: -25%

.pull_30
  left: -30%

.pull_33
  left: -33.33333%

.pull_35
  left: -35%

.pull_40
  left: -40%

.pull_45
  left: -45%

.pull_50
  left: -50%

.pull_55
  left: -55%

.pull_60
  left: -60%

.pull_65
  left: -65%

.pull_66
  left: -66.66666%

.pull_70
  left: -70%

.pull_75
  left: -75%

.pull_80
  left: -80%

.pull_85
  left: -85%

.pull_90
  left: -90%

.pull_95
  left: -95%

// `Don't try this at home, kids...
// Simulate box-sizing support in IE7.
//----------------------------------------------------------------------------------------------------

*:first-child + html .width_5,
*:first-child + html .width_10,
*:first-child + html .width_15,
*:first-child + html .width_20,
*:first-child + html .width_25,
*:first-child + html .width_30,
*:first-child + html .width_33,
*:first-child + html .width_35,
*:first-child + html .width_40,
*:first-child + html .width_45,
*:first-child + html .width_50,
*:first-child + html .width_55,
*:first-child + html .width_60,
*:first-child + html .width_65,
*:first-child + html .width_66,
*:first-child + html .width_70,
*:first-child + html .width_75,
*:first-child + html .width_80,
*:first-child + html .width_85,
*:first-child + html .width_90,
*:first-child + html .width_95,
*:first-child + html .width_100
  width: expression(!this.className.match(/is_parent/) && (this.offsetWidth - 20))