FFTF Styleguide

Base

Colors

.fill-white

.fill-grey-light

.fill-grey

.fill-grey-medium

.fill-grey-dark

.fill-black

.fill-brand

.fill-brand-dark

.fill-blue-light

.fill-success-light

.fill-success

.fill-warn-light

.fill-warn

Grid

Default Grid Columns

med-hide lrg-c4

sml-c24 lrg-c16

med-hide lrg-c4

Centered Grid Column

sml-c24 lrg-c16 grid-center

Large: 2/3 and 1/3, Medium: 1/2 and 1/2, Small: full-width (optional sticky footer)

sml-c24 med-c12 lrg-c16

sml-c24 med-c12 lrg-c8

Reponsive row overrides with sml-, med-, and lrg- classes

sml-c12 lrg-c4

sml-c12 lrg-c20

sml-c12 lrg-c8

sml-c12 lrg-c8

sml-c24 lrg-c8

sml-c12 med-c8 lrg-c4

sml-c12 med-c8 lrg-c4

sml-c12 med-c8 lrg-c4

sml-c12 med-c8 lrg-c4

sml-c12 med-c8 lrg-c4

sml-c12 med-c8 lrg-c4

Nesting Columns in Columns. Make sure to use rows!

sml-c12

sml-c12

sml-c12

sml-c12

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Typography

Default

This is some text in bold and emphasized, with a link.

.text-loud

This is some text in bold and emphasized, with a link.

.text-center

This is some text in bold and emphasized, with a link.

.text-right

This is some text in bold and emphasized, with a link.

.text-left

This is some text in bold and emphasized, with a link.

.text-white

This is some text in bold and emphasized, with a link.

.text-grey

This is some text in bold and emphasized, with a link.

.text-brand

This is some text in bold and emphasized, with a link.

.text-warn

This is some text in bold and emphasized, with a link.

.text-success

This is some text in bold and emphasized, with a link.

Typography - Tags

Tagged: #Tag

Tagged: #Tag

Spacing

NOTE: There are more options than those presented here. Please see: _spacing.scss.

Spacing - Padding

Default

Element with padding

.sml-pad-half

Element with padding

.sml-pad-1

Element with padding

.sml-pad-2

Element with padding

.sml-pad-3

Element with padding

.sml-pad-4

Element with padding

.sml-pad-x1

Element with padding

.sml-pad-x2

Element with padding

.sml-pad-y1

Element with padding

.sml-pad-y2

Element with padding

.sml-pad-y4

Element with padding

.sml-pad-y6

Element with padding

Spacing - Margin

Default

Element with margin

.sml-push-y-half

Element with margin

.sml-push-y1

Element with margin

.sml-push-y2

Element with margin

.sml-push-y3

Element with margin

.sml-push-y4

Element with margin

.sml-push-y5

Element with margin

.sml-push-y6

Element with margin

Modifiers

NOTE: There are more options than those presented here. Please see: _modifiers.scss.

Default

Element with modifier and a link

.fill-white

Element with modifier and a link

.fill-grey-light

Element with modifier and a link

.fill-grey

Element with modifier and a link

.fill-grey-medium

Element with modifier and a link

.fill-grey-dark

Element with modifier and a link

.fill-black

Element with modifier and a link

.fill-brand

Element with modifier and a link

.fill-blue-light

Element with modifier and a link

.fill-success-light

Element with modifier and a link

.fill-success

Element with modifier and a link

.fill-warn-light

Element with modifier and a link

.fill-warn

Element with modifier and a link

.fill-image

Element with modifier and a link

.fill-grid

Element with modifier and a link

.fill-red-rect

Element with modifier and a link

.fill-blue-light-rect

Element with modifier and a link

.fill-blue-light-rect.fill-blue-light-rect-widest

Element with modifier and a link

.fill-blue-light-rect.fill-blue-light-rect-left

Element with modifier and a link

.fill-blue-rect

Element with modifier and a link

.fill-grey-light-rect

Element with modifier and a link

.fill-grey-light-rect.fill-grey-light-rect-short

Element with modifier and a link

.fill-grey-light-rect.fill-grey-light-rect-right

Element with modifier and a link

.fill-grey-dark-rect

Element with modifier and a link

.with-border

Element with modifier and a link

.with-border-bottom

Element with modifier and a link

.with-border-bottom-solid

Element with modifier and a link

.with-border-top-solid-light

Element with modifier and a link

.with-border-top

Element with modifier and a link

.with-border.is-rounded

Element with modifier and a link

.with-border.is-rounded-top

Element with modifier and a link

.with-border.is-rounded-bottom

Element with modifier and a link

Buttons

Default

Button Link

.btn-light

Button Link

.btn-arrow-right

Button Link

.btn-arrow-left

Button Link

.btn-success

Button Link

.btn-success.btn-arrow-right

Button Link

.btn-block

Button Link

.btn-sml

Button Link

.btn-twitter

Button Link

.btn-facebook

Button Link

.btn-twitter.btn-round

Button Link

.btn-facebook.btn-round

Button Link

.btn-disabled

Button Link

Forms

Is this a yes or no question?

Lists

Default

.bullets

.numbers

.hoz

Lists > Subnav

Icons

Icons:

email icon chat icon heart icon question icon donation icon edit icon check icon call icon warning icon map calendar map pin
menu icon

Arrows:

arrow left dark arrow NE dark arrow right dark
arrow left light arrow NE light arrow right light

Social:

facebook logo twitter logo medium logo tumblr logo youtube logo vimeo logo

Blocks

NOTE: This section is for styles often used together to build common reusable blocks.

Blocks > Content Column

Use any icon

Section Title

Content: lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet.