Grid

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 Grid

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.

span-s6
span-s6
span-s3
span-s3
span-s3
span-s3
span-s8
span-s4
<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>

Nested Grids

The grid can be nested as required by adding rows within the outer spans.

span-s6
span-s6
span-s6
span-s6
span-s6

span-s6
<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>

Offsets

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.

span-s6
span-s6
span-s3 / t6
span-s3
span-s4
<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>

Out of Order Columns

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.

1st in HTML
2nd in HTML
1st
2nd
3rd
1st
2nd
3rd
<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>

Variable Column Widths

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.

t12 / s3 / m6
t6 / s3 / m6
t6 / s3 / m6
t12 / s3 / m6 test
<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>

Gutters

The gutters can be enabled or disabled depending on the width.

test
test
<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>
Top