ferris-ds 🎡

Design system for WBEZ.org

Version: 6.0.2

GitHub data updated: Jan 29, 2020

Utilities

Helper overrides for various utilities. V2 will use prefixes of .l-, .has-, .is-

Utilities > Background color

Background color

Set the background-color of an element.

has-bg-<color>
Standalone  
.has-bg-black
Example

black background color

.has-bg-black-off
Example

black-off background color

ferris-ds  1 
.has-bg-white
Example

white background color

ferris-ds  2 
.has-bg-white-off
Example

white off background color

ferris-ds  2 
.has-bg-gray
Example

gray background color

ferris-ds  1 
.has-bg-gray-light
Example

gray-light background color

ferris-ds  2 
.has-bg-gray-dark
Example

gray-dark background color

.has-bg-red
Example

red background color

ferris-ds  4 
.has-bg-red-dark
Example

red dark background color

.has-bg-error
Example

error background color

.has-bg-success
Example

success background color

.has-bg-facebook
Example

facebook background color

ferris-ds  2 
.has-bg-twitter
Example

twitter background color

ferris-ds  1 
.has-bg-instagram
Example

instagram background color

.has-bg-youtube
Example

youtube background color

.has-bg-feedburner
Example

feedburner background color

.has-bg-inherit
Example

currentColor background color

Utilities > Background color:hover

Background color:hover

Set the background-color of an element.

has-bg-hover-<color>
Standalone  
.has-bg-hover-black
Hover me

black background color

.has-bg-hover-black-off
Hover me

black-off background color

.has-bg-hover-white
Hover me

white background color

.has-bg-hover-white-off
Hover me

white off background color

.has-bg-hover-gray
Hover me

gray background color

.has-bg-hover-gray-light
Hover me

gray-light background color

.has-bg-hover-gray-dark
Hover me

gray-dark background color

.has-bg-hover-red
Hover me

red background color

.has-bg-hover-red-dark
Hover me

red dark background color

.has-bg-hover-error
Hover me

error background color

.has-bg-hover-success
Hover me

success background color

.has-bg-hover-facebook
Hover me

facebook background color

ferris-ds  1 
.has-bg-hover-twitter
Hover me

twitter background color

ferris-ds  1 
.has-bg-hover-instagram
Hover me

instagram background color

ferris-ds  1 
.has-bg-hover-youtube
Hover me

youtube background color

ferris-ds  1 
.has-bg-hover-feedburner
Hover me

feedburner background color

ferris-ds  1 
.has-bg-hover-inherit
Hover me

currentColor background color

Utilities > Box shadow

Box shadow

Add a thin, blurred box shadow to any element

.has-box-shadow
Standalone 
HTML Example 
<button class="c-button has-bg-white has-box-shadow">I am a button</button>
Utilities > Display

Display

Todo: Display this page as a table.

d-<display>
Standalone  
.d-block
Lorem ipsum dolor sit amet.

ferris-ds  2
www.wbez.org  1 
.d-inline
Lorem ipsum dolor sit amet.

.d-inline-block
Lorem ipsum dolor sit amet.

www.wbez.org  1 
.d-flex
Lorem ipsum dolor sit amet.

.d-inline-flex
Lorem ipsum dolor sit amet.

Utilities > Hairline

Hairline Experimental

Experimental: Accent element for adding separation to text.

has-hairline
Standalone  
.has-hairline-top
Lorem ipsum dolor sit amet.

Adds hairline top

.has-hairline-right
Lorem ipsum dolor sit amet.

Adds hairline right

.has-hairline-bottom
Lorem ipsum dolor sit amet.

Adds hairline bottom

.has-hairline-left
Lorem ipsum dolor sit amet.

Adds hairline left

Utilities > Hidden

Hidden

Contain !important flags to override other display rules.

is-hidden-<specifier>
Standalone  
.is-hidden

Hide always

www.wbez.org  1 
.is-hidden-print
is-hidden-print: Resize to see me appear/disappear

