Columns / Grid / Framework

In some cases columns have the same width, such as: two_quarter & one_half. The class names have been left in place simply for ease of use, if you prefer to use one method you can, but you can also mix names e.g.

1/4 Column class="one_quarter"
1/4 Column class="one_quarter"
2/4 Column class="two_quarter"

Is the same as:

1/4 Column class="one_quarter"
1/4 Column class="one_quarter"
1/2 Column class="one_half"

When using the framework remember that all first containing elements have a double class: class="COLUMNNAME first", the class "first" removes the left margin e.g.

1/2 Column class="one_half first"
1/2 Column class="one_half"

The same goes for nested elements, the first container element in the main container has to have class="COLUMNNAME first" e.g.

1/2 Column class="one_half first"
1/2 Column class="one_half first"
1/2 Column class="one_half"

Half Columns

1/2 Column class="one_half"
1/2 Column class="one_half"

Third Columns

1/3 Column class="one_third"
1/3 Column class="one_third"
1/3 Column class="one_third"
1/3 Column class="one_third"
2/3 Column class="two_third"

Quarter Columns

1/4 Column class="one_quarter"
1/4 Column class="one_quarter"
1/4 Column class="one_quarter"
1/4 Column class="one_quarter"
1/4 Column class="one_quarter"
1/4 Column class="one_quarter"
2/4 Column class="two_quarter"
1/4 Column class="one_quarter"
3/4 Column class="three_quarter"
1/4 Column class="one_quarter"
2/4 Column class="two_quarter"
1/4 Column class="one_quarter"

Fifth Columns

1/5 Column class="one_fifth"
1/5 Column class="one_fifth"
1/5 Column class="one_fifth"
1/5 Column class="one_fifth"
1/5 Column class="one_fifth"
1/5 Column class="one_fifth"
1/5 Column class="one_fifth"
1/5 Column class="one_fifth"
2/5 Column class="two_fifth"
1/5 Column class="one_fifth"
1/5 Column class="one_fifth"
3/5 Column class="three_fifth"
1/5 Column class="one_fifth"
4/5 Column class="four_fifth"
2/5 Column class="two_fifth"
3/5 Column class="three_fifth"

Sixth Columns

1/6 Column class="one_sixth"
1/6 Column class="one_sixth"
1/6 Column class="one_sixth"
1/6 Column class="one_sixth"
1/6 Column class="one_sixth"
1/6 Column class="one_sixth"
1/6 Column class="one_sixth"
1/6 Column class="one_sixth"
1/6 Column class="one_sixth"
1/6 Column class="one_sixth"
2/6 Column class="two_sixth"
1/6 Column class="one_sixth"
1/6 Column class="one_sixth"
1/6 Column class="one_sixth"
3/6 Column class="three_sixth"
1/6 Column class="one_sixth"
1/6 Column class="one_sixth"
4/6 Column class="four_sixth"
1/6 Column class="one_sixth"
5/6 Column class="five_sixth"
2/6 Column class="two_sixth"
1/6 Column class="one_sixth"
3/6 Column class="three_sixth"