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
Gotham Book
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
u-fw-normal
Gotham Medium
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
u-fw-medium
Gotham Bold
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
u-fw-bold
Colors
Brown
#513421$color-brown
Red
#fd1d18$color-red
Med Grey
#bcbcbc$color-grey
Light Grey
#e0e0e0$color-light-grey
Typography
Headings
H1 Gotham Medium
Size: 32px, Line height: 40px, Letter spacing: 0px
H2 Gotham Medium
Size: 24px, Line height: 34px, Letter spacing: 1px, Letter-transformation: Uppercase
H3 Gotham Bold
Size: 20px, Line height: 27px, Letter spacing: .025px
H4 Gotham Book
Size: 17px, Line height: 27px, Letter spacing: .5px
H5 Gotham Medium
Size: 16px, Line height: 26px, Letter spacing: 1px
H6 Gotham Medium
Size: 12px, Line height: 22px, Letter spacing: 0.75px
Paragraphs
p
p1
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.
p2
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.
Type styles
- Strong
- Emphasis
- Inline link
- Strike
- Sup
Text Utilities
- .u-fw-normal
- .u-fw-bold
- .u-td-underline
- .u-td-strike
- .u-tt-lowercase
- .u-tt-uppercase
- .u-tt-capitalize
- .u-tt-none
Text Color Utilities
- .u-color-black
- .u-color-white
- .u-color-brown
- .u-color-red
- .u-color-grey
- .u-color-light-grey
- .u-color-dark-grey
Background Color Utilities
- .u-bg-black
- .u-bg-white
- .u-bg-brown
- .u-bg-red
- .u-bg-grey
- .u-bg-light-grey
- .u-bg-dark-grey
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 | 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" |
Buttons
Make sure to give all buttons a base class of .btn
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 data-no-chosen attribute to your select tag and it will be left alone.
Page Elements
Page Header
Use this element at the top of pages to add consistent titles + subtitles. You can also use this element without the subtitle if necessary.
I'm a page title
I'm a page subtitle. I have a maximum width applied to prevent lines of text from getting unnecessarily long and becoming hard to read.
Miscellaneous elements
Horizontal Rules
Default hr
Alerts
Iconography
Social icons
General icons
UI Elements
Breadcrumbs
Social Sharing
Modals
Built using Bootstrap's Modal, use these to create an overlay to focus the user's attention.
