SASS

This section outlines the different SASS variables and extends that can and are used throughout our applications

Variables

Our framework has a number of variables that are available for styling. Most of these are currently just colors, gradients and variations of both. Note: some of these are meant to be used as extend-only

Neutral color variables

We have a few different standard colors that are ready to use for a variety of situations

This is the $primary-txt variable. The hex is #666.Typewriter tattooed letterpress, flannel hashtag butcher gastropub Bushwick ennui bicycle rights actually bitters direct trade squid before they sold out. Helvetica Austin plaid, mumblecore vinyl tattooed chambray street art shoreditch Etsy whatever cliche banh mi swag aesthetic.

This is the $subtle-txt variable. The hex is #999.Typewriter tattooed letterpress, flannel hashtag butcher gastropub Bushwick ennui bicycle rights actually bitters direct trade squid before they sold out. Helvetica Austin plaid, mumblecore vinyl tattooed chambray street art shoreditch Etsy whatever cliche banh mi swag aesthetic.

This is the $inverse-txt variable. The hex is #fff.Typewriter tattooed letterpress, flannel hashtag butcher gastropub Bushwick ennui bicycle rights actually bitters direct trade squid before they sold out. Helvetica Austin plaid, mumblecore vinyl tattooed chambray street art shoreditch Etsy whatever cliche banh mi swag aesthetic.

This is the $link-color variable. The hex is #333.

Primary color variables

The following are the current roster of primary colors. EAch color also has three darker variations controlled in the SASS output.

Base / Neutral color

This is the $standard-color variable. The hex is

This is the $standard-color-dark variable. The hex is

This is the $standard-color-darker variable. The hex is

This is the $standard-color-darkest variable. The hex is

Highlight color

This is the $highlight-color variable. The hex is

This is the $highlight-color-dark variable. The hex is

This is the $highlight-color-darker variable. The hex is

This is the $highlight-color-darkest variable. The hex is

Positive color

This is the $positive-color variable. The hex is

This is the $positive-color-dark variable. The hex is

This is the $positive-color-darker variable. The hex is

This is the $positive-color-darkest variable. The hex is

Negative color

This is the $negative-color variable. The hex is

This is the $negative-color-dark variable. The hex is

This is the $negative-color-darker variable. The hex is

This is the $negative-color-darkest variable. The hex is

Attention color

This is the $attention-color variable. The hex is

This is the $attention-color-dark variable. The hex is

This is the $attention-color-darker variable. The hex is

This is the $attention-color-darkest variable. The hex is

Color gradients

There are also a set of gradients available, built off of our primary colors.

This is an element with a .standard-gradient
This is an element with a .standard-gradient-dark
This is an element with a .highlight-gradient
This is an element with a .highlight-gradient-dark
This is an element with a .positive-gradient
This is an element with a .positive-gradient-dark
This is an element with a .negative-gradient
This is an element with a .negative-gradient-dark
This is an element with a .attention-gradient
This is an element with a .attention-gradient-dark

Extends

Our framework has a handful of useful extends that can be used directly in the CSS or, since they are already standard classes, in the markup. It's really up to you how you want to approach it - just be consistent and try not to chain too many classes in the markup.

Position

.floatleft and .floatright

We often need to pull content to the left or right sides. The .floatleft and .floatright classes allow you to do this. Just make sure to always clear your floats by extending .clearfix or adding it to your parent container containing the floats.

My .floatleft text

My .floatright text

<div class="clearfix">
    <h2 class="floatleft">My .floatleft text</h2>
    <h2 class="floatright">My .floatright text</h2>
</div>
    

.centerme

This class is a simple element centering class. As with any non-table CSS centering, make sure your element has a specific width.

My centered content
<div class="centerme" style="width:50%;">My centered content</div>
    

Box Model

There are a few available classes that can modify the box model of the element you are working with.

.nopadding

.nopadding removes all padding from element using !important.

This module usually has padding

<div class="module nopadding">This module usually has padding</div>

    

.nomargin

.nomargin removes all margin from element using !important.

This h1 ususally has a bottom margin


<h1 class="nomargin">This h1 ususally has a bottom margin</h1>

    

.zerolist

