Styles
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
Museo Sans Rounded 700
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
Museo Sans Rounded 500
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
Museo Sans Rounded 300
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
YWFT HANNAH
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
Colors
Main Colors
BLACK
#000000
$color-black
PURPLE
#000000
$color-purple
ORANGE
#F7A700
$color-orange
DARK GREY
#545353
$color-dark-grey
MEDIUM GREY
#999999
$color-medium-grey
LIGHT GREY
#D9D9D9
$color-light-grey
OFF WHITE
#F4F2F4
$color-off-white
Typography
H1 Better Ingredients
H2 Better Ingredients
H3 Better Ingredients
P1 This is paragraph text which should be used for the subheadlines. Inline links, which look like this, may be added to paragraph text using the link icon.
P2 This is paragraph text which should be used for the majority of all text content. Inline links, which look like this, may be added to paragraph text using the link icon.
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-grey
- .u-color-white
- .u-td-underline
- .u-td-strike
Background Color Utilities
- .u-bg-black
- .u-bg-grey
- .u-bg-white
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
ICONOGRAPHY
ILLUSTRATIONS
CTAS
UI ELEMENTS
DROP DOWN
ZOOM
CART PRODUCTS ADDED
1CHECKBOX
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 | 30px (15px 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"-34" | 34"-36" | 36"-38" | 38"-40" | |
| Under Bust | 32"-34" | 34"-36" | 36"-38" | 38"-40" | |
| Waist | 23.5"-24.5" | 32"-34" | 34"-36" | 36"-38" | 38"-40" |
| Hip | 33"-34" | 32"-34" | 34"-36" | 36"-38" | 38"-40" |
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.