fusionCSS works off a 12 column fluid grid and supports a variable number of columns per row.
Column spans are available in 4 device widths, tiny, small, medium and large.
| Tiny | Small | Medium | Large | |
|---|---|---|---|---|
| Device Width | < 768px | ≥ 768px | ≥ 992px | ≥ 1200px |
| CSS Class | .span-tn | .span-sn | .span-mn | .span-ln |
* Where n is the number of columns to span.
Selecting a span-s6 will use 6 columns for small, medium and large devices, while on tiny devices the grid will revert to a single column.
fusionCSS supports nesting of spans as well as out of order rendering of columns.
The column widths are specified with the span class, span classes range from span1 through to span12. span1 is 1/12 of the width of the containing row width while span6 is 6/12 of the width and span12 is the full width.
The sum of all columns in a row should add up to 12.
<div class="row">
<div class="span-s6">span-s6</div>
<div class="span-s6">span-s6</div>
</div>
<div class="row">
<div class="span-s3">span-s3</div>
<div class="span-s3">span-s3</div>
<div class="span-s3">span-s3</div>
<div class="span-s3">span-s3</div>
</div>
<div class="row">
<div class="span-s8">span-s8</div>
<div class="span-s4">span-s4</div>
</div>The grid can be nested as required by adding rows within the outer spans.
<div class="row">
<div class="span-s6">span-s6</div>
<div class="span-s6">span-s6</div>
</div>
<div class="row">
<div class="span-s6">
<div class="row">
<div class="span-s6">span-s6</div>
<div class="span-s6">span-s6</div>
</div>
<br />
</div>
<div class="span-s6">span-s6</div>
</div>In some cases you do not need a column to be present but rather you need a gap. The offset class which ranges from offset1 through to offset11 allows you to specify the number of columns to leave to the left of the selected span.
<div class="row">
<div class="span-s6">span-s6</div>
<div class="span-s6">span-s6</div>
</div>
<div class="row">
<div class="span-t6 span-s3 offset-t3 offset-s6">span-s3 / t6</div>
<div class="span-t12 span-s3">span-s3</div>
</div>
<div class="row">
<div class="span-s4 offset-s8">span-s4</div>
</div>By default columns appear left to right in the order that they are defined within the HTML, however the span-d-pushn and span-d-pulln classes allow the display order to be adjusted.
Where d is the device width and n is the number of columns to span.
The column order can be change based on device width as the 3rd row demonstrates.
<div class="row">
<div class="span-s6 span-s-push6">1st in HTML</div>
<div class="span-s6 span-s-pull6">2nd in HTML</div>
</div>
<div class="row">
<div class="span-s4 span-s-push8">1st</div>
<div class="span-s4">2nd</div>
<div class="span-s4 span-s-pull8">3rd</div>
</div>
<div class="row">
<div class="span-s4 span-s-push8 span-m-push4">1st</div>
<div class="span-s4 span-m-pull4">2nd</div>
<div class="span-s4 span-s-pull8 span-m-pull0">3rd</div>
</div>The column widths can be changed to match the device width, e.g. on a small device a 2 column layout may be chosen which adjusts to 4 column on a large device.
fusionCSS has a .75rem gutter on column spans, this can be removed with the no-gutter, no-left-gutter and no-right-gutter classes, this is useful for having span contents butt up against each other.
<div class="row">
<div class="span-t12 span-s3 span-m6">t12 / s3 / m6</div>
<div class="span-t6 span-s3 span-m6">t6 / s3 / m6</div>
<div class="span-t6 span-s3 span-m6">t6 / s3 / m6</div>
<div class="span-t12 span-s3 span-m6 no-left-gutter no-right-gutter">
t12 / s3 / m6
<img src="large.jpg" alt="test" />
</div>
</div>The gutters can be enabled or disabled depending on the width.
<div class="row">
<div class="span-s6 no-right-gutter-s gutter-m">
<img src="large.jpg" alt="test" />
</div>
<div class="span-s6 no-right-gutter-s gutter-m">
<img src="large.jpg" alt="test" />
</div>
</div>