Introduction

Getting Started

Living style guides improve consistency, coding standards, and communication among design and development teams. I created this Style Guide Boilerplate as a way speed up the process of creating new style guides. With each example I include reusable classes, code examples, and tips for how and when to use a style.

Basic Style

The basic building blocks of your designs. Use this section to organize individual styles and default html.

Layout

The grid system and minor layout helpers. Some things you'll find here include media blocks and a grid system.

Components

More complex multi-part components. These are created using multiple elements and classes. Use basic styles to modify the style.

Basic Style

Colors

These are all the available colors grouped together from dark to light. They are are stored in variables and also accesible via classes of the same name. Avoid using classes to style individual components, instead use variables. Change the variables.scss file as need for your project.

  • $gray-1
  • .gray-1
  • $gray-2
  • $gray-2
  • $gray-3
  • .gray-3
  • $gray-4
  • .gray-4
  • $gray-5
  • .gray-5
  • $gray-6
  • .gray-6
  • $gray-7
  • .gray-7
  • $gray-8
  • .gray-8
  • $gray-9
  • .gray-9
  • $gray-10
  • .gray-10
  • $brand-1
  • .brand-1
  • $brand-2
  • .brand-2
  • $brand-3
  • .brand-3
  • $brand-4
  • .brand-4
  • $accent-1
  • .accent-1
  • $accent-2
  • .accent-2
  • $accent-3
  • .accent-3
  • $accent-4
  • .accent-4
  • $warn-1
  • .warn-1
  • $warn-2
  • .warn-2
  • $warn-3
  • .warn-3
  • $error-1
  • .error-1
  • $error-2
  • .error-2
  • $error-3
  • .error-3
  • $success-1
  • .success-1
  • $success-2
  • .success-2
  • $success-3
  • .success-3

Typography

All styles are default unless a class name is specified. Use the code examples to see proper implementation.

Headings

These are the default styles for h1 through h5 tags. The same styles are accessible via .h1 through .h5 classes.

Headline One

Headline Two

Headline Three

Headline Four

Headline Five
<h1 class="h1">Headline One</h1>
<h2 class="h2">Headline Two</h2>
<h3 class="h3">Headline Three</h3>
<h4 class="h4">Headline Four</h4>
<h5 class="h5">Headline Five</h5>

Paragraph Text

Defaults: Paragraphs, Links, Strong, Emphasis

Below is a default paragraph with inline links, emphasis, and strong tags.

This is the style of a default paragraph. The font size is set to 1rem with a line height of 1.5. This is your general purpose body text style. For most use cases you shouldn't need to add any classes to style a paragraph.

This is what a link looks like, with added emphasis and for extra emphasis use the strong text.

<p>This is the style of a default paragraph. The font size is set to 1rem with a line height of 1.5. This is your general purpose body text style. For most use cases you shouldn't need to add any classes to style a paragraph.</p>
<p>This is what a <a href="">link</a> looks like, with added <em>emphasis</em> and extra emphasis use the <strong>strong</strong> text.</p>

Large Type

Add the .type--large class to create paragraph text with more emphasis. This is useful to introduce a page or section.

Large type paragraphs are generally used to add emphasis or to introduce a new page or section.

<p class="type--large">Large type paragraphs are generally used to add emphasis or to introduce a new page or section.</p>

Small Type

Add the .type--small class to decrease emphasis. Best used for less important body copy and small print.

Small type paragraphs are generally used reduce the importance of body copy and small print.

<p class="type--small">Small type paragraphs are generally used reduce the importance of body copy and small print.</p>

Lists

Ordered Lists

  1. Item One
    1. Nested Item
    2. Nested Item
  2. Item Two
  3. Item Three
<ol>
  <li>Item One</li>
    <ol>
      <li>Nested Item</li>
      <li>Nested Item</li>
    </ol>
  <li>Item Two</li>
  <li>Item Three</li>
</ol>

Unordered Lists

  • Item
    • Nested Item
    • Nested Item
  • Item
  • Item
<ul>
  <li>Item</li>
    <ul>
      <li>Nested Item</li>
      <li>Nested Item</li>
    </ul>
  <li>Item</li>
  <li>Item</li>
</ul>

Unstyled List

Use the .list--unstyled class for unstyled lists. Great for navigation or any list of data not suited for the paragraph tag.

  • Nav item
    • Nested Item
    • Nested Item
  • Nav Item
  • Nav Item
<ul class="list--unstyled">
  <li>Item</li>
    <ul class="list--unstyled">
      <li>Nested item</li>
      <li>Nested item</li>
    </ul>
  <li>Item</li>
  <li>Item</li>
</ul>

Blockquote

Blockquotes are used to indicates that the enclosed text is an extended quotation. This text is rendered indented and with a left border to seperate it from normal text. The font size is also slightly larger than default paragraph text to create more contrast.
<blockquote>Blockquotes are used to indicates that the enclosed text is an extended quotation. This text is rendered indented and with a left border to seperate it from normal text. The font size is also slightly larger than default paragraph text to create more contrast.</blockquote>

Buttons

Primary Button

Use these classes....btn-primary--sm .btn-primary--md .btn-primary--lg .btn-primary--full.

