Guide Specs

Additional details and context related to the ASCE Digital Style Guide can be found here.

Some examples include:

Component requirements and CMS Fields.
Additional color formats for colors in the palette.

Settings Variables

Breakpoints

Breakpoint Slicer

//  Slicer Breakpoints
//  
//  Breakpoint:    0      100px   200px   320px   400px   500px   600px   768px       1800px
//                 |───────┼───────┼───────┼───────┼───────┼───────┼───────┼──── ... ───┼────────>
//  Slice #:               1       2       3       4       5       6       7           18
$slicer-breakpoints: 100px 200px 320px 400px 500px 600px 768px 800px 900px 1000px 1100px 1200px 1300px 1400px 1500px 1600px 1700px 1800px;
$slicer-anti-overlap-corrections: -1px;

https://github.com/lolmaus/breakpoint-slicer

Typography

font-size

$base-font-size: 16px;

font-family

$mulish: 'Mulish', 'Helvetica Neue', Helvetica, sans-serif;

The $mulish variable is applied as presented below.

$body-font: $mulish;
$header-font: $mulish;

More information about this font-family can be found on https://fonts.google.com/specimen/Mulish.

For more details about typography visit https://styleguide.asce.org/section-typography.html.

Colors

$body-color: primary-color(black);
$header-color: primary-color(black);

Black

$link-color: primary-color(blue);

Blue

$hr-color: primary-color(gray);

Gray

Gradients

// gradient color lists to be used inside @mixin linear-gradient()
$blue-gradient: #253a6e, #1d5389, #146ea6, #0c85be, #059bd6;
$green-gradient: #9fd64d, #75c170, #49ab95, #2297b6, #0086d2;
$dark-green-gradient: #9fd64d, #44873c, #2c736e, #186299, #059bd6;

// gradients with lower opacity
$light-green-gradient: rgba(#9fd64d, .6), rgba(#75c170, .6), rgba(#49ab95, .6), rgba(#2297b6, .6), rgba(#0086d2, .6);
$bg-blue-gradient: rgba(#253a6e, .93), rgba(#1d5389, .93), rgba(#146ea6, .93), rgba(#0c85be, .93), rgba(#059bd6, .93);
$black-gradient: transparent, rgba(0, 0, 0, .25) 50%, rgba(0, 0, 0, .6) 75%, rgba(0, 0, 0, 1) 100%;
$black-gradient-mobile: transparent, rgba(0, 0, 0, .25) 50%, rgba(0, 0, 0, .6) 65%, rgba(0, 0, 0, 1) 100%;

Spacing

$component-margin: 80px;

Sizing

$max-width: 1280px;
$full-bleed-max-width: 1800px;

Borders

$border-radius: 3px;

Transitions

$ts: .15s; // transition speed
$te: ease-in-out; // transition ease