Additional details and context related to the ASCE Digital Style Guide can be found here.
| Info |
|---|
Some examples include:
|
Settings Variables
Breakpoints
Breakpoint Slicer
| Code Block | ||
|---|---|---|
| ||
// 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; |
For more information about breakpoint mixins visit https://
githubcom/lolmaus/breakpoint-slicerorg/section-sass-mixins.html#asgref-sass-mixins-breakpoint-mixins.
Typography
font-size
| Code Block | ||
|---|---|---|
| ||
$base-font-size: 16px; |
font-family
| Code Block |
|---|
$mulish: 'Mulish', 'Helvetica Neue', Helvetica, sans-serif; |
The $mulish variable is applied as presented below.
| Code Block | ||
|---|---|---|
| ||
$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
| Code Block | ||
|---|---|---|
| ||
$body-color: primary-color(black); $header-color: primary-color(black); |
| Code Block | ||
|---|---|---|
| ||
$link-color: primary-color(blue); |
| Code Block | ||
|---|---|---|
| ||
$hr-color: primary-color(gray); |
For more information about colors visit Colors or https://styleguide.asce.org/section-colors.html#asgref-colors.
Gradients
| Code Block | ||
|---|---|---|
| ||
// 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
| Code Block | ||
|---|---|---|
| ||
$component-margin: 80px; |
For more information about $component-margin visit https://styleguide.asce.org/section-sass-mixins.html#asgref-sass-mixins-component-margin.
Sizing
| Code Block | ||
|---|---|---|
| ||
$max-width: 1280px; $full-bleed-max-width: 1800px; |
Borders
| Code Block | ||
|---|---|---|
| ||
$border-radius: 3px; |
Transitions
| Code Block | ||
|---|---|---|
| ||
$ts: .15s; // transition speed $te: ease-in-out; // transition ease |
Contents
| Page Tree | ||||||||
|---|---|---|---|---|---|---|---|---|
|