Puddle Guidelines

View On GitHub View Style Patterns View Guidelines

Alert Boxes

This is a standard alert-box.

<div data-alert class="alert-box">
  <p>This is a standard alert-box.</p>
  <a href="javascript:void(0)" class="close"><span class="icn cw-icon-remove"></span></a>
</div>

This is a success alert-box.

<div data-alert class="alert-box success">
  <p>This is a success alert-box.</p>
  <a href="javascript:void(0)" class="close"><span class="icn cw-icon-remove"></span></a>
</div>

This is an alert alert-box.

<div data-alert class="alert-box alert">
  <p>This is an alert alert-box.</p>
  <a href="javascript:void(0)" class="close"><span class="icn cw-icon-remove"></span></a>
</div>

This is an alert alert-box with a link.

<div data-alert class="alert-box alert">
  <p>This is an alert alert-box <a href="#">with a link</a>.</p>
  <a href="javascript:void(0)" class="close"><span class="icn cw-icon-remove"></span></a>
</div>

Buttons (Payment)

<div class="payment-buttons">
  <button class="button payment">Give by <i class="icn credit-card"></i></button>
  <button class="button payment">Give by <i class="icn paypal"></i></button>
</div>
<div class="payment-buttons">
  <button class="button payment cw-green">Give by <i class="icn credit-card"></i></button>
  <button class="button payment cw-green">Give by <i class="icn paypal"></i></button>
</div>
<div class="payment-buttons">
  <button class="button payment large">Give by <i class="icn credit-card"></i></button>
  <button class="button payment large">Give by <i class="icn paypal"></i></button>
</div>

Buttons (Toggle)

Amount Time 
<div class="toggle-buttons">
  <a href="javascript:void(0)" class="active">Amount</a>
  <a href="javascript:void(0)">Time</a>
</div>

Buttons

<button class="button">Button</button>

Button States

<button class="button" disabled="disabled">Disabled Button</button>

Button Sizes

<button class="button small">Button</button>
Additional Sizes

<button class="button large">Button</button>
<button class="button expand">Button</button>

Button Colors

<button class="button cw-black">Black Button</button>
Additional Colors

<button class="button cw-black">Black Button</button>
<button class="button cw-yellow">Black Button</button>
<button class="button cw-blue">Black Button</button>
<button class="button cw-green">Black Button</button>
<button class="button cw-red">Black Button</button>
<button class="button cw-teal">Black Button</button>
<button class="button cw-orange">Black Button</button>
<button class="button cw-purple">Black Button</button>

Button Greyscales

<button class="button grey-10">Grey 10 Button</button>
Additional Greyscales

<button class="button grey-20">Black Button</button>
<button class="button grey-30">Black Button</button>
<button class="button grey-40">Black Button</button>
<button class="button grey-50">Black Button</button>
<button class="button grey-60">Black Button</button>
<button class="button grey-70">Black Button</button>

Button Outlines

<button class="button outline-blue">Outline Blue Button</button>
Additional Outlines

<button class="button outline-green">Outline Green Button</button>
<button class="button outline-red">Outline Red Button</button>
<button class="button outline-black">Outline Black Button</button>
<button class="button outline-white">Outline White Button</button>

Components

Side By Side Containers

This is on the left or the top.

And it is really cute.

And sometimes it has a button.

<div class="side-by-side">
  <div class="side">
    <div class="inner">
      <h1 class='h40' >This is on the left or the top.</h1>
      <p>And it is really cute.</p>
      <p>And sometimes it has a button.</p>
      <button class="button">Like this</button>
    </div>
  </div>
  <!-- when using .cover-image, you only have to specify the background-image and you probably have to override the min-height -->
  <div class="side cover-image" style="background-image: url('https://placekitten.com/400/300');" >
  </div>
</div>

This is really important

but the image, not so much.

So we hide it on mobile. 

<div class="side-by-side">
  <div class="side">
    <div class="inner">
      <h1 class='h40' >This is really important</h1>
      <p> but the image, not so much. </p>
      <p> So we hide it on mobile. </p>
    </div>
  </div>
  <div class="side cover-image show-for-medium-up" style="background-image: url('https://placekitten.com/401/300');">
  </div>
