Demonstrating Skeleton Columns Names

Skeleton uses standard naming convention each column has two names width of column (one, two, three, four, five,.. ten, eleven, twelve) and the class name columns.

one columns

This is class = "eleven columns" similar to figure 16-3 page 501

two columns, note they assume equal height content

This is class = "ten columns", we have class="row" first, a row is a row

three columns

This is class = "nine columns"

four columns

This is class = "eight columns"

five columns

This is class = "seven columns"

this is class = "six columns"

This is class = "six columns"; We have w equal width columns

this is class = "seven columns"

This is class = "five columns"

this is class = "eight columns"

This is class = "four columns"

this is class = "nine columns"

This is class = "three columns"

this is class = "ten columns"

two columns

this is class = "eleven columns"

one columns

this is class = "twelve columns"

Most systems can use just class="row" for full twelve columns, for this example border and background color are applied internally to class name columns.

Standard four columns display class="three columns"

Skeleton provides several short-cut but you need to use column class not columns class with them. Column is implying a single column inside. The short-cuts are: one-third, one-half and two-thirds; they also have offset-by-unit.

Skeleton short cuts ="one-third column"

two-thirds is width 8 units class="two-thirds column"

skeleton short cut class="one-half column"

Skeleton also has offset short cuts, this is class="offset-by-six four columns"