Colors

functions

color

@function color($name) { ... }

Description

Helper fn to get color, by name

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$name

color name

String— none

Returns

String —

color value

Example

color("blue");
// #00f

Requires

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

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

breakpoint name

String— none

Returns

String —

breakpoint value

Example

breakpoint(large);
// 1180

Requires

Used by

px

@function px($spacings) { ... }

Description

Helper fn to get rems, either by spacing name or px value. Multiple params are accepted.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$spacings

spacing name or px value

List or String— none

Returns

String —

color value

Example

by px value

px(16)
// 1rem

by spacing name

px("double")
// 2rem

multiple params

px(0 inherit half 8)
// 0 inherit .5rem .5rem

Requires

Used by

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

mixins

screen

@mixin screen($name, $direction: "up") { ... }

Description

Mixin to wrap styles in a media query

Parameters

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

Used by

See

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

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

font-family-default

$font-family-default: "inherit" !default;

Description

Default font family name

Used by

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

font-weight-default

$font-weight-default: "inherit" !default;

Description

Default font weight name

Used by

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

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

typography dimension name

String— none
$breakpoint

breakpoint name

Stringnull

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

Used by

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

typography dimension name

String— none
$prop

property name

String— none
$breakpoint

breakpoint name

Stringnull

Returns

String —

value of CSS property

Example

get font-size of page-heading

get-typography-dimension-value(page-heading, font-size);
//   28

get font-size of page-heading, at medium breakpoint

get-typography-dimensions-map(page-heading, font-size, medium);
//   36

Requires

Used by

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

typography dimension name

String— none

Returns

List —

list of breakpoint names

Example

get-typography-dimension-breakpoints("page-heading")
// (medium, large)

Requires

Used by

font-size

@function font-size($name) { ... }

Description

Get a font-size value, by name. Optionally specify breakpoint.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$name

typography dimension name

String— none

Returns

String —

font-size value

Example

get value for page-heading

font-size("page-heading")
// 28

get value for page-heading, at medium breakpoint

font-size("page-heading", medium)
// 36

Requires

Used by

line-height

@function line-height($name) { ... }

Description

Get a line-height value, by name. Optionally specify breakpoint.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$name

typography dimension name

String— none

Returns

String —

line-height value

Example

get value for page-heading

line-height("page-heading")
// 36

get value for page-heading, at medium breakpoint

line-height("page-heading", medium)
// 44

Requires

Used by

letter-spacing

@function letter-spacing($name) { ... }

Description

Get a letter-spacing value, by name. Optionally specify breakpoint.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$name

typography dimension name

String— none

Returns

String —

letter-spacing value

Example

get value for page-heading

letter-spacing("page-heading")
// 0.1

get value for page-heading, at medium breakpoint

letter-spacing("page-heading", medium)
// 0.2

Requires

Used by

font-family

@function font-family($name: $font-family-default) { ... }

Description

Get a font-family value, by name.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$name

font-family name

String$font-family-default

Returns

String —

font-family value

Example

font-family("sans");
// Arial, sans-serif;

Requires

font-weight

@function font-weight($name: $font-weight-default) { ... }

Description

Get a font-weight value, by name.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$name

font-weight name

String$font-weight-default

Returns

String —

font-weight value

Example

font-weight("bold");
// 700;

Requires

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

typography dimension name

String— none
$breakpoint

breakpoint name

Stringnull

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

Used by

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

typography-output

@mixin typography-output($name, $breakpoint) { ... }

Description

Output CSS properties & values (when they exist) for a specific typography dimension & breakpoint.

Parameters

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

Used by

General

functions

json

@function json($map) { ... }

Description

Helper to turn Sass map into JSON, to be exported for javascript

Parameters

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