Style
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
Colors
Greyscale
$color-white
#fff
$color-whiteSmoke
#eaeaea
$color-lightGrey
#d9d9d6
$color-grey
#737272
$color-darkGrey
#404040
$color-black
#000
Brand Colors
$color-lightBlue
#96b3d1
$color-blue
#2f4066
$color-lightRed
#ee383d
$color-red
#ae1322
$color-green
#06A12F
Typography
Heading one
Heading two
Heading three
Heading four
Heading five
Heading six
RTE headings
RTE heading one
RTE heading two
RTE heading three
RTE heading four
RTE heading five
RTE heading six
Paragraphs
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.
Suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
Type styles
- Strong
- Emphasis
- Inline link
- Strike
- Sup
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) |
|
Unstyled |
|
Grid
Please see the official Bootstrap grid documentation for a complete introduction to the grid system
Containers
This site requires a containing element to wrap site contents and house our grid system. You may choose one of two containers. Note that, due to padding
and more, neither container is nestable.
Use .container
for a responsive fixed width container.
<div class="container"> ... </div>
Use .container-fluid
for a full width container, spanning the entire width of your viewport.
<div class="container-fluid"> ... </div>
Media Queries
We use the following media queries in our SCSS files to create the key breakpoints in our grid system.
/* Extra small devices (phones, less than 768px) */ /* No media query since this is the default */ /* Small devices (tablets, 768px and up) */ @media (min-width: $screen-sm-min) { ... } /* Medium devices (desktops, 992px and up) */ @media (min-width: $screen-md-min) { ... } /* Large devices (large desktops, 1200px and up) */ @media (min-width: $screen-lg-min) { ... } /* Extra Large devices (Wide screens, 1400px and up) */ @media (min-width: $screen-xl-min) { ... }
We occasionally expand on these media queries to include a max-width
to limit CSS to a narrower set of devices.
@media (max-width: $screen-xs-max) { ... } @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { ... } @media (min-width: $screen-md-min) and (max-width: $screen-md-max) { ... } @media (min-width: $screen-lg-min) and (max-width: $screen-lg-max) { ... }
Grid Options
Extra small devices Phones (<768px) | Small devices Tablets (≥768px) | Medium devices Desktops (≥992px) | Large devices Desktops (≥1200px) | Extra Large devices Desktops (≥1400px) | |
---|---|---|---|---|---|
Grid behavior | Horizontal at all times | Collapsed to start, horizontal above breakpoints | |||
Container width | None (auto) | 750px | 970px | 1170px | 1370px |
Class prefix |
.col-xs-
|
.col-sm-
|
.col-md-
|
.col-lg-
|
.col-xl-
|
# of columns | 12 | ||||
Column width | Auto | ~62px | ~81px | ~97px | ~114px |
Gutter width | 30px (15px on each side of a column) | ||||
Nestable | Yes | ||||
Offsets | Yes | ||||
Column ordering | Yes |
Responsive tables
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 |
#1005 | December 26, 2015 | Authorized | Unfulfilled | €47.03 |
#1006 | December 27, 2015 | Authorized | Unfulfilled | €48.03 |
Forms
input
, textarea
, and select
elements with .form-control
are set to width: 100%;
by default. Wrap labels and controls in .form-group
for optimum spacing.