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

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

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

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
      1. Third level item
      2. 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
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6

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

Example block-level help text here.

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.

Miscellaneous elements

Horizontal Rules

Default hr


Alerts

I'm a success alert
I'm a danger alert

Iconography



    Wrap your icons in element with .arrow

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.