Colors
functions
color
@function color($name) { ... }Description
Helper fn to get color, by name
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$name | color name | String | — none |
Returns
String —color value
Example
color("blue");
// #00fRequires
- [variable]
colors-map
variables
colors-map
$colors-map: (
"black": #000,
"white": #fff,
"gray": #aaa,
"blue": #00f,
"green": #0f0,
"red": #f00,
) !default;Description
List of all colors for the app
Used by
- [function]
color
text-color-default
$text-color-default: "black" !default;Description
Default color for text
text-colors
$text-colors: ("black", "white", "blue") !default;Description
List of all text colors
background-color-default
$background-color-default: "white" !default;Description
Default color for the background
background-colors
$background-colors: ("black", "white", "blue") !default;Description
List of all background colors
Layout
functions
breakpoint
@function breakpoint($name) { ... }Description
Helper fn to get breakpoint, by name
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$name | breakpoint name | String | — none |
Returns
String —breakpoint value
Example
breakpoint(large);
// 1180Requires
- [variable]
breakpoints-map
Used by
- [mixin]
screen
px
@function px($spacings) { ... }Description
Helper fn to get rems, either by spacing name or px value. Multiple params are accepted.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$spacings | spacing name or px value | List or String | — none |
Returns
String —color value
Example
by px value
px(16)
// 1remby spacing name
px("double")
// 2remmultiple params
px(0 inherit half 8)
// 0 inherit .5rem .5remRequires
- [variable]
spacings-map
Used by
- [mixin]
screen - [mixin]
typography-output
variables
spacing-default
$spacing-default: "base" !default;Description
Default spacing size name
spacings-map
$spacings-map: (
"none": 0,
"tiny": 2,
"tight": 4,
"half": 8,
"base": 16,
"large": 24,
"double": 32,
"xl": 40,
"triple": 48,
"giant": 64,
"biggest": 80,
) !default;Description
Map of spacing sizes
Used by
- [function]
px
breakpoints-map
$breakpoints-map: (
"small": 360,
"medium": 630,
"base": 950,
"large": 1180,
"xl": 1400,
"giant": 1600,
) !default;Description
Map of breakpoint sizes
Used by
- [function]
breakpoint
mixins
screen
@mixin screen($name, $direction: "up") { ... }Description
Mixin to wrap styles in a media query
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$name | breakpoint name | String | — none |
$direction | breakpoint "up" or "down" | String | "up" |
Example
@include screen("medium") {
flex-direction: row; // @content
}
// @media (min-width: 40rem) {
// flex-direction: row;
// }Output
media query around styles
Requires
- [function]
breakpoint - [function]
px
Used by
- [mixin]
typography-dimensions
See
- [variable]
breakpoints-map
typography
variables
typography-dimension-default
$typography-dimension-default: "inherit" !default;Description
Default typography dimension, from map
typography-dimensions-map
$typography-dimensions-map: (
"inherit": (
"font-size": inherit,
"line-height": inherit,
"letter-spacing": inherit,
),
"page-heading": (
"font-size": 28,
"line-height": 36,
"letter-spacing": 0.1,
breakpoints: (
"medium": (
"font-size": 36,
"line-height": 44,
),
"large": (
"font-size": 42,
"line-height": 50,
),
),
),
"section-heading": (
"font-size": 24,
"line-height": 32,
"letter-spacing": 0.15,
breakpoints: (
"medium": (
"font-size": 28,
"line-height": 40,
"letter-spacing": 0.2,
),
),
),
"list-heading": (
"font-size": 24,
"line-height": 35,
),
"item-heading": (
"font-size": 18,
"line-height": 24,
),
"category-heading": (
"font-size": 12,
"line-height": 18,
),
"body": (
"font-size": 18,
"line-height": 26,
),
"small": (
"font-size": 15,
"line-height": 20,
),
) !default;Description
Map of all typography dimensions, by name. Includes font-size, line-height, & letter-spacing. Also includes overrides at 'breakpoints'.
Used by
- [function]
get-typography-dimensions-map - [function]
get-typography-dimension-breakpoints
typography-dimensions-names
$typography-dimensions-names: map-keys($typography-dimensions-map) !default;Description
List of all typography dimension names. Helpful when looping thru them all, i.e. in a mixin.
Used by
- [mixin]
typography-modifiers
font-family-default
$font-family-default: "inherit" !default;Description
Default font family name
Used by
- [function]
font-family
font-families-map
$font-families-map: (
"inherit": inherit,
"serif": (
Georgia,
serif,
),
"sans": (
Arial,
sans-serif,
),
"mono": "Courier New",
) !default;Description
Map of font families, by name
Used by
- [function]
font-family
font-weight-default
$font-weight-default: "inherit" !default;Description
Default font weight name
Used by
- [function]
font-weight
font-weights-map
$font-weights-map: (
"inherit": inherit,
"light": 200,
"normal": 400,
"semi-bold": 600,
"bold": 700,
"bolder": 800,
"boldest": 900,
) !default;Description
Map of font weights, by name
Used by
- [function]
font-weight
functions
get-typography-dimensions-map
@function get-typography-dimensions-map($name, $breakpoint: null) { ... }Description
Get a full map of a single typography dimension. Optionally get only a specific breakpoint.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$name | typography dimension name | String | — none |
$breakpoint | breakpoint name | String | null |
Returns
Map —map of typ-dimensions & their values
Example
get page-heading
get-typography-dimensions-map(page-heading);
// (
// "font-size": 28,
// "line-height": 36,
// "letter-spacing": 0.1,
// )get page-heading, at medium breakpoint
get-typography-dimensions-map(page-heading, medium);
// (
// "font-size": 36,
// "line-height": 44,
// ),Requires
- [variable]
typography-dimensions-map
Used by
- [function]
get-typography-dimension-value
get-typography-dimension-value
@function get-typography-dimension-value($name, $prop, $breakpoint: null) { ... }Description
Get the value of a single CSS property of typography dimension
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$name | typography dimension name | String | — none |
$prop | property name | String | — none |
$breakpoint | breakpoint name | String | null |
Returns
String —value of CSS property
Example
get font-size of page-heading
get-typography-dimension-value(page-heading, font-size);
// 28get font-size of page-heading, at medium breakpoint
get-typography-dimensions-map(page-heading, font-size, medium);
// 36Requires
- [function]
get-typography-dimensions-map
Used by
- [function]
font-size - [function]
line-height - [function]
letter-spacing
get-typography-dimension-breakpoints
@function get-typography-dimension-breakpoints($name) { ... }Description
Get a list of all breakpoint names for a single typography dimension name
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$name | typography dimension name | String | — none |
Returns
List —list of breakpoint names
Example
get-typography-dimension-breakpoints("page-heading")
// (medium, large)Requires
- [variable]
typography-dimensions-map
Used by
- [mixin]
typography-dimensions
font-size
@function font-size($name) { ... }Description
Get a font-size value, by name. Optionally specify breakpoint.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$name | typography dimension name | String | — none |
Returns
String —font-size value
Example
get value for page-heading
font-size("page-heading")
// 28get value for page-heading, at medium breakpoint
font-size("page-heading", medium)
// 36Requires
- [function]
get-typography-dimension-value
Used by
- [mixin]
typography-output
line-height
@function line-height($name) { ... }Description
Get a line-height value, by name. Optionally specify breakpoint.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$name | typography dimension name | String | — none |
Returns
String —line-height value
Example
get value for page-heading
line-height("page-heading")
// 36get value for page-heading, at medium breakpoint
line-height("page-heading", medium)
// 44Requires
- [function]
get-typography-dimension-value
Used by
- [mixin]
typography-output
letter-spacing
@function letter-spacing($name) { ... }Description
Get a letter-spacing value, by name. Optionally specify breakpoint.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$name | typography dimension name | String | — none |
Returns
String —letter-spacing value
Example
get value for page-heading
letter-spacing("page-heading")
// 0.1get value for page-heading, at medium breakpoint
letter-spacing("page-heading", medium)
// 0.2Requires
- [function]
get-typography-dimension-value
Used by
- [mixin]
typography-output
font-family
@function font-family($name: $font-family-default) { ... }Description
Get a font-family value, by name.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$name | font-family name | String | $font-family-default |
Returns
String —font-family value
Example
font-family("sans");
// Arial, sans-serif;Requires
- [variable]
font-families-map - [variable]
font-family-default
font-weight
@function font-weight($name: $font-weight-default) { ... }Description
Get a font-weight value, by name.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$name | font-weight name | String | $font-weight-default |
Returns
String —font-weight value
Example
font-weight("bold");
// 700;Requires
- [variable]
font-weights-map - [variable]
font-weight-default
mixins
typography-dimensions
@mixin typography-dimensions($name, $breakpoint: null) { ... }Description
Apply all styles from a single typography dimension name. Optionally specify a single breakpoint
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$name | typography dimension name | String | — none |
$breakpoint | breakpoint name | String | null |
Example
all styles for "page-heading"
@include typography-dimensions("page-heading");
// /* typography dimension styles for "page-heading" */
// /* styles for each breakpoint, wrapped in media query */optional breakpoint
@include typography-dimensions("page-heading", "medium");
// /* typography dimension styles for "page-heading" "medium" */Output
styles from typography dimension
Requires
- [function]
get-typography-dimension-breakpoints - [mixin]
screen - [mixin]
typography-output
Used by
- [mixin]
typography-modifiers
typography-modifiers
@mixin typography-modifiers($list: $typography-dimensions-names) { ... }Description
Apply all typography dimensions to a selector, as BEM modifiers, and add all related styles to an element.
NOTE: Must be nested within a selector
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$list | list of typography dimension names | List | $typography-dimensions-names |
Example
include specific names
@include typography-modifiers("page-heading", "section-heading");
// &--page-heading { /* typography dimensions */ }
// &--section-heading { /* typography dimensions */ }include all
@include typography-modifiers;
// &--page-heading { /* typography dimensions */ }
// &--section-heading { /* typography dimensions */ }
// ... /* all the other modifiers too */Output
BEM &--modifiers wrapped around styles
Requires
- [variable]
typography-dimensions-names - [mixin]
typography-dimensions
typography-output
@mixin typography-output($name, $breakpoint) { ... }Description
Output CSS properties & values (when they exist) for a specific typography dimension & breakpoint.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$name | typography dimension name | String | — none |
$breakpoint | breakpoing name | String | — none |
Example
@include typography-output("page-heading);
// font-size: 1.75rem;
// line-height: 2.25rem;
// letter-spacing: 0.00625rem;Output
styles (font-size, line-height, letter-spacing)
Requires
- [function]
font-size - [function]
line-height - [function]
letter-spacing - [function]
px
Used by
- [mixin]
typography-dimensions
General
functions
json
@function json($map) { ... }Description
Helper to turn Sass map into JSON, to be exported for javascript
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$map | map to convert | Map | — none |
Returns
String —string with JSON formatting, for use with JSON.parse()
Example
$colors-map: (
"red": #f00,
"blue": #00f,
);
json($colors-map);
// { "red": "#f00", "blue": "#00f" }variables
z-indexes-map
$z-indexes-map: (
"graphics": 2,
"layover": 9,
"popup": 10,
"popover": 11,
"sticky": 99,
"dropdown": 100,
) !default;Description
Map of z-index layers, by name