TOP

Colors

Greyscale

$color-white
#fff

$color-whiteSmoke
#eaeaea

$color-lightGrey
#d9d9d6

$color-grey
#737272

$color-darkGrey
#404040

$color-black
#000

Brand Colors

$color-lightBlue
#96b3d1

$color-blue
#2f4066

$color-lightRed
#ee383d

$color-red
#ae1322

$color-green
#06A12F

Typography

Heading one

Heading two

Heading three

Heading four

Heading five
Heading six

RTE headings

RTE heading one

RTE heading two

RTE heading three

RTE heading four

RTE heading five
RTE heading six

Paragraphs

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.

Suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.

Type styles

Blockquotes

Eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

The author of the quote

Lists

ul (default)
  • One
  • Two
  • Three
  • Four
Numeric bullet ol (default)
  1. One
  2. Two
  3. Three
  4. Four
Child lists (to match the RTE styles)
  • One
  • Two
  • Three, with child list
    • First sub item
    • Second sub item
    • Third sub item, with child list
      • Third level item
      • Another third level item
  • Four
Unstyled
  • One
  • Two
  • Three
  • Four

Grid

Please see the official Bootstrap grid documentation for a complete introduction to the grid system

Containers

This site requires a containing element to wrap site contents and house our grid system. You may choose one of two containers. Note that, due to padding and more, neither container is nestable.

Use .container for a responsive fixed width container.

  <div class="container">
  ...
  </div>
    

Use .container-fluid for a full width container, spanning the entire width of your viewport.

  <div class="container-fluid">
  ...
  </div>
    

Media Queries

We use the following media queries in our SCSS files to create the key breakpoints in our grid system.

  /* Extra small devices (phones, less than 768px) */
  /* No media query since this is the default */

  /* Small devices (tablets, 768px and up) */
  @media (min-width: $screen-sm-min) { ... }

  /* Medium devices (desktops, 992px and up) */
  @media (min-width: $screen-md-min) { ... }

  /* Large devices (large desktops, 1200px and up) */
  @media (min-width: $screen-lg-min) { ... }

  /* Extra Large devices (Wide screens, 1400px and up) */
  @media (min-width: $screen-xl-min) { ... }
    

We occasionally expand on these media queries to include a max-width to limit CSS to a narrower set of devices.

  @media (max-width: $screen-xs-max) { ... }
  @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { ... }
  @media (min-width: $screen-md-min) and (max-width: $screen-md-max) { ... }
  @media (min-width: $screen-lg-min) and (max-width: $screen-lg-max) { ... }
    

Grid Options

Extra small devices Phones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px) Extra Large devices Desktops (≥1400px)
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Container width None (auto) 750px 970px 1170px 1370px
Class prefix .col-xs- .col-sm- .col-md- .col-lg- .col-xl-
# of columns 12
Column width Auto ~62px ~81px ~97px ~114px
Gutter width 30px (15px on each side of a column)
Nestable Yes
Offsets Yes
Column ordering Yes

Responsive tables

Order Date Payment Status Fulfillment Status Total
#1001 December 22, 2015 Authorized Unfulfilled $43.03
#1002 December 23, 2015 Authorized Unfulfilled $44.03
#1003 December 24, 2015 Authorized Unfulfilled $45.03
#1004 December 25, 2015 Authorized Unfulfilled $46.03
#1005 December 26, 2015 Authorized Unfulfilled $47.03
#1006 December 27, 2015 Authorized Unfulfilled $48.03

Forms

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.

Vertical forms (customer, contact, etc)

Checkboxes
Radios

Inline Forms

Add .form-inline to your form for left-aligned and inline-block controls.

Invisible labels

Add a class of label-hidden to a label to visually hide it, while keeping it accessible to screen readers. Use the placeholder attribute as your visible label.

Note: The placeholder attribute only works in IE10+, so invisible labels are disabled in IE9 and below.

Horizontal Forms

Use our predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form (which doesn't have to be a form). Doing so changes .form-groups to behave as grid rows, so no need for .row.

Alerts and form errors

    {% if form.posted_successfully? %}
      <p class="alert alert-success">Thanks for submitting the form</p>
    {% endif %}

    {% if form.errors %}
      <div class="alert alert-danger">
        {{ form.errors | default_errors }}
      </div>
    {% endif %}
  
This is a standard alert
This is a success message
This is a warning message

This is an error message.

  • Bullets can offer more insight to the error

Buttons

Button Tags

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

Link

Button Variations

Button Sizes

Larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.

Create block level buttons—those that span the full width of a parent— by adding .btn-block.

Button States

No need to add :active as it's a pseudo-class, but if you need to force the same appearance, go ahead and add .active.

Add the disabled attribute to button buttons.

Button disabled Button disabled

Miscellaneous elements

Horizontal Rules

There are no default hr styles in Slate, but these are common ones to add.

Default hr


Invisible hr.hr-spacer


Small hr.hr-sm


Large hr.hr-lg


Blue hr.hr-blue


Page Elements

Page Header

Use this element at the top of pages to add consistent titles + subtitles

You can also use the page header without a subtitle

You can also use the page header with .Page-header--right and Page-header--left modifier classes that will align content to either side above $screen-sm-min

You can also use the page header with a background image by applying the .Page-header--bg modifier class and a background-image url as an inline style.

SVG icons

Read more about using, creating, and editing SVG icons in Slate's documentation.

Payment icons

Social icons

General icons