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

$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;

For more information about breakpoint mixins visit https://styleguide.asce.org/section-sass-mixins.html#asgref-sass-mixins-breakpoint-mixins.

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

For more information about colors visit Colors or https://styleguide.asce.org/section-colors.html#asgref-colors.

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%;

For more information about gradients visit Gradients or https://styleguide.asce.org/section-colors.html#asgref-colors-gradients.

Spacing

$component-margin: 80px;

For more information about $component-margin visit https://styleguide.asce.org/section-sass-mixins.html#asgref-sass-mixins-component-margin.

Sizing

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

Borders

$border-radius: 3px;

Transitions

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