Hide from print previews

.is-hidden-from-bp-xs
is-hidden-from-bp-xs: Resize to see me appear/disappear

Hide from bp-xs onward

.is-hidden-from-bp-s
is-hidden-from-bp-s: Resize to see me appear/disappear

Hide from bp-s onward

.is-hidden-from-bp-m
is-hidden-from-bp-m: Resize to see me appear/disappear

Hide from bp-m onward

ferris-ds  1 
.is-hidden-from-bp-l
is-hidden-from-bp-l: Resize to see me appear/disappear

Hide from bp-l onward

www.wbez.org  1
ferris-ds  1 
.is-hidden-from-bp-xl
is-hidden-from-bp-xl: Resize to see me appear/disappear

Hide from bp-xl onward

.is-hidden-from-bp-xxl
is-hidden-from-bp-xxl: Resize to see me appear/disappear

Hide from bp-xxl onward

.is-hidden-from-bp-default
is-hidden-from-bp-default: Resize to see me appear/disappear

Hide from bp-default onward

.is-hidden-until-bp-xs
is-hidden-until-bp-xs: Resize to see me appear/disappear

Hide until bp-xs

.is-hidden-until-bp-s
is-hidden-until-bp-s: Resize to see me appear/disappear

Hide until bp-s

.is-hidden-until-bp-m
is-hidden-until-bp-m: Resize to see me appear/disappear

Hide until bp-m

ferris-ds  1 
.is-hidden-until-bp-l
is-hidden-until-bp-l: Resize to see me appear/disappear

Hide until bp-l

www.wbez.org  2
ferris-ds  1 
.is-hidden-until-bp-xl
is-hidden-until-bp-xl: Resize to see me appear/disappear

Hide until bp-xl

.is-hidden-until-bp-xxl
is-hidden-until-bp-xxl: Resize to see me appear/disappear

Hide until bp-xxl

.is-hidden-until-bp-default
is-hidden-until-bp-default: Resize to see me appear/disappear

Hide until bp-default

.is-transparent
is-transparent: Resize to see me appear/disappear

Removes opacity. (Use this to fade elements out.)

Utilities > Notch

Notch

Accent element for adding separation to text.

www.wbez.org  1 
.has-notch
Standalone 
HTML Example 
<div class="has-notch {{ className }} has-bg-red"></div>
.-short

Shorter in width and height

.-thin

Shorter in height. Used in footer

.-full

Stretches to full width

.-w-100

Stretches to 100px

www.wbez.org  1 
.-centered

Centers the notch

www.wbez.org  1
Utilities > Notch

Notch

Accent element for adding separation to text, applied via pseudoelement.

.has-notch-before
Standalone 
HTML Example 
<div class="has-notch-before {{ className }}"></div>
.-short

Shorter in width and height

.-thin

Shorter in height. Used in footer

.-full

Stretches to full width

.-w-100

Stretches to 100px

.-centered

Centers the notch

Utilities > Screen reader

Screen reader

Copied from https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html

Utilities > Spacing

Spacing

Shorthand margin and padding utility classes, based on Bootstrap's spacing utilities. The classes are named using the format .{property}{sides}-{size}.

Where property is one of:

  • m - for classes that set margin
  • p - for classes that set padding

Where sides is one of:

  • blank - set margin or padding on all 4 sides
  • x - set both *-left and *-right
  • y - set both *-top and *-bottom
  • t - set *-top
  • b - set *-bottom
  • r - set *-right
  • l - set *-left

Where size is one of our size units.

Some illustrative examples:

.mt-0 {
  margin-top: 0;
}

.mx-xs {
  margin-left: $size-xs;
  margin-right: $size-xs;
}

.p-giant {
  padding: $size-giant;
}

Additionally, we include an .mx-auto class, which is the same as margin-left: auto; margin-right: auto;.

Utilities > Text color

Text color

Set the color of text.

