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

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 Link
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.

Type styles
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
ul (default)
  • One
  • Two
  • Three
  • Four
Numeric bullet ol (default)
  1. One
  2. Two
  3. Three
  4. Four
Child lists (to match the RTE styles)
  • One
  • Two
  • Three, with child list
    • First sub item
    • Second sub item
    • Third sub item, with child list
      • Third level item
      • Another third level item
  • Four
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
      1. Third level item
      2. 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
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
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.


I'm text contained in a normal .aplos-container element.


I'm text contained in a .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.

Grid item 1
Grid item 2
Grid item 3
Grid item 4
Grid item 5
Grid item 6

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.

Primary button Primary Reverse button Primary Alt button Primary White button Secondary button Tertiary button
Light Outline button
Primary button (Disabled) Primary Reverse button (Disabled) Primary Alt button (Disabled) Primary White button (Disabled) Secondary button (Disabled) Tertiary button (Disabled)
Light Outline button (Disabled)
Primary Tall button Primary Reverse Tall button Primary Alt Tall button Primary White Tall button Secondary Tall button Tertiary Tall button
Link Button

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
Example block-level help text here.
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.

1
2
4


Use the .dots--tight modifier for tigher dots.

1
2
4


Use the dot group for a dot selection & label.

1
2
4
Alert
I'm an alert