</div>

Form Elements

Text Boxes

$ USD
$ USD
$ USD
Campaign goal must be a valid donation amount such as 1000.00
Please enter a valid email
Please enter a valid email 
<form>
  <div class="input-wrapper">
    <label>Campaign Name</label>
    <input type="text" placeholder="Campaign Name" />
  </div>
  <div class="input-wrapper">
    <div class="lh">
      <label for="campaign_goal_amount">Campaign Goal</label>
      <div class="input-field-container">
        <span class="preinput">$</span>
        <input id="campaign_goal_amount" name="campaign[goal_amount]" required="required" step="0.01" type="number" value="1000.00">
        <span class="postinput">USD</span>
      </div>
    </div>
  </div>
  <div class="input-wrapper">
    <label for="campaign_goal_amount">Campaign Goal</label>
    <div class="input-field-container">
      <span class="preinput">$</span>
      <input id="campaign_goal_amount" name="campaign[goal_amount]" required="required" step="0.01" type="number" value="1000.00">
      <span class="postinput">USD</span>
    </div>
  </div>
  <div class="input-wrapper">
    <label for="campaign_goal_amount">Campaign Goal (error triggered)</label>
    <div class="input-field-container error">
      <span class="preinput">$</span>
      <input id="campaign_goal_amount" name="campaign[goal_amount]" required="required" step="0.01" type="number" value="1000.00">
      <span class="postinput">USD</span>
    </div>
    <small class="error">Campaign goal must be a valid donation amount such as 1000.00</small>
  </div>
  <div class="input-wrapper error">
    <label>Label</label>
    <input type="text" placeholder="Email" />
    <small class="error">Please enter a valid email</small>
  </div>
  <div class="input-wrapper">
    <label>Disabled</label>
    <input type="text" placeholder="Disabled" disabled />
  </div>
  <div class="input-wrapper lii">
    <label>Label</label>
    <input type="text" placeholder="Label In Input" />
    <small class="error">Please enter a valid email</small>
  </div>
  <div class="input-wrapper">
    <label>Read-only</label>
    <input type="text" readonly value="Can't Edit" />
  </div>
</form>

Text Box Combos

Invalid entry 
<form>
  <div class="input-wrapper">
    <div class="row collapse input-trio">
      <div class="columns">
        <label>Day</label>
        <input type="text" placeholder="DD" />
      </div>
       <div class="columns">
         <label>Month</label>
        <input type="text" placeholder="MM" />
      </div>
      <div class="columns">
        <label>Year</label>
        <input type="text" placeholder="YYYY" />
      </div>
    </div>
  </div>
  <div class="row collapse input-pair">
    <div class="columns">
      <label>First</label>
      <input type="text" placeholder="First" />
    </div>
    <div class="columns">
      <label>Last</label>
      <input type="text" placeholder="Last" />
      <small class="error">Invalid entry</small>
    </div>
  </div>
</form>

Select Boxes

<form>
  <div class="input-wrapper">
    <label>Select Box</label>
    <select>
      <option value="husker">Husker</option>
      <option value="starbuck">Starbuck</option>
      <option value="hotdog">Hot Dog</option>
      <option value="apollo">Apollo</option>
    </select>
  </div>
  <div class="input-wrapper lii">
    <label>Multiple Select Box</label>
    <select multiple>
      <option value="husker">Husker</option>
      <option value="starbuck">Starbuck</option>
      <option value="hotdog">Hot Dog</option>
      <option value="apollo">Apollo</option>
    </select>
  </div>
</form>

Text Areas

<form>
  <div class="input-wrapper">
    <label>Headline</label>
    <textarea placeholder="Write a headline here."></textarea>
  </div>
  <div class="input-wrapper">
    <label>Mission Statement</label>
    <textarea placeholder="Write a mission statement here." rows="14"></textarea>
  </div>
  <div class="input-wrapper lii">
    <label>Textarea</label>
    <textarea placeholder="Label In Input"></textarea>
  </div>
