Columns

columns.md

Creating custom columns for your website

.row {
  @include clearfix;
}

.column {
  float: left;

 & + & {
  margin-left: $gutter-space;
 }
}

Now let's say you want to make 3 columns and somewhere else on your site, you want to use 4 columns. The minimum number of columns you will need to support both is 3 * 4, or 12. If you have 12 columns, you will want 11 gutters. The gutter size will be personal preference, but I usually stick to around 3% for fluid containers and 12 columns. Your milage may vary.

$number_of_columns: 12;
$number_of_gutters: $number_of_columns - 1;
$gutter_space: 3%;
$column_space: (100 - $gutter_space * $number_of_gutters) / $number_of_columns;


So now, let's implement a .one-third and .two-thirds column:

.column {
  &.one-third {
    width: ($column_space * $number_of_columns / 3) + ($gutter_space * ($number_of_columns - 1) / 3);
  }

  &.two-thirds {
    width: ($column_space * 2 * $number_of_columns / 3) + ($gutter_space * (2 * $number_of_columns - 1) / 3);
  }
}

Let's simplify that with a mixin:

$number_of_columns: 12;
$number_of_gutters: $number_of_columns - 1;
$gutter_space: 3%;
$column_space: (100 - $gutter_space * $number_of_gutters) / $number_of_columns;

@mixin column( $percentage_width ) {
  $stretch_columns: $number_of_columns * $percentage_width;
  $stretch_gutters: $stretch_columns - 1;

  width: ( $stretch_columns * $column_space ) + ( $stretch_gutters * $gutter_space );
}

.row {
  @include clearfix;
}

.column {
  float: left;

  & + & {
   margin-left: $gutter-space;
  }

  &.one-third {
    @include column(33%);
  }

  &.two-thirds {
    @include column(66%);
  }
}

The mixin is not technically the same, since we are subtracting 1 from the number of calculated columns, rather than the number of columns before calculation. But in most cases, because we picked our number of columns to be equal to the least common multiple of the types of columns we are using, the calculation should work out.

Lets try it:

$number_of_columns: 12;
$number_of_gutters: $number_of_columns - 1;
$gutter_space: 3%;
$column_space: (100 - $gutter_space * $number_of_gutters) / $number_of_columns;

@mixin column( $percentage_width ) {
  $stretch_columns: $number_of_columns * $percentage_width;
  $stretch_gutters: $stretch_columns - 1;

  width: ( $stretch_columns * $column_space ) + ( $stretch_gutters * $gutter_space );
}

@mixin clearfix {
    zoom:1;
    &:before, &:after {
        content: "\0020"; 
        display: block; 
        height: 0; 
        overflow: hidden; 
    }
    &:after {
        clear: both;
    }
}

.row {
  @include clearfix;
}

.column {
  float: left;

 & + & {
  margin-left: $gutter-space;
 }

  &.one-third {
    @include column(.33);
  }

  &.two-thirds {
    @include column(.66);
  }
}

.column {
  background-color: red;
  height: 50px;
}

<div class="row">
  <div class="column one-third">
    Wow
  </div>
  <div class="column two-thirds">
   Smashing!
  </div>
</div>

With this sass, you can even add odd widths of columns, like a fifth:

&.one-fifth {
  @include column(.20);
}

<div class="column one-fifth">
    Wow
</div>