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-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-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
|
|
Numeric bullet
|
|
Child lists (to match the RTE styles) |
|
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
- Third level item
- 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 |
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
Type 2
Alternate CTAs
Add the .cta--inverted
class to swap the color of the cta
UI Elements
Arrows
Dots
Use these to display single character options
-
S
-
M
-
L
-
XL
Or apply a background color to use them as swatches
Breadcrumbs
Social Sharing
Add the social-sharing--inline
modifier class to render a simpler social module with icons inline.
Search
Normal search box
Compact search box
Inverted search box