Layouts

Page Layout

Open in new tab 
<div class="page">
	<div class="wrapper">
		<header class="site-header">SITE HEADER</header>

		<main class="site-main">
			<div class="content">SITE MAIN</div>
		</main>

		<footer class="site-footer">SITE FOOTER</footer>
	</div>
</div>

Narrow

Open in new tab 
<div class="page">
	<div class="wrapper">
		<header class="site-header">SITE HEADER</header>

		<main class="site-main">
			<div class="content content-narrow">SINGLE COLUMN</div>
		</main>

		<footer class="site-footer">SITE FOOTER</footer>
	</div>
</div>

Full-Bleed

Open in new tab 
<div class="page">
	<div class="wrapper wrapper-full-bleed">
		<header class="site-header">SITE HEADER</header>

		<main class="site-main">
			<div class="content">SINGLE COLUMN</div>
		</main>

		<footer class="site-footer">SITE FOOTER</footer>
	</div>
</div>
Open in new tab 
<div class="page">
	<div class="wrapper">
		<header class="site-header">SITE HEADER</header>

		<main class="site-main">
			<div class="content content-with-sidebar">
				<div class="header">HEADER</div>
				<div class="sidebar">SIDEBAR</div>
				<div class="body">BODY</div>
			</div>
		</main>

		<footer class="site-footer">SITE FOOTER</footer>
	</div>
</div>
Open in new tab 
<div class="page">
	<div class="wrapper">
		<header class="site-header">SITE HEADER</header>

		<main class="site-main">
			<div class="content content-with-sidebar content-with-sidebar-reversed">
				<div class="header">HEADER</div>
				<div class="sidebar">SIDEBAR</div>
				<div class="body">BODY</div>
			</div>
		</main>

		<footer class="site-footer">SITE FOOTER</footer>
	</div>
</div>