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
.'
Table of Contents
- Type
- Colors
- Typography
- Grid System
- Tables
- Buttons
- Forms
- Miscellaneous elements
- Iconography
- UI Elements
Type
FS Siena Extra Light
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
FS Siena Light
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
FS Siena
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
Roboto Condensed
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
Colors
Main Brand
Ebony Clay
#222944$ebony-clay
Caribbean Green
#04C7AF$caribbean-green
Wild Sand
#f0f0f0$wild-sand
Emperor
#515151$emperor
Sand
#F4EAE0$sand
Ivory
#F7F2ED$ivory
Grayscale
Black
#000000$black
Charcoal
#4D4D4D$charcoal
Off White
#FCFBFA$off-white
Ivory
#F7F2ED$ivory
White
#ffffff$white
Typography
Headings
H1 FS Siena Light
H2 Roboto Condensed Bold
H3 FS Siena Light
H4 FS Siena Light
H5 FS Siena ExtraLight
H6 FS Siena Light
Pseudo-Headings
Type variations
P1 FS Siena Thin
P2 FS Siena ExtraLight
P3 FS Siena Thin
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
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
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
This is an example paragraph that comes out of the rich text editor. This sentence contains a link so you can verify what link styles look like. Free-market sprawl garage hotdog monofilament tube dolphin sunglasses kanji vehicle pen ablative Shibuya range-rover marketing assassin. Sub-orbital tanto sign military-grade tattoo corrupted camera lights dead cardboard j-pop marketing apophenia film jeans. Fetishism concrete claymore mine table j-pop nano-geodesic post-rain carbon garage sign savant refrigerator saturation point grenade.
This is an example paragraph that comes out of the rich text editor. This sentence contains a link so you can verify what link styles look like. Free-market sprawl garage hotdog monofilament tube dolphin sunglasses kanji vehicle pen ablative Shibuya range-rover marketing assassin. Sub-orbital tanto sign military-grade tattoo corrupted camera lights dead cardboard j-pop marketing apophenia film jeans. Fetishism concrete claymore mine table j-pop nano-geodesic post-rain carbon garage sign savant refrigerator saturation point grenade.
RTE Heading
This is an example paragraph that comes out of the rich text editor. This sentence contains a link so you can verify what link styles look like. Free-market sprawl garage hotdog monofilament tube dolphin sunglasses kanji vehicle pen ablative Shibuya range-rover marketing assassin. Sub-orbital tanto sign military-grade tattoo corrupted camera lights dead cardboard j-pop marketing apophenia film jeans. Fetishism concrete claymore mine table j-pop nano-geodesic post-rain carbon garage sign savant refrigerator saturation point grenade.
Note: Any table elements that come out of the rich text editor are will automatically have a responsive wrapper applied to them. This allows them to scroll on small screens without breaking the site layout.
Grid System
Extra Small (<576px) |
Small (≥576px) |
Medium (≥768px) |
Large (≥992px) |
Extra Large (≥1200px) |
Extra Extra Large (≥1480px) |
|
---|---|---|---|---|---|---|
Max Container width | None (auto) | 540px | 720px | 960px | 1140px | 1440px |
Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
# 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. All child table elements of an .rte
element are wrapped by default via javascript.
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 |
Small 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" |
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" |
Buttons
Forms
Forms are based on Bootstrap 4's form component. Simple examples to listed here to use as a reference for styling, for more detailed information about how they work, please see the official documentation.
Default Forms
Horizontal Forms
Create horizontal forms with the grid by adding the .row
class to form groups and using the .col-*-*
classes to specify the width of your labels and controls. Be sure to add .col-form-label
to your label elements as well so they’re vertically centered with their associated form controls.
Inline Forms
Other Form Elements
Custom Form Elements
Use completely custom form elements to replace browser defaults.
Miscellaneous elements
Horizontal Rules
Default hr
Alerts
Iconography
Read more about using, creating, and editing SVG icons in Slate's documentation.