.zerolist removes margin and padding, as well as sets the list-style-type to none. Useful for ul elements

  • This list usually has bullets
  • This list usually has margins
  • This list usually has padding

<ul class="zerolist">
    <li>This list usually has bullets</li>
    <li>This list usually has margins</li>
    <li>This list usually has padding</li>
</ul>

    

.noborderbox

.noborderbox sets the box-sizing attribute back to -box, inherently overriding the default. Useful when introducing third-party plugins that weren't styled using box-sizing:border-box;

This is a normal module with a set height and width that has the default box-sizing model.
This module uses .noborderbox and therefore adds to the height and width.

<div class="module contrast" style="height:100px; width:50%;">
    This is a normal module with a set height and width that has the default box-sizing model.
</div>
<div class="noborderbox module contrast" style="height:100px; width:50%;">
    This module uses .noborderbox and therefore adds to the height and width.
</div>

    

Dividers

We have three different classes that can be applied to any element to created a visible division via a border, padding and margin.

.has-vert-divider

The .has-vert-divider class places a border on the right side of the classed element.

Salvia chillwave lo-fi iPhone brunch, readymade Williamsburg intelligentsia. Try-hard YOLO tote bag Godard. American apparel chillwave pour-over, kogi lomo next level salvia locavore beard quinoa asymmetrical. Flexitarian synth ethical meggings organic, cardigan fanny pack plaid banjo shoreditch meh. Bushwick flexitarian 8-bit vinyl banjo, cred squid thundercats. Hella Brooklyn Terry Richardson, PBR photo booth cred 3 wolf moon viral. Leggings small batch fashion axe, salvia bicycle rights cornhole ugh bespoke chambray sriracha master cleanse pour-over McSweeney's.
Salvia chillwave lo-fi iPhone brunch, readymade Williamsburg intelligentsia. Try-hard YOLO tote bag Godard. American apparel chillwave pour-over, kogi lomo next level salvia locavore beard quinoa asymmetrical. Flexitarian synth ethical meggings organic, cardigan fanny pack plaid banjo shoreditch meh. Bushwick flexitarian 8-bit vinyl banjo, cred squid thundercats. Hella Brooklyn Terry Richardson, PBR photo booth cred 3 wolf moon viral. Leggings small batch fashion axe, salvia bicycle rights cornhole ugh bespoke chambray sriracha master cleanse pour-over McSweeney's.
Salvia chillwave lo-fi iPhone brunch, readymade Williamsburg intelligentsia. Try-hard YOLO tote bag Godard. American apparel chillwave pour-over, kogi lomo next level salvia locavore beard quinoa asymmetrical. Flexitarian synth ethical meggings organic, cardigan fanny pack plaid banjo shoreditch meh. Bushwick flexitarian 8-bit vinyl banjo, cred squid thundercats. Hella Brooklyn Terry Richardson, PBR photo booth cred 3 wolf moon viral. Leggings small batch fashion axe, salvia bicycle rights cornhole ugh bespoke chambray sriracha master cleanse pour-over McSweeney's.

<div class="col-1-3 has-vert-divider">...</div>
<div class="col-1-3 has-vert-divider">...</div>
<div class="col-1-3">...</div>

    

.has-horz-divider

The .has-horz-divider class places a border on the bottom side of the classed element.