</form>

Radio Buttons and Checkboxes

<form>
  <div class="custom-check">
    <input type="checkbox" id="bar-foo" />
    <label for="bar-foo">I Love Puddle</label>
  </div>
  <div class="custom-check error">
    <input type="checkbox" id="error-check" />
    <label for="error-check">Something is wrong :(</label>
  </div>
  <div class="input-wrapper">
    <div class="custom-check">
      <input type="radio" name="pokemon" value="Red" id="red-foo">
      <label for="red-foo">Red</label>
    </div>
    <div class="custom-check">
      <input type="radio" name="pokemon" value="Blue" id="blue-foo">
      <label for="blue-foo">Blue</label>
    </div>
  </div>
</form>

Switches

<div class="switch-wrapper">
  <label class="label-switch">
    <input type="checkbox" />
    <div class="checkbox"></div>
  </label>
  <label>Some label text</label>
</div>
<div class="switch-wrapper">
  <label class="label-switch small">
    <input type="checkbox" />
    <div class="checkbox"></div>
  </label>
  <label>Some label text</label>
</div>

Grid

large-6 medium-6
large-6 medium-6
large-3 medium-3
large-9 medium-9
small-2 large-4
small-4 large-4
small-6 large-4
small-4 large-4 center 
<div class="row">
    <div class="large-6 medium-6 columns">
      large-6 medium-6
    </div>
    <div class="large-6 medium-6 columns">
      large-6 medium-6
    </div>
  </div>
  <div class="row">
    <div class="large-3 medium-3 columns">
      large-3 medium-3
    </div>
    <div class="large-9 medium-9 columns">
      large-9 medium-9
    </div>
  </div>
  <div class="row">
    <div class="small-2 medium-4 large-4 columns">
      small-2 large-4
    </div>
    <div class="small-4 medium-4 large-4 columns">
      small-4 large-4
    </div>
    <div class="small-6 medium-4 large-4 columns">
      small-6 large-4
    </div>
  </div>
  <div class="row">
    <div class="small-4 medium-4 large-4 center columns">
      small-4 large-4 center
    </div>
  </div>

Icomoon Fonts

Media Queries

This wrapper will update color based on each defined media query step.

Step Media Queries

Use these to step through common device sizes: 480px, 768px, 1024px, and 1280px.

Variable Rendered CSS
$sm @media only screen and (min-width: 480px)
$md @media only screen and (min-width: 768px)
$lg @media only screen and (min-width: 1024px)
$xl @media only screen and (min-width: 1280px)

This wrapper will update color for $xs-only.

This wrapper will update color for $sm-only.

This wrapper will update color for $md-only.

This wrapper will update color for $lg-only.

This wrapper will update color for $xl-only.

Range Media Queries

Use these to select a range between media queries:

  • 480px - 640px
  • 640px - 768px
  • 768px - 1024px
  • 1024px - 1280px
  • 1280px - 1440px
  • 1440px - 9999999px

Note, they will overlap between the upper ranges and lower ranges, so don’t stack usage. They should only be used to select one specific breakpoint.

Variable Rendered CSS
$max-step-one @media only screen and (max-width: 480px)
$only-step-two @media only screen and (max-width: 640px) and (min-width: 480px)
$only-step-two @media only screen and (max-width: 768px) and (min-width: 640px)
$only-step-three @media only screen and (max-width: 1024px) and (min-width: 768px)
$only-step-four @media only screen and (max-width: 1280px) and (min-width: 1024px)
$only-step-five @media only screen and (max-width: 1440px) and (min-width: 1280px)
$only-step-six @media only screen and (max-width: 9999999px) and (min-width: 1440px)

Modals

Text Modal
<div id="modal" class="hidden">
  <h1>Header goes here</h1>
  <p class="serif">Body copy goes here. These modals can be flexible in width and height as needed. The only thing that needs to stay is the 40% black overlay and center-aligned content.</p>
<a href="javascript:void(0)" class="button large">Large</a>
</div>

<a href="#modal" data-modal class="button">Text Modal</a>
Text Modal w/ Title
<div id="title" class="hidden" data-modal-class="title" data-disable-history="true">
  <h1 class="modal-title h30">Header goes here</h1>
  <h1>Header goes here</h1>
  <p class="serif">Body copy goes here. These modals can be flexible in width and height as needed. The only thing that needs to stay is the 40% black overlay and center-aligned content.</p>
  <a href="javascript:void(0)" class="button">Ok</a>
  <a href="#" class="button cw-red" data-close-modal="#title">Cancel</a>
</div>

<a href="#title" data-modal class="button">Text Modal w/ Title</a>

Pagination

<div class="pagination">
  <ul>
    <li class="page-prev"><a href="javascript:void(0)"><span class="cw-icon-angle-left"></span></a></li>
    <li><a href="javascript:void(0)">1</a></li>
    <li><a href="javascript:void(0)">2</a></li>
    <li><a href="javascript:void(0)">3</a></li>
    <li><a href="javascript:void(0)">4</a></li>
    <li><a href="javascript:void(0)">5</a></li>
    <li><a href="javascript:void(0)">6</a></li>
    <li><a href="javascript:void(0)">7</a></li>
    <li class="page-next"><a href="javascript:void(0)"><span class="cw-icon-angle-right"></span></a></li>
  </ul>
</div>
<div class="pagination small">
  <ul>
    <li class="page-prev"><a href="javascript:void(0)"><span class="cw-icon-angle-left"></span></a></li>
    <li><a href="javascript:void(0)">1</a></li>
    <li><a href="javascript:void(0)">2</a></li>
    <li><a href="javascript:void(0)">3</a></li>
    <li><a href="javascript:void(0)">4</a></li>
    <li><a href="javascript:void(0)">5</a></li>
    <li><a href="javascript:void(0)">6</a></li>
    <li><a href="javascript:void(0)">7</a></li>
    <li class="page-next"><a href="javascript:void(0)"><span class="cw-icon-angle-right"></span></a></li>
  </ul>
</div>

Pagination Bubbles

1 2 3 4 

<p class="pagination-bubbles">
  <a href="javascript:void(0)" class="bubble active">1</a>
  <a href="javascript:void(0)" class="bubble">2</a>
  <a href="javascript:void(0)" class="bubble">3</a>
  <a href="javascript:void(0)" class="bubble">4</a>
</p>

Pagination Buttons

<a class="pagination-btn button grey-20 prev" href="#"><i class="icn cw-icon-chevron-left"></i> Previous</a>
<a class="pagination-btn button grey-20 next" href="#">Next <i class="icn cw-icon-chevron-right"></i></a>
<a class="pagination-btn button grey-20 prev small" href="#"><i class="icn cw-icon-chevron-left"></i> Previous</a>
<a class="pagination-btn button grey-20 next small" href="#">Next <i class="icn cw-icon-chevron-right"></i></a>

Panels

This is a panel.

It has an easy to override visual style, and is appropriately subdued.

<div class="panel">
  <h1>This is a panel.</h1>
  <p>It has an easy to override visual style, and is appropriately subdued.</p>
</div>

This is a radius panel.

It has an easy to override visual style, and is appropriately subdued.

<div class="panel radius">
  <h1>This is a radius panel.</h1>
  <p>It has an easy to override visual style, and is appropriately subdued.</p>
</div>

Responsive Video

<div class="video">
  <div class="video-wrapper">
    <iframe src="https://player.vimeo.com/video/122470455?title=0&byline=0&portrait=0" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
  </div>
</div>

Settings

Colors

Variable Hex
$cw-black #333232
$cw-yellow #efd213
$cw-blue #369ff4
$cw-green #59c77f
$cw-teal #8ed4cc
$cw-red #fa575d
$cw-orange #fe813a
$cw-purple #9064bf
$grey-5 #f7f7f7
$grey-10 #f4f5f0
$grey-20 #e9eae4
$grey-30 #dfdfd7
$grey-40 #c1c1ba
$grey-50 #9b9b94
$grey-60 #71716c
$white #fff
$black #000
$color-facebook #3b5998
$color-twitter #55acee

Header Font Sizs

Variable Size
$h10 44px
$h10-large-up 56px
$h20 36px
$h20-large-up 46px
$h30 28px
$h30-large-up 36px
$h35 22px
$h35-large-up 30px
$h40 22px
$h40-large-up 24px
$h50 20px
$h60 $base-font-size (16px)
$h70 14px
$h80 12px
$h10 44px

Paragraph Font Sizes

Variable Size
$p10 22px
$p10-large-up 24px
$p20 18px
$p20-large-up 20px
$p30 $base-font-size (16px)
$p40 14px

Media Queries

These are the most common usages. Open _settings.scss for the full list of options

Mixin Output
@media #{$medium-up}{ } @media only screen and (max-width: 40.063em){ }
@media #{$large-up}{ } @media only screen and (max-width: 64.063em){ }
@media #{$xlarge-up}{ } @media only screen and (max-width: 90.063em){ }
@media #{$xxlarge-up}{ } @media only screen and (max-width: 120.063em){ }

Page Variables

Variable Value Uses / Examples
$image-url "//d2f2byp0zok4br.cloudfront.net/" Need to use our CDN url?
$page-width 980px Have a custom row you want sized to the standard page width?
$global-radius 4px Have a special element? Want our standard border-radius?
$transition-time 150ms Want to animate stuff in consistently?
$topbar-height 58px Need to space out a header the height of the top bar?
$offscreen-text -999em Want to push some text off the screen?
$layer-over-content 100000 Want a layer to go over all the others?

Tables

Striped

Header Cell 1 Header Cell 2 Header Cell 3
Row 1 Cell 1 Row 1 Cell 2 Confirm or Reject
Row 2 Cell 1 Row 2 Cell 2 Confirm or Reject
Row 3 Cell 1 Row 3 Cell 2 Confirm or Reject
Row 4 Cell 1 Row 4 Cell 2 Confirm or Reject 
<table class="tables">
  <thead>
    <tr>
      <th>Header Cell 1</th>
      <th>Header Cell 2</th>
      <th>Header Cell 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1 Cell 1</td>
      <td>Row 1 Cell 2</td>
      <td><a href="#">Confirm</a> or <a href="#">Reject</a></td>
    </tr>
    <tr>
      <td>Row 2 Cell 1</td>
      <td>Row 2 Cell 2</td>
      <td><a href="#">Confirm</a> or <a href="#">Reject</a></td>
    </tr>
    <tr>
      <td>Row 3 Cell 1</td>
      <td>Row 3 Cell 2</td>
      <td><a href="#">Confirm</a> or <a href="#">Reject</a></td>
    </tr>
    <tr>
      <td>Row 4 Cell 1</td>
      <td>Row 4 Cell 2</td>
      <td><a href="#">Confirm</a> or <a href="#">Reject</a></td>
    </tr>
  </tbody>
</table>

Unstriped

Header Cell 1 Header Cell 2 Header Cell 3
Row 1 Cell 1 Row 1 Cell 2 Confirm or Reject
Row 2 Cell 1 Row 2 Cell 2 Confirm or Reject
Row 3 Cell 1 Row 3 Cell 2 Confirm or Reject
Row 4 Cell 1 Row 4 Cell 2 Confirm or Reject 
<table class="tables unstriped">
  <thead>
    <tr>
      <th>Header Cell 1</th>
      <th>Header Cell 2</th>
      <th>Header Cell 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1 Cell 1</td>
      <td>Row 1 Cell 2</td>
      <td><a href="#">Confirm</a> or <a href="#">Reject</a></td>
    </tr>
    <tr>
      <td>Row 2 Cell 1</td>
      <td>Row 2 Cell 2</td>
      <td><a href="#">Confirm</a> or <a href="#">Reject</a></td>
    </tr>
    <tr>
      <td>Row 3 Cell 1</td>
      <td>Row 3 Cell 2</td>
      <td><a href="#">Confirm</a> or <a href="#">Reject</a></td>
    </tr>
    <tr>
      <td>Row 4 Cell 1</td>
      <td>Row 4 Cell 2</td>
      <td><a href="#">Confirm</a> or <a href="#">Reject</a></td>
    </tr>
  </tbody>
</table>

Grid

Header Cell 1 Header Cell 2 Header Cell 3
Row 1 Cell 1 Row 1 Cell 2 Confirm or Reject
Row 2 Cell 1 Row 2 Cell 2 Confirm or Reject
Row 3 Cell 1 Row 3 Cell 2 Confirm or Reject
Row 4 Cell 1 Row 4 Cell 2 Confirm or Reject 
<table class="tables grid">
  <thead>
    <tr>
      <th>Header Cell 1</th>
      <th>Header Cell 2</th>
      <th>Header Cell 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1 Cell 1</td>
      <td>Row 1 Cell 2</td>
      <td><a href="#">Confirm</a> or <a href="#">Reject</a></td>
    </tr>
    <tr>
      <td>Row 2 Cell 1</td>
      <td>Row 2 Cell 2</td>
      <td><a href="#">Confirm</a> or <a href="#">Reject</a></td>
    </tr>
    <tr>
      <td>Row 3 Cell 1</td>
      <td>Row 3 Cell 2</td>
      <td><a href="#">Confirm</a> or <a href="#">Reject</a></td>
    </tr>
    <tr>
      <td>Row 4 Cell 1</td>
      <td>Row 4 Cell 2</td>
      <td><a href="#">Confirm</a> or <a href="#">Reject</a></td>
    </tr>
  </tbody>
</table>

Tooltips

Top hover

Right hover

Bottom hover

Left hover

<p>Top <span class="hint--top" data-hint="Thank you!">hover</span></p>
<p>Right <span class="hint--right" data-hint="Thank you!">hover</span></p>
<p>Bottom <span class="hint--bottom" data-hint="Thank you!">hover</span></p>
<p>Left <span class="hint--left" data-hint="Thank you!">hover</span></p>

Typography

Headlines

H10 Heading

H20 Heading

H30 Heading

H35 Heading

H40 Heading

H50 Heading

H60 Heading

H70 Heading

H80 Heading

<h1 class="h10">H10 Heading</h1>
<h1 class="h20">H20 Heading</h1>
<h1 class="h30">H30 Heading</h1>
<h1 class="h35">H35 Heading</h1>
<h1 class="h40">H40 Heading</h1>
<h1 class="h50">H50 Heading</h1>
<h1 class="h60">H60 Heading</h1>
<h1 class="h70">H70 Heading</h1>
<h1 class="h80">H80 Heading</h1>

Sans Serif Paragraphs

This is a paragraph

P10 Paragraph

P20 Paragraph

P30 Paragraph

P40 Paragraph

<p>This is a paragraph</p>
<p class="p10">P10 Paragraph</p>
<p class="p20">P20 Paragraph</p>
<p class="p30">P30 Paragraph</p>
<p class="p40">P40 Paragraph</p>

Serif Paragraphs

Serif paragraph

P10 Serif Paragraph

P20 Serif Paragraph

P30 Serif Paragraph

P40 Serif Paragraph

<p class="serif">Serif paragraph</p>
<p class="p10 serif">P10 Serif Paragraph</p>
<p class="p20 serif">P20 Serif Paragraph</p>
<p class="p30 serif">P30 Serif Paragraph</p>
<p class="p40 serif">P40 Serif Paragraph</p>
This is a link
<a href="#">This is a link</a>

Lists

  • Puddles
  • of
  • Poodles
  • Makes
  • Tristan
    • Hello
    • My
    • Name
    • Is
    • Inigo
    • Montoya
  • A
  • Happy
  • Boy
<ul>
  <li>Puddles</li>
  <li>of</li>
  <li>Poodles</li>
  <li>Makes</li>
  <li>Tristan</li>
  <ul>
    <li>Hello</li>
    <li>My</li>
    <li>Name</li>
    <li>Is</li>
    <li>Inigo</li>
    <li>Montoya</li>
  </ul>
  <li>A</li>
  <li>Happy</li>
  <li>Boy</li>
</ul>
  • Puddles
  • of
  • Poodles
  • Makes
  • Tristan
  • A
  • Happy
  • Boy
<ul class="no-bullet">
  <li>Puddles</li>
  <li>of</li>
  <li>Poodles</li>
  <li>Makes</li>
  <li>Tristan</li>
  <li>A</li>
  <li>Happy</li>
  <li>Boy</li>
</ul>
  1. Puddles
  2. of
  3. Poodles
  4. Makes
  5. Tristan
  6. A
  7. Happy
  8. Boy
<ol>
  <li>Puddles</li>
  <li>of</li>
  <li>Poodles</li>
  <li>Makes</li>
  <li>Tristan</li>
  <li>A</li>
  <li>Happy</li>
  <li>Boy</li>
</ol>

Font weights

Weight Usage Variable
400 Default font weight $font-weight-normal
500 h1, h2, h3, h4, h5, h6
.strong, <strong>
.button, <button> 		$font-weight-medium
700 Special design elements. $font-weight-bold 
<table class="tables">
  <thead>
    <tr>
      <th>Weight</th>
      <th>Usage</th>
      <th>Variable</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>400</td>
      <td>Default font weight</td>
      <td>$font-weight-normal</td>
    </tr>
    <tr>
      <td>500</td>
      <td>
        h1, h2, h3, h4, h5, h6<br />
        <code>.strong, &lt;strong&gt;</code><br />
        <code>.button, &lt;button&gt;</code>
      </td>
      <td><span style="font-weight: 500;">$font-weight-medium</span></td>
    </tr>
    <tr>
      <td>700</td>
      <td>Special design elements.</td>
      <td><span style="font-weight: 700;">$font-weight-bold</span></td>
    </tr>
  </tbody>
</table>

Additional

This is a emphasized paragraph

<p class="em">This is a emphasized paragraph</p>

This is a strong paragraph

<p class="strong">This is a strong paragraph</p>

This is a centered paragraph

<p class="text-center">This is a centered paragraph</p>

Utility Classes

.no-footer Apply to the <body> to prevent .container from calculating the footer height in the total container height.
.no-transform Apply to the .wrapper to prevent transforms from being used.

VideoBox

A fluid video player that has a custom placeholder image and play button that can track video events and allows for callbacks on ready, play and pause.

<div class="video-box" data-video-box>
  <div class="placeholder">
    <a class="play" data-video="87976714">
      <span class="icn cw-icon-play"></span>
    </a>
  </div>
</div>
Option Default Notes
triggerElement $('.play') element Clickable element that triggers the video to play.
placeholderElement $('.placeholder') element Placeholder image for the video. Hides once the video loads.
videoElement element Iframe element for the video. If not set, an iframe will be appended to the container element.  
onVideoReady function Runs when Vimeo returns that the video is ready to play.  
onVideoPause function Runs when Vimeo returns that the video has paused.  
onVideoFinish function Runs when Vimeo returns that the video has finished.  
showThumbnail false bool Display the default thumbnail from source
trackEvents false bool Whether to track video events (play, pause, play progress, finish)
trackedEvents array Set of events that have already been tracked, used to prevent tracking the same event multiple times.  
trackPlayProgress [50] array Set of play progress percentages to send tracking info.
vimeoSettings '&title=0&byline=0&portrait=0' string Vimeo player customizations.

Visibility Classes

<p class="show">This will always visible</p>
<p class="hidden">This will always hidden</p>
<p class="invisible">This will always invisible (still takes up space on the page)</p>
<p class="for-screen-readers-only">This content will be read by a screen reader but won't be visible on the page</p>
<p class="show-for-mobile-only">This is visible up until $medium-up</p>
<p class="show-for-medium-up">This will become visible at $medium-up</p>
<p class="show-for-large-up">This will become visible at $large-up</p>

Keep being awesome. Made with ♥ by charitywater. Supported by 🐩's