<a href="" class="btn-primary--sm">Primary Small</a>
<a href="" class="btn-primary--md">Primary Medium</a>
<a href="" class="btn-primary--lg">Primary Large</a>
<a href="" class="btn-primary--full">Primary Full</a>

Secondary Button

Use these classes....btn-secondary--sm .btn-secondary--md .btn-secondary--lg .btn-secondary--full.

<a href="" class="btn-secondary--sm">Secondary Small</a>
<a href="" class="btn-secondary--md">Secondary Medium</a>
<a href="" class="btn-secondary--lg">Secondary Large</a>
<a href="" class="btn-secondary--full">Secondary Full</a>

Layout

Grid System

The grid system is adapted from the mobile first system created by Bootstrap. This is only a quick refresher of the Bootstrap grid system. There are many more features and you should read through the official documentation for a more complete understanding.

The Basics

Container

Always start with a container to wrap your content. There are two types of containers: .container and .container-fluid. The difference between the two types of containers is that container-fluid fills 100% of it's parent container, while container has fixed widths set for each device / media query.

Rows

Inside your container live the rows of content. Not all of your content needs to live inside a row, however, for anything other than single column layouts, you will need to nest a .row. Rows also make sure your the gutters align correctly when using columns.

Columns

The final piece of the grid system are the column classes. These are mobile first, and you can use more than one class on an element for more control over the responsiveness of the layout at different viewport sizes. Column classes are made of three parts: col, viewport size, and # of columns spanned. The example below demonstrate each col span for the medius size browser widths. In the code example I'm showing how to create a full 12 column span for medium size devices: .col-md-12.

1

1

1

1

1

1

1

1

1

1

1

1

2

2

2

2

2

2

3

3

3

3

4

4

4

5

7

6

6

7

5

8

4

9

3

10

2

11

1

12

<div class="container-fluid">
	<div class="row">
		<div class="col-md-6">
			<div class="bar">
				<p><span class="class-name">.col-md-6</span></p>
			</div>
		</div>
	</div>
</div>

Layout Blocks

Media

This is a very common layout block. Image or icon next with content off to the right or left. Start with a .media container with a .media__(left or right) for the image and a .media__body for the content.

Media heading

This is media block with a media-left image, media-body, media-heading, and an image container. The size of the image or icon can either be fixed or fluid, depending on it's parent container.

<div class="media">
	<div class="media__left">
		<div>
			<img src="http://placehold.it/300x200"/>
		</div>
	</div>
	<div class="media__body">
		<h4 class="media__heading">Media heading</h4>
		<p>paragraph content text...</p>
	</div>
</div>

Components

Table

2015-2016 Portland Trailblazers Roster
Player Age Salary
Damian Lillard 24 $4.3
CJ McCollum 23 $2.5
Meyers Leonard 23 $3.1
Noah Vonleh 20 $2.6
Chris Kaman 33 $5.0
Luis Montero 22 $0.5
<table>
<caption>2015-2016 <a href="">Portland Trailblazers</a> Roster</caption>
  <colgroup>
    <col style="width:50%">
    <col style="width:25%">
    <col style="width:25%">
  </colgroup>
  <thead>
    <tr>
      <th>Player</th>
      <th>Age</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Damian Lillard</td>
      <td>24</td>
      <td>$4.3</td>
    </tr>
     <tr>
      <td>CJ McCollum</td>
      <td>23</td>
      <td>$2.5</td>
    </tr>
     <tr>
      <td>Meyers Leonard</td>
      <td>23</td>
      <td>$3.1</td>
    </tr>
     <tr>
      <td>Noah Vonleh</td>
      <td>20</td>
      <td>$2.6</td>
    </tr>
     <tr>
      <td>Chris Kaman</td>
      <td>33</td>
      <td>$5.0</td>
    </tr>
     <tr>
      <td>Luis Montero</td>
      <td>22</td>
      <td>$0.5</td>
    </tr>

  </tbody>
</table>

Form

<input class="input" type="text" placeholder="First Name"/>
<input class="input" type="text" placeholder="Last Name"/>
<input class="input" type="email" placeholder="name@domain.com"/>
<textarea class="input" rows="8" placeholder="Write your message..."></textarea>
<a href="" class="btn-primary--full">Send Message</a>
<a href="" class="btn-secondary--full">Send Message</a>

Notifications

These are feedback panels used to indicate the status of a form to a user. There types of notifications: .notification--sucess, .notification--warning, and .notification--error. Use the .notification__title class as needed.

Sucess Notification

Thanks for submitting your information. We will contact you within 48hrs.

Warning Notification

Double check your answers for accuracy.

Error Notification

We weren't able to submit the form. Please fill out all required fields.

<div class="notification--success">
	<h5  class="notification__title">Sucess Notification</h5>
	<p>Thanks for submitting your information. We will contact you within 48hrs.</p>
</div>
<div class="notification--warning">
	<h5  class="notification__title">Warning Notification</h5>
	<p>Double check your answers for accuracy.</p>
</div>
<div class="notification--error">
	<h5  class="notification__title">Error Notification</h5>
	<p>We weren't able to submit the form. Please fill out all required fields.</p>
</div>