Style Guide

Color

Brand Colors

Brand Primary
#005473
Used for primary buttons, links

Brand Secondary
#2C7091
Used for secondary buttons

Brand Tertiary
#8DCEE5
Used for form inputs and typography blocks

Brand Gold
#8DCEE5
Used for buttons on reversed areas

Utility Colors

Brand Red
#E31F26
Used for typography blocks, Error utility

Brand Green
#6D7735
Used for typography blocks, Success utility

Disabled Gray
#929a9e
Used to show disabled buttons and forms

Gray Scale

gray-base

gray-darker

gray-dark

gray

gray-light

gray-lighter

Typography

Header Font Stack
$header-font-stack

'Montserrat', "Arial Black", "Arial Bold", Gadget, sans-serif;

Sub-Header Font Stack
$sub-header-font-stack

'Oswald', "Arial Narrow", Arial, sans-serif;

Body Font Stack
$body-font-stack

'Nunito', "Gill Sans", "Gill Sans MT", Calibri, sans-serif;

H1 Header style

H2 Header style

H3 Header style

H4 Header style

H5 Header style
H6 Header Style

paragraph: Tufulio's mount waterman chinese downhill. Paradise paradise sitzmark lifts white pass kitzb├╝hel silver mountain glen plake. Winter park badger pass scott jay peak tree well silver mountain tuck it apres ski mount shasta baker mountain powder stash chinese downhill. Boreal rambo koflach grand targhee snowbasin sun valley the cliff.

$font-size-largeShould be running bigger tires for this

$font-size-smallI can really feel the extra 50 grams on

Link inside body copy, text Default. should look like this

Anchor Tag

Utility Link .utility-link

blockquote: Remember, if you don't do it this year, you'll be one year older when you do.

cite the author
.drop-cap

yo follow my line hey hey check out the. cutting so we were just feeding off each. other feeding off each other. you got a 5 min look a bar are you ready. hey what here's that frame combo chance. yo Patch Kid do you say go oh did you. think know before kazoo dialed whoa. those bombers walk cuz like crap dude. I'm so stoked on these goggles so stoked. on this trail so stoked on water so. stoked on this bar I'm so stoked I swear. I had a chip in here pretty soon right. there it was like. times what time you run it this week. is so gay did you see Sam rocks run. you see my blog shit my way better do


Text Blocks
.text-blox

 Steve was having an epic day. 

 My Inner Voice Told me to. 

 We Believe 
 You dictate your own speed. 

ul.list-arrow
  • 120 mms of pure adrenaline bliss
  • NEW Weagle-inspired air spring adds plushness
  • 27.5 and 29 120mm models with 15QRx110 mm Boost axle option
  • HSC/LSC or WC2 damper
  • XXX model - HCS/LCS with convertible 15mm/20mm axle

ul.disc Full Typography Base Styles Here

Buttons

Forms

Vertical

To make long forms with block elements, add a class of .form-vertical to the parent.

You cannot add a class directly to most liquid form elements (e.g. {% form 'contact' %}). Instead, wrap the form in a div with the class .form-vertical to achieve the same effect.

Use class input-full

Checkboxes

Radios


Horizontal


Custom Form Style


Invisible Labels

Add a class of hidden-label to a label to hide it, while keeping it accessible to screen readers. Use the placeholder attribute as your visible label.


Input Groups

Notes and Errors

This is a standard note
This is a success message

This is an error message.

  • Bullets can offer more insight to the error

Horizontal Rules

Default

Invisible

hr.hr--clear


Small

hr.hr--small


Iconography

Timber offers a basic icon font for social and payment icons. Import assets/icons.json into IcoMoon to make any changes to the set. These icons are bulletproof, meaning they can have text fallbacks when @font-face isn't supported.

Payment Icons - Shopify
  • Amazon Payments
  • American Express
  • Bitcoin
  • Cirrus
  • Dankort
  • Diners Club
  • Discover
  • Dogecoin
  • Dwolla
  • Forbrugsforeningen
  • Interac
  • JCB
  • Laser
  • Litecoin
  • Maestro
  • Master
  • Paypal
  • Solo
  • stripe
  • switch
  • Visa
Social Icons - Shopify
  • Tumblr
  • Vimeo
  • YouTube
  • Google
  • Twitter
  • Facebook
  • Pinterest
  • Instagram
  • Fancy
  • RSS
General Icons / Icomoon
  • icon-search2
  • icon-arrow-up
  • icon-arrow-up4
  • icon-arrow-right
  • icon-arrow-right4
  • icon-arrow-down
  • icon-arrow-down4
  • icon-arrow-left
  • icon-arrow-left4
  • icon-arrow-right5
  • icon-select-arrows
  • icon-ruler
  • icon-shopping-cart
  • icon-user
  <div class="icon-fallback-text">
    <span class="icon icon-amazon_payments"></span>
    <span class="fallback-text">Amazon Payments</span>
  </div>

Grid

This grid is based on csswizardry grids, though with some slight modifications. Built with Sass, the grid is fully integrated into your timber.scss.liquid stylesheet and has no external dependencies. Helper classes are generated by custom functions added to default grid Sass. Class names are created based on the $breakpoints variable in timber.scss.liquid.

1

2.1

2.2

2.3

2.4

2.5

2.6

3.1

3.2

3.3

3.4

3.5

3.6

3.7