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
- Content Grid
- Tables
- Buttons
- Forms
- Page Elements
- Iconography
- UI Elements
Type
Goudy Old Style
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
Univers
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
Colors
Grayscale
Black
#000$black
Gray
#B4AEAC$gray
White
#fff$white
Main
Butter
#FAFAD6$butter
Butter Gray
#E1E1BD$butter-gray
Butter Dark
#EBE583$butter-dark
Typography
Headings
H1 Goudy Old Style
H2 Univers
H3 Univers
H4 Goudy Old Style
H5 Univers
H6 Univers
Type Variations
Notes / P2 Univers
Mobile Only Notes / P3 Univers
Animated LinkParagraphs
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.
Type styles
- Strong
- Emphasis
- Inline link
- Strike
- Sup
Text Utilities
- .text-sans-serif
- .text-serif
- .font-weight-normal
- .font-weight-bold
- .text-black
- .text-gray
- .text-white
- .text-butter
- .text-butter-dark
- .text-muted
- .text-black-50
- .text-white-50
Background Color Utilities
- .bg-black
- .bg-gray
- .bg-white
- .bg-butter
- .bg-butter-dark
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) |
|
Horizontal Rule
RTE
Almost all content that comes out of the rich text editor is wrapped in this class.
- 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.
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.
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.
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 | 24px (12px on each side of a column) on screen sizes below the medium breakpoint. 48px (24px on each side of a column) on screen sizes above the medium breakpoint | |||||
Nestable | Yes | |||||
Offsets | Yes | |||||
Column ordering | Yes |
Aplós Container
The Aplós container is a more responsive container type. It has outer padding that scales through 4 different sizes based on screen size. There are two versions -- one for horizontal padding and one for both horizontal and vertical padding. Resize the browser to see how the elements below respond.
.aplos-container
element..aplos-4side-container
element.Content Grid
The content grid is an alternative way to layout content similar to the Bootstrap grid but it doesn't rely on rows and columns. It used the same sizing and gutters to ensure layout consistency, but the usage is slightly different.
The content grid relies on a parent .content-grid
element with any number of direct child .content-grid__item
elements. The child element sizing is parent on the parent grid element and any modifier classes it may have. The default grid is responsive and initially displays 1 item per row and expands to show 2, and 3 items per row as the screen crosses the small
and large
breakpoints respectively.
Below is an example of the default content grid.
Tables
Base Tables
All tables need the base table
class applied to enable default styling.
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 - .table-sm
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 |
Headless Tables - .table-headless
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 |
Borderless Tables - .table-headless
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 |
Buttons
Note: Block level buttons (.btn-block
) have reduced horizontal padding to prevent line wrapping on smaller screens.
Forms
Forms are loosely 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
Use the .row
class to form groups and use the .col-*-*
classes to specify the width of your labels and controls.
Use the .form-group--footer
class on the last form-group containing the form submit button to achieve proper vertical spacing.
Inverted Form
Invisible labels
Add a class of sr-only
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.
Other Form Elements
Custom Forms
Use completely custom form elements to replace browser defaults.
Page Elements
Page Title
Page titles can be used multiple times on the same page. They inherit h1
styles but don't need that tag so you won't run into SEO issues. Use an h1
tag when necessary and use other heading tags for subsequent titles on the page. On mobile, page titles are centered hide any line breaks inside them.
I'm a Page
Title
Page Header
The page header is a hidden element. Use it when you need to output an h1
and optional subtitle for SEO purposes but you don't need it displayed on the page
Iconography
Read more about using, creating, and editing SVG icons in Slate's documentation.
General icons
Social icons
UI Elements
Pagination
Minimal Input
Use inside form.form-inverted
to get the light version for dark backgrounds
Dots
Dots are an alternate UI used primarily for displaying / selecting variant option values. They respond to the single state classe .is-active
.
Use the .dots--tight
modifier for tigher dots.
Use the dot group for a dot selection & label.