has-text-<color>
Standalone  
.has-text-black

Example

black text color

.has-text-black-off

Example

black-off text color

.has-text-white

Example

white text color

ferris-ds  2
www.wbez.org  4 
.has-text-white-off

Example

white off text color

.has-text-gray

Example

gray text color

ferris-ds  2
www.wbez.org  3 
.has-text-gray-light

Example

gray-light text color

ferris-ds  2
www.wbez.org  1 
.has-text-gray-dark

Example

gray-dark text color

ferris-ds  3 
.has-text-red

Example

red text color

ferris-ds  2 
.has-text-red-dark

Example

red dark text color

.has-text-error

Example

error text color

ferris-ds  2 
.has-text-success

Example

success text color

.has-text-facebook

Example

facebook text color

ferris-ds  2 
.has-text-twitter

Example

twitter text color

ferris-ds  1 
.has-text-instagram

Example

instagram text color

.has-text-youtube

Example

youtube text color

.has-text-feedburner

Example

feedburner text color

.has-text-inherit

Example

currentColor text color

www.wbez.org  2
Utilities > Text color:hover

Text color:hover

Set the color of text on hover.

has-text-hover-<color>
Standalone  
.has-text-hover-black

Hover me

black text color

.has-text-hover-black-off

Hover me

black-off text color

.has-text-hover-white

Hover me

white text color

.has-text-hover-white-off

Hover me

white off text color

.has-text-hover-gray

Hover me

gray text color

ferris-ds  1 
.has-text-hover-gray-light

Hover me

gray-light text color

.has-text-hover-gray-dark

Hover me

gray-dark text color

.has-text-hover-red

Hover me

red text color

ferris-ds  1 
.has-text-hover-red-dark

Hover me

red dark text color

.has-text-hover-error

Hover me

error text color

.has-text-hover-success

Hover me

success text color

.has-text-hover-facebook

Hover me

facebook text color

ferris-ds  2
www.wbez.org  1 
.has-text-hover-twitter

Hover me

twitter text color

ferris-ds  1
www.wbez.org  1 
.has-text-hover-instagram

Hover me

instagram text color

.has-text-hover-youtube

Hover me

youtube text color

.has-text-hover-feedburner

Hover me

feedburner text color

.has-text-hover-inherit

Hover me

currentColor text color

Utilities > Vertical bar

Vertical bar

Accent element for distinguishing a block of text. Used on story summaries, pullquotes, and membership CTA.

.has-vert-bar
Standalone 

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores incidunt vel rerum deserunt debitis voluptas, omnis dignissimos, doloribus saepe quae itaque! Consequuntur et eveniet fugit in veritatis quos ver incidunt.

HTML Example 
<p class="has-vert-bar {{ className }} has-text-yellow"><span class="has-text-gray-dark">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores incidunt vel rerum deserunt debitis voluptas, omnis dignissimos, doloribus saepe quae itaque! Consequuntur et eveniet fugit in veritatis quos ver incidunt.</span></p>
.-thin

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores incidunt vel rerum deserunt debitis voluptas, omnis dignissimos, doloribus saepe quae itaque! Consequuntur et eveniet fugit in veritatis quos ver incidunt.

Used in membership CTA callout on stories

.-padded-l

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores incidunt vel rerum deserunt debitis voluptas, omnis dignissimos, doloribus saepe quae itaque! Consequuntur et eveniet fugit in veritatis quos ver incidunt.

Used in pullquotes

.-padded-xxl

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores incidunt vel rerum deserunt debitis voluptas, omnis dignissimos, doloribus saepe quae itaque! Consequuntur et eveniet fugit in veritatis quos ver incidunt.

Used in membership CTA callout on stories

.-from-bp-s

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores incidunt vel rerum deserunt debitis voluptas, omnis dignissimos, doloribus saepe quae itaque! Consequuntur et eveniet fugit in veritatis quos ver incidunt.

Resets styling on mobile