Sass variables

Most interfaces can be created using css, but there are sass variables available for building custom elements or the framework itself.


Colors

// Blues
$lightest-blue
$lighter-blue
$light-blue
$blue
$dark-blue
$darker-blue
$darkest-blue

// Teal
$lighter-teal
$light-teal
$teal
$dark-teal
$darker-teal

// Green
$lighter-green: #EEFDF1;
$light-green: #B0DBB9;
$green: #027F1B;
$dark-green: #074C15;
$darker-green: #072C0E;

// Yellow
$lighter-yellow: #FFF9CC;
$light-yellow: #F4E171;
$yellow: #FFDA00;
$dark-yellow: #C7A900;
$darker-yellow: #837000;

// Orange
$lighter-orange: #FFEECC;
$light-orange: #FFCA63;
$orange: #FFA700;
$dark-orange: #D78B00;
$darker-orange: #8A5900;

// Red
$lighter-red: #FFD6D4;
$light-red: #D45F59;
$red: #B80C03;
$dark-red: #8C0700;
$darker-red: #590400;

// Salmon
$lighter-salmon: #FFCCCE;
$light-salmon: #FC9A95;
$salmon: #F36058;
$dark-salmon: #C04740;
$darker-salmon: #853834;

// Greys
$white: #fff;
$lighter-grey: #F4F6F9;
$light-grey: #E0E4E8;
$grey: #AFBFCA;
$dark-grey: #5E6D78;
$darker-grey: #434F58;
$black: $darkest-blue;
div {color: $black}

Spacing

Use the baseScale with convertScaleToRem() to ensure consistent margins.

$baseScale: 8;
$maxSize: 16;
div {margin-bottom: convertScaleToRem(2);}

Typography

Fonts

$body: 'Proxima Nova', sans-serif;
$heading: 'Ubuntu', sans-serif;
div {font-family: $heading}

Sizes

$t-6: 2.5rem; // 40px
$t-5: 2rem; // 32px
$t-4: 1.5rem; // 24px
$t-3: 1rem; // 16px
$t-2: .875rem; // 14px. legibility at small sizes > adhering to scales
$t-1: .75em; // 12px
div {font-size: $t-l}

Weights

$t-lighter: 100;
$t-light: 300;
$t-regular: 500;
$t-bold: 600;
$t-extrabold: 900;
div {font-weight: $t-light}

Borders

$border-size: 1px;
$border-radius: 3px;
$border-radius-large: 5px;
div {border-radius: $border-radius}

Durations

$a-larger: 2s;
$a-large: 1.5s;
$a-size: 1s;
$a-small: .5s;
$a-smaller: .3s;
div {transition-duration: $a-smaller;}

Z-Index

$z-0: -1;
$z-1: 1;
$z-2: 10;
$z-3: 100;
$z-4: 1000;
$z-5: 10000;
div {position: relative; z-index: $z-4;}

Responsive

$medium-breakpoint: 800px;
$large-breakpoint: 1040px;
@media screen and (min-width: $large-breakpoint){};