Grid System

Grid - Main page content

Grid - Project page content

<div class="row top-xs">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 padding-small">
	<div class="grid-sample">
	</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 padding-small">
	<div class="grid-sample">
	</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 padding-small">
	<div class="grid-sample">
	</div>
</div>
</div>
<div class="row top-xs">
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 padding-small">
	<div class="grid-sample"></div>
</div>
<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 padding-small">
	<div class="grid-sample"></div>
</div>
</div>
					

Typography and Links

Header 1

Sub information

Header 2

Header 3

Paragraph example

Sample anchor

<h1 class="main-page">Header 1</h1>
<p class="mini-bio main-page"> Sub information</p>
<h2>Header 2</h2>
<h3>Header 3</h3>
<p>Paragraph example</p>
<a class="in-text" href="#">Sample anchor</a>
				

Project Links

<div class="porfolio-item-holder">
<div class="portfolio-item">
	<img src="img.png" alt="Project: Project Title">
	<div class="portfolio-item-overlay top sample">
		<div>
			<div>
				<h2>Project Title</h2>
				<h3>Project Date</h3>
			</div>
			<div>
				<p>Technologies used in project</p>
			</div>
		</div>
	</div>
	<a class="portfolio-item-overlay" href="#">View Project →</a>
</div>
</div>
				

Navigation

<nav class="padding-small ">
	<div class="row align-center main-nav">
		<div class="col-xs-2 col-sm-4">
			<a class="in-text active" href="index.html"><p class="nav-fontDisplay">TS</p></a>
		</div>
		<div class="col-xs-10 col-sm-8 end-xs header-links">
			<div><a class="in-text" href="index.html">Home</a></div>
			<div><a class="in-text active" href="style-guide.html">Style Guide</a></div>
			<div><a class="in-text" href="#">Citations</a></div>
		</div>
	</div>
</nav>
				

Colour