Salvia chillwave lo-fi iPhone brunch, readymade Williamsburg intelligentsia. Try-hard YOLO tote bag Godard. American apparel chillwave pour-over, kogi lomo next level salvia locavore beard quinoa asymmetrical. Flexitarian synth ethical meggings organic, cardigan fanny pack plaid banjo shoreditch meh. Bushwick flexitarian 8-bit vinyl banjo, cred squid thundercats. Hella Brooklyn Terry Richardson, PBR photo booth cred 3 wolf moon viral. Leggings small batch fashion axe, salvia bicycle rights cornhole ugh bespoke chambray sriracha master cleanse pour-over McSweeney's.
Salvia chillwave lo-fi iPhone brunch, readymade Williamsburg intelligentsia. Try-hard YOLO tote bag Godard. American apparel chillwave pour-over, kogi lomo next level salvia locavore beard quinoa asymmetrical. Flexitarian synth ethical meggings organic, cardigan fanny pack plaid banjo shoreditch meh. Bushwick flexitarian 8-bit vinyl banjo, cred squid thundercats. Hella Brooklyn Terry Richardson, PBR photo booth cred 3 wolf moon viral. Leggings small batch fashion axe, salvia bicycle rights cornhole ugh bespoke chambray sriracha master cleanse pour-over McSweeney's.
Salvia chillwave lo-fi iPhone brunch, readymade Williamsburg intelligentsia. Try-hard YOLO tote bag Godard. American apparel chillwave pour-over, kogi lomo next level salvia locavore beard quinoa asymmetrical. Flexitarian synth ethical meggings organic, cardigan fanny pack plaid banjo shoreditch meh. Bushwick flexitarian 8-bit vinyl banjo, cred squid thundercats. Hella Brooklyn Terry Richardson, PBR photo booth cred 3 wolf moon viral. Leggings small batch fashion axe, salvia bicycle rights cornhole ugh bespoke chambray sriracha master cleanse pour-over McSweeney's.

<div class="container has-horz-divider">...</div>
<div class="container has-horz-divider">...</div>
<div class="container">...</div>

    

.has-horz-top-divider

The .has-horz-top-divider class places a border on the top side of the classed element.

Salvia chillwave lo-fi iPhone brunch, readymade Williamsburg intelligentsia. Try-hard YOLO tote bag Godard. American apparel chillwave pour-over, kogi lomo next level salvia locavore beard quinoa asymmetrical. Flexitarian synth ethical meggings organic, cardigan fanny pack plaid banjo shoreditch meh. Bushwick flexitarian 8-bit vinyl banjo, cred squid thundercats. Hella Brooklyn Terry Richardson, PBR photo booth cred 3 wolf moon viral. Leggings small batch fashion axe, salvia bicycle rights cornhole ugh bespoke chambray sriracha master cleanse pour-over McSweeney's.
Salvia chillwave lo-fi iPhone brunch, readymade Williamsburg intelligentsia. Try-hard YOLO tote bag Godard. American apparel chillwave pour-over, kogi lomo next level salvia locavore beard quinoa asymmetrical. Flexitarian synth ethical meggings organic, cardigan fanny pack plaid banjo shoreditch meh. Bushwick flexitarian 8-bit vinyl banjo, cred squid thundercats. Hella Brooklyn Terry Richardson, PBR photo booth cred 3 wolf moon viral. Leggings small batch fashion axe, salvia bicycle rights cornhole ugh bespoke chambray sriracha master cleanse pour-over McSweeney's.
Salvia chillwave lo-fi iPhone brunch, readymade Williamsburg intelligentsia. Try-hard YOLO tote bag Godard. American apparel chillwave pour-over, kogi lomo next level salvia locavore beard quinoa asymmetrical. Flexitarian synth ethical meggings organic, cardigan fanny pack plaid banjo shoreditch meh. Bushwick flexitarian 8-bit vinyl banjo, cred squid thundercats. Hella Brooklyn Terry Richardson, PBR photo booth cred 3 wolf moon viral. Leggings small batch fashion axe, salvia bicycle rights cornhole ugh bespoke chambray sriracha master cleanse pour-over McSweeney's.

<div class="container">...</div>
<div class="container has-horz-top-divider">...</div>
<div class="container has-horz-top-divider">...</div>

    

.has-header-divider

The .has-header-divider class places a border on the right side of the classed header element.

Header

Salvia chillwave lo-fi iPhone brunch, readymade Williamsburg intelligentsia. Try-hard YOLO tote bag Godard. American apparel chillwave pour-over, kogi lomo next level salvia locavore beard quinoa asymmetrical. Flexitarian synth ethical meggings organic, cardigan fanny pack plaid banjo shoreditch meh. Bushwick flexitarian 8-bit vinyl banjo, cred squid thundercats. Hella Brooklyn Terry Richardson, PBR photo booth cred 3 wolf moon viral. Leggings small batch fashion axe, salvia bicycle rights cornhole ugh bespoke chambray sriracha master cleanse pour-over McSweeney's.


<h2 class="has-header-divider">...</h2>

    

