Happy Grid!

A happy framework by Henrik and Pontus

Grid

Awesome grid.

Columns

col

<div class="row">
	<div class="col bg-blue">col</div>
	<div class="col bg-light-blue-2">col</div>
	<div class="col bg-blue">col</div>
	<div class="col bg-light-blue-2">col</div>
</div>

Column sizing

col
is-6-on-xs
is-3-on-md
is-12-on-lg

col
is-6-on-xs
is-6-on-md

col
is-12-on-xs
is-3-on-md

<div class="row">
	<div class="col is-6-on-xs is-3-on-md is-12-on-lg bg-blue">col<br>is-6-on-xs<br>is-3-on-md<br>is-12-on-lg</div>
	<div class="col is-6-on-xs is-6-on-md bg-light-blue-2">col<br>is-6-on-xs<br>is-6-on-md</div>
	<div class="col is-12-on-xs is-3-on-md bg-light-blue">col<br>is-12-on-xs<br>is-3-on-md</div>
</div>

Responsive sizing

col
is-6-on-xs
is-3-on-md

col
is-6-on-xs
is-6-on-md

col
is-12-on-xs
is-3-on-md

<div class="row">
	<div class="col is-6-on-xs is-3-on-md bg-blue">col<br>is-6-on-xs<br>is-3-on-md</div>
	<div class="col is-6-on-xs is-6-on-md bg-light-blue-2">col<br>is-6-on-xs<br>is-6-on-md</div>
	<div class="col is-12-on-xs is-3-on-md bg-light-blue">col<br>is-12-on-xs<br>is-3-on-md</div>
</div>

Offeset

col
is-6
is-offset-3

col
is-4
is-offset-8

col
is-3
is-offset-1

col
is-6
is-offset-2

<div class="row">
	<div class="col is-6 is-offset-3 bg-blue">col<br>is-6<br>is-offset-3</div>
	<div class="col is-4 is-offset-8 bg-light-blue-2">col<br>is-4<br>is-offset-8</div>
	<div class="col is-3 is-offset-1 bg-blue">col<br>is-3<br>is-offset-1</div>
	<div class="col is-6 is-offset-2 bg-blue">col<br>is-6<br>is-offset-2</div>
</div>

Nesting

col is-8

col is-4

col is-8

col is-4

<div class="row">
	<div class="col is-8 bg-blue">
		col is-8
		<div class="row is-nested">
			<div class="col is-4 bg-light-blue">
				col is-4
			</div>
			<div class="col is-8 bg-dark-blue">
				col is-8
			</div>
		</div>
	</div>
	<div class="col is-4 bg-light-blue-2">
		col is-4
	</div>
</div>