animations, transitions
variables
cubic-bezier
Since 0.1.0$cubic-bezier: cubic-bezier(.25, .46, .45, .94) !default;
Description
Default cubic bezier function
Type
Function
durations
Since 0.1.0$durations: (
"xs": ".125s",
"sm": ".25s",
"md": ".5s",
"lg": "1s",
"xl": "1.5s",
) !default;
Description
Default set of animation durations
Map structure
key Name | key Description | key Type | key Value |
---|---|---|---|
xs | extra short amount of time | Number | .125s |
sm | small amount of time | Number | .25s |
md | medium amount of time | Number | .5s |
lg | large amount of time | Number | 1s |
xl | longest amount of time | Number | 1.5s |
Used by
- [variable]
duration
duration
Since 0.1.0$duration: map.get($durations, "sm") !default;
Description
Default animation duration
Type
Number
Requires
- [variable]
durations
— map of durations
backgrounds & borders
variables
border-colors
Since 0.1.0$border-colors: (
dark: rgb(0, 0, 0),
mid: rgb(128, 128, 128),
light: rgb(255, 255, 255),
);
Description
Default set of border colors
Map structure
key Name | key Description | key Type | key Value |
---|---|---|---|
dark | dark border color | Color | rgb(0, 0, 0) |
mid | middle contrasted border color | Color | rgb(128, 128, 128) |
light | light border color | Color | rgb(255, 255, 255) |
border-radii
Since 0.1.0$border-radii: (
"xs": ".125rem",
"sm": ".25rem",
"md": ".5rem",
"lg": "1rem",
"xl": "2rem",
"round": "100%",
) !default;
Description
Default set of border radii
Map structure
key Name | key Description | key Type | key Value |
---|---|---|---|
xs | extra small border radius | Number | .125rem |
sm | small border radius | Number | .25rem |
md | medium border radius | Number | .5rem |
lg | large border radius | Number | 1rem |
xl | extra large border radius | Number | 2rem |
round | rounded border radius | Number | 100% |
Used by
- [variable]
border-radius
border-radius
Since 0.1.0$border-radius: map.get($border-radii, "md") !default;
Description
Default border radius
Type
Number
Requires
- [variable]
border-radii
— map of border radii
border-widths
Since 0.1.0$border-widths: (
"xs": ".0625rem",
"sm": ".125rem",
"md": ".1875rem",
"lg": ".25rem",
"xl": ".5rem",
) !default;
Description
Default set of border-widths
Map structure
key Name | key Description | key Type | key Value |
---|---|---|---|
xs | extra small border width | Number | .0625rem |
sm | small border width | Number | .125rem |
md | medium border width | Number | .1875rem |
lg | large border width | Number | .25rem |
xl | extra large border width | Number | .5rem |
Used by
- [variable]
border-width
border-width
Since 0.1.0$border-width: map.get($border-widths, "md") !default;
Description
Default border width
Type
Number
Requires
- [variable]
border-widths
— map of border widths
box model
variables
spacer
Since 0.1.0$spacer: 1 !default;
Description
Base line multiplier for spacing
Type
Number
Used by
- [variable]
spacing
spacing
Since 0.1.0$spacing: (
"0": 0,
"eighth": "#{($spacer / 8)}rem",
"qtr": "#{($spacer / 4)}rem",
"half": "#{($spacer / 2)}rem",
"3qtr": "#{($spacer * 3 / 4)}rem",
"1": "#{$spacer}rem",
"2": "#{($spacer * 2)}rem",
"3": "#{($spacer * 3)}rem",
) !default;
Description
Default set of spacing
Map structure
key Name | key Description | key Type | key Value |
---|---|---|---|
0 | reset the size to 0 | Number | 0 |
eighth | 1/8th the size of the default spacer | Number | .125rem |
qtr | 1/4th the size of the default spacer | Number | .25rem |
half | 1/2 the size of the default spacer | Number | .5rem |
3qtr | 3/4th the size of the default spacer | Number | .75rem |
1 | the size of the default spacer | Number | 1rem |
2 | 2 times the size of the default spacer | Number | 2rem |
3 | 3 times the size of the default spacer | Number | 3rem |
Requires
- [variable]
spacer
— multiplier for creating map
sizing
Since 0.1.0$sizing: (
"auto": "auto",
"0": 0,
"25": "25%",
"50": "50%",
"75": "75%",
"100": "100%",
) !default;
Description
Default set of sizing
Map structure
key Name | key Description | key Type | key Value |
---|---|---|---|
auto | 75% of the total containers space | String | auto |
0 | 0% of the total containers space | Number | 0 |
25 | 25% of the total containers space | Number | 25% |
50 | 50% of the total containers space | Number | 50% |
75 | 75% of the total containers space | Number | 75% |
100 | 100% of the total containers space | Number | 100% |
sizing-prefixes
Since 0.1.0$sizing-prefixes: (max-, min-, "") !default;
Description
Sizing prefixes used for widths and heights
Type
List
color
variables
opacities
Since 0.1.0$opacities: (
"invisible": 0,
"disabled": .65,
"beneath": .99,
"visible": 1,
) !default;
Description
Base line multiplier for spacing
Map structure
key Name | key Description | key Type | key Value |
---|---|---|---|
invisible | set opacity to 0 to be invisible | Number | 0 |
disabled | set opacity to appear disabled | Number | .65 |
beneath | set opacity to force stacking context and lay beneath | Number | .99 |
visible | set opacity to 1 to be visible | Number | 1 |
fonts
variables
font-families
Since 0.1.0$font-families: (
"monospace": #{menlo, monaco, consolas, "Courier New", monospace},
"sans-serif": #{-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", arial, sans-serif},
"serif": #{georgia, "Times New Roman", times, serif},
) !default;
Description
Default set of font families
Map structure
key Name | key Description | key Type | key Value |
---|---|---|---|
monospace | the default monospace family | String | menlo, monaco, consolas, "Courier New", monospace |
sans-serif | the default sans serif font family | String | -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", arial, sans-serif |
serif | the default serif font family | String | georgia, "Times New Roman", times, serif |
Used by
- [variable]
font-family
font-family
Since 0.1.0$font-family: map.get($font-families, "sans-serif") !default;
Description
Default font family
Type
String
Requires
- [variable]
font-families
— map of font families
font-sizes
Since 0.1.0$font-sizes: (
"1": ".75rem",
"2": ".85rem",
"3": "1rem",
"4": "1.25rem",
"5": "1.5rem",
"6": "2rem",
) !default;
Description
Default set of font sizes
Map structure
key Name | key Description | key Type | key Value |
---|---|---|---|
1 | smallest font size, about ~14px | Number | .75rem |
2 | smaller font size, about ~16px | Number | .85rem |
3 | medium font size, 18px | Number | 1rem |
4 | large font size, about ~21px | Number | 1.25rem |
5 | larger font size, about ~27px | Number | 1.5rem |
6 | largest font size, 36px | Number | 2rem |
Used by
- [variable]
font-size
font-size
Since 0.1.0$font-size: map.get($font-sizes, "3") !default;
Description
Default font size
Type
Number
Requires
- [variable]
font-sizes
— map of font sizes
font-weights
Since 0.1.0$font-weights: (
"thin": 100,
"slim": 200,
"light": 300,
"normal": 400,
"demibold": 500,
"semibold": 600,
"bold": 700,
"thick": 800,
"heavy": 900,
) !default;
Description
Default set of font weights
Map structure
key Name | key Description | key Type | key Value |
---|---|---|---|
thin | thin font weight | String | 100 |
slim | slim font weight | String | 200 |
light | light font weight | String | 300 |
normal | normal font weight; matches normal keyword | String | 400 |
demibold | demi bold weight | Number | 500 |
semibold | semi bold weight | Number | 600 |
bold | bold font weight, matches bold keyword | Number | 700 |
thick | dark font weight | Number | 800 |
heavy | darkest font weight | Number | 900 |
line-heights
Since 0.1.0$line-heights: (
"xs": 1,
"sm": 1.2,
"md": 1.25,
"lg": 1.5,
"xl": 2,
) !default;
Description
Default set of line heights
Map structure
key Name | key Description | key Type | key Value |
---|---|---|---|
xs | smallest line-height; used to reset | Number | 1 |
sm | smaller line-height, typically for headings | Number | 1.2 |
md[1.25] | medium line-height | Number | — none |
lg | large line-height, used as the baseline for most type | Number | 1.5 |
xl | larger line-height, used for small type | Number | 2 |
Used by
- [variable]
line-height
- [variable]
line-height-heading
line-height
Since 0.1.0$line-height: map.get($line-heights, "lg") !default;
Description
Default line-height
Type
Number
Requires
- [variable]
line-heights
— map of line heights
line-height-heading
Since 0.1.0$line-height-heading: map.get($line-heights, "sm") !default;
Description
Default line-height for headings
Type
Number
Requires
- [variable]
line-heights
— map of line heights
fragmentation
variables
box-directions
Since 0.1.0$box-directions: (
"all": "",
"bottom": "bottom",
"left": "left",
"right": "right",
"top": "top",
) !default;
Description
Default set of directions for the box model
Map structure
key Name | key Description | key Type | key Value |
---|---|---|---|
all | all sides of the box model | String | '' |
bottom | only the bottom side will be affected | String | 'bottom' |
left | only the left side will be affected | String | 'left' |
right | only the right side will be affected | String | 'right' |
top | only the top will be affected | String | 'top' |
media queries
variables
breakpoints
Since 0.1.0$breakpoints: (
"xs": "0",
"sm": "34em",
"md": "48em",
"lg": "62em",
"xl": "75em",
) !default;
Description
Default set of breakpoints
Map structure
key Name | key Description | key Type | key Value |
---|---|---|---|
xs | screens between 0 and 534px | Number | 0 |
sm | screens between ~544px and ~767px wide | Number | 34em |
md | screens between ~768px and ~991px wide | Number | 48em |
lg | screens between ~992px and ~1199px wide | Number | 62em |
xl | screens larger than ~1200px wide | Number | 75em |
positioning
variables
z-indices
Since 0.1.0$z-indices: (
"level-negative-1": -1000,
"level-0": 0,
"level-1": 1000,
"level-2": 2000,
"level-3": 3000,
"level-4": 4000,
"level-5": 5000,
"level-6": 6000,
"level-7": 7000,
"level-8": 8000,
"level-9": 9000,
) !default;
Description
Default set of z-indicies
Map structure
key Name | key Description | key Type | key Value |
---|---|---|---|
level-negative-1 | negative z-index | String | -1000 |
level-0 | level 0, base level | Number | 0 |
level-1 | level 1 | Number | 1000 |
level-2 | level 2 | Number | 2000 |
level-3 | level 3 | Number | 3000 |
level-4 | level 4 | Number | 4000 |
level-5 | level 5 | Number | 5000 |
level-6 | level 6 | Number | 6000 |
level-7 | level 7 | Number | 7000 |
level-8 | level 8 | Number | 8000 |
level-9 | level 9 | Number | 9000 |