Styleguide

This page is here to show off styles for standard page elements such as typography, form elements, and icons. These are hard coded in an alternate page template file, named page.styles.liquid.

Type

FUTURA MEDIUM

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

FUTURA BOOK

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

Colors

Main Colors

Black
#000
$color-black

Dark Grey
#666
$color-dark-grey

Medium Grey
#CCC
$color-medium-grey

Light Grey
#E9E9E9
$color-dark-grey

Off White
#FAFAFA
$color-off-white

White
#FFF
$color-white

Element Colors

Water
#081847
$color-water

Wood
#0B392C
$color-wood

Fire
#AD172B
$color-fire

Earth
#A06B6B
$color-earth

Metal
#F4F3F2
$color-metal

Typography

Headings

H1 Futura Medium

H2 Futura Medium

H3 Futura Medium

H4 Futura Medium

H5 Futura Medium

H6 Futura Medium

Type variations

P1 Futura Book

P2 Futura Book (Default body type)

P3 Futura Book

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eleifend, enim nec tempor facilisis, urna dui hendrerit odio, sed laoreet ex metus commodo enim. Praesent vehicula malesuada ornare. Nulla in velit sit amet ligula convallis placerat ut sit amet nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus lobortis justo eu condimentum gravida. Aenean a sapien laoreet, scelerisque libero sit amet, ultrices est. Maecenas eu odio suscipit, maximus ligula eu, scelerisque sapien.

Mauris justo purus, bibendum ut molestie vitae, hendrerit in ipsum. Fusce commodo justo in lorem mattis, ut sagittis erat auctor. Maecenas dignissim, felis eu tempor varius, lorem nulla luctus augue, non volutpat massa sem nec felis. Suspendisse accumsan aliquam ornare. Suspendisse commodo nec arcu id imperdiet. Praesent tincidunt condimentum est non fermentum. Donec id malesuada enim. Nullam finibus arcu nulla, vestibulum egestas leo aliquet vel. Phasellus sed maximus eros.

Pellentesque imperdiet velit eu fringilla sagittis. Duis enim nibh, mattis id justo sed, euismod posuere diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas ultricies nunc a bibendum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras volutpat tellus tincidunt blandit efficitur. Sed maximus leo ultricies massa auctor egestas. Pellentesque aliquet aliquam porta. Vestibulum convallis libero et metus ornare, sit amet posuere dolor semper.

Type styles

Strong
Emphasis
Inline link
Strike
^Sup

Text Utilities

.u-fw-normal
.u-fw-bold
.u-color-black
.u-color-dark-grey
.u-color-medium-grey
.u-color-light-grey
.u-color-off-white
.u-color-white
.u-color-water
.u-color-wood
.u-color-fire
.u-color-earth
.u-color-metal
.u-color-text
.u-color-link

Background Color Utilities

.u-bg-black
.u-bg-dark-grey
.u-bg-medium-grey
.u-bg-light-grey
.u-bg-off-white
.u-bg-white
.u-bg-water
.u-bg-wood
.u-bg-fire
.u-bg-earth
.u-bg-metal
.u-bg-khaki
.u-bg-pink
.u-bg-orange
.u-bg-purple
.u-bg-brown
.u-bg-tan
.u-bg-red
.u-bg-green
.u-bg-yellow
.u-bg-blue

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)	One Two Three 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

RTE Typography

Styles specific to text that comes out of the rich text editor.

One
Two
Three, with child list
- First sub item
- Second sub item
- Third sub item, with ordered child list
  1. Third level item
  2. Another third level item
Four

Grid System

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

.col-md-8

.col-md-4

.col-md-6

Tables

Responsive Tables

Wrap tables with a .table-responsive element to enable horizontal scrolling on small screens

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

Border-less Tables

Sizes	XXS	XS	S	M	L
Bust		32.5"-34"	34"-36"	36"-38"	38"-40"
Under Bust		26.5"-28"	28"-30"	30"-32"	32"-34"
Waist	23.5"-24.5"	25.5"-27"	27"-29"	29"-31"	31"-33"
Hip	33"-34"	35"-36.5"	36.5"-38.5"	38.5"-40.5"	40.5"-42.5"
Inseam		31.5"	32"	32.5"	33"

Forms

Default Forms

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 (customer, contact, etc)

Inline Forms

Other Form Elements

Note About Select Elements

This theme is using the Chosen library to enhance native select tags. By default, any select.form-control elements are targeted and initialized on page load. If you want to avoid this, add the no-chosen class to your select tag and it will be left alone.

Buttons

Default button Default Button (Disabled)

Primary button Primary button (Disabled)

Block Level Button Block Level Button

Miscellaneous elements

Horizontal Rules

Default hr

Iconography

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

Navigation Icons

Social icons

General icons

CTAs

Type 1

Find out more

Type 2

Alternate CTAs

Add the .cta--inverted class to swap the color of the cta