Living Dead Style Guide

View on Github

Installing

Using Bower (such as with ember-cli)

Install the style guide into your project with Bower:

$ bower install wtfluckey/style-guide --save

Then @import the style guide SCSS into your application's SCSS manifest:

// application.scss
@import "bower_components/style-guide/src/scss/style-guide.scss";

Start up your Ember server and verify that the style guide is loaded in your CSS file!

Using bower-rails (with Rails apps)

Make sure that you have Bower installed on your system via npm: 

npm install -g bower

Add the bower-rails gem to your Gemfile:

// Gemfile
gem 'bower-rails'

Install the gem:

$ bundle install

Create a Bowerfile in the root of your Rails project:

Using HTTP:

// Bowerfile
asset 'style-guide', 'https://github.com/wtfluckey/style-guide.git'

Using SSH:

// Bowerfile
asset 'style-guide', 'git@github.com:wtfluckey/style-guide.git'

Run the bower-rails rake task to download the style guide to the Rails /vendor/bower_components/ directory.

// config/application.rb
config.assets.paths << Rails.root.join("vendor","assets","bower_components")

Since we're using SCSS, make sure your application.css manifest has been renamed to application.scss:

$ git mv app/assets/stylesheets/application.{css,scss}

Delete the default Rails asset pipeline manifest from the application.scss file and replace it with a SCSS import of the style guide (you can use similar statements to reimport any other SCSS files that the manifest was requiring):

// app/assets/stylesheets/application.scss
@import "style-guide/src/scss/style-guide.scss";

Now start up your Rails server and verify that the style guide is loaded in your CSS file!

Updating

Using Bower (such as with ember-cli)

To get the latest version of the style guide, update using Bower:

$ bower update style-guide

Using bower-rails (with Rails apps)

To get the latest version of the style guide, update using the Bower Rake task:

rake bower:update

The Foundation

HTML5 doctype

We are using certain HTML elements and CSS properties that require the HTML5 doctype. It needs to be included at the beginning of all your pages.

<!DOCTYPE html>
<html lang="en">
  ...
</html>

Box-sizing

We reset box-sizing to border-box for all elements inside this style guide. This is so we can more easily add widths to elements that have padding and borders. Read more about box-sizing with border-box.

Normalize.css

We've included Normalize.css in this project to help with browser inconsistencies and to ensure that all projects have the same base.

Container

Wrap your content in a .container to give it the correct width and margin on either side. Max-width is 980px. 

<div class="container">
  <!-- contents here -->
</div>

Grid

How it works

Create rows with .row and individual columns with a .column class and a fraction class (e.g. .one-half or .one-fourth).

.one-fifth
.four-fifths
.one-fourth
.three-fourths
.one-third
.two-thirds
.one-half
.one-half 
<div class="container">
  <div class="row">
    <div class="one-fifth column">
      .one-fifth
    </div>
    <div class="four-fifths column">
      .four-fifths
    </div>
  </div>

  <div class="row">
    <div class="one-fourth column">
      .one-fourth
    </div>
    <div class="three-fourths column">
      .three-fourths
    </div>
  </div>

  <div class="row">
    <div class="one-third column">
      .one-third
    </div>
    <div class="two-thirds column">
      .two-thirds
    </div>
  </div>

  <div class="row">
    <div class="one-half column">
      .one-half
    </div>
    <div class="one-half column">
      .one-half
    </div>
  </div>
</div>

Alignment

Read more about floating elements.

floated left

centered

floated right 

<p class="float-left">
  floated left
</p>

<p class="centered">
  centered
</p>

<p class="float-right">
  floated right
</p>

Clearing Floats

Headings

h1. This is an h1

h2. This is an h2

h3. This is an h3

h4. This is an h4

h5. This is an h5
h6. This is an h6
<h1>h1. This is an h1</h1>
<h2>h2. This is an h2</h2>
<h3>h3. This is an h3</h3>
<h4>h4. This is an h4</h4>
<h5>h5. This is an h5</h5>
<h6>h6. This is an h6</h6>

Body Text

Text in a p tag

This is a paragraph. It has margin-bottom by default.

<p>This is a paragraph in a p tag.</p>

Text in a span tag

Span paragraph with no margin-bottom. It is wrapped in a span tag rather than a p tag. It is an inline element which means it will butt up against other inline elements. Block vs Inline Example 
<span>This is a paragraph in a span tag.</span>

Font Weights

Font weight 100

Font weight 200

Font weight 300

Font weight 400

Font weight 500

Lists

Unordered List

For list items where order doesn't matter. Has bullets by default. These are wrapped in a ul tag.

  • list item 1
  • list item 2
  • list item 3
Unordered List
<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
</ul>

Ordered List

For list items where order DOES matter. Has numbers by default. These are wrapped in a ol tag.

  1. list item 1
  2. list item 2
  3. list item 3
Ordered List
<ol>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
</ol>

Mixed Nested List

You can nest lists inside each other. This works for both ordered and unordered lists.

  1. list item 1
    • additional list item 1
    • additional list item 2
    • additional list item 3
  2. list item 2
  3. list item 3
Mixed Nested List
<ol>
  <li>list item 1
    <ul>
      <li>additional list item 1</li>
      <li>additional list item 2</li>
      <li>additional list item 3</li>
    </ul>
  </li>
  <li>list item 2</li>
  <li>list item 3</li>
