Layout Tokens
All breakpoints, positioning, and spacing values in Sprout are ultimately derived from Layout tokens. Layout tokens are broken out by category: spacing, breakpoints, justification, etc.
A map containing all Sprout layout tokens.
Map Properties
spacing: (map)
Spacing tokens are used primarily to control padding and margin.
breakpoints: (map)
Breakpoint token values represent the inclusive lower limit of the breakpoint, for example tablet: rem(600px) applies to 600px - 899px.
justification: (map)
Justification tokens represent all of the ways Sprout allows elements to be layed out horizontally in a flex container.
elevation: (map)
Elevation tokens are used to control the z-index of an element.
text-alignment: (map)
Text-alignment tokens are used to control the alignment of the text in a container.
Used By
@mixin spr-config-layout()
@function spr-spacing-tokens()
@function spr-breakpoint-tokens()
@function spr-justification-tokens()
@function spr-text-alignment-tokens()
Spacing Sizes
Size Previews
| Name | Value | |
|---|---|---|
| none |
0rem
|
|
| xxs |
0.25rem
|
|
| xs |
0.5rem
|
|
| sm |
0.75rem
|
|
| md |
1rem
|
|
| lg |
1.5rem
|
|
| xl |
2rem
|
|
| xxl |
4rem
|
|
Breakpoint Sizes
Size Previews
| Name | Value | |
|---|---|---|
| phone |
0rem
|
|
| tablet |
37.5rem
|
|
| landscape |
56.25rem
|
|
| desktop |
75rem
|
|
| desktop-large |
112.5rem
|
|
Configuration
@mixin spr-config-layout()
Configures Sprout layout tokens by recursively merging in the provided map.
Parameters
$custom-config: () (map)
Sprout layout token map that matches the form of $spr-tokens-layout
Used By
@mixin spr-config()
Getter Functions
@function spr-spacing-tokens()
Gets the spacing token map.
Requires
$spr-tokens-layout (map)
Used By
@function spr-space()
@function spr-breakpoint-tokens()
Gets the breakpoint token map.
Requires
$spr-tokens-layout (map)
@function spr-justification-tokens()
Gets the justification token map.
Requires
$spr-tokens-layout (map)
Used By
@function spr-justification()
@function spr-text-alignment-tokens()
Gets the text-alignment token map.
Requires
$spr-tokens-layout (map)
Used By
@function spr-text-alignment()
@function spr-space()
Gets a spacing value in rem given a spacing token.
Parameters
$space-token: (string)
Spacing token such as ‘sm’ or ‘lg’.
Used By
@function spr-size()
@mixin spr-space-stack()
@mixin spr-space-inline()
@mixin spr-space-inline-left()
@mixin spr-space-inset-squish()
@mixin spr-container()
@function spr-breakpoint()
Gets a breakpoint value in rem given a breakpoint token.
Parameters
$breakpoint-token: (string)
Breakpoint token such as ‘phone’ or ‘desktop’.
Used By
@function spr-breakpoint-max()
@mixin spr-breakpoint-up()
@mixin spr-breakpoint-below()
@mixin spr-breakpoint-above()
@mixin spr-breakpoint-between()
@mixin spr-container()
@mixin spr-row()
@function spr-breakpoint-max()
Gets the maximum breakpoint value in rem given a breakpoint token.
Parameters
$breakpoint-token: (string)
Breakpoint token such as ‘phone’ or ‘desktop’.
@function spr-justification()
Gets a flexbox alignment value given a justification token.
Parameters
$justification-token: (string)
Justification token such as ‘left’ or ‘right’.
@function spr-elevation()
Gets a elevation value given an elevation token.
Parameters
$elevation-token: (string)
elevation token such as ‘low’ or ‘high’.
Requires
@function map-get-strict()
@function spr-text-alignment()
Gets text alignment value given a text-alignment token.
Parameters
$text-alignment-token: (string)
Text-alignment token such as ‘left’ or ‘right’.
@function spr-size()
Generates styles for width of base space(md) given a multiplier.
Parameters & Return
$multiplier: (number)
Multiplier for dynamic size of width, constrained by the base space(md)
@return (number)
width of multiplier * base space(md)