Widths

An array of widths are available in a variety of class names. Note: the .col-x-x classes should only be used on grid columns.

.col-1-8, .one-eighth, width-1-8

.col-1-4, .one-fourth, width-1-4

.col-1-3, .one-third, width-1-3

.col-1-2, .one-half, width-1-2

.col-2-3, .two-thirds, width-2-3

.col-3-4, .three-fourth, width-3-4

.col-1-1, .full-width, width-1-1

Text Extends

These extends will affect the styling of text elements.

.center-text

The .center-text class will apply text-align:center to the element.

This text is centered - woo hoo!


<p class="center-text">...</p>

    

%truncated

The %truncated class is an extend-only class, and not meant to be used in markup. Use it in your stylesheet to provide text truncation with an appended ellipses.

Note: you'll need a block level element for truncation, as well as a hard width.
Name URL Description
Lipsum http://www.lipsum.com Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis massa elit. Nullam sollicitudin eleifend nisi. Ut vestibulum lacus velit, sed bibendum nibh aliquam id. Sed vitae nunc lobortis diam convallis tempus. Fusce viverra ipsum sed pretium pharetra. Morbi eget dignissim enim, et pretium erat. Cras id volutpat lorem. Donec auctor fringilla nunc sed tempus. Pellentesque quis enim scelerisque, facilisis tellus nec, porttitor sem.
Bacon Ipsum http://baconipsum.com Bacon ipsum dolor sit amet meatball pork belly sirloin kielbasa capicola spare ribs pork loin jowl swine shank ribeye tenderloin biltong. Pork belly cow flank shoulder boudin spare ribs frankfurter beef. Sirloin ball tip boudin short ribs. Biltong tongue chuck bacon. Doner bacon bresaola kielbasa meatloaf, ribeye tenderloin brisket chicken strip steak jerky short ribs fatback tri-tip tail. Ground round jerky strip steak, pork ham hock filet mignon pork belly meatloaf tri-tip salami shank pork chop. Pig ham prosciutto sirloin ground round andouille ribeye fatback strip steak rump spare ribs kielbasa t-bone ham hock brisket.
Hipster Ipsum http://hipsteripsum.me Cosby sweater salvia McSweeney's typewriter hashtag pour-over. Fanny pack gentrify keytar, Portland quinoa messenger bag Pinterest seitan polaroid flannel photo booth DIY Carles direct trade Etsy. Cray gastropub literally photo booth, put a bird on it Cosby sweater food truck lomo gluten-free Terry Richardson ennui ugh Carles flannel deep v. Vinyl beard single-origin coffee whatever Vice. Salvia chambray craft beer, Cosby sweater chillwave locavore artisan keytar narwhal asymmetrical synth before they sold out Schlitz McSweeney's swag. Quinoa viral letterpress fixie yr. Four loko you probably haven't heard of them wayfarers tofu, mixtape 8-bit sartorial brunch Truffaut next level flannel selvage ugh dreamcatcher.

Embellishments

.positive

Change the color of the classed element to the framework's current positive color.

This is a paragraph of text classed with .positive. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis massa elit. Nullam sollicitudin eleifend nisi. Ut vestibulum lacus velit, sed bibendum nibh aliquam id. Sed vitae nunc lobortis diam convallis tempus. Fusce viverra ipsum sed pretium pharetra. Morbi eget dignissim enim, et pretium erat. Cras id volutpat lorem. Donec auctor fringilla nunc sed tempus. Pellentesque quis enim scelerisque, facilisis tellus nec, porttitor sem.


<p class="positive">...</p>

    

.negative

Change the color of the classed element to the framework's current negative color.

This is a paragraph of text classed with .negative. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis massa elit. Nullam sollicitudin eleifend nisi. Ut vestibulum lacus velit, sed bibendum nibh aliquam id. Sed vitae nunc lobortis diam convallis tempus. Fusce viverra ipsum sed pretium pharetra. Morbi eget dignissim enim, et pretium erat. Cras id volutpat lorem. Donec auctor fringilla nunc sed tempus. Pellentesque quis enim scelerisque, facilisis tellus nec, porttitor sem.


<p class="negative">...</p>