Introduction

This style guide will serve as a reusable tool for us to 'sketch out' atoms and molecules (See Brad Frost's Atomic Design) for projects. Please utilize the templated modules below to create your own based on the project you are working on. Any unique modules that aren't already represented should be submitted to the style guide master repo to be included in the examples in the future.

Colors

All color names can be used as variables in scss, ie: Mulberry would be $mulberry. Click a color swatch below to copy it's variable name to your clipboard.

  • Mulberry
  • Coral
  • Gecko
  • Aquamarine
  • Sunflower
  • Pearl
  • Cloud
  • Sterling
  • Charcoal

Typography

Abril Fatface - 60px

Adrift.

Galaxie Copernicus Book Italic - 80px

Epoch.

Fyra Avant Garde Bold - 38px

Mist enveloped the ship three hours out from port.


Paragraph

SEO is a marketing tactic that costs five percent of overall budget but brings in more than 20 percent of revenue for many Fortune 500 companies, and yet very few of them prioritize it. Instead, while slowly changing, too many CMOS still favor paid search, which costs 20 percent and brings in… 20 percent. In search, businesses need to shift priorities. Now.

Buttons

Mulberry Button Coral Button Gecko Button Aquamarine Button 

<a href="#" class="btn btn-mulberry"></a>
<a href="#" class="btn btn-coral"></a>
<a href="#" class="btn btn-gecko"></a>
<a href="#" class="btn btn-aquamarine"></a>

Subscribe



<form class="subscribe" action="">
<input type="email" placeholder="Email address" />
<input type="submit" value="Submit" />
<span class="clearfix"></span>
</form>

Tabs

Tab One

Tab Two

Gingerbread bonbon chocolate cake muffin gummies.

Tab Three

Tab Four


<div class="full-width-tab coral-tab">
	<h4>Tab One</h4><!--
	--><i class="fa fa-globe" aria-hidden="true"></i>
</div>

<div class="full-width-tab description mulberry-tab">
	<div class="vcenter left">
		<h4>Tab Two</h4>
		<p>Gingerbread bonbon chocolate cake muffin gummies.</p>
	</div><!--
	--><i class="fa fa-bug" aria-hidden="true"></i>
</div>

<div class="full-width-tab gecko-tab">
	<h4>Tab Three</h4><!--
	--><i class="fa fa-globe" aria-hidden="true"></i>
</div>

<div class="full-width-tab sunflower-tab">
	<h4>Tab Four</h4><!--
	--><i class="fa fa-bug" aria-hidden="true"></i>
</div>