Layout Utilities

Utilities implement some of the higher-level requirements and guidelines prescribed by the Sprout Design System. These mixins and functions provide the tools needed to develop layout effectively in Sprout.

@mixin spr-space-stack()

Generates styles for adding space below an element.

Parameters & Output

$space-token: (string)

Space token e.g. sm, md, lg

{CSS output} (code block)

margin-bottom styles

Requires

@function spr-space()

Used By

@mixin spr-space-stack-container()

@mixin spr-row()

@mixin spr-space-inline()

Generates styles for adding space to the right of an element.

Parameters & Output

$space-token: (string)

Space token e.g. sm, md, lg

{CSS output} (code block)

margin-right styles

Requires

@function spr-space()

Used By

@mixin spr-space-inline-container()

@mixin spr-row()

@mixin spr-space-inline-left()

Generates styles for adding space to the left of an element.

Parameters & Output

$space-token: (string)

Space token e.g. sm, md, lg

{CSS output} (code block)

margin-left styles

Requires

@function spr-space()

@mixin spr-space-inset()

Generates styles for adding space inside the border an element. Providing $border-offset will subtract the thickness of the border from the inset spacing.

Parameters & Output

$space-token: (string)

Space token e.g. sm, md, lg

$border-offset: null (string)

Border token representing the border currently applied to the element.

{CSS output} (code block)

padding styles

Requires

@mixin spr-space-inset-squish()

Generates styles for adding space inside the border an element. Providing $border-offset will subtract the thickness of the border from the inset spacing.

Parameters & Output

$space-token-vertical: (string)

Space token for top and bottom spacing e.g. sm, md, lg

$space-token-horizontal: (string)

Space token for left and right spacing e.g. sm, md, lg

$border-offset: null (string)

Border token representing the border currently applied to the element.

{CSS output} (code block)

padding styles

Requires

@function rem()

@function spr-border-width()

@function spr-space()

Used By

@mixin spr-space-inset()

@mixin spr-container()

@mixin spr-container-slim()

@mixin spr-space-stack-container()

Generates styles to add vertical spacing between all direct children. Providing a $selector will only add spacing to direct children matching the selector.

Parameters

$space-token: (string)

$selector: null (string)

CSS selector for child elements e.g. ‘.section’

Requires

@mixin except-last()

@mixin spr-space-stack()

@mixin spr-space-inline-container()

Generates styles to add horizontal spacing between all direct children. Providing a $selector will only add spacing to direct children matching the selector.

Parameters

$space-token: (string)

$justify-content-token: (string)

$align-items-token: (string)

$selector: null (string)

CSS selector for child elements e.g. ‘.section’

Requires

@mixin except-last()

@mixin spr-space-inline()

@function spr-justification()

@mixin spr-float-container()

Generates styles to add fixed width container. The only adjustable dimension on this container is the width. The width set is a maximum width and conforms to the text. Justification can be provided for alignment of children. Providing $elevation will allow for elevation in respect to other surrounding elements.

Parameters

$multiplier-token: (string)

$multiplier to allow for a max width of the container.

$justification-token: (string)

$justification-token to align content within the container.

$elevation-token: (string)

Requires

@function spr-justification()

@function spr-elevation()

@function spr-size()

@mixin spr-float-container-centered()

Generates styles to position an element in the center of the screen.

Parameters

$elevation-token: (string)

Requires

@function spr-justification()

@function spr-elevation()

@mixin spr-breakpoint-down()

Wraps styles in a media query applying to all widths smaller than and INCLUDING the provided breakpoint.

Parameters

$breakpoint-token: (string)

A breakpoint token such as tablet or desktop.

Requires

@function spr-breakpoint-max()

@mixin spr-breakpoint-up()

Wraps styles in a media query applying to all widths larger than and INCLUDING the provided breakpoint.

Parameters

$breakpoint-token: (string)

A breakpoint token such as tablet or desktop.

Requires

@function spr-breakpoint()

Used By

@mixin spr-container()

@mixin spr-container-slim()

@mixin spr-row()

@mixin spr-col()

@mixin spr-col-fixed()

@mixin spr-breakpoint-below()

Wraps styles in a media query applying to all widths smaller than and EXCLUDING the provided breakpoint.

Parameters

$breakpoint-token: (string)

A breakpoint token such as tablet or desktop.

Requires

@function spr-breakpoint()

Used By

@mixin spr-row()

@mixin spr-breakpoint-above()

Wraps styles in a media query applying to all widths larger than and EXCLUDING the provided breakpoint.

Parameters

$breakpoint-token: (string)

A breakpoint token such as tablet or desktop.

Requires

@function spr-breakpoint()

@function map-get-next()

@function spr-breakpoint-tokens()

@mixin spr-breakpoint-between()

Wraps styles in a media query applying to all widths between the provided breakpoints.

Parameters

$breakpoint-token-min: (string)

A breakpoint token such as tablet or desktop (inclusive).

$breakpoint-token-max: (string)

A breakpoint token such as tablet or desktop (inclusive).

Requires

@function spr-breakpoint()

@function spr-breakpoint-max()

@mixin spr-container()

Generates a main container for all breakpoints

Requires

@mixin spr-space-inset-squish()

@mixin spr-breakpoint-up()

@function spr-breakpoint()

@function spr-space()

Used By

@mixin spr-container-slim()

Generates a slimmer main container

Requires

@mixin spr-container()

@mixin spr-breakpoint-up()

@mixin spr-space-inset-squish()

@function spr-size()

@mixin spr-popover()

Generates styles for the sprout popover, including animations. By default the popover assumes no height and lengthwise conforms to its children.

Parameters

$width: (number)

Width value that the popover will assume.

Requires

@function spr-duration()

@function spr-color-white()

@function spr-shadow()

@mixin spr-row()

Generates styles for a fluid row consisting of any number of columns.

Parameters

$breakpoint-token: phone (string)

A breakpoint token under which columns should collapse into individual rows.

$space-token-inline: none (string)

A space token designating the horizontal space between columns in an uncollapsed row.

$space-token-stack: none (string)

A space token designating the vertical space between column-rows after a row has collapsed.

$column-selector: '*' (string)

A CSS selector applied to the immediate children of the row used to identify the column elements.

Requires

@mixin spr-breakpoint-up()

@mixin except-last()

@mixin spr-space-inline()

@mixin spr-breakpoint-below()

@mixin spr-space-stack()

@function spr-breakpoint()

@mixin spr-col()

Generates styles for a column of a fluid row. By default, all columns will be equal width and stretch to fill the full width of the row.

Parameters

$breakpoint-collapse: phone (string)

The breakpoint under which the column will collapse into it’s own row.

Requires

@mixin spr-breakpoint-up()

@mixin spr-col-shrink()

Modifies a row column to shrink to its natural content width.

@mixin spr-col-fixed()

Modifies a row column to be set to an explicit width above a certain breakpoint.

Parameters

$width: (number)

Width value that the column will assume. (e.g. 200px, 25%)

$breakpoint: (string)

Breakpoint token above which (inclusive) the width will apply.

Requires

@mixin spr-breakpoint-up()

@mixin spr-row-align()

Aligns contents of a container in a row to a given justification token.