Nicholas Mason >_

Style Guide

Navigation Button

Selector:  .btn.nav


<a href="#" class="btn nav">Default Button</a>

In-text link

Selector:  a

This is an in text link
<a href="#">in text link</a>

Submit/Reset Buttons

Selector:  .btn.submit or .btn.reset

 
<button class="btn submit">Submit</a> <button class="btn reset">Reset</a>

Text Input Field

Selector:  input[type=text]

<input type="text">

Headings

Selector:  h*

.h1 Heading

.h2 Heading

.h3 Heading

.h4 Heading

.h5 Heading
<h1>.h1 Heading</h1>
<h2>.h2 Heading</h2>
<h3>.h3 Heading</h3>
<h4>.h4 Heading</h4>
<h5>.h5 Heading</h5>

Paragraphs

Selector:  .lead and .body

Leading text

Longer body text that should be easy to read, yet not overbearing.

<p class="lead">Leading text</p>
<p class="body">Longer body text that should be easy to read, yet not overbearing.</p>

Bulleted Lists

Selector:  ul and li

  • Lists
  • Are
  • Fun
<ul>
 <li>Lists</li>
 <li>Are</li>
 <li>Fun</li>
</ul>

Numbered Lists

Selector:  ol and li

  1. Lists
  2. Are
  3. Fun
<ol>
 <li>Lists</li>
 <li>Are</li>
 <li>Fun</li>
</ol>