Styleguide
page.styles.liquid
.
Table of Contents
- Type
- Colors
- Typography
- Grid System
- Content Grid
- Tables
- Buttons
- Forms
- Page Elements
- Frames
- Panels
- Miscellaneous elements
- Iconography
- UI Elements
Type
GT Walsheim
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
GT Walsheim
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
GT Walsheim
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
Colors
Greyscale
Black
#282828$color-black
Dark Grey
#37393a$color-dark-grey
Grey
#6d6e71$color-grey
Light Grey
#9b9b9b$color-light-grey
Light Light Grey
#c8c9c7$color-light-light-grey
Very Light Grey
#eeefed$color-very-light-grey
White
#FFF$color-white
Main
ONP Green
#6AA341$color-onp-green
ONP Green Alt
#54812C$color-onp-green-alt
ONP Yellow
#F8E71C$color-onp-yellow
ONP Teal
#00A5B5$color-onp-teal
ONP Pink
#AF0061$color-onp-pink
ONP Blue
#00A1E0$color-onp-blue
Typography
Headings
H1 - GT Walsheim - Bold
Desktop Size: 50px -- Character Spacing: Auto -- Line: 55px
Mobile Size: 35px -- Character Spacing: Auto -- Line: 41px
H2 - GT Walsheim - Bold
Desktop Size: 40px -- Character Spacing: Auto -- Line: 45px
Mobile Size: 24px -- Character Spacing: Auto -- Line: 33px
H3 - GT Walsheim - Bold
Desktop Size: 24px -- Character Spacing: 0 -- Line: 32px
Mobile Size: 18px -- Character Spacing: 0 -- Line: 22px
H4 - GT Walsheim - Bold
Desktop Size: 18px -- Character Spacing: 0.5px -- Line: 21px
Mobile Size: 18px -- Character Spacing: 0.5px -- Line: 21px
H5 - GT Walsheim - Medium
Desktop Size: 20px -- Character Spacing: 1px -- Line: 29px
Mobile Size: 20px -- Character Spacing: 1px -- Line: 29px
H6 - GT Walsheim - Medium
Desktop Size: 14px -- Character Spacing: 1px -- Line: 33px
Mobile Size: 14px -- Character Spacing: 1px -- Line: 33px
Type variations
Lead System / GT Walsheim
Size: 24px -- Character Spacing: 0 -- Line: 33px
P1 System / GT Walsheim
Size: 16px -- Character Spacing: 0 -- Line: 33px
P2 System / GT Walsheim
Size: 14px -- Character Spacing: 0 -- Line: 24px
P3 System / GT Walsheim
Size: 12px -- Character Spacing: 0.86px -- Line: 15px
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
- Secondary link
Text Utilities
- .u-fw-normal
- .u-fw-bold
- .u-td-underline
- .u-td-strike
- .u-ls-base
- .u-color-black
- .u-color-dark-grey
- .u-color-grey
- .u-color-light-grey
- .u-color-light-light-grey
- .u-color-very-light-grey
- .u-color-white
- .u-color-onp-yellow
- .u-color-onp-green
- .u-color-onp-green-alt
- .u-color-onp-teal
- .u-color-onp-blue
- .u-color-onp-pink
Background Color Utilities
- .u-bg-black
- .u-bg-dark-grey
- .u-bg-grey
- .u-bg-light-grey
- .u-bg-light-light-grey
- .u-bg-very-light-grey
- .u-bg-white
- .u-bg-primary
- .u-bg-onp-yellow
- .u-bg-onp-green
- .u-bg-onp-green-alt
- .u-bg-onp-teal
- .u-bg-onp-blue
- .u-bg-onp-pink
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 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 |
Content Grid
This is a more rigid grid for laying out content, typically products and articles. It uses the same sizing and gutters as the normal grid. There is one base version with several modifier classes that allow you some level of flexibility. The default layout is 1 across on mobile devices, and 3-col on screens larger than $screen-md-min
.
Alternate Content Grid Layouts
Modifier classes are available to create alternate grid layouts
Use .content-grid--2-col
to create a 2 column grid on screens larger than $screen-md-min
.
Use .content-grid--4-col
to create a 4 column grid on screens larger than $screen-md-min
.
Use .content-grid--2-4
to create a grid that switches from 2 to 4 columns.
Use .content-grid--1-2-4
to create a grid that switches from 1 to 2 to 4 columns.
Use .content-grid--1-2-3
to create a grid that switches from 1 to 2 to 3 columns.
Alternate Content Grid Spacing
Use the content-grid--flush
modifier class to make all grid items flush with each other.
Combine with frames to make tiled layouts.
Use the .content-grid--tight
and .content-grid--loose
modifier classes to adjust vertical spacing between grid items.
Tight Grid
Loose Grid
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 |
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
Default button Default Button (Disabled)
Primary button Primary button (Disabled)
Secondary button Secondary button (Disabled)
Tertiary button Tertiary button (Disabled)
Block Level Default Button Block Level Primary Button Block Level Secondary Button Block Level Tertiary Button
Button Link Underline See More
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. This element also works with left and right modifier classes to change text alignment.
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.
Content Header / Footer
Use these elements to create sections of content throughout the body of the page. While page header should be used once at the top, the content header can be used multiple times.
Content Header Title Goes Here
Frames
Use frames to create elements with defined aspect ratios. All frames require the .frame
base class and a modifier class to define their aspect ratio. There is also a child element .frame__inner
that is positioned absolutely and stretches the full dimensions of the frame.
Responsive Frames
There are responsive modifier classes for all frame sizes and all breakpoints.
.frame
.frame--xs-16x9
.frame--sm-6x4
.frame--md-1x1
.frame--lg-3x4
.frame--xl-4x6
Panels
Panels are generic containers for content that have a header and a body. They don't get used very much, but the base .panel
element is needed for the collapse / accordion plugin to work so we've included it here. The base element should remain unstyled. All the styling you see below is set on the child .panel__*
classes.
Panel Item Title
Wrap multiple panels with a .panel-group
element to make them vertically flush with eachother.
Panel Item Title
Panel Item Title
Miscellaneous elements
Horizontal Rules
Default hr
Alerts
Iconography
Read more about using, creating, and editing SVG icons in Slate's documentation.
Social icons
General icons
UI Elements
Arrows
Arrow elements are mostly used for slideshow controls. The root element has the base arrow
class applied to it and directional modifier classes are available. By default, it has one child element that makes up the actual arrow icon.
This child element easily be swapped out for a png, svg, or other icon made of pseudo elements.
Breadcrumbs
Pagination
Social Sharing
Minimal Input
Normal
Inverted
Large
Dots
Dots are an alternate UI used primarily for displaying / selecting variant option values. They respond to the two state classes .is-active
and .is-disabled
. Active dots will show a border around them, disabled dots will show with partial opacity and a strike through.
Use the .dots--small
modifier class to create smaller dots when space is tight.
Apply a background color or background image to the .dot__inner
element to use them as swatches.
Or apply a modifier class to apply a background color as defined in the swatch palette. The list of available color-modifier classes is below.