Style Guide
Colors
Brand Colors
Brand Primary
.bg-primary
$primary: #92D3CA;
Brand Primary
.bg-primary-light
$primary: 4FFFDD;
Brand Secondary
.bg-secondary
$secondary: #E45F00;
Brand Info
.bg-info
$info: #43A090;
Brand Success
.bg-success
$success: #739E11;
Brand Danger
.bg-danger
$danger: #B34700;
Brand Warning
.bg-warning
$warning: #C9C016;
Grays
Brand Light
.bg-light
Brand Dark
.bg-dark
Brand White
.bg-white
Brand Transparent
.bg-transparent
Typography
PT Sans
.font-family-sans-serif
$font-family-sans-serif
$font-family-base
Used for:
Body Copy / Base Font Family
PT Sans Italics
.font-family-sans-serif .font-italic
Used for:
Italics font glyphs are loaded
Core Sans D 55 Bold
.headings-font-family
$headings-font-family
Used for:
Headings
Core Sans D 35 Regular
.subheadings-font-family
$subheadings-font-family
Used for:
Sub Headings
Links
Headings
h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
h6. Bootstrap heading
Display Headings
Display 1
.display-1
Display 2
.display-2
Display 3
.display-3
Display 4
.display-4
Heading Light
h1.font-weight-light
Heading Light
h2.font-weight-light
Heading Light
h3.font-weight-light
Heading Extended
h4.heading-extended
Paragraph Styles
Lead
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
.lead
Blockquote
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Links
Text LinkDuis mollis, est non commodo luctus. Link In Paragraph Integer posuere erat a ante.
Font Sizing
Font size base 16px
$font-size-base
Font size extra small 12px
$font-size-xs
Font size small 14px
$font-size-sm
Font size large 18px
$font-size-lg
Font size extra large 24px
$font-size-xl
Reversed
use he class .reversed on the parent element to reverse a section
h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
h6. Bootstrap heading
Display Headings
Display 1
.display-1
Display 2
.display-2
Display 3
.display-3
Display 4
.display-4
Heading Light
h1.font-weight-light
Heading Light
h2.font-weight-light
Heading Light
h3.font-weight-light
Heading Extended
h4.heading-extended
Paragraph Styles
Lead
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
.lead
Blockquote
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
-- Attribution
Links
Text LinkDuis mollis, est non commodo luctus. Link In Paragraph Integer posuere erat a ante.
Font Sizing
Font size base 16px
$font-size-base
Font size extra small 12px
$font-size-xs
Font size small 14px
$font-size-sm
Font size large 18px
$font-size-lg
Font size extra large 24px
$font-size-xl
Iconography
Slate SVG icons >
Add SVG files to assets/SVG with 'icon-' prefix to access in Liquid templates
{ % include 'icon-cart' % }
BOTE Custom Icons
Payment icons
Social icons
General icons
Iconography
Slate SVG icons >
Add SVG files to assets/SVG with 'icon-' prefix to access in Liquid templates
{ % include 'icon-cart' % }
BOTE Custom Icons
Payment icons
Social icons
General icons
Images
Simple Responsive Image
<img src="..." class="img-fluid" alt="Responsive image">
Picture Tag
Best used for art directing image sizes across breakpoints. Example: have a portrait image for portait devices and landscape images for landscape devices.
<picture>
<source media="(min-width: 1440px)" srcset="http://via.placeholder.com/2048x960" type="image/svg+xml">
<source media="(min-width: 768px)" srcset="http://via.placeholder.com/1024x640" type="image/svg+xml">
<source media="(min-width: 375px)" srcset="http://via.placeholder.com/640x960" type="image/svg+xml">
<img src="http://via.placeholder.com/320x640" class="img-fluid" alt="...">
</picture>
Slate Responsive Image
{ % include 'responsive-image' with
image: featured_image,
image_class: "css-class",
wrapper_class: "wrapper-css-class",
max_width: 700,
max_height: 800
% }
Slate Responsive Background Image
<div class="lazyload" data-bgset="{ % include 'responsive-bg-image', image: article.image % }"></div>
Figures
Forms
Use the .form-column
class to wrap your <form>
Inline Form
Large
Normal
Small
Form Validation
Forms
Use the .form-column
class to wrap your <form>
Inline Form
Large
Normal
Small
Form Validation
Tables
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |