Brand

mixins

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 Nameparameter Descriptionparameter Typeparameter 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

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 Nameparameter Descriptionparameter Typeparameter 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 Nameparameter Descriptionparameter Typeparameter 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

Used by

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

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

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 Nameparameter Descriptionparameter Typeparameter 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

Used by

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 Nameparameter Descriptionparameter Typeparameter Default value
$columns

Number of columns either as integer or x of y

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

Used by

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 Nameparameter Descriptionparameter Typeparameter Default value
$span

something like 2 of 12

List none

Throws

  • $column should contain 2 values, seperated by an of

Requires

Used by

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 Nameparameter Descriptionparameter Typeparameter Default value
$step

Integers from -4 to 9 including 0

Integer none
$breakpoint

One of xs, sm, md, lg, xl, 2xl

Breakpoint none

Throws

  • $step should be an integer between -4 and 9

Requires

Used by

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 Nameparameter Descriptionparameter Typeparameter Default value
$breakpoint

One of xs, sm, md, lg, xl, 2xl

Breakpoint none

Used by

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 Nameparameter Descriptionparameter Typeparameter Default value
$step

Integers from -4 to 5 including 0

Integer none

Used by

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 Nameparameter Descriptionparameter Typeparameter Default value
$step

Integers from -2 to 10 including 0

Integer none
$device

mobile, tablet or desktop

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

Used by

convert-angle

@function convert-angle($value, $unit) { ... }

Description

Convert an angle to the proper unit requested

Parameters

parameter Nameparameter Descriptionparameter Typeparameter 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 Nameparameter Descriptionparameter Typeparameter Default value
$string

Initial string

String none
$search

Substring to replace

String none
$replace

('') - New value

String none

Used by

to-length

@function to-length($value, $unit) { ... }

Description

Returns $value (a number) expressed in $unit

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$value

Number value to add unit to

Integer none
$unit

String representation of the unit

String none

Used by

to-list

@function to-list() { ... }

Description

Converts a value to a list.

Parameters

None.

Used by

to-number

@function to-number($value) { ... }

Description

Converts a string to number.

String to number converter. Returns a number value.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$value

Value to be parsed

String none

Requires

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 Nameparameter Descriptionparameter Typeparameter Default value
$value

the value to type check

Integer none

Requires

Used by

is-direction-or-angle

@function is-direction-or-angle($value) { ... }

Description

Validates whether something is a direction or an angle

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$value

the value to type check

Integer none

Used by

is-integer($value)

@function is-integer($value)($value) { ... }

Description

Validates wether something is an integer

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$value

the value to type check

Integer none

Requires

is-length

@function is-length($value) { ... }

Description

Validates wether something is an length unit

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$value

the value to type check

Integer none

Requires

Used by

is-number

@function is-number($value) { ... }

Description

Validates wether something is a number

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$value

the value to type check

Integer none

Used by

is-percentage

@function is-percentage($value) { ... }

Description

Validates wether something is a percentage unit

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$value

the value to type check

Integer none

Requires

Used by

is-position

@function is-position($value) { ... }

Description

Validates wether something is a position name

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$value

the value to type check

Integer none

Requires

is-relative-length

@function is-relative-length($value) { ... }

Description

Validates wether something is a relative length unit

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$value

the value to type check

Integer none

Requires

Used by

mixins

accessibly-hidden

@mixin accessibly-hidden() { ... }

Description

Aria hidden helper.

Parameters

None.

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 Nameparameter Descriptionparameter Typeparameter 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'.

Stringbottom
$thickness

The thickness of the border, e.g., '3px', '1em'.

String6px

Used by

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 Nameparameter Descriptionparameter Typeparameter 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 Nameparameter Descriptionparameter Typeparameter 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

su-grid-media-device

@mixin su-grid-media-device($breakpoint) { ... }

Description

A helper to quickly generate a media query

Parameters

parameter Nameparameter Descriptionparameter Typeparameter 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 Nameparameter Descriptionparameter Typeparameter Default value
$name

The breakpoint key code eg: 'sm'

Breakpoint none
$breakpoints

A map of each of the screen breakpoint sizes.

Breakpoint none

Requires

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 Nameparameter Descriptionparameter Typeparameter Default value
$name

The breakpoint key code eg: 'sm'

Breakpoint none
$breakpoints

A map of each of the screen breakpoint sizes.

Map none

Requires

su-grid-media-only

@mixin su-grid-media-only($breakpoint) { ... }

Description

A helper to quickly generate a media query for single breakpoints.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter 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 Nameparameter Descriptionparameter Typeparameter 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

Used by

button-primary

@mixin button-primary() { ... }

Description

Primary (default) button styling.

Parameters

None.

Requires

Used by

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 Nameparameter Descriptionparameter Typeparameter Default value
$image-hover

Image link hover effect. Use 'zoom' for an image zoom-in effect. Use 'opacity'

String none

Requires

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 Nameparameter Descriptionparameter Typeparameter 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 Nameparameter Descriptionparameter Typeparameter Default value
$columns

Specifies the number of columns an element should span based on the total columns of the grid. eg: 3 of 5

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

Used by

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 Nameparameter Descriptionparameter Typeparameter 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 Nameparameter Descriptionparameter Typeparameter 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

linear-gradient

@mixin linear-gradient($direction, $su-color-stops) { ... }

Description

Mixin to create a linear gradient with a plain color fallback.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter 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

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 Nameparameter Descriptionparameter Typeparameter 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

display-grid

@mixin display-grid() { ... }

Description

Mixin to render cssGrid in all modern browsers, including IE11.

Parameters

None.

Used by

grid-align-self

@mixin grid-align-self($value) { ... }

Parameters

parameter Nameparameter Descriptionparameter Typeparameter 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 Nameparameter Descriptionparameter Typeparameter Default value
$gap

A unit of space for the column gap between columns.

Unit none

Used by

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 Nameparameter Descriptionparameter Typeparameter 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

grid-gap

@mixin grid-gap($gap) { ... }

Description

Mixin to render cssGrid column gaps in all modern browsers, including IE11.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$gap

A unit of space for the column gap between columns.

Unit or String none

Requires

Used by

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 Nameparameter Descriptionparameter Typeparameter 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

grid-justify-self

@mixin grid-justify-self($value) { ... }

Description

A cross browser mixin to justify the grid.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter 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 Nameparameter Descriptionparameter Typeparameter Default value
$gap

A unit of space for the column gap between columns.

Unit none

Used by

grid-rows

@mixin grid-rows($rows) { ... }

Description

Mixin to render cssGrid in IE11 browsers.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter 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 Nameparameter Descriptionparameter Typeparameter Default value
$children

number of children in order for column;

Integer4

Used by

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 Nameparameter Descriptionparameter Typeparameter Default value
$children

number of children in order for row;

Integer4

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 Nameparameter Descriptionparameter Typeparameter 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

responsive-grid-gap

@mixin responsive-grid-gap($gutters-map) { ... }

Description

A mixin to create a responsive grid layout.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$gutters-map

A sass map with the gutters per breakpoint.

Map none

Requires

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 Nameparameter Descriptionparameter Typeparameter 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

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 Nameparameter Descriptionparameter Typeparameter Default value
$horizontal

Center horizontally if true. Default is true.

Boolean none
$vertical

Center vertically if true. Default is true.

Boolean none

list-horizontal

@mixin list-horizontal() { ... }

Description

Parameters

None.

list-unstyled

@mixin list-unstyled() { ... }

Description

Removes styles from a list.

Parameters

None.

modular-spacing

Deprecated!

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 Nameparameter Descriptionparameter Typeparameter 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

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 Nameparameter Descriptionparameter Typeparameter 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

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 Nameparameter Descriptionparameter Typeparameter 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

Used by

box-shadow

@mixin box-shadow($depth: flat, $stroke: 1px solid #C6C6C6) { ... }

Description

Box shadows for element containers.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$depth

One of flat, paper, shallow, medium, medium-deep, deep

Stringflat
$stroke

border css properties

Css1px solid #C6C6C6

Used by

Placeholder

placeholders

%nav--light

%%nav--light { ... }

Description

General menu styles - mobile, also desktop drop down part

Requires

%nav-item--current-expanded

%%nav-item--current-expanded { ... }

Description

Individual Nav Item -- Current Page and Expanded

Requires

%nav-item--current

%%nav-item--current { ... }

Description

Individual Nav Item -- current

Requires

%nav-item--expanded

%%nav-item--expanded { ... }

Description

Individual Nav Item -- Expanded

%nav-item--parent-expanded

%%nav-item--parent-expanded { ... }

Description

Individual Nav Item -- Parent Expanded

Requires

%nav-item--parent

%%nav-item--parent { ... }

Description

Individual Nav Item -- Parent

%nav-item

%%nav-item { ... }

Description

Individual Nav Item.

%nav-menu

%%nav-menu { ... }

Description

Individual Nav Menu.

Requires

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

credits

@mixin credits() { ... }

Description

To be used for crediting a source or photographer.

Parameters

None.

Requires

font-smoothing

@mixin font-smoothing() { ... }

Description

To be used for light text on a dark background only.

Parameters

None.

Used by

font-splash

@mixin font-splash() { ... }

Description

For text on a page that should stand out and draw more attention.

Parameters

None.

Requires

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

quote-text

@mixin quote-text() { ... }

Description

To be used for quote text.

Parameters

None.

Requires

sans

@mixin sans() { ... }

Description

Sans Serif font styling.

Parameters

None.

Used by

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

subheading

@mixin subheading() { ... }

Description

To be used for subheading text.

Parameters

None.

Requires

type-a

@mixin type-a() { ... }

Description

Type A font style.

Parameters

None.

Requires

TODO's

  • add link to typography page on site

type-b

@mixin type-b() { ... }

Description

Type B font style.

Parameters

None.

Requires

type-c

@mixin type-c() { ... }

Description

Type C font style.

Parameters

None.

Requires

Used by

type-d

@mixin type-d() { ... }

Description

Type D font style.

Parameters

None.

Requires

type-e

@mixin type-e() { ... }

Description

Type E font style.

Parameters

None.

Requires

type-f

@mixin type-f() { ... }

Description

Type F font style.

Parameters

None.

Used by

types

@mixin types() { ... }

Description

Default shared styling for display (e.g., header) font styles.

Parameters

None.

Requires

Used by

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 Nameparameter Descriptionparameter Typeparameter Default value
$map

Map

Map none
$keys

Key chain

Arglist none

Returns

Any type —

Desired value

Used by

Author

  • Hugo Giraudel

variables

[private] _total-columns

$_total-columns: $grid-columns;

Description

Make note here.

Used by

bp-list

$bp-list: map-keys($grid);

Description

Get a list of all breakpoint keys in $grid.

Used by

number-bp

$number-bp: length($bp-list);

Description

Find total number of breakpoints in our grid.

Used by

current-base

$current-base: get-modular-spacing-base(nth($bp-list, $i));

Description

Get modular-spacing base value for current breakpoint.

Used by

previous-base

$previous-base: null;

Description

Initialize $previous_base.

Used by

$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

%cta-base

%%cta-base { ... }

Description

CTA base styling.

Requires

general

%general { ... }

Description

Base input field styling

Requires

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-nav-colors

$$su-nav-colors: (
  bg:                             $su-color-black,
  divider:                        $su-color-cool-grey,

  link:                           $su-color-white,
  link--hover:                    $su-color-white,
  link--active:                   $su-color-white,
  link--expanded:                 $su-color-white,

  border--hover:                  $su-color-white,
  border--active:                 $su-color-digital-red-light,
  border--expanded:               transparent,
  border--active-expanded:        $su-color-white,

  /// Horizontal menu colors (desktop Main Nav 1st level)
  h-link:                         $su-color-black,
  h-link--hover:                  $su-color-digital-red,
  h-link--active:                 $su-color-black,
  h-link--active-hover:           $su-color-digital-red,
  h-link--expanded:               $su-color-black,

  h-border--hover:                $su-color-digital-red,
  h-border--active:               $su-color-black,
  h-border--active-hover:         $su-color-digital-red,
  h-border--expanded:             $su-color-black,
) !default;

Description

Color maps for the Main Nav and Secondary Nav Components. "h-" prefix in the color names indicate horizontal orientation, which currently only applies to the top level items of the desktop version of Main Nav component. Colors without the "h-" applies to the Secondary Nav (all items), mobile version of the Main Nav, and the drop down menus of the desktop version of Main Nav. Active color is also used to indicate "current" page.

Color maps for the default Main Nav and Secondary Nav Components.

$su-secondary-nav-colors

$$su-secondary-nav-colors: (
  bg:                             $su-color-black,
  divider:                        $su-color-cool-grey,

  link:                           $su-color-white,
  link--active-hover:             $su-color-digital-red,
  link--hover:                    $su-color-white,
  link--active:                   $su-color-white,
  link--expanded:                 $su-color-white,

  border:                         $su-color-black,
  border--active-hover:           $su-color-digital-red,
  border--hover:                  $su-color-white,
  border--active:                 $su-color-digital-red-light,
  border--expanded:               $su-color-digital-red,
  border--active-expanded:        $su-color-white,

  h--link:                        $su-color-black,
  h--link-hover:                  $su-color-digital-red,
  h--border:                      $su-color-black,
  h--border-hover:                $su-color-digital-red,
  h--border-expanded:             $su-color-foggy-dark,
) !default;

Description

Color maps for the Secondary Nav component. Active color is also used to indicate "current" page.

Color map for the default Secondary Nav component .su-secondary-nav.

$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

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

Deprecated!

$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

Deprecated!

$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

Deprecated!

$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

Deprecated!

$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

Deprecated!

$su-color-foggy replaces $su-color-cloud as the new variable

$su-color-cloud: $su-color-foggy !default;

Type

Color

su-color-dark-red

Deprecated!

$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

Deprecated!

$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

Deprecated!

$su-color-foggy-dark replaces $su-color-driftwood as the new variable

$su-color-driftwood: $su-color-foggy-dark !default;

Type

Color

Used by

su-color-fog

Deprecated!

$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

Deprecated!

$su-color-brown will be removed in Decanter v7

$su-color-brown: #5e3032 !default;

Type

Color

su-color-clay

Deprecated!

$su-color-clay will be removed in Decanter v7

$su-color-clay: #5f574f !default;

Type

Color

su-color-gold

Deprecated!

$su-color-gold will be removed in Decanter v7

$su-color-gold: #b26f16 !default;

Type

Color

su-color-light-sage

Deprecated!

$su-color-light-sage will be removed in Decanter v7

$su-color-light-sage: #c7d1c5 !default;

Type

Color

su-color-mint

Deprecated!

$su-color-mint will be removed in Decanter v7

$su-color-mint: #009b76 !default;

Type

Color

su-color-purple

Deprecated!

$su-color-purple will be removed in Decanter v7

$su-color-purple: #53284f !default;

Type

Color

su-color-redwood

Deprecated!

$su-color-redwood will be removed in Decanter v7

$su-color-redwood: #8d3c1e !default;

Type

Color

su-color-sandhill

Deprecated!

$su-color-sandhill will be removed in Decanter v7

$su-color-sandhill: #b3995d !default;

Type

Color

su-color-sandstone

Deprecated!

$su-color-sandstone will be removed in Decanter v7

$su-color-sandstone: #d2c295 !default;

Type

Color

su-color-light-sandstone

Deprecated!

$su-color-light-sandstone will be removed in Decanter v7

$su-color-light-sandstone: #f9f6ef !default;

Type

Color

su-color-sun

Deprecated!

$su-color-sun will be removed in Decanter v7

$su-color-sun: #eaab00 !default;

Type

Color

su-color-teal

Deprecated!

$su-color-teal will be removed in Decanter v7

$su-color-teal: #00505c !default;

Type

Color

su-color-warm-grey

Deprecated!

$su-color-warm-grey will be removed in Decanter v7

$su-color-warm-grey: #3f3c30 !default;

Type

Color

su-color-cool-grey-75

Deprecated!

$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

Deprecated!

$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

Deprecated!

$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

Deprecated!

$su-color-cool-grey-15 will be removed in Decanter v7

$su-color-cool-grey-15: #e5e5e5 !default;

Type

Color

su-color-beige

Deprecated!

$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).