Sass based, fluid grid

gistfile1.sass

// the basics

*
  +box-sizing(border-box)

@mixin width($percent, $alignment: null)
  @if $percent == 33
    $percent: 33.334
  @if $percent == 66
    $percent: 66.667
  @if $alignment == left
    +append(100 - $percent)
  @if $alignment == right
    +prepend(100 - $percent)
  @if $alignment == center
    +prepend((100 - $percent) / 2)
    +append((100 - $percent) / 2)
  width: $percent * 1%
  +inline-block
  vertical-align: top

@mixin prepend($percent)
  @if $percent == 33
    $percent: 33.334
  @if $percent == 66
    $percent: 66.667
  margin-left: $percent * 1%

@mixin append($percent)
  @if $percent == 33
    $percent: 33.334
  @if $percent == 66
    $percent: 66.667
  margin-right: $percent * 1%


// some helpers (use with selectivizr for legacy browsers):

@mixin two_up
  +width(49)
  margin-right: 4px
  &:nth-child(2n+1)
    +append(2)
  &:nth-child(2n)
    +append(0)

@mixin three_up
  +width(32)
  margin-right: 4px
  &:nth-child(3n+1), &:nth-child(3n+2)
    +append(2)
  &:nth-child(3n)
    +append(0)

@mixin four_up
  +width(23.5)
  margin-right: 3px
  &:nth-child(4n+1), &:nth-child(4n+2), &:nth-child(4n+3)
    +append(2)
  &:nth-child(4n)
    +append(0)

@mixin five_up
  +width(18.4)
  margin-right: 3px
  &:nth-child(5n+1), &:nth-child(5n+2), &:nth-child(5n+3), &:nth-child(5n+4)
    +append(2)
  &:nth-child(5n)
    +append(0)


// usage:

#page
  +width(100)

#main
  +width(100)
  @media only screen and (min-width: 1024px)
    +width(66)

#sidebar
  +width(100) 
  @media only screen and (min-width: 1024px)
    +width(33)

#footer
  +width(80, center)
 
#some_box
  +prepend(30)
  +width(50)
  +append(20)

#some_list > li
  +width(100)
  @media only screen and (min-width: 480px)
    +two_up
  @media only screen and (min-width: 768px)
    +three_up
  @media only screen and (min-width: 1024px)
    +four_up
  @media only screen and (min-width: 1280px)
    +five_up


/*
  inline-blocks have that nasty 4px margin problem; 
  we work around it by removing all whitespace between 
  tags (e.g. in Django by using a spaceless block)