Layout

Uniform Spacing

Both margin and padding share the same predefined scale, this helps maintain consistency. There are 8 available spacing sizes .pa1, .pa2, .pa3, .pa4, .pa5, .pa6, .pa7, .pa8. In this case pa means padding all. If margin is required .ma1 through to .ma8 can be used. .ma0 or .pa0 can be used to remove all spacing.

Level 1: padding 4px

Level 2: padding 8px

Level 3: padding 16px

Level 4: padding 24px

Level 5: padding 32px

Level 6: padding 48px

Level 7: padding 64px

Level 8: padding 80px

<!-- Uniform Spacing -->

<!-- Padding 4px -->
<div class="mt2">
	<div class="pa1 bg-blue-opactiy">
		<p class="pa3 color-white bg-blue">Level 1: padding 4px</p>
	</div>
</div>

<!-- Padding 8px -->
<div class="mt2">
	<div class="pa2 bg-blue-opactiy">
		<p class="pa3 color-white bg-blue">Level 2: padding 8px</p>
	</div>
</div>

<!-- Padding 16px -->
<div class="mt2">
	<div class="pa3 bg-blue-opactiy">
		<p class="pa3 color-white bg-blue">Level 3: padding 16px</p>
	</div>
</div>

<!-- Padding 24px -->
<div class="mt2">
	<div class="pa4 bg-blue-opactiy">
		<p class="pa3 color-white bg-blue">Level 4: padding 24px</p>
	</div>
</div>

<!-- Padding 32px -->
<div class="mt2">
	<div class="pa5 bg-blue-opactiy">
		<p class="pa3 color-white bg-blue">Level 5: padding 32px</p>
	</div>
</div>

<!-- Padding Top 48px -->
<div class="mt2">
	<div class="pa6 bg-blue-opactiy">
		<p class="pa3 color-white bg-blue">Level 6: padding 48px</p>
	</div>
</div>

<!-- Padding 64px -->
<div class="mt2">
	<div class="pa7 bg-blue-opactiy">
		<p class="pa3 color-white bg-blue">Level 7: padding 64px</p>
	</div>
</div>

<!-- Padding 80px -->
<div class="mt2">
	<div class="pa8 bg-blue-opactiy">
		<p class="pa3 color-white bg-blue">Level 8: padding 80px</p>
	</div>
</div>

<!-- /.Uniform Spacing -->

Individual Spacing

Individual spacing can be applied to a single side of an element using either margin or padding. Again, both margin and padding share the same 8 options, abriviated in the same way. For example mr3 would result in margin-right: 16px and so on. pt0 can be used to clear the spacing on a particular side of an element.

Level 1: padding top 4px

Level 2: padding right 8px

Level 3: padding bottom 16px

Level 4: padding left 24px

Level 5: padding top 32px

Level 6: padding right 48px

Level 7: padding bottom 64px

Level 8: padding left 80px

<!-- .Individual Spacing -->


<!-- Padding Top 4px -->
<div class="pt1 bg-blue-opactiy">
	<p class="pa3 color-white bg-blue">Level 1: padding top 4px</p>
</div>

<!-- Padding Right 8px -->
<div class="mt2">
	<div class="pr2 bg-blue-opactiy">
		<p class="pa3 color-white bg-blue">Level 2: padding right 8px</p>
	</div>
</div>

<!-- Padding Bottom 16px -->
<div class="mt2">
	<div class="pb3 bg-blue-opactiy">
		<p class="pa3 color-white bg-blue">Level 3: padding bottom 16px</p>
	</div>
</div>

<!-- Padding Left 24px -->
<div class="mt2">
	<div class="pl4 bg-blue-opactiy">
		<p class="pa3 color-white bg-blue">Level 4: padding left 24px</p>
	</div>

	<!-- Padding Top 32px -->
	<div class="mt2">
		<div class="pt5 bg-blue-opactiy">
			<p class="pa3 color-white bg-blue">Level 5: padding top 32px</p>
		</div>
	</div>

	<!-- Padding Right 48px -->
	<div class="mt2">
		<div class="pr6 bg-blue-opactiy">
			<p class="pa3 color-white bg-blue">Level 6: padding right 48px</p>
		</div>
	</div>

	<!-- Padding Bottom 64px -->
	<div class="mt2">
		<div class="pb7 bg-blue-opactiy">
			<p class="pa3 color-white bg-blue">Level 7: padding bottom 64px</p>
		</div>
	</div>

	<!-- Padding Left 80px -->
	<div class="mt2">
		<div class="pl8 bg-blue-opactiy">
			<p class="pa3 color-white bg-blue">Level 8: padding left 80px</p>
		</div>
	</div>

	<!-- /.Individual Spacing -->

Table

Name Duration Genre Release Date
The Shawshank Redemption 2h 22min Crime, Drama 14 October 1994
The Godfather 2h 55min Crime, Drama 24 March 1972
Schindler's List 3h 15min Biography, Drama, History 4 February 1994
Se7en 2h 7min Crime, Drama, Mystery 22 September 1995
<table class="Table Table-striped">
	<thead>
		<tr>
			<th>Name</th>
			<th>Duration</th>
			<th>Genre</th>
			<th>Release Date</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>The Shawshank Redemption</td>
			<td>2h 22min</td>
			<td>Crime, Drama</td>
			<td>14 October 1994</td>
		</tr>
		<tr>
			<td>The Godfather</td>
			<td>2h 55min</td>
			<td>Crime, Drama</td>
			<td>24 March 1972</td>
		</tr>
		<tr>
			<td>Schindler's List</td>
			<td>3h 15min</td>
			<td>Biography, Drama, History</td>
			<td>4 February 1994</td>
		</tr>
		<tr>
			<td>Se7en</td>
			<td>2h 7min</td>
			<td>Crime, Drama, Mystery</td>
			<td>22 September 1995</td>
		</tr>
	</tbody>
</table>