Utilities

Colors

There are utility classes (and corresponding mixins) for setting the common font and background colors. The classes should be primarily used for development purposes and only used in production code if no other style edits will be added to a tag. If more than one attribute will be changed, create a custom class for the element and use the mixin to import the color change.

Text Colors

<p class="text-default">Lorem ipsum dolor sit amet, ipsum commodo eros lacus.</p>

<p class="text-green">Adipiscing lectus quis eu vel mauris duis, ac tellus mauris cursus et.</p>

<p class="text-blue">Sed deserunt augue orci lectus purus imperdiet.</p>

<p class="text-yellow">Lacus mus nunc semper mauris etiam bibendum, tortor sed suscipit .</p>

<p class="text-gray">Mauris quis metus quam vel euismod faucibus, ante nec erat erat.</p>

Background Colors

<div class="bg-green"></div>
<div class="bg-blue"></div>
<div class="bg-yellow"></div>
<div class="bg-gray"></div>
<div class="bg-white"></div>
<div class="bg-black"></div>

Typography

There are a handful of basic typography utilities dealing with alignment, transformation, and wrapping. As with the color utilities, these classes should be primarily used for development purposes and only used in production code if no other style edits will be added to a tag.

Alignment

<p class="align-left">Align left</p>
<p class="align-right">Align right</p>
<p class="align-center">Align center</p>

Text Transforms

<p class="lowercase">Lowercase</p>
<p class="uppercase">Uppercase</p>

Whitespace & Word Wrap

<p class="nowrap">No wrap.</p>
<p class="break-word">...</p>

Typography Mixins

There are also a set of typography mixins that can be used to apply the various paragraph styles to customs classes. These can be used in conjunction with the color mixins to create blocks of important text.

.block-1 {
    @include primary-text();
    @include text-green();
}

.block-2 {
    @include secondary-text();
    @include text-yellow();
}

.block-3 {
    @include tertiary-text();
    @include bg-gray();
    @include text-white();
}

.block-1 {
    @include quote-text();
    @include text-blue();
}

Display & Visibility

These classes should primarily be used to set a temporary display or visibility state that connected to a user interaction.

.show {
    display: block;
}
.hide {
    display: none;
}
.invisible {
    visibility: hidden;
}
.overflow-hidden {
    overflow: hidden
}

<div class="show">...</div>
<div class="hide">...</div>
<div class="invisible">...</div>
<div class="overflow-hidden">...</div>

Floats & Positioning

The direction pull classes should only be used to add a temporary override in response to a user interaction since they use the otherwise unwanted !important attribute.

The clearfix class can be used in cases where it is the only style change that needs to be applied.

.pull-left {
    float: left !important;
}
.pull-right {
    float: right !important;
}
.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.clearfix {
    @include clearfix;
}

<div class="pull-left">...</div>
<div class="pull-right">...</div>
<div class="center-block">...</div>
<div class="clearfix">...</div>

Flexbox

To make aligning and positioning elements in our block grid system easier, we've provide a set of flexbox utility mixin that assist with easily applying standard layouts. These mixins should all be applied to the parent element (the containing div) and not to individual items within the flexbox which may require additional styling to tweak positioning.

.block-1 {
    // Centers items both horizontally and vertically
    // Child elements will wrap onto multiple lines if necessary
    @include flexbox-center();
}

.block-2 {
    // Centers a single line of items vertically
    // Forces all child elements to be on a single line
    @include flexbox-center-vertically();
}

.block-3 {
    // Centers multiple lines of items vertically
    // Child elements will wrap onto multiple lines and will center within parent
    @include flexbox-align-vertically();
}

.block-4 {
    // Makes child items maintain the same height regardless of content
    // Content within the child items remains top aligned
    @include flexbox-same-height();
}

Global Variables

The global _variables.scss file contains the range of options for sizes, lineheights, and weights for fonts and icons, as well as z-index positions, colors, breakpoints, and grid dimensions.

All values for these attributes used across the site should come from these variables to facilitate easy updates and maintenance. Do not use values outside those listed in the _variables.scss file or hardcode any values in individual css files.

$font-weight-bold        : 700;
$font-weight-medium      : 500;
$font-weight-regular     : 400;
$font-weight-light       : 200;

$font-size-xsmall        : 1.2rem;
$font-size-small         : 1.4rem;
$font-size-normal        : 1.6rem;
$font-size-large         : 2.2rem;
$font-size-xlarge        : 2.8rem;