Manipulating Columns

At this point the system isn't actually using a 12 column grid, it's more freeform. If left like this, columns would always equalise. Two columns would share the row 50/50, four would be 25% each and so on. To break out of this we can start adding .span# classes to the <div class="column">'s. This column for instance is <div class="column .span9">. (It's also centred, again breaking the 12 column grid, but more on that later.)

Defining the column widths using the above example:

<section id="sectionOne">
	<div class="container">
		<div class="row">
			<div class="column span6">.column</div>
			<div class="column span2">.column</div>
			<div class="column span2">.column</div>
			<div class="column span2">.column</div>
		</div>
	</div>
</section>
<section id="sectionTwo">
	<div class="container">
		<div class="row">
			<div class="column span8">.column</div>
			<div class="column span4">.column</div>
		</div>
	</div>
</section>

Offsetting Columns

Lets say you want to align a column with the row above but you don't need the row aboves left most column. In this case you need to offset the column by the width of the column you're removing, thats a really confusing way to describe what will make a lot more sense if you just look at the example below.

<div class="row"> 
	<div class="column demo span2"><code>.column.span2</code></div> 
	<div class="column demo span6"><code>.column.span6</code></div> 
	<div class="column demo span4"><code>.column.span4</code></div> 
</div> 
<div class="row"> 
	<div class="column demo span6 offset2"><code>.column.span6.offset2</code></div> 
</div>

Centering Columns

It's very common to need to center columns, in both directions. For horizontal centering, if you're using the 12 column grid and columns who's total width add up to an even number. You can offset the first column by half the remaining width to center them all.

Example:

<div class="row">
	<div class="column span2 offset3 demo"><code>.column.span2.offset3</code></div>
	<div class="column span2 demo"><code>.column.span2</code></div>
	<div class="column span2 demo"><code>.column.span2</code></div>
</div>

Or do it the easy way

However, if you're using an number of columns who's width add up to an odd number, or if you just want an easier way to do it, then just stick .hCenter on the parent .row.

Example:

<div class="row hCenter">
	<div class="column span2 demo"><code>.column.span2</code></div>
	<div class="column span2 demo"><code>.column.span2</code></div>
	<div class="column span2 demo"><code>.column.span2</code></div>
</div>

You can even break out of the grid

You might not need to do this very often, but its another quick and easy tool at your disposal. This explainer is breaking the grid. The example below shows 12 single width columns and a centred column breaking the grid. I'm sure you dont need to see the HTML at this point.

Example:

And lastly, vertical centering

And probably most commonly needed in a grid system. Vertical centering, I bet you've guessed it, stick .vCenter on the parent .row.

Example:

<div class="row vCenter">
	<div class="column span4 demo"><code>.column.span4</code>Lorem Ipsum...</div>
	<div class="column span8 demo"><code>.column.span8</code></div>
</div>

To align the colmns to their bottom, add .vBottom on the parent .row.

Example:

<div class="row vBottom">
	<div class="column span4 demo"><code>.column.span4</code>Lorem Ipsum...</div>
	<div class="column span8 demo"><code>.column.span8</code></div>
</div>

Nesting Rows and Columns

More .row's and .column's can be nested within one another to give extra flexibility.

Using the same example again:

<section id="sectionOne">
	<div class="container">
		<div class="row">
			<div class="column span6">.column</div>
			<div class="column span2">.column</div>
			<div class="column span2">.column</div>
			<div class="column span2">.column</div>
		</div>
	</div>
</section>
<section id="sectionTwo">
	<div class="container">
		<div class="row">
			<div class="column span8"> 
				.column .span8 
				<div class="row pdTop1"> 
					<div class="column span8">.span8</div> 
					<div class="column span4">.span4</div> 
				</div> 
			</div> 
			<div class="column span4"> 
				.column .span4 
				<div class="row pdTop1"> 
					<div class="column span6">.span6</div> 
					<div class="column span6">.span6</div> 
				</div> 
			</div> 
		</div>
	</div>
</section>

Display and Visibility

OH MY FERKING GAWD the dreaded display:none;. Get over yourself! Ready to move on?

Sometimes a bit of content needs hiding on smaller devices. It's just not needed / relevant or in the worst case you have to render if completely different for mobiles.

In that case we have several helper classes that use the prefixes already meantioned above.

Remember these inherit downwards so revealing content at Tablet Small using .dispNone.tbsDispBlock would have it visible at Mobile Large and Mobile Small. Similarly hiding something at Tablet Small with .tbsDispNone would again hide it at both Mobile sizes.

One of the most common uses for this is shortening long form dates to better fit on mobile devices so in the most convoluted example so far:

<p>
	<span class="mblDispNone">
		Fri<span class="lapDispNone">day</span> 
		18 Dec<span class="tblDispNone">ember</span> 
		<span class="tbsDispNone">20</span><span class="dispNone tbsDispInlBlck">'</span>20
	</span>
	<span class="dispNone mblDispInlBlck">18/12/20</span>
</p>

Reordering Content

It's not very often but sometimes we find the need to reoder content at different breakpoints. That left sidebar thats kinda handy on Desktop but just a pain in the ass for Mobile users? Reorder it using something like .mbsOrder2, get it out of the way (and then maybe even collapse it or do something else fancy).

Since you can't really, and probably won't need more than 12 columns in any one row, we've got .order1 through to .order12 and they each have their breakpoint prefixes.

Example:

<div class="row">
	<div class="column demo lapOrder6 tblOrder5 tbsOrder3 mblOrder3 mbsOrder2">Col 1</div>
	<div class="column demo lapOrder1 tblOrder6 tbsOrder5 mblOrder4 mbsOrder3">Col 2</div>
	<div class="column demo lapOrder2 tblOrder1 tbsOrder6 mblOrder5 mbsOrder4">Col 3</div>
	<div class="column demo lapOrder3 tblOrder2 tbsOrder1 mblOrder6 mbsOrder5">Col 4</div>
	<div class="column demo lapOrder4 tblOrder3 tbsOrder2 mblOrder1 mbsOrder6">Col 5</div>
	<div class="column demo lapOrder5 tblOrder4 tbsOrder3 mblOrder2 mbsOrder1">Col 6</div>
</div>

Ghost Buttons

We then apply additional classes to adjust our buttons to do different things. For instance we have a default outlined button called "ghost". To apply this to any of the three defaults just add .ghost.

Small Buttons

Alternatively, we can create smaller buttons very simply by adding the class .small. You could expand this easily by adding another class .smaller for even smaller buttons, or perhaps a class .large for bigger buttons.

Icon Buttons

This one probably is going too far for the base framework but positioning the icon can be a faff so we've left them in. Again this uses the standard classes and adds a class of .icnBtn along with the child <svg> element to create buttons like so:

Pagination

And lastly for buttons, who doesn't often need some sort of pagination interface. This uses the same standard .button class on the <a> tag but inherits a few extra bits and bobs from <ul class="pagination"> above it.