Colors
A collection of our branded colors
Primary
Secondary
Variations
Grays
Grid
An updated version of the media box.
<![CDATA[
<div class="grid">
<div class="column-4">
First
</div>
<div class="column-4">
Middle
</div>
<div class="column-4">
Last
</div>
</div>
]]>
Mobile columns
Columns to be used only on mobile, what?!
<![CDATA[
<div class="grid grid--right">
<div class="column-6--mobile">
<button class="btn--small btn--outline">Cancel</button>
</div>
<div class="column-6--mobile">
<button class="btn--small">Submit</button>
</div>
</div>
]]>
Grid Modifiers
Reversed, no gutter and stacked on mobile. Small gutters.
<![CDATA[
<div class="grid grid--reverse grid--no_gutter grid--collapse">
<div class="column-4">
First
</div>
<div class="column-4">
Middle
</div>
<div class="column-4">
Last
</div>
</div>
<div class="grid grid--gutter_small">
<div class="column-4">
First
</div>
<div class="column-4">
Middle
</div>
<div class="column-4">
Last
</div>
</div>
]]>
Column Modifiers
Alignment, offsets and fixed widths
<![CDATA[
<div class="grid">
<div class="column-4 column--left column--bottom">
Left Bottom
</div>
<div class="column-4 column--right column--middle">
Right Middle
</div>
<div class="column-4 column--top column--center">
Top Center
</div>
</div>
<div class="grid grid--gutter_small">
<div class="column-4 column--push-8">
Pushed
</div>
<div class="column-8 column--pull-4">
Pulled
</div>
</div>
<div class="grid grid--collapse grid--reverse">
<div class="column--fixed-100">
Fixed Left
</div>
<div class="column-12 column--left-100 column--right-100">
Sharing Fixed elements
</div>
<div class="column--fixed-100">
Fixed Right
</div>
</div>
]]>
Forms and Validation
Demonstrating form elements and majestic validation
<![CDATA[
<form class="form_pretty">
<div class="grid grid--gutter_small grid--collapse">
<div class="column-4">
<label class="textfield textfield--label_bordered">
<input type="text" name="fullname" value="Paul Rudd" validation="full_name" />
<span class="textfield-label">Full Name</span>
</label>
</div>
<div class="column-4">
<label class="textfield">
<input type="text" name="email" id="email" validation="required" />
<span class="textfield-label">Email</span>
</label>
</div>
<div class="column-4">
<label class="dropdown">
<select name="number" id="number" validation="required">
<option disabled="disabled" selected="selected">Number</option>
<option>01</option>
<option>02</option>
<option>03</option>
</select>
</label>
</div>
</div>
<div class="grid grid--gutter_small grid--collapse">
<div class="column-4 column--bottom">
<label class="dropdown validation_right" data-validation-placement="birthday-label">
<span class="dropdown-label" id="birthday-label">Birthday</span>
<select name="day" id="day" validation="required">
<option disabled="disabled" selected="selected">Day</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
</label>
</div>
<div class="column-4 column--bottom">
<label class="dropdown" data-validation-placement="birthday-label">
<select name="month" id="month" validation="required">
<option disabled="disabled" selected="selected">Month</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
</label>
</div>
<div class="column-4 column--bottom">
<label class="dropdown" data-validation-placement="birthday-label">
<select name="year" id="year" validation="required">
<option disabled="disabled" selected="selected">Year</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
</label>
</div>
</div>
<label class="textfield">
<textarea name="comments" disabled></textarea>
<span class="textfield-label">Comments</span>
</label>
<label class="checkbox">
<input type="checkbox" name="terms" value="yes" validation="checkbox" />
<span class="checkbox-label">Checkbox</span>
</label>
<input type="submit" class="btn" />
</form>
]]>
Notifications
Modal that
<![CDATA[
<div class="notification notification--feedback">
<div class="notification-content">We've sent you an email <a href="#" class="link--text">Link</a>
</div>
</div>
<div class="notification notification--warning">
<div class="notification-content">
<div class="grid">
<div class="column-8 column--middle">
Are you sure you want to close?
</div>
<div class="column-4 column--middle column--right">
<button class="btn--small btn--outline btn--warn">Don't Close</button>
</div>
</div>
</div>
</div>
]]>
Typography
Connected Elements
<![CDATA[
<div class="type type--hero">
<h1>Landing page hero</h1>
<p class="subtitle">Landing page hero subtitle</p>
</div>
<hr />
<div class="type type--hero">
<h2>Subpage hero</h2>
<p class="subtitle">Subpage hero subtitle</p>
</div>
<hr />
<div class="type type--description">
<h2>Landing page description</h2>
<p class="subtitle">Landing page description subtitle</p>
</div>
<hr />
<div class="type type--description">
<h3>Subpage description</h3>
<p class="subtitle">Subpage description subtitle</p>
</div>
<hr />
<div class="type type--quote container--large container--tight_y">
<p class="type--quote-body">
Check your credit report for new accounts that you did not open.Are there charges to your credit card that you did not authorize? Have collection agencies contacted you about unpaid bills thatdon’t belong to you? You may be the victim of identity theft.
</p>
<p class="type--quote-attribution">
-Lisa Verano, San Francisco
</p>
</div>
]]>
Modules
Styleguide elements can be tied together very naturally. Below are a couple of beautiful examples.
<![CDATA[
<div class="container bg-teal">
<div class="wrapper wrapper--padded">
<div class="type type--white type--hero u-ta-center">
<h1>Welcome to the Jungle</h1>
<p class="subtitle">I guess you could say it's getting pretty serious.</p>
</div>
</div>
</div>
<div class="container">
<div class="wrapper">
<div class="container container--tight bg--white container--bordered">
<div class="icon_header icon_header--large fa-envelope">
Email
</div>
<div class="container">
<div class="grid">
<div class="column-6 column--middle">
<p>Share your email?</p>
</div>
<div class="column-6 column--middle column--right">
<button>Yes</button>
<button class="btn--secondary">Nah</button>
</div>
</div>
</div>
</div>
</div>
</div>
]]>
Blocks of Code
Displaying code in all the right wrong ways. Note <code> and <samp> yield the same styles.
<![CDATA[
<pre><samp>{
id: 617,
name: 'Paul Rudd',
roles: [
{
title: 'Anchorman',
year: 2004
},
{
title: 'Ant Man',
year: 2015
},
]
}</samp></pre>
]]>
Code Block Class
.code-block to make samp, code, kbd display as block elements
<![CDATA[
<code class="code-block"><a href="https://identity.com/oauth/authorize">https://identity.com/oauth/authorize</a></code>
]]>