</ol>

List with no bullets or numbers

Add class .no-bullets to any list so that the bullets or numbers don't show. This class also takes away the margin on the left side.

  • list item 1
  • list item 2
  • list item 3
<ul class="no-bullets">
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
</ul>
  1. list item 1
  2. list item 2
  3. list item 3
<ol class="no-bullets">
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
</ol>

Blockquotes

This is a blockquote apparently. 
<blockquote>
  This is a blockquote apparently.
</blockquote>

Variables

We are using scss variables to manage common styles like colors, font-families and sizes, and layout width. If you find yourself needing to change the value of a variable, please see Aly first. These are located in _variables.scss.

Usage

.class {
  color: $white;
  background-color: $blue;
  width: $content-width;
}

Color variables 

$white: #fff;
$black: #333;

$blue: #02BCDD;
$red: #e74c3c;
$yellow: #f1c40f;
$green: #2ecc71;
$purple: #8e44ad;
$orange: #f39c12;

Font variables

$base-font-family: Helvetica, Arial, sans-serif;
$base-font-size:   16px;
$base-line-height: 1.5;

Layout variables

$content-width:    980px;

Primary UI Colors

COPY

blue

#3498db

$blue-variable

red

#e74c3c

$red-variable

yellow

#f1c40f

$yellow-variable

Secondary UI Colors

green

#2ecc71

$green-variable

purple

#8e44ad

$purple-variable

orange

#f39c12

$orange-variable

Default Buttons

Default button styling. Add classes .btn and .default for this styling.

click me 
<a class="btn default">click me</a>

<button class="btn default">MOTHAFUCKIN BUTTON</button>

<input type="submit" class="btn default">

<input type="reset" class="btn default">

Button Colors

To change the color of a button, remove the .default class add a color class (e.g. .orange).

click me 
<a class="btn orange">click me</a>

<button class="btn purple">MOTHAFUCKIN BUTTON</button>

<input type="submit" class="btn green">

<input type="reset" class="btn red">

Button Sizes

To change the size of a button, add class .large or .small.

large button 
<a class="btn default large">large button</a>

<button class="btn purple">MOTHAFUCKIN BUTTON</button>

<input type="submit" class="btn green small">

<input type="reset" class="btn red small">

Disabled Buttons

For when you want a button, but don't want it to be clickable. Add class .disabled.

large button 
<a class="btn large disabled">large button</a>

<button class="btn disabled">MOTHAFUCKIN BUTTON</button>

<input type="submit" class="btn small disabled">

<input type="reset" class="btn small disabled">

Inputs & Forms

Look at all these inputs

Wrap all inputs and labels in a .form-group.

These styles aren't final. Some Inspiration.

Checkbox Value Checkbox 2 Value
boop boop21

Tables

Default table

Add class .tables to the table to style.

Header Cell 1 Header Cell 2 Header Cell 3
Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 Cell 2
Row 3 Cell 1 Row 3 Cell 2
Row 4 Cell 1 Row 4 Cell 2 
<table class="tables">
  <thead>
    <tr>
      <th>Header Cell 1</th>
      <th>Header Cell 2</th>
      <th>Header Cell 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1 Cell 1</td>
      <td>Row 1 Cell 2</td>
      <td><button class="btn default small">Confirm</button><button class="btn red small">Reject</button></td>
    </tr>
    <tr>
      <td>Row 2 Cell 1</td>
      <td>Row 2 Cell 2</td>
      <td><button class="btn default small">Confirm</button><button class="btn red small">Reject</button></td>
    </tr>
    <tr>
      <td>Row 3 Cell 1</td>
      <td>Row 3 Cell 2</td>
      <td><button class="btn default small">Confirm</button><button class="btn red small">Reject</button></td>
    </tr>
    <tr>
      <td>Row 4 Cell 1</td>
      <td>Row 4 Cell 2</td>
      <td><button class="btn default small">Confirm</button><button class="btn red small">Reject</button></td>
    </tr>
  </tbody>
</table>

Minimal Table

Add class .table-minimal to the table to style.

Header Cell 1 Header Cell 2 Header Cell 3
Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 Cell 2
Row 3 Cell 1 Row 3 Cell 2
Row 4 Cell 1 Row 4 Cell 2 
<table class="table-minimal">
  <thead>
    <tr>
      <th>Header Cell 1</th>
      <th>Header Cell 2</th>
      <th>Header Cell 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1 Cell 1</td>
      <td>Row 1 Cell 2</td>
      <td><button class="btn default small">Confirm</button><button class="btn red small">Reject</button></td>
    </tr>
    <tr>
      <td>Row 2 Cell 1</td>
      <td>Row 2 Cell 2</td>
      <td><button class="btn default small">Confirm</button><button class="btn red small">Reject</button></td>
    </tr>
    <tr>
      <td>Row 3 Cell 1</td>
      <td>Row 3 Cell 2</td>
      <td><button class="btn default small">Confirm</button><button class="btn red small">Reject</button></td>
    </tr>
    <tr>
      <td>Row 4 Cell 1</td>
      <td>Row 4 Cell 2</td>
      <td><button class="btn default small">Confirm</button><button class="btn red small">Reject</button></td>
    </tr>
  </tbody>
</table>

To Do

ICONS & IMAGES

TABLES

ALERTS

ANIMATIONS

RESPONSIVE MEDIA QUERIES