Brand
mixins
logo
@mixin logo() { ... }
Description
A mixin to create the Stanford logo with the ligature font.
Parameters
None.
Mixin
functions
color
@function color($color, $colormap: $su-core-colors) { ... }
Description
Return a color from a color map. If only a color is specified, then it returns a color from $su-core-colors. If a color and a color map are specified, then it returns a color from the particular color map.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$color | The named key in the color map. | String | — none |
$colormap | The color map | Map | $su-core-colors |
Example
color: color($color, $su-core-colors);
Throws
Color does not exist in color map $su-core-colors.
#{$color} color does not exist in color map
Used by
- [mixin]
skiplinks
- [mixin]
skiplinks
- [mixin]
skiplinks
- [mixin]
skiplinks
- [mixin]
button-primary
- [mixin]
button-primary
- [mixin]
button-primary
- [mixin]
button-primary
- [mixin]
button-primary
- [mixin]
button-primary
- [mixin]
button-primary
- [mixin]
button-secondary
- [mixin]
button-secondary
- [mixin]
button-secondary
- [mixin]
button-secondary
- [mixin]
button-secondary
- [mixin]
button-secondary
- [mixin]
button-secondary
- [mixin]
button-secondary
- [mixin]
button-secondary
- [mixin]
button-secondary
- [mixin]
button-secondary
- [mixin]
button-secondary
- [mixin]
button-secondary
- [mixin]
card
- [mixin]
card
- [mixin]
card
- [mixin]
link-icon
- [mixin]
link-icon
- [placeholder]
%nav--light
- [placeholder]
%nav--light
- [placeholder]
%nav--light
- [placeholder]
%nav--light
- [placeholder]
%nav--light
- [placeholder]
%nav--light
- [placeholder]
%nav--light
- [placeholder]
%nav--light
- [placeholder]
%nav-item--current-expanded
- [placeholder]
%nav-item--current-expanded
- [placeholder]
%nav-item--current-expanded
- [placeholder]
%nav-item--current
- [placeholder]
%nav-item--current
- [placeholder]
%nav-item--parent-expanded
- [placeholder]
%nav-item--parent-expanded
- [placeholder]
%nav-item--parent-expanded
- [placeholder]
%nav-item-link
- [placeholder]
%nav-item-link
- [placeholder]
%nav-item-link
- [placeholder]
%nav-item-link
- [placeholder]
%nav-menu
- [placeholder]
%cta-base
- [placeholder]
general
breakpoint-insert
@function breakpoint-insert($name, $breakpoints: $su-grid-screens) { ... }
Description
The $su-grid-screens map defined in the grid variables file is used as the $breakpoints argument by default.
Returns the breakpoint name with a dash in front. If the smallest breakpoint (xs) is passed through, a blank string is returned.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$name | the key in the breakpoint map. eg: sm | String | — none |
$breakpoints | The breakpoint map | Map | $su-grid-screens |
Example
breakpoint-insert(xs)
Returns a blank string
breakpoint-insert(sm)
Returns "-sm"
breakpoint-max
@function breakpoint-max($name, $breakpoints: $su-grid-screens) { ... }
Description
The $su-grid-screens map defined in the grid variables file is used as the $breakpoints argument by default.
Maximum breakpoint width. Null for the largest (2xl) breakpoint. The maximum value is calculated as the minimum of the following breakpoint minus 1px.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$name | the key in the breakpoint map. eg: sm | String | — none |
$breakpoints | The breakpoint map | Map | $su-grid-screens |
Example
breakpoint-max(sm)
Returns "767px"
Requires
- [function]
breakpoint-next
- [function]
breakpoint-min
Used by
- [mixin]
su-grid-media-between
- [mixin]
su-grid-media-max
- [mixin]
centered-column
breakpoint-min
@function breakpoint-min() { ... }
Description
The $su-grid-screens map defined in the grid variables file is used as the $breakpoints argument by default.
Minimum breakpoint width. Null for the smallest (xs) breakpoint.
breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, 2xl: 1500px)) Returns "576px"
Parameters
None.
Used by
- [function]
breakpoint-max
- [mixin]
su-grid-media-between
- [mixin]
su-grid-media-min
breakpoint-next
@function breakpoint-next() { ... }
Description
breakpoint-next($name, $breakpoint-names)
The $su-grid-screens map defined in the grid variables file is used as the $breakpoints argument by default.
Name of the next breakpoint, or null for the last breakpoint.
breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, 2xl: 1500px)) Returns "md"
Parameters
None.
Throws
Could not find breakpoint shortcode in breakpoint-next mixin
Used by
- [function]
breakpoint-max
breakpoint-previous
@function breakpoint-previous() { ... }
Description
breakpoint-previous($name, $breakpoint-names)
The $su-grid-screens map defined in the grid variables file is used as the $breakpoints argument by default.
Name of the previous breakpoint, or null if the breakpoint does not exist.
breakpoint-previous(lg, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, 2xl: 1500px)) Returns "md"
Parameters
None.
flex-column-ratio
@function flex-column-ratio($columns, $su-grid-columns) { ... }
Description
Determine the ratio of $columns
to the total $grid-column count.
If $columns
is more than one value, they are handed to flex-parse-columns()
which will determine the total columns and use this value instead of total-columns
.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$columns | The total number of columns in the grid. Default 12 | String | — none |
$su-grid-columns | The number of columns for the item to span | String | — none |
Requires
- [function]
flex-parse-columns
Used by
- [function]
flex-column-width
flex-column-width
@function flex-column-width($columns, $gutter, $su-grid-columns) { ... }
Description
Return a calulated column width that can then be passed in to a calc()
.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$columns | Number of columns either as integer or | Mixed | — none |
$gutter | The width of the gutter in a css unit | Unit | — none |
$su-grid-columns | The number of columns in the grid | Integer | — none |
Requires
- [function]
flex-column-ratio
- [function]
flex-parse-columns
- [variable]
_total-columns
- [variable]
_total-columns
- [variable]
_total-columns
Used by
- [mixin]
flex-column
- [mixin]
flex-column
flex-parse-columns
@function flex-parse-columns($span) { ... }
Description
Parse a column count like 3 of 5
and return the total column count. This is to allow a shorthand for custom grids without using a settings map.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$span | something like | List | — none |
Throws
$column
should contain 2 values, seperated by anof
Requires
- [variable]
_total-columns
- [variable]
_total-columns
Used by
- [function]
flex-column-ratio
- [function]
flex-column-width
calculate-modular-spacing
@function calculate-modular-spacing($step, $breakpoint) { ... }
Description
Calculates the modular spacing value at a step(integer) on the scale at a certain breakpoint.
The modular spacing value is calculated by multiplying the modular spacing base value at the requested breakpoint and the multiplier at the requested step of the scale.
The default value for $step is 0, which returns a multiplier value of 1, i.e., calculate-modular-spacing(0, 'xs') = $su-modular-spacing-base at XS breakpoint
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$step | Integers from -4 to 9 including 0 | Integer | — none |
$breakpoint | One of | Breakpoint | — none |
Throws
$step should be an integer between -4 and 9
Requires
- [function]
get-modular-spacing-base
- [function]
get-modular-spacing-multiplier
Used by
- [mixin]
modular-spacing
- [mixin]
modular-spacing
- [mixin]
modular-spacing
- [mixin]
modular-spacing
- [mixin]
modular-spacing
- [mixin]
modular-spacing
- [mixin]
modular-spacing
- [mixin]
modular-spacing
- [mixin]
modular-spacing
- [mixin]
modular-spacing
- [mixin]
modular-spacing
- [mixin]
modular-spacing
- [mixin]
modular-spacing
get-modular-spacing-base
@function get-modular-spacing-base($breakpoint) { ... }
Description
Get a value out of the modular-spacing-base map Returns the pixel value of the $su-modular-spacing-base variable at a breakpoint.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$breakpoint | One of | Breakpoint | — none |
Used by
- [function]
calculate-modular-spacing
- [mixin]
modular-spacing
- [mixin]
modular-spacing
get-modular-spacing-multiplier
@function get-modular-spacing-multiplier($step) { ... }
Description
Get a value out of the modular-spacing-multiplier map. Returns the value of the $su-modular-spacing-multiplier variable at a step(integer) on the scale. The default for $step is 0, which returns a multiplier value of 1.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$step | Integers from -4 to 5 including 0 | Integer | — none |
Used by
- [function]
calculate-modular-spacing
get-responsive-spacing-value
@function get-responsive-spacing-value($step, $device, $map) { ... }
Description
Get a value out of the $su-responsive-spacing-map
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$step | Integers from -2 to 10 including 0 | Integer | — none |
$device |
| Device | — none |
$map | $su-responsive-spacing-map normally or equivalent | Map | — none |
Throws
Responsive spacing step value must be an integer between -2 and 10.
Could not find this spacing value in the $map. Check the parameters.
Requires
- [function]
map-deep-get
Used by
- [mixin]
responsive-spacing
- [mixin]
responsive-spacing
- [mixin]
responsive-spacing
- [mixin]
responsive-spacing
- [mixin]
responsive-spacing
- [mixin]
responsive-spacing
- [mixin]
responsive-spacing
- [mixin]
responsive-spacing
- [mixin]
responsive-spacing
- [mixin]
responsive-spacing
- [mixin]
responsive-spacing
- [mixin]
responsive-spacing
- [mixin]
responsive-spacing
convert-angle
@function convert-angle($value, $unit) { ... }
Description
Convert an angle to the proper unit requested
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$value | Value to convert | Integer | — none |
$unit | Unit to convert to | String | — none |
Author
Chris Eppstein
str-replace
@function str-replace($string, $search, $replace) { ... }
Description
Replaces a substring with another string. Replaces $search with $replace in $string
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$string | Initial string | String | — none |
$search | Substring to replace | String | — none |
$replace | ('') - New value | String | — none |
Used by
- [mixin]
grid-item-spans
- [mixin]
grid-item-spans
to-length
@function to-length($value, $unit) { ... }
Description
Returns $value (a number) expressed in $unit
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$value | Number value to add unit to | Integer | — none |
$unit | String representation of the unit | String | — none |
Used by
- [function]
to-number
to-list
@function to-list() { ... }
Description
Converts a value to a list.
Parameters
None.
Used by
- [mixin]
su-grid-columns
to-number
@function to-number($value) { ... }
Description
Converts a string to number.
String to number converter. Returns a number value.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$value | Value to be parsed | String | — none |
Requires
- [function]
to-length
to-string
@function to-string() { ... }
Description
Converts a value to a string.
Parameters
None.
is-absolute-length
@function is-absolute-length($value) { ... }
Description
Validates wether something is an absolute unit.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$value | the value to type check | Integer | — none |
Requires
- [function]
is-number
Used by
- [function]
is-length
is-direction-or-angle
@function is-direction-or-angle($value) { ... }
Description
Validates whether something is a direction or an angle
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$value | the value to type check | Integer | — none |
Used by
- [mixin]
linear-gradient
is-integer($value)
@function is-integer($value)($value) { ... }
Description
Validates wether something is an integer
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$value | the value to type check | Integer | — none |
Requires
- [function]
is-number
is-length
@function is-length($value) { ... }
Description
Validates wether something is an length unit
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$value | the value to type check | Integer | — none |
Requires
- [function]
is-relative-length
- [function]
is-absolute-length
Used by
- [function]
is-position
- [mixin]
grid-gap
is-number
@function is-number($value) { ... }
Description
Validates wether something is a number
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$value | the value to type check | Integer | — none |
Used by
- [function]
is-absolute-length
- [function]
is-integer($value)
- [function]
is-percentage
- [function]
is-relative-length
is-percentage
@function is-percentage($value) { ... }
Description
Validates wether something is a percentage unit
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$value | the value to type check | Integer | — none |
Requires
- [function]
is-number
Used by
- [function]
is-position
is-position
@function is-position($value) { ... }
Description
Validates wether something is a position name
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$value | the value to type check | Integer | — none |
Requires
- [function]
is-length
- [function]
is-percentage
is-relative-length
@function is-relative-length($value) { ... }
Description
Validates wether something is a relative length unit
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$value | the value to type check | Integer | — none |
Requires
- [function]
is-number
Used by
- [function]
is-length
mixins
skiplinks
@mixin skiplinks() { ... }
Description
For providing a link at the top of the page which jumps the user down to an anchor or target at the beginning of the main content. Gives screen readers and keyboard users the same capability of going directly to the main content as sighted, mouse users. of the main content. Learn more at https://webaim.org/techniques/skipnav.
Parameters
None.
Requires
fancy-hover
@mixin fancy-hover($color: $su-color-cardinal-red-dark, $active: $su-color-black, $position: bottom, $thickness: 6px) { ... }
Description
When an element (e.g., a link) is hovered over, display an animation of a border that expands out from the middle next to the element.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$color | Hover/focus border color, e.g., #eeeeee. | Variable | $su-color-cardinal-red-dark |
$active | Active border color. | Variable | $su-color-black |
$position | The position of the border relative to the element the mixin is applied to. The default is 'bottom' and the other choices are 'top', 'left' and 'right'. | String | bottom |
$thickness | The thickness of the border, e.g., '3px', '1em'. | String | 6px |
Used by
- [placeholder]
%nav-item-link
aspect-ratio
@mixin aspect-ratio($width, $height, $selector) { ... }
Description
A mixin that creates a fluid container with specified aspect ratio that accommodates various content types within. Default aspect ratio is 16 by 9.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$width | The width of the aspect-ratio | Number | — none |
$height | The height of the aspect-ratio | Number | — none |
$selector | The css selector for the element filling the container target. | Css selector | — none |
su-grid-media-between
@mixin su-grid-media-between($lower, $upper, $breakpoints) { ... }
Description
Media query that spans multiple breakpoint widths (between the min and max breakpoints).
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$lower | The lower breakpoint key code eg: 'sm' | Key code | — none |
$upper | The upper breakpoint key code eg: 'xl' | Key code | — none |
$breakpoints | A map of each of the screen breakpoint sizes. | Map | — none |
Requires
- [function]
breakpoint-min
- [function]
breakpoint-max
su-grid-media-device
@mixin su-grid-media-device($breakpoint) { ... }
Description
A helper to quickly generate a media query
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$breakpoint | The breakpoint shortcode - 'mobile', 'tablet' or 'desktop' | Key code | — none |
su-grid-media-max
@mixin su-grid-media-max($name, $breakpoints) { ... }
Description
Media query of at most the maximum breakpoint width. No query for the largest breakpoint. Applies to the passed through breakpoint and below.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$name | The breakpoint key code eg: 'sm' | Breakpoint | — none |
$breakpoints | A map of each of the screen breakpoint sizes. | Breakpoint | — none |
Requires
- [function]
breakpoint-max
su-grid-media-min
@mixin su-grid-media-min($name, $breakpoints) { ... }
Description
Media query of at least the minimum breakpoint width. No query for the smallest breakpoint. Applies to the passed through breakpoint and above.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$name | The breakpoint key code eg: 'sm' | Breakpoint | — none |
$breakpoints | A map of each of the screen breakpoint sizes. | Map | — none |
Requires
- [function]
breakpoint-min
su-grid-media-only
@mixin su-grid-media-only($breakpoint) { ... }
Description
A helper to quickly generate a media query for single breakpoints.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$breakpoint | The breakpoint key code eg: 'sm', or 'all' for all breakpoints. | Key code | — none |
su-grid-media
@mixin su-grid-media($breakpoint) { ... }
Description
A helper to quickly generate a media query
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$breakpoint | The breakpoint shortcode. Eg: xs | Key code | — none |
button-big
@mixin button-big() { ... }
Description
Big button styling. Same as primary but with larger font-size, more padding.
Parameters
None.
Requires
- [mixin]
button-primary
Used by
- [placeholder]
%cta-base
button-primary
@mixin button-primary() { ... }
Description
Primary (default) button styling.
Parameters
None.
Requires
- [function]
color
- [function]
color
- [function]
color
- [function]
color
- [function]
color
- [function]
color
- [function]
color
Used by
- [mixin]
button-big
button-secondary
@mixin button-secondary() { ... }
Description
Secondary button styling.
Parameters
None.
Requires
card
@mixin card($image-hover) { ... }
Description
Mixin for base card styling
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$image-hover | Image link hover effect. Use 'zoom' for an image zoom-in effect. Use 'opacity' | String | — none |
Requires
- [mixin]
box-shadow
- [mixin]
responsive-spacing
- [mixin]
sans
- [mixin]
small-paragraph
- [mixin]
responsive-spacing
- [mixin]
types
- [mixin]
type-f
- [mixin]
responsive-spacing
- [mixin]
type-c
- [mixin]
responsive-spacing
- [mixin]
responsive-spacing
- [function]
color
- [function]
color
- [function]
color
display-icon
@mixin display-icon() { ... }
Description
Mixin display icon
Parameters
None.
TODO's
Needs to be documented. Should this be reworked for asset management purposes?
@param {} $icon - todo @param {} $direction - todo @param {} $size - todo @param {} $margin - todo @param {} $hover - todo
embed-container
@mixin embed-container($height, $width) { ... }
Description
Responsive embed container to ensure that contents scale to the width of parent element while retaining an aspect ratio of 16:9.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$height | height in pixel integers | Number | — none |
$width | width in pixel integers | Number | — none |
flex-column
@mixin flex-column($columns, $gutter, $su-grid-columns) { ... }
Description
Creates a grid column of requested size.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$columns | Specifies the number of columns an element should span based on the total columns of the grid. eg: | List | — none |
$gutter | A left and right spacing around the element | Unit | — none |
$su-grid-columns | The number of columns in the grid | Integer | — none |
Requires
- [function]
flex-column-width
- [function]
flex-column-width
Used by
- [mixin]
responsive-flex-column
flex-container
@mixin flex-container() { ... }
Description
Mixin to apply to the wrapper of all class-based layouts.
Parameters
None.
flex-grid-push
@mixin flex-grid-push($size, $columns) { ... }
Description
Pushes a grid column by changing its left margin.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$size | The number of columns to 'push' | Integer | — none |
$columns | The number of columns in the grid. | Integer | — none |
responsive-flex-column
@mixin responsive-flex-column($columns, $grid, $gutters) { ... }
Description
Loops through the breakpoints and dynamically calculates the width for each breakpoint based on the number of columns passed in.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$columns | something like 1 of 12 | List | — none |
$grid | A key value map where the key is the shortcode of the breakpoint and the value is the full media query. | Map | — none |
$gutters | A complimentary map to the $grid map where the size of the css grid gutter is applied at each breakpoint. | Map | — none |
Requires
- [mixin]
flex-column
linear-gradient
@mixin linear-gradient($direction, $su-color-stops) { ... }
Description
Mixin to create a linear gradient with a plain color fallback.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$direction | Linear gradient direction. One of: to top, to top right, to right top, to right, to bottom right, to right bottom, to bottom, to bottom left, to left bottom, to left, to left top, to top left | String | — none |
$su-color-stops | Color-stops composing the gradient. Each includes a color value, and a location in percentage (when there are more than 2 $su-color-stops), e.g., #123456 30% . | List | — none |
Example
@include linear-gradient(#31b7d7, #edac7d);
@include linear-gradient(to right, #eee 0%, $su-color-cardinal-red 50%, $su-color-palo-alto 100%);
@include linear-gradient(32deg, #53284f 0%, #00548f 50%, #0098db 50.01%, $su-color-white 100%);
Requires
- [function]
is-direction-or-angle
Author
Hugo Giraudel
centered-column
@mixin centered-column($grid, $screens, $margin) { ... }
Description
Centers a single cellin a container based on max width in breakpoints.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$grid | A sass map where the key is the shortcode of the breakpoint and the value is the full media query. | Map | — none |
$screens | A sass map of screen size breakpoint width values | Map | — none |
$margin | A sass map of screen size breakpoint screen edge margin sizes | Map | — none |
Requires
- [function]
breakpoint-max
display-grid
@mixin display-grid() { ... }
Description
Mixin to render cssGrid in all modern browsers, including IE11.
Parameters
None.
Used by
- [mixin]
responsive-su-grid-columns
grid-align-self
@mixin grid-align-self($value) { ... }
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$value | value for css property align-self. | String | — none |
TODO's
this needs a description
grid-column-gap
@mixin grid-column-gap($gap) { ... }
Description
Mixin to render cssGrid column gaps in all modern browsers, including IE11.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$gap | A unit of space for the column gap between columns. | Unit | — none |
Used by
- [mixin]
grid-gap
su-grid-columns
@mixin su-grid-columns($columns, $ie-autocolumn) { ... }
Description
Mixin to render cssGrid template columns in all modern browsers, including IE11.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$columns | A value for grid-template-columns. | List | — none |
$ie-autocolumn | True or False for wether to include the autocolumn mixin for IE rows. | Boolean | — none |
Requires
- [mixin]
ie-autocolumn
- [function]
to-list
grid-gap
@mixin grid-gap($gap) { ... }
Description
Mixin to render cssGrid column gaps in all modern browsers, including IE11.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$gap | A unit of space for the column gap between columns. | Unit or String | — none |
Requires
- [mixin]
grid-column-gap
- [mixin]
grid-row-gap
- [function]
is-length
Used by
- [mixin]
responsive-su-grid-columns
- [mixin]
responsive-grid-gap
grid-item-spans
@mixin grid-item-spans($col-start, $col-end, $row-start, $row-end) { ... }
Description
Mixin to render cssGrid column spans in all modern browsers, including IE11.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$col-start | The column integer to start at | Integer | — none |
$col-end | A column integer or span | List | — none |
$row-start | The row integer to start at | Integer | — none |
$row-end | A row integer or span | List | — none |
Requires
- [function]
str-replace
- [function]
str-replace
grid-justify-self
@mixin grid-justify-self($value) { ... }
Description
A cross browser mixin to justify the grid.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$value | A value for justify-self. | List | — none |
grid-row-gap
@mixin grid-row-gap($gap) { ... }
Description
Mixin to render cssGrid column gaps in all modern browsers, including IE11.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$gap | A unit of space for the column gap between columns. | Unit | — none |
Used by
- [mixin]
grid-gap
grid-rows
@mixin grid-rows($rows) { ... }
Description
Mixin to render cssGrid in IE11 browsers.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$rows | A value for grid-template-rows. | List | — none |
ie-autocolumn
@mixin ie-autocolumn($children: 4) { ... }
Description
Mixin to generate ms-ie compatible 'auto flow' settings. In IE 11 you have to specifically tell the browser what row and column each cell is in. This allows you to do that with a mixin and some assumptions.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$children | number of children in order for column; | Integer | 4 |
Used by
- [mixin]
su-grid-columns
ie-autorow
@mixin ie-autorow($children: 4) { ... }
Description
Mixin to generate ms-ie compatible 'auto flow' settings. In IE 11 you have to specifically tell the browser what row and column each cell is in. This allows you to do that with some asumptions.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$children | number of children in order for row; | Integer | 4 |
responsive-su-grid-columns
@mixin responsive-su-grid-columns($grid-map, $gutters-map, $ie-fix-mobile) { ... }
Description
A mixin to create a responsive grid layout.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$grid-map | A sass map with the columns per breakpoint. | Map | — none |
$gutters-map | A complimentary map to the $grid-map. | Map | — none |
$ie-fix-mobile | Set the mobile breakpoint to block for IE 11. | Bool | — none |
Requires
- [mixin]
display-grid
- [mixin]
grid-gap
responsive-grid-gap
@mixin responsive-grid-gap($gutters-map) { ... }
Description
A mixin to create a responsive grid layout.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$gutters-map | A sass map with the gutters per breakpoint. | Map | — none |
Requires
- [mixin]
grid-gap
icon
@mixin icon($icon, $width, $vertical, $icon_path) { ... }
Description
Display an icon using the :before on an element. If needs to be part of a link, consider using the link-icon instead.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$icon | Basename of link icon .svg file (without the .svg suffix). | String | — none |
$width | Width of icon including unit, e.g. 0.75em, 24px. | String | — none |
$vertical | Adjustment of vertical position of icon, e.g., '2px' moves icon up 2 pixels, '-0.3em' moves it down 0.3 em. | String | — none |
$icon_path | Path to where the icon lives. Defaults to $su-image-path. | String | — none |
Requires
- [variable]
su-color-black
ie-only
@mixin ie-only() { ... }
Description
A helper to write a query for IE-only styles
Parameters
None.
image-defaults
@mixin image-defaults() { ... }
Description
Default image styling to help with layout and responsiveness.
Parameters
None.
centering
@mixin centering($horizontal, $vertical) { ... }
Description
Mixin that uses absolute positioning and translate to center an element within a parent container no matter what the width of height of either are. The parent container needs to have {position: relative;}
for this to work properly. There might be other ways to center elements, e.g., by using Flexbox and CSS grid. Please use the most appropriate method for your project.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$horizontal | Center horizontally if | Boolean | — none |
$vertical | Center vertically if | Boolean | — none |
link-glyph
@mixin link-glyph($glyph, $animate) { ... }
Description
Display a glyph after a link.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$glyph | Character to display after the link, e.g. '›', '\00BB'. | String | — none |
$animate | Whether or not to animate on hover. | Boolean | — none |
link-icon
@mixin link-icon($icon, $width, $animate, $vertical, $location) { ... }
Description
Display an icon after a link.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$icon | Basename of link icon .svg file (without the .svg suffix). | String | — none |
$width | Width of icon including unit, e.g. 0.75em, 24px. | String | — none |
$animate | Type of animation for the icon on hover. Available options: right, down, up, topright, none. (deprecated true. Please use right) | String | — none |
$vertical | Adjustment of vertical position of icon, e.g., '2px' moves icon up 2 pixels, '-0.3em' moves it down 0.3 em. | String | — none |
$location | Location of icon, e.g., before or after. | String | — none |
Requires
link
@mixin link($color, $hover) { ... }
Description
Default link styling.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$color | Default up color | Variable | — none |
$hover | Default hover color | Variable | — none |
list-horizontal
@mixin list-horizontal() { ... }
Description
Standard horizontal list. Credit: http://snippetcentral.com/horizontal-navigation-lists/
Parameters
None.
list-unstyled
@mixin list-unstyled() { ... }
Description
Removes styles from a list.
Parameters
None.
modular-spacing
modular-spacing mixin has been deprecated font will be removed in Decanter Version 7. Please replace with responsive-spacing instead.
@mixin modular-spacing($type, $steps) { ... }
Description
Modular Scale Mixins for modular scaling, a unitless system for returning font sizes or spacing (padding or margin) values. Our modular spacing system does not use the Bourbon modular-scale mixin. Instead we use a manual scale defined in variables/core/_modular-spacing.scss for finetuning. A mixin for adding spacing (margin or padding) between elements or between an element and the edge of its container. The amount of spacing is returned using a unitless scaling system with a curated scale. Please see core/scss/utilities/variables/core/_modular-spacing.scss for variable maps.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$type | Spacing type, either 'padding' or 'margin'. | String | — none |
$steps | List (1 to 4 values): Either integer (from -4 to 9 including 0) or null. Follows the shorthand notation of padding/margin. Use null to skip a side. A value of 0 returns the modular spacing base value for that breakpoint. | List | — none |
Example
@include modular-spacing('padding', 2 null);
@include modular-spacing('margin', 0 -4 1 2);
Throws
$steps should have 1 to 4 values
Requires
- [function]
get-modular-spacing-base
- [function]
get-modular-spacing-base
- [function]
calculate-modular-spacing
- [function]
calculate-modular-spacing
- [function]
calculate-modular-spacing
- [function]
calculate-modular-spacing
- [function]
calculate-modular-spacing
- [function]
calculate-modular-spacing
- [function]
calculate-modular-spacing
- [function]
calculate-modular-spacing
- [function]
calculate-modular-spacing
- [function]
calculate-modular-spacing
- [function]
calculate-modular-spacing
- [function]
calculate-modular-spacing
- [function]
calculate-modular-spacing
- [variable]
bp-list
- [variable]
number-bp
- [variable]
bp-list
- [variable]
number-bp
- [variable]
current-base
- [variable]
bp-list
- [variable]
previous-base
- [variable]
previous-base
- [variable]
bp-list
- [variable]
current-base
- [variable]
previous-base
- [variable]
bp-list
modular-typography-base
@mixin modular-typography-base() { ... }
Description
Modular typography uses the Bourbon modular-scale mixin with base font sizes for each breakpoint and a modular-scale-ratio defined in variables/pre-vendor/_bourbon-overrides.scss. Set base font-size for
at each breakpoint to use with modular typography.Parameters
None.
modular-typography
@mixin modular-typography($scale: 1) { ... }
Description
Specify font size using modular-scale, relative to the base font size (which varies by breakpoint). @include modular-typography(0)
returns the base font size for that breakpoint.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$scale | number (unitless) indicating how many steps to adjust font-size up or down the scale. e.g. entering '1' would create 1 step larger relative to base font size | Number (unitless) | 1 |
Example
@include modular-typography(2);
@include modular-typography(0);
@include modular-typography(-1);
Used by
- [mixin]
font-splash
- [mixin]
intro-text
- [mixin]
quote-text
- [mixin]
subheading
- [mixin]
type-a
- [mixin]
type-b
- [mixin]
type-c
- [mixin]
type-d
- [mixin]
type-e
responsive-spacing
@mixin responsive-spacing($type, $steps, $grid) { ... }
Description
Responsive Spacing A mixin for adding spacing (margin or padding) between elements or between an element and the edge of its container. The amount of spacing is returned based on curated values that are finetuned for 3 breakpoint ranges (Mobile: XS-SM, Tablet(and small desktop): MD-XL, Desktop: 2XL). Please see core/scss/utilities/variables/core/_responsive-spacing.scss for the variable map.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$type | Spacing type, either 'padding' or 'margin'. | String | — none |
$steps | List (1 to 4 values): Either integer (from -2 to 10 including 0) or null. Follows the shorthand notation of padding/margin. Use null to skip a side. | List | — none |
$grid | Breakpoint device sass map. Defaults to $su-grid-device. | Map | — none |
Example
@include responsive-spacing('padding', 2 null);
@include responsive-spacing('margin', 0 -4 1 2);
Throws
$steps should have 1 to 4 values
Requires
- [function]
get-responsive-spacing-value
- [function]
get-responsive-spacing-value
- [function]
get-responsive-spacing-value
- [function]
get-responsive-spacing-value
- [function]
get-responsive-spacing-value
- [function]
get-responsive-spacing-value
- [function]
get-responsive-spacing-value
- [function]
get-responsive-spacing-value
- [function]
get-responsive-spacing-value
- [function]
get-responsive-spacing-value
- [function]
get-responsive-spacing-value
- [function]
get-responsive-spacing-value
- [function]
get-responsive-spacing-value
Used by
box-shadow
@mixin box-shadow($depth: flat, $stroke: 1px solid #C6C6C6) { ... }
Description
Box shadows for element containers.
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$depth | One of flat, paper, shallow, medium, medium-deep, deep | String | flat |
$stroke | border css properties | Css | 1px solid #C6C6C6 |
Used by
- [mixin]
card
Placeholder
placeholders
Pre-vendor
variables
$bourbon
$$bourbon: (
"modular-scale-ratio": 1.25,
"rails-asset-pipeline": false
) !default;
Description
Bourbon Overrides Specific overrides for bourbon.
$fa-font-path
$$fa-font-path: "@fortawesome/fontawesome-free/webfonts" !default;
Description
Fontawesome Overrides Specific overrides for fontawesome.
Typography
mixins
big-paragraph
@mixin big-paragraph() { ... }
Description
To be used for long form text, most importantly for your wysiwyg body style. The purpose of this style is to allow for longer lengths of text to be easily readable for a user from a comfortable distance from their screens. With a deliberately larger font-size and open line height we’re able to service this display requirement, allowing for users to track from one line to another without incurring fatigue. This style can also be used for other purposes, but note that it’s open line height can make for an awkward display if used in the wrong places.
Parameters
None.
caption
@mixin caption() { ... }
Description
To be used for describing the content of an image.
Parameters
None.
Requires
- [mixin]
font-smoothing
- [variable]
su-color-cool-grey
credits
@mixin credits() { ... }
Description
To be used for crediting a source or photographer.
Parameters
None.
Requires
- [mixin]
font-smoothing
- [variable]
su-color-cool-grey
font-smoothing
@mixin font-smoothing() { ... }
Description
To be used for light text on a dark background only.
Parameters
None.
Used by
- [mixin]
caption
- [mixin]
credits
- [mixin]
intro-text
- [mixin]
types
- [placeholder]
%button-base
font-splash
@mixin font-splash() { ... }
Description
For text on a page that should stand out and draw more attention.
Parameters
None.
Requires
- [mixin]
types
- [mixin]
modular-typography
script
@mixin script() { ... }
Description
Script font styling.
Parameters
None.
intro-text
@mixin intro-text() { ... }
Description
For leading a page of text, summarizing a main point, and/or highlighting a paragraph or quote.
Parameters
None.
Requires
- [mixin]
modular-typography
- [mixin]
font-smoothing
quote-text
@mixin quote-text() { ... }
Description
To be used for quote text.
Parameters
None.
Requires
- [mixin]
modular-typography
sans
@mixin sans() { ... }
Description
Sans Serif font styling.
Parameters
None.
Used by
- [mixin]
skiplinks
- [mixin]
card
- [placeholder]
%button-base
sanskrit
@mixin sanskrit() { ... }
Description
Sanskrit font styling.
Parameters
None.
serif
@mixin serif() { ... }
Description
Serif font styling.
Parameters
None.
slab
@mixin slab() { ... }
Description
Slab font styling.
Parameters
None.
small-paragraph
@mixin small-paragraph() { ... }
Description
To be used in short snippets of descriptive text, like as summaries or deks in your cards. The purpose of this style is to allow for shorter lengths of text to be easily readable inside contained spaces, with fore-shortened widths—this last part is critical to its use. Deliberately slightly smaller in font-size than the big paragraph style, and with a condensed line height (opposite to it’s sibling, with the same purpose, to increase readability, but because of it’s condensed line length, in this case, we want the line-height to be tighter, making it easier to track from one line to the next).
Parameters
None.
Used by
- [mixin]
card
subheading
@mixin subheading() { ... }
Description
To be used for subheading text.
Parameters
None.
Requires
- [mixin]
modular-typography
type-a
@mixin type-a() { ... }
Description
Type A font style.
Parameters
None.
Requires
- [mixin]
modular-typography
TODO's
add link to typography page on site
type-b
@mixin type-b() { ... }
Description
Type B font style.
Parameters
None.
Requires
- [mixin]
modular-typography
type-c
@mixin type-c() { ... }
Description
Type C font style.
Parameters
None.
Requires
- [mixin]
modular-typography
Used by
- [mixin]
card
type-d
@mixin type-d() { ... }
Description
Type D font style.
Parameters
None.
Requires
- [mixin]
modular-typography
type-e
@mixin type-e() { ... }
Description
Type E font style.
Parameters
None.
Requires
- [mixin]
modular-typography
type-f
@mixin type-f() { ... }
Description
Type F font style.
Parameters
None.
Used by
- [mixin]
card
types
@mixin types() { ... }
Description
Default shared styling for display (e.g., header) font styles.
Parameters
None.
Requires
- [mixin]
font-smoothing
Used by
- [mixin]
card
- [mixin]
font-splash
General
css
.centered-container
.centered-container { ... }
Description
Centered Container
Centers the first child element of which this class is applied to.
// /// Variables are a way to store information that will be reused throughout a /// project. They store things like colors and fonts, or any CSS value that'll be /// reused. /// Every variable is declared as !default so that it can be /// overridden by a previous import. /// If you want to override a variable, set that variable in one of your /// own partials, then @import '
//
/// Variables are a way to store information that will be reused throughout a
/// project. They store things like colors and fonts, or any CSS value that'll be
/// reused.
/// Every variable is declared as !default so that it can be
/// overridden by a previous import.
/// If you want to override a variable, set that variable in one of your
/// own partials, then @import ' { ... }
Description
Variables
> *:first-child
> *:first-child { ... }
Description
Ensure no top padding or margin on first item.
> *:last-child:not(.su-card__button)
> *:last-child:not(.su-card__button) { ... }
Description
Ensure no bottom padding or margin on last item unless it is a button.
> span
> span { ... }
Description
Super Headline.
> h2
> h2 { ... }
Description
Headline.
> div:not(.su-card__button)
> div:not(.su-card__button) { ... }
Description
Card body - open field, any p or div (that are not part of the button)
.su-card__button
.su-card__button { ... }
Description
Button to click on.
width: auto; } } } /// Image hover effects a
width: auto;
}
}
}
/// Image hover effects
a { ... }
Description
Overriding default button 100% width in xs.
a
a { ... }
Description
Image hover effects
functions
map-deep-get
@function map-deep-get($map, $keys...) { ... }
Description
Map deep get
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$map | Map | Map | — none |
$keys | Key chain | Arglist | — none |
Returns
Desired value
Used by
- [function]
get-responsive-spacing-value
Author
Hugo Giraudel
variables
[private] _total-columns
$_total-columns: $grid-columns;
Description
Make note here.
Used by
- [function]
flex-column-width
- [function]
flex-column-width
- [function]
flex-column-width
- [function]
flex-parse-columns
- [function]
flex-parse-columns
bp-list
$bp-list: map-keys($grid);
Description
Get a list of all breakpoint keys in $grid.
Used by
- [mixin]
modular-spacing
- [mixin]
modular-spacing
- [mixin]
modular-spacing
- [mixin]
modular-spacing
- [mixin]
modular-spacing
number-bp
$number-bp: length($bp-list);
Description
Find total number of breakpoints in our grid.
Used by
- [mixin]
modular-spacing
- [mixin]
modular-spacing
current-base
$current-base: get-modular-spacing-base(nth($bp-list, $i));
Description
Get modular-spacing base value for current breakpoint.
Used by
- [mixin]
modular-spacing
- [mixin]
modular-spacing
previous-base
$previous-base: null;
Description
Initialize $previous_base.
Used by
- [mixin]
modular-spacing
- [mixin]
modular-spacing
- [mixin]
modular-spacing
$su-grid-gutters @group variable
$$su-grid-gutters
@group variable: (
'xs': $su-gutter-xs,
'sm': $su-gutter-sm,
'md': $su-gutter-md,
'lg': $su-gutter-lg,
'xl': $su-gutter-xl,
'2xl': $su-gutter-2xl
) !default;
Description
A sass map of css gutter width values keyed by breakpoint short codes.
placeholders
%button-base
%%button-base { ... }
Description
Base button styling.
Requires
- [mixin]
font-smoothing
- [mixin]
sans
%cta-base
%%cta-base { ... }
Description
CTA base styling.
Requires
- [mixin]
button-big
- [function]
color
general
%general { ... }
Description
Base input field styling
Requires
- [function]
color
- [variable]
su-color-driftwood
Variable
variables
$su-alert-colors
$$su-alert-colors: (
default: $su-color-foggy-light,
error: $su-color-digital-red,
info: $su-color-digital-blue-dark,
success: $su-color-digital-green,
warning: $su-color-illuminating-dark,
warning-link: $su-color-cardinal-red,
dark-text: $su-color-black,
light-text: $su-color-white,
light-hover: $su-color-foggy
) !default;
Description
Color map for alert components.
$su-button-stroke
$$su-button-stroke: inset 0 0 0 2px !default;
Description
Default button stroke styling.
$su-box-shadow-depth
$$su-box-shadow-depth: (
'flat': 'none',
'paper': '0px 1px 2px rgba(0, 0, 0, 0.25)',
'shallow': '0px 3px 6px rgba(0, 0, 0, 0.13), 0px 3px 6px rgba(0, 0, 0, 0.1)',
'medium': '0px 10px 20px rgba(0, 0, 0, 0.15), 0px 6px 6px rgba(0, 0, 0, 0.2)',
'medium-deep': '0px 14px 28px rgba(0, 0, 0, 0.2), 0px 5px 10px rgba(0, 0, 0, 0.22)',
'deep': '0px 19px 38px rgba(0, 0, 0, 0.25), 0px 5px 12px rgba(0, 0, 0, 0.18)'
) !default;
Description
The styles of depth for a box shadow on a container.
$su-screen-xs
$$su-screen-xs: 0 !default;
$su-screen-sm
$$su-screen-sm: 576px !default;
$su-screen-md
$$su-screen-md: 768px !default;
$su-screen-lg
$$su-screen-lg: 992px !default;
$su-screen-xl
$$su-screen-xl: 1200px !default;
$su-screen-2xl
$$su-screen-2xl: $su-site-max-width !default;
$su-breakpoint-xs
$$su-breakpoint-xs: 'only screen and (min-width: #{$su-screen-xs})' !default;
Description
Mixin for basic mobile-first media query for xs-and-up screen size.
$su-breakpoint-xs-only
$$su-breakpoint-xs-only: 'only screen and (min-width: #{$su-screen-xs}) and (max-width: #{$su-screen-sm - 1})' !default;
Description
Mixin for basic mobile-first media query for xs-only screen size.
$su-breakpoint-sm
$$su-breakpoint-sm: 'only screen and (min-width: #{$su-screen-sm})' !default;
Description
Mixin for basic mobile-first media query for sm-and-up screen size.
$su-breakpoint-sm-only
$$su-breakpoint-sm-only: 'only screen and (min-width: #{$su-screen-sm}) and (max-width: #{$su-screen-md - 1})' !default;
Description
Mixin for basic mobile-first media query for sm-only screen size.
$su-breakpoint-md
$$su-breakpoint-md: 'only screen and (min-width: #{$su-screen-md})' !default;
Description
Mixin for basic mobile-first media query for md-and-up screen size.
$su-breakpoint-md-only
$$su-breakpoint-md-only: 'only screen and (min-width: #{$su-screen-md}) and (max-width: #{$su-screen-lg - 1})' !default;
Description
Mixin for basic mobile-first media query for md-only screen size.
$su-breakpoint-lg
$$su-breakpoint-lg: 'only screen and (min-width: #{$su-screen-lg})' !default;
Description
Mixin for basic mobile-first media query for lg-and-up screen size.
$su-breakpoint-lg-only
$$su-breakpoint-lg-only: 'only screen and (min-width: #{$su-screen-lg}) and (max-width: #{$su-screen-xl - 1})' !default;
Description
Mixin for basic mobile-first media query for lg-only screen size.
$su-breakpoint-xl
$$su-breakpoint-xl: 'only screen and (min-width: #{$su-screen-xl})' !default;
Description
Mixin for basic mobile-first media query for xl-and-up screen size.
$su-breakpoint-xl-only
$$su-breakpoint-xl-only: 'only screen and (min-width: #{$su-screen-xl}) and (max-width: #{$su-screen-2xl - 1})' !default;
Description
Mixin for basic mobile-first media query for xl-only screen size.
$su-breakpoint-2xl
$$su-breakpoint-2xl: 'only screen and (min-width: #{$su-screen-2xl})' !default;
Description
Mixin for basic mobile-first media query for 2xl-and-up screen size.
$su-breakpoint-2xl-only
$$su-breakpoint-2xl-only: $su-breakpoint-2xl;
Description
Just in case.
su-color-cardinal-red
$su-color-cardinal-red: #8c1515 !default;
Type
Color
su-color-cardinal-red-light
$su-color-cardinal-red-light: #b83a4b !default;
Type
Color
su-color-cardinal-red-dark
$su-color-cardinal-red-dark: #820000 !default;
Type
Color
su-color-white
$su-color-white: #ffffff !default;
Type
Color
su-color-black
$su-color-black: #2e2d29 !default;
Type
Color
Used by
- [mixin]
button-secondary
- [mixin]
button-secondary
- [mixin]
icon
su-color-black-true
$su-color-black-true: #000 !default;
Type
Color
su-color-black-90
$su-color-black-90: #43423e !default;
Type
Color
su-color-black-80
$su-color-black-80: #585754 !default;
Type
Color
su-color-black-70
$su-color-black-70: #6d6c69 !default;
Type
Color
su-color-black-60
$su-color-black-60: #767674 !default;
Type
Color
su-color-black-50
$su-color-black-50: #979694 !default;
Type
Color
su-color-black-40
$su-color-black-40: #ababa9 !default;
Type
Color
su-color-black-30
$su-color-black-30: #c0c0bf !default;
Type
Color
su-color-black-20
$su-color-black-20: #d5d5d4 !default;
Type
Color
su-color-black-10
$su-color-black-10: #eaeaea !default;
Type
Color
su-color-digital-red
$su-color-digital-red: #b1040e !default;
Type
Color
su-color-digital-red-light
$su-color-digital-red-light: #e50808 !default;
Type
Color
su-color-digital-blue
$su-color-digital-blue: #006cb8 !default;
Type
Color
su-color-digital-blue-light
$su-color-digital-blue-light: #6fc3ff !default;
Type
Color
su-color-digital-blue-dark
$su-color-digital-blue-dark: #00548f !default;
Type
Color
su-color-digital-green
$su-color-digital-green: #008566 !default;
Type
Color
su-color-digital-green-light
$su-color-digital-green-light: #1aecba !default;
Type
Color
su-color-digital-green-dark
$su-color-digital-green-dark: #006f54 !default;
Type
Color
su-color-cool-grey
$su-color-cool-grey: #53565a !default;
Type
Color
Used by
su-color-palo-alto
$su-color-palo-alto: #175e54 !default;
Type
Color
su-color-palo-alto-light
$su-color-palo-alto-light: #2d716f !default;
Type
Color
su-color-palo-alto-dark
$su-color-palo-alto-dark: #014240 !default;
Type
Color
su-color-palo-verde
$su-color-palo-verde: #279989 !default;
Type
Color
su-color-palo-verde-light
$su-color-palo-verde-light: #59b3a9 !default;
Type
Color
su-color-palo-verde-dark
$su-color-palo-verde-dark: #017e7c !default;
Type
Color
su-color-olive
$su-color-olive: #8f993e !default;
Type
Color
su-color-olive-light
$su-color-olive-light: #a6b168 !default;
Type
Color
su-color-olive-dark
$su-color-olive-dark: #7a863b !default;
Type
Color
su-color-bay
$su-color-bay: #6fa287 !default;
Type
Color
su-color-bay-light
$su-color-bay-light: #8ab8a7 !default;
Type
Color
su-color-bay-dark
$su-color-bay-dark: #417865 !default;
Type
Color
su-color-sky
$su-color-sky: #4298b5 !default;
Type
Color
su-color-sky-light
$su-color-sky-light: #67afd2 !default;
Type
Color
su-color-sky-dark
$su-color-sky-dark: #016895 !default;
Type
Color
su-color-lagunita
$su-color-lagunita: #007c92 !default;
Type
Color
su-color-lagunita-light
$su-color-lagunita-light: #009ab4 !default;
Type
Color
su-color-lagunita-dark
$su-color-lagunita-dark: #006b81 !default;
Type
Color
su-color-poppy
$su-color-poppy: #e98300 !default;
Type
Color
su-color-poppy-light
$su-color-poppy-light: #f9a44a !default;
Type
Color
su-color-poppy-dark
$su-color-poppy-dark: #d1660f !default;
Type
Color
su-color-spirited
$su-color-spirited: #e04f39 !default;
Type
Color
su-color-spirited-light
$su-color-spirited-light: #f4795b !default;
Type
Color
su-color-spirited-dark
$su-color-spirited-dark: #c74632 !default;
Type
Color
su-color-illuminating
$su-color-illuminating: #fedd5c !default;
Type
Color
su-color-illuminating-light
$su-color-illuminating-light: #ffe781 !default;
Type
Color
su-color-illuminating-dark
$su-color-illuminating-dark: #fec51d !default;
Type
Color
su-color-plum
$su-color-plum: #620059 !default;
Type
Color
su-color-plum-light
$su-color-plum-light: #734675 !default;
Type
Color
su-color-plum-dark
$su-color-plum-dark: #350d36 !default;
Type
Color
su-color-brick
$su-color-brick: #651c32 !default;
Type
Color
su-color-brick-light
$su-color-brick-light: #7f2d48 !default;
Type
Color
su-color-brick-dark
$su-color-brick-dark: #42081b !default;
Type
Color
su-color-archway
$su-color-archway: #5d4b3c !default;
Type
Color
su-color-archway-light
$su-color-archway-light: #766253 !default;
Type
Color
su-color-archway-dark
$su-color-archway-dark: #2f2424 !default;
Type
Color
su-color-stone
$su-color-stone: #7f7776 !default;
Type
Color
su-color-stone-light
$su-color-stone-light: #d4d1d1 !default;
Type
Color
su-color-stone-dark
$su-color-stone-dark: #544948 !default;
Type
Color
su-color-foggy
$su-color-foggy: #dad7cb !default;
Type
Color
su-color-foggy-light
$su-color-foggy-light: #f4f4f4 !default;
Type
Color
su-color-foggy-dark
$su-color-foggy-dark: #b6b1a9 !default;
Type
Color
su-color-blue
$su-color-digital-blue-dark replaces $su-color-blue as the new variable
$su-color-blue: $su-color-digital-blue-dark !default;
Type
Color
su-color-bright-blue
$su-color-digital-blue replaces $su-color-bright-blue as the new variable
$su-color-bright-blue: $su-color-digital-blue !default;
Type
Color
su-color-bright-red
$su-color-digital-red replaces $su-color-bright-red as the new variable
$su-color-bright-red: $su-color-digital-red !default;
Type
Color
su-color-chocolate
$su-color-archway-dark replaces $su-color-chocolate as the new variable
$su-color-chocolate: $su-color-archway-dark !default;
Type
Color
su-color-cloud
$su-color-foggy replaces $su-color-cloud as the new variable
$su-color-cloud: $su-color-foggy !default;
Type
Color
su-color-dark-red
$su-color-cardinal-red-dark replaces $su-color-dark-red as the new variable
$su-color-dark-red: $su-color-cardinal-red-dark !default;
Type
Color
su-color-vivid-red
$su-color-digital-red-light replaces $su-color-vivid-red as the new variable
$su-color-vivid-red: $su-color-digital-red-light !default;
Type
Color
su-color-driftwood
$su-color-foggy-dark replaces $su-color-driftwood as the new variable
$su-color-driftwood: $su-color-foggy-dark !default;
Type
Color
Used by
- [placeholder]
general
su-color-fog
$su-color-foggy-light replaces $su-color-fog as the new variable
$su-color-fog: $su-color-foggy-light !default;
Type
Color
su-color-brown
$su-color-brown will be removed in Decanter v7
$su-color-brown: #5e3032 !default;
Type
Color
su-color-clay
$su-color-clay will be removed in Decanter v7
$su-color-clay: #5f574f !default;
Type
Color
su-color-gold
$su-color-gold will be removed in Decanter v7
$su-color-gold: #b26f16 !default;
Type
Color
su-color-light-sage
$su-color-light-sage will be removed in Decanter v7
$su-color-light-sage: #c7d1c5 !default;
Type
Color
su-color-mint
$su-color-mint will be removed in Decanter v7
$su-color-mint: #009b76 !default;
Type
Color
su-color-purple
$su-color-purple will be removed in Decanter v7
$su-color-purple: #53284f !default;
Type
Color
su-color-redwood
$su-color-redwood will be removed in Decanter v7
$su-color-redwood: #8d3c1e !default;
Type
Color
su-color-sandhill
$su-color-sandhill will be removed in Decanter v7
$su-color-sandhill: #b3995d !default;
Type
Color
su-color-sandstone
$su-color-sandstone will be removed in Decanter v7
$su-color-sandstone: #d2c295 !default;
Type
Color
su-color-light-sandstone
$su-color-light-sandstone will be removed in Decanter v7
$su-color-light-sandstone: #f9f6ef !default;
Type
Color
su-color-sun
$su-color-sun will be removed in Decanter v7
$su-color-sun: #eaab00 !default;
Type
Color
su-color-teal
$su-color-teal will be removed in Decanter v7
$su-color-teal: #00505c !default;
Type
Color
su-color-warm-grey
$su-color-warm-grey will be removed in Decanter v7
$su-color-warm-grey: #3f3c30 !default;
Type
Color
su-color-cool-grey-75
$su-color-cool-grey-75 will be removed in Decanter v7
$su-color-cool-grey-75: #7a7b7e !default;
Type
Color
su-color-cool-grey-50
$su-color-cool-grey-50 will be removed in Decanter v7
$su-color-cool-grey-50: #a6a7a9 !default;
Type
Color
su-color-cool-grey-25
$su-color-cool-grey-25 will be removed in Decanter v7
$su-color-cool-grey-25: #d2d3d4 !default;
Type
Color
su-color-cool-grey-15
$su-color-cool-grey-15 will be removed in Decanter v7
$su-color-cool-grey-15: #e5e5e5 !default;
Type
Color
su-color-beige
$su-color-beige will be removed in Decanter v7
$su-color-beige: #9d9573 !default;
Type
Color
$su-core-colors
$$su-core-colors: (
brand: $su-color-cardinal-red,
brand--bright: $su-color-digital-red,
brand--dark: $su-color-digital-red-dark,
bg: $su-color-white,
bg--reverse: $su-color-black,
text: $su-color-black,
text--high-contrast: $su-color-black-true,
text--reverse: $su-color-white,
link: $su-color-digital-blue,
link--hover: $su-color-black,
link--alt: $su-color-digital-red,
link--alt-hover: $su-color-black,
link--reverse: $su-color-white,
link--reverse-hover: $su-color-digital-red-light,
card-border: #e3e3e3,
) !default;
Description
SASS map for the core Decanter colors. Color maps for individual components are in their own respective directories within utilities/variables/components
$su-social-brands
$$su-social-brands: (
'Facebook': #3b579d,
'Twitter': #1da1f2,
'Instagram': #d73676,
'LinkedIn': #0077b5,
'YouTube': #cd201f,
'iTunes U': #a3aaae,
'Reddit': #ff5700,
) !default;
Description
Social media brand colors Color map for common social media brands
$su-image-path
$$su-image-path: '../img' !default;
Description
Relative path to images directory on compile.
$su-grid-columns
$$su-grid-columns: 12 !default;
Description
The number of columns used by default for the flex grid.
$su-grid-screens
$$su-grid-screens: (
'xs': $su-screen-xs,
'sm': $su-screen-sm,
'md': $su-screen-md,
'lg': $su-screen-lg,
'xl': $su-screen-xl,
'2xl': $su-screen-2xl
) !default;
Description
A sass map of screen sized keyed with the breakpoint shortcode.
$su-grid-media
$$su-grid-media: (
'xs': $su-breakpoint-xs,
'sm': $su-breakpoint-sm,
'md': $su-breakpoint-md,
'lg': $su-breakpoint-lg,
'xl': $su-breakpoint-xl,
'2xl': $su-breakpoint-2xl
) !default;
Description
A sass map of breakpoints sized keyed with the breakpoint shortcode.
$su-grid-device
$$su-grid-device: (
'mobile': $su-breakpoint-xs,
'tablet': $su-breakpoint-md,
'desktop': $su-breakpoint-2xl
) !default;
Description
A sass map of device sized keyed with the breakpoint shortcode.
$su-grid-media-only
$$su-grid-media-only: (
'xs': $su-breakpoint-xs-only,
'sm': $su-breakpoint-sm-only,
'md': $su-breakpoint-md-only,
'lg': $su-breakpoint-lg-only,
'xl': $su-breakpoint-xl-only,
'2xl': $su-breakpoint-2xl
) !default;
Description
A sass map of single breakpoint spans keyed with the breakpoint shortcode.
$su-responsive-columns-default
$$su-responsive-columns-default: (
$su-breakpoint-xs: 1fr,
$su-breakpoint-sm: 1fr 1fr,
$su-breakpoint-md: 1fr 1fr,
$su-breakpoint-lg: 1fr 1fr,
$su-breakpoint-xl: 1fr 1fr,
$su-breakpoint-2xl: 1fr 1fr
) !default;
Description
A sass map of css grid columns keyed with breakpoint media queries. 2 column.
$su-responsive-columns-two
$$su-responsive-columns-two: $su-responsive-columns-default !default;
Description
A sass map of css grid columns keyed with breakpoint media queries. 2 column.
$su-responsive-columns-three
$$su-responsive-columns-three: (
$su-breakpoint-xs: 1fr,
$su-breakpoint-sm: 1fr 1fr,
$su-breakpoint-md: 1fr 1fr,
$su-breakpoint-lg: 1fr 1fr 1fr,
$su-breakpoint-xl: 1fr 1fr 1fr,
$su-breakpoint-2xl: 1fr 1fr 1fr
) !default;
Description
A sass map of css grid columns keyed with breakpoint media queries. 3 column.
$su-responsive-columns-four
$$su-responsive-columns-four: (
$su-breakpoint-xs: 1fr,
$su-breakpoint-sm: 1fr 1fr,
$su-breakpoint-md: 1fr 1fr,
$su-breakpoint-lg: 1fr 1fr 1fr 1fr,
$su-breakpoint-xl: 1fr 1fr 1fr 1fr,
$su-breakpoint-2xl: 1fr 1fr 1fr 1fr
) !default;
Description
A sass map of css grid columns keyed with breakpoint media queries. 4 column.
$su-responsive-columns-six
$$su-responsive-columns-six: (
$su-breakpoint-xs: 1fr,
$su-breakpoint-sm: 1fr 1fr 1fr,
$su-breakpoint-md: 1fr 1fr 1fr,
$su-breakpoint-lg: 1fr 1fr 1fr 1fr 1fr,
$su-breakpoint-xl: 1fr 1fr 1fr 1fr 1fr 1fr,
$su-breakpoint-2xl: 1fr 1fr 1fr 1fr 1fr 1fr
) !default;
Description
A sass map of css grid columns keyed with breakpoint media queries. 6 column.
$su-gutter-xs
$$su-gutter-xs: 20px !default;
$su-gutter-sm
$$su-gutter-sm: 20px !default;
$su-gutter-md
$$su-gutter-md: 20px !default;
$su-gutter-lg
$$su-gutter-lg: 36px !default;
$su-gutter-xl
$$su-gutter-xl: 40px !default;
$su-gutter-2xl
$$su-gutter-2xl: 48px !default;
$su-responsive-gutters-default
$$su-responsive-gutters-default: (
$su-breakpoint-xs: $su-gutter-xs,
$su-breakpoint-sm: $su-gutter-sm,
$su-breakpoint-md: $su-gutter-md,
$su-breakpoint-lg: $su-gutter-lg,
$su-breakpoint-xl: $su-gutter-xl,
$su-breakpoint-2xl: $su-gutter-2xl
) !default;
Description
A sass map of css grid gap width keyed with breakpoint media queries.
$su-lead-max-width
$$su-lead-max-width: 85rem !default;
Description
For setting the max-width for the lead font style.
$su-site-max-width
$$su-site-max-width: 1500px !default;
Description
For setting the max-width of the project's grid system.
$su-input-max-width
$$su-input-max-width: 46rem !default;
Description
For setting the max-width of input fields.
$su-border-radius
$$su-border-radius: 3px !default;
Description
For setting the default border-radius.
$su-focus-shadow
$$su-focus-shadow: 0 0 3px $su-color-cool-grey, 0 0 7px $su-color-cool-grey !default;
Description
For settings the default focus to be applied to items in their focus state.
$su-modular-spacing-base
$$su-modular-spacing-base: (
'xs': 1.6rem,
'sm': 1.6rem,
'md': 1.8rem,
'lg': 1.8rem,
'xl': 1.8rem,
'2xl': 1.9rem
) !default;
Description
The base spacing values for each break point, which correspond to the step 0 value.
$su-modular-spacing-multiplier
$$su-modular-spacing-multiplier: (
-4: 0.16666667,
-3: 0.33333333,
-2: 0.5,
-1: 0.66666667,
0: 1,
1: 1.44444444,
2: 2,
3: 2.5,
4: 3.2,
5: 4,
6: 5,
7: 6,
8: 7,
9: 9
) !default;
Description
The multiplier between each modular spacing steps. These numbers are fine-tuned manually and do not follow a modular scale ratio. Step 0 correspond to a multiplier of 1. There are currently 14 integer steps from -4 to 9.
$su-modular-typography-base
$$su-modular-typography-base: (
'xs': 1.6rem,
'sm': 1.6rem,
'md': 1.8rem,
'lg': 1.8rem,
'xl': 1.8rem,
'2xl': 1.9rem
) !default;
Description
The base font sizes for each break point for use with the modular typography system which is based on the Bourbon modular scale.
su-responsive-spacing-map
$su-responsive-spacing-map: (
-2: (mobile: 0.8rem, tablet: 0.9rem, desktop: 1rem),
-1: (mobile: 1.1rem, tablet: 1.2rem, desktop: 1.3rem),
0: (mobile: 1.5rem, tablet: 1.8rem, desktop: 1.9rem),
1: (mobile: 2rem, tablet: 2.6rem, desktop: 2.7rem),
2: (mobile: 3rem, tablet: 3.6rem, desktop: 3.8rem),
3: (mobile: 3.2rem, tablet: 4.5rem, desktop: 4.8rem),
4: (mobile: 3.4rem, tablet: 5.8rem, desktop: 6.1rem),
5: (mobile: 3.8rem, tablet: 7.2rem, desktop: 7.6rem),
6: (mobile: 4.5rem, tablet: 9rem, desktop: 9.5rem),
7: (mobile: 5rem, tablet: 10.8rem, desktop: 11.4rem),
8: (mobile: 6rem, tablet: 12.6rem, desktop: 13.3rem),
9: (mobile: 7rem, tablet: 16.2rem, desktop: 17.1rem),
10: (mobile: 8rem, tablet: 21.6rem, desktop: 22.8rem)
) !default;
Description
The responsive spacing values from step -2 to 10 at 3 device width ranges.
$su-screen-margins
$$su-screen-margins: (
'xs': 20px,
'sm': 30px,
'md': 50px,
'lg': 80px,
'xl': 100px,
'2xl': 100px
) !default;
Description
A sass map of screen margins for edge containment
$su-root-font-size
$$su-root-font-size: 62.5%;
Description
HTML root font size (10px assuming browser default is 16px)
$su-base-font-size
$$su-base-font-size: 2rem !default;
Description
Font size.
$su-displays-mobile-factor
$$su-displays-mobile-factor: 0.85 !default;
Description
A multiplier to scale down some of the larger display font sizes at XS and SM break points.
$su-base-line-height
$$su-base-line-height: 1.4 !default;
Description
Default line height.
$su-displays-line-height
$$su-displays-line-height: 1.2 !default;
Description
Default line height.
$su-intro-line-height
$$su-intro-line-height: 1.5 !default;
Description
Default line height.
$su-font-sans
$$su-font-sans: 'Source Sans Pro', $font-stack-helvetica !default;
Description
font-sans font family.
$su-font-serif
$$su-font-serif: 'Source Serif Pro', $font-stack-georgia !default;
Description
font-serif font family.
$su-font-slab
$$su-font-slab: 'Roboto Slab', $font-stack-georgia !default;
Description
font-slab font family.
$su-font-handwriting
$$su-font-handwriting: 'Kalam', $font-stack-helvetica !default;
Description
font-script font family.
$su-font-sanskrit
$$su-font-sanskrit: 'Noto Sans', $font-stack-helvetica !default;
Description
font-sanskrit font family.
$su-font-x-light
$$su-font-x-light: 100 !default;
Description
font-x-light font weight.
$su-font-light
$$su-font-light: 200 !default;
Description
font-light font weight.
$su-font-regular
$$su-font-regular: 400 !default;
Description
font-regular font weight.
$su-font-semi-bold
$$su-font-semi-bold: 600 !default;
Description
font-semi-bold font weight.
$su-font-bold
$$su-font-bold: 700 !default;
Description
font-bold font weight.
$su-font-black
$$su-font-black: 900 !default;
Description
font-black font weight.
$su-aspect-height
$$su-aspect-height: 9 !default;
Description
Default aspect height setting.
$su-aspect-width
$$su-aspect-width: 16 !default;
Description
Default aspect width setting.
$su-input-line-height
$$su-input-line-height: 1.3 !default;
Description
Default input line height.
$su-input-border-width
$$su-input-border-width: 0.1rem !default;
Description
Default input border width.
$su-input-padding-vertical
$$su-input-padding-vertical: 1rem !default;
Description
Default input border width. Using rem instead of px so function uses same units.
$su-input-height-exact
$$su-input-height-exact: $su-base-font-size * $su-input-line-height + $su-input-padding-vertical * 2 + $su-input-border-width * 2 !default;
Description
Input heights will vary by browser and type if height not explicitly set.
$su-input-height
$$su-input-height: floor($su-input-height-exact * 10) / 10 !default;
Description
Truncated to 1 decimal place (i.e., 1.21rem -> 1.2rem).