Prism Skylabs Style Guide

A set of styles designed to be used as the base for all new and existing web projects.

Colors

Brand colors

$c-primary-darker
#1686c5
$c-primary-dark
#2b9dd0
$c-primary
#00c5e5
$c-primary-light
#6ce1f2
$c-success-darker
#01a510
$c-success-dark
#25bb41
$c-success
#56d980
$c-success-light
#7befb1
$c-info-darker
#00979e
$c-info-dark
#15a9ab
$c-info
#3eccc4
$c-info-light
#67efde
$c-danger-darker
#d83d3d
$c-danger-dark
#e55e5e
$c-danger
#fc8b8b
$c-danger-light
#fbb

Grays

$c-gray-darker
#333
$c-gray-dark
#666
$c-gray
#999
$c-gray-light
#ccc
$c-gray-lighter
#f2f2f2

Grids

Grid system

We are using a slightly simplified version of Bootstrap's grid system. For documentation, see Bootstrap's grid documents

Typography

Headings

Headings <h1> through <h5> are available. You can also apply .h1 through .h5 classes to match header styles without display block.

h1: Prism Skylabs Heading

h2: Prism Skylabs Heading

h3: Prism Skylabs Heading

h4: Prism Skylabs Heading

h5: Prism Skylabs Heading
<h1>h1: Prism Skylabs Heading</h1>
<h2>h2: Prism Skylabs Heading</h2>
<h3>h3: Prism Skylabs Heading</h3>
<h4>h4: Prism Skylabs Heading</h4>
<h5>h5: Prism Skylabs Heading</h5>

Body text

The default font-size for all elements is 14px. There is both a large (16px) and small (12px) size that can be applied to paragraphs or spans. Paragraphs have a margin-bottom of 1em.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean hendrerit sollicitudin mi, a congue sapien lacinia in. Maecenas viverra massa vel aliquam suscipit. Aliquam sodales erat in elit lacinia, eget feugiat enim feugiat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean hendrerit sollicitudin mi, a congue sapien lacinia in. Maecenas viverra massa vel aliquam suscipit. Aliquam sodales erat in elit lacinia, eget feugiat enim feugiat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean hendrerit sollicitudin mi, a congue sapien lacinia in. Maecenas viverra massa vel aliquam suscipit. Aliquam sodales erat in elit lacinia, eget feugiat enim feugiat.

<p class="large"> ... </p>
<p> ... </p>
<p class="small"> ... </p>
Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.
<span class="large"> ... </span>
<span> ... </span>
<span class="small"> ... </span>

Alignment classes

Alignment classes are used to easily set the alignment on text elements.

Left algined text.

Center aligned text.

Right aligned text.

Justified text.

No wrap text.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

Transformation classes

A collection of easy to apply, semantic button styles. Suggested use is outlined in the comments below.

Lowercased text.

Uppercased text.

capitalized text.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">capitalized text.</p>

Buttons

Options

A collection of easy to apply, semantic button styles. Suggested use is outlined in the comments below.

<!-- Default button -->
<button type="button" class="btn btn-default">Default</button>

<!-- The primary action in groups of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- A positive or successful action -->
<button type="button" class="btn btn-success">Success</button>

<!-- For secondary actions or information/context -->
<button type="button" class="btn btn-info">Info</button>

<!-- A dangeroud or potentially irreversible action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Append `-link` to a button for anchor like appearance -->
<button type="button" class="btn btn-danger-link">Danger</button>

Sizes

The default button can be made larger by applying the .btn-lg class, or smaller with .btn-sm.

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>

Disabled state

Make buttons look unclickable. Use either .disabled class or disabled attribute.

<button type="button" class="btn btn-default disabled">Default</button>
<button type="button" class="btn btn-primary" disabled="true">Primary</button>
<button type="button" class="btn btn-success disabled">Success</button>
<button type="button" class="btn btn-info disabled">Info</button>
<button type="button" class="btn btn-danger disabled">Danger</button>

Button tags

Use the button classes on an <a>, <button> or <input> element.

Link 
<a href="#" role="button" class="btn btn-primary">Link</a>
<button role="button" class="btn btn-primary">Button</button>
<input type="button" value="Input" class="btn btn-primary">
<input type="submit" value="Submit" class="btn btn-primary">

Forms

Base styles

Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing. See Bootstrap docs for more guidlines.

Your favorite color. 
<form>
  <div class="form-group">
    <label>Email</label>
    <input class="form-control" type="text" placeholder="john@gmail.com">
  </div>
  <div class="form-group">
    <label>Color</label>
    <input class="form-control" type="text" placeholder="john@gmail.com">
    <span class="help-block">Your favorite color.</span>
  </div>
  <div class="form-group">
    <div class="checkbox">
      <label>
        <input type="checkbox" value="a"> Option A
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox" value="b"> Option B
      </label>
    </div>
  </div>
  <div class="form-group">
    <div class="radio">
      <label>
        <input type="radio" value="1" name="options"> Option 1
      </label>
    </div>
    <div class="radio">
      <label>
        <input type="radio" value="2" name="options"> Option 2
      </label>
    </div>
  </div>
  <div class="form-group">
    <label>Message</label>
    <textarea class="form-control" rows="3"></textarea>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Horizontal forms

By adding the .form-horizontal class to the form, you can now use grid classes to layout the form elements.

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Name</label>
    <div class="col-sm-9">
      <input type="text" placeholder="John Smith" class="form-control">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-9">
      <input type="email" placeholder="john@gmail.com" class="form-control">
    </div>
  </div>
</form>

Form sizes

Change the size of inputs by adding .input-lg and .input-sm classes

<form class="form-horizontal">
  <div class="form-group">
    <input type="text" placeholder="Large input" class="form-control input-lg">
  </div>
  <div class="form-group">
    <input type="text" placeholder="Regular input" class="form-control">
  </div>
  <div class="form-group">
    <input type="text" placeholder="Small input" class="form-control input-sm">
  </div>
</form>

Form errors

Apply an error state by adding the .has-error class to an element and optionally adding an error message in the .help-block.

Your email isn't good enough 
<form>
  <div class="form-group has-error">
    <label class="control-label">Email</label>
    <input type="text" placeholder="john@gmail.com" class="form-control">
    <span class="help-block">Your email isn't good enough</span>
  </div>
</form>

Tables

Base styles

Add the .table class to any table element you want to receive base styling. Add other .table-* classes to further style the table.

Name Size Fitness
Murphy Large Medium
Charlie Small High
Poncho Small N/A 
<table class="table">
...
</table>

Condensed tables

Add the .table-condensed class for a more compact table (less padding).

Name Size Fitness
Murphy Large Medium
Charlie Small High
Poncho Small N/A 
<table class="table table-condensed">
...
</table>

No stripes table

Add the .table-nostripes class for to remove the background fill of alternating rows.

Name Size Fitness
Murphy Large Medium
Charlie Small High
Poncho Small N/A 
<table class="table table-nostripes">
...
</table>

Hover table

Add the .table-hover class to apply a darker color to a row when a user hovers over it.

Name Size Fitness
Murphy Large Medium
Charlie Small High
Poncho Small N/A 
<table class="table table-hover">
...
</table>

Icons