accessibility

mixins

sr-only

@mixin sr-only() { ... }

Description

Visible only to screen readers

Parameters

None.

not-sr-only

@mixin not-sr-only() { ... }

Description

Visible to everyone Mostly for restoring things previously hidden by sr-only

Parameters

None.

borders

functions

border-width

@function border-width($key: 'DEFAULT') { ... }

Description

Look up a border width from $border-widths.

Parameters

NameDescriptionTypeDefault value
$key

Key from $border-widths

String'DEFAULT'

Returns

Length

Requires

Used by

rounded

@function rounded($key: 'DEFAULT') { ... }

Description

Look up a border radius from $border-radii, returned in rem.

Parameters

NameDescriptionTypeDefault value
$key

Key from $border-radii

String'DEFAULT'

Returns

Length

Requires

Used by

mixins

rounded

@mixin rounded($key: 'DEFAULT') { ... }

Description

Set border-radius on all corners.

Parameters

NameDescriptionTypeDefault value
$key

Key from $border-radii

String'DEFAULT'

Requires

rounded-t

@mixin rounded-t($key: 'DEFAULT') { ... }

Description

Set border-radius on top corners.

Parameters

NameDescriptionTypeDefault value
$key—String'DEFAULT'

Requires

rounded-b

@mixin rounded-b($key: 'DEFAULT') { ... }

Description

Set border-radius on bottom corners.

Parameters

NameDescriptionTypeDefault value
$key—String'DEFAULT'

Requires

rounded-l

@mixin rounded-l($key: 'DEFAULT') { ... }

Description

Set border-radius on left corners.

Parameters

NameDescriptionTypeDefault value
$key—String'DEFAULT'

Requires

rounded-r

@mixin rounded-r($key: 'DEFAULT') { ... }

Description

Set border-radius on right corners.

Parameters

NameDescriptionTypeDefault value
$key—String'DEFAULT'

Requires

rounded-tl

@mixin rounded-tl($key: 'DEFAULT') { ... }

Description

Set border-top-left-radius.

Parameters

NameDescriptionTypeDefault value
$key—String'DEFAULT'

Requires

rounded-tr

@mixin rounded-tr($key: 'DEFAULT') { ... }

Description

Set border-top-right-radius.

Parameters

NameDescriptionTypeDefault value
$key—String'DEFAULT'

Requires

rounded-bl

@mixin rounded-bl($key: 'DEFAULT') { ... }

Description

Set border-bottom-left-radius.

Parameters

NameDescriptionTypeDefault value
$key—String'DEFAULT'

Requires

rounded-br

@mixin rounded-br($key: 'DEFAULT') { ... }

Description

Set border-bottom-right-radius.

Parameters

NameDescriptionTypeDefault value
$key—String'DEFAULT'

Requires

border

@mixin border($key: 'DEFAULT') { ... }

Description

Set border-width from the border width scale.

Parameters

NameDescriptionTypeDefault value
$key—String'DEFAULT'

Requires

border-x

@mixin border-x($key: 'DEFAULT') { ... }

Description

Set left and right border-width from the border width scale.

Parameters

NameDescriptionTypeDefault value
$key—String'DEFAULT'

Requires

border-y

@mixin border-y($key: 'DEFAULT') { ... }

Description

Set top and bottom border-width from the border width scale.

Parameters

NameDescriptionTypeDefault value
$key—String'DEFAULT'

Requires

border-t

@mixin border-t($key: 'DEFAULT') { ... }

Description

Set border-top-width from the border width scale.

Parameters

NameDescriptionTypeDefault value
$key—String'DEFAULT'

Requires

border-r

@mixin border-r($key: 'DEFAULT') { ... }

Description

Set border-right-width from the border width scale.

Parameters

NameDescriptionTypeDefault value
$key—String'DEFAULT'

Requires

border-b

@mixin border-b($key: 'DEFAULT') { ... }

Description

Set border-bottom-width from the border width scale.

Parameters

NameDescriptionTypeDefault value
$key—String'DEFAULT'

Requires

border-l

@mixin border-l($key: 'DEFAULT') { ... }

Description

Set border-left-width from the border width scale.

Parameters

NameDescriptionTypeDefault value
$key—String'DEFAULT'

Requires

rounded-range

@mixin rounded-range($base, $breakpoint-range...) { ... }

Description

Responsive border-radius. Base value + overrides at named breakpoints.

Parameters

NameDescriptionTypeDefault value
$base

Radius key for default

String—
$breakpoint-range

Keyword args mapping breakpoint → radius key

Arglist—

Requires

rounded-t-range

@mixin rounded-t-range($base, $breakpoint-range...) { ... }

Description

Responsive top border-radius across breakpoint ranges.

Parameters

NameDescriptionTypeDefault value
$base—String—
$breakpoint-range—Arglist—

Requires

rounded-b-range

@mixin rounded-b-range($base, $breakpoint-range...) { ... }

Description

Responsive bottom border-radius across breakpoint ranges.

Parameters

NameDescriptionTypeDefault value
$base—String—
$breakpoint-range—Arglist—

Requires

rounded-l-range

@mixin rounded-l-range($base, $breakpoint-range...) { ... }

Description

Responsive left border-radius across breakpoint ranges.

Parameters

NameDescriptionTypeDefault value
$base—String—
$breakpoint-range—Arglist—

Requires

rounded-r-range

@mixin rounded-r-range($base, $breakpoint-range...) { ... }

Description

Responsive right border-radius across breakpoint ranges.

Parameters

NameDescriptionTypeDefault value
$base—String—
$breakpoint-range—Arglist—

Requires

color

variables

palette

$palette: config.$colors;

Description

Palette includes Tailwind colours when enabled, with custom colours merged on top.

Type

Map

Used by

functions

color

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

Description

Look up a colour from the palette by name.

Parameters

NameDescriptionTypeDefault value
$name

Colour name (e.g. "blue-500")

String—

Returns

Color

Requires

Used by

convert

@function convert($color, $space: config.$output-colorspace) { ... }

Description

Convert a colour to the selected $output-colorspace. Returns unchanged if $convert-colorspace is false.

Parameters

NameDescriptionTypeDefault value
$color—Color—
$space—Stringconfig.$output-colorspace

Returns

Color

Requires

Used by

to-oklch

@function to-oklch($color) { ... }

Description

Convert a colour to OKLCH.

Parameters

NameDescriptionTypeDefault value
$color—Color—

Returns

Color

Requires

to-oklab

@function to-oklab($color) { ... }

Description

Convert a colour to OKLab.

Parameters

NameDescriptionTypeDefault value
$color—Color—

Returns

Color

Requires

to-hsl

@function to-hsl($color) { ... }

Description

Convert a colour to HSL.

Parameters

NameDescriptionTypeDefault value
$color—Color—

Returns

Color

Requires

to-rgb

@function to-rgb($color) { ... }

Description

Convert a colour to sRGB.

Parameters

NameDescriptionTypeDefault value
$color—Color—

Returns

Color

Requires

to-p3

@function to-p3($color) { ... }

Description

Convert a colour to Display P3.

Parameters

NameDescriptionTypeDefault value
$color—Color—

Returns

Color

Requires

opacity

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

Description

Look up an opacity value from $opacities.

Parameters

NameDescriptionTypeDefault value
$name

Key from $opacities (e.g. "50" or 50)

String or Number—

Returns

Number

Requires

Used by

mixins

bg

@mixin bg($name) { ... }

Description

Set background-color from the colour palette.

Parameters

NameDescriptionTypeDefault value
$name

Colour name

String—

Example

.card { @include crayon.bg("blue-500"); }
.card
  +crayon.bg("blue-500")

Requires

text-color

@mixin text-color($name) { ... }

Description

Set color from the colour palette.

Parameters

NameDescriptionTypeDefault value
$name

Colour name

String—

Example

.title { @include crayon.text-color("slate-900"); }
.title
  +crayon.text-color("slate-900")

Requires

border-color

@mixin border-color($name) { ... }

Description

Set border-color from the colour palette.

Parameters

NameDescriptionTypeDefault value
$name

Colour name

String—

Example

.panel { @include crayon.border-color("slate-200"); }
.panel
  +crayon.border-color("slate-200")

Requires

opacity

@mixin opacity($name) { ... }

Description

Set opacity from the opacity scale.

Parameters

NameDescriptionTypeDefault value
$name

Key from $opacities

String—

Requires

composition

mixins

vstack

@mixin vstack($gap, $reverse: false) { ... }

Description

Stack children vertically(flex) with an option for a gap.

Parameters

NameDescriptionTypeDefault value
$gap

size key (e.g. 4 )

Number—
$reverse

Reverse the stacking direction

Boolfalse

Example

.card-list { @include crayon.vstack(4); }
.card-list-reversed { @include crayon.vstack(4, $reverse: true); }
.card-list
  +crayon.vstack(4)
.card-list-reversed
  +crayon.vstack(4, $reverse: true)

Requires

Used by

stack

@mixin stack($gap, $reverse: false) { ... }

Description

Alias for vstack. Stack children vertically with a gap.

Parameters

NameDescriptionTypeDefault value
$gap

size key (e.g. 4 )

Number—
$reverse

Reverse the stacking direction

Boolfalse

Example

.sidebar { @include crayon.stack(6); }
.sidebar-reversed { @include crayon.stack(6, $reverse: true); }
.sidebar
  +crayon.stack(6)
.sidebar-reversed
  +crayon.stack(6, $reverse: true)

Requires

hstack

@mixin hstack($gap, $reverse: false) { ... }

Description

Lay children out in a horizontal row with a gap. Items do not wrap. Use cluster if you want items to wrap when space is tight.

Parameters

NameDescriptionTypeDefault value
$gap

size key (e.g. 3 )

Number—
$reverse

Reverse the stacking direction

Boolfalse

Example

.toolbar { @include crayon.hstack(3); }
.toolbar-reversed { @include crayon.hstack(3, $reverse: true); }
.toolbar
  +crayon.hstack(3)
.toolbar-reversed
  +crayon.hstack(3, $reverse: true)

Requires

cluster

@mixin cluster($gap) { ... }

Description

Horizontal row with wrapping. Reflows when space is tight. Good for tag lists, badge groups, and button groups.

Parameters

NameDescriptionTypeDefault value
$gap

size key (e.g. 2 )

Number—

Example

.tags { @include crayon.cluster(2); }
.tags
  +crayon.cluster(2)

Requires

center

@mixin center($axis: `null`, $children: false) { ... }

Description

The solution to the hardest problem developers face. Centering a div. Pass x or y to constrain to one axis. Set $children to true to center its children instead.

Parameters

NameDescriptionTypeDefault value
$axis

Axis to center on: x, y, or skip for both

String or Null`null`
$children

Whether to flex-center the element's children

Boolfalse

Example

.page    { @include crayon.center; }
.content { @include crayon.center(x); }
.hero    { @include crayon.center($children: true); }
.sidebar { @include crayon.center(y, $children: true); }
.page
  +crayon.center
.content
  +crayon.center(x)
.hero
  +crayon.center($children: true)
.sidebar
  +crayon.center(y, $children: true)

palette

@mixin palette($color, $bg: null, $text: null, $border: null) { ... }

Description

Apply background, text, and border colours in a single colour from the palette. All parameters are optional. The shade number maps directly to the palette: "red" + 100 → red-100.

Parameters

NameDescriptionTypeDefault value
$color

Colour family prefix (e.g. "blue", "slate")

String—
$bg

Background shade (e.g. 100)

Number or Nullnull
$text

Text colour shade (e.g. 900)

Number or Nullnull
$border

Border colour shade (e.g. 300)

Number or Nullnull

Example

.alert-error { @include crayon.palette("red", $bg: 100, $text: 900, $border: 300); }
.badge       { @include crayon.palette("emerald", $bg: 50, $text: 700); }
.alert-error
  +crayon.palette("red", $bg: 100, $text: 900, $border: 300)
.badge
  +crayon.palette("emerald", $bg: 50, $text: 700)

Requires

box

@mixin box($p: null, $px: null, $py: null, $rounded: null, $bg: null, $border: null) { ... }

Description

Padding, border radius, background color and border all at once. All parameters are optional $px / $py can be used alongside $p for asymmetric padding (e.g. badges and buttons that need wider horizontal padding than vertical). $border sets 1px solid <colour>. For custom widths combine with @include border("2").

Parameters

NameDescriptionTypeDefault value
$p

Uniform padding (size key)

Number or Nullnull
$px

Horizontal padding override (size key)

Number or Nullnull
$py

Vertical padding override (size key)

Number or Nullnull
$rounded

Border radius key (e.g. "lg", "full")

String or Nullnull
$bg

Background colour name (e.g. "white", "slate-100")

String or Nullnull
$border

Border colour name (e.g. "slate-200")

String or Nullnull

Example

.panel { @include crayon.box($p: 6, $rounded: "xl", $bg: "white", $border: "slate-200"); }
.badge { @include crayon.box($px: 3, $py: 1, $rounded: "full", $bg: "blue-100"); }
.panel
  +crayon.box($p: 6, $rounded: "xl", $bg: "white", $border: "slate-200")
.badge
  +crayon.box($px: 3, $py: 1, $rounded: "full", $bg: "blue-100")

Requires

fluid

@mixin fluid($property, $min-key, $max-key, $from: 'sm', $to: 'xl') { ... }

Description

Generate a clamp() value that interpolates between two scale values across a viewport range.

Parameters

NameDescriptionTypeDefault value
$property

CSS property to set

String—
$min-key

Size key (numeric) or font-size key (string)

Number or String—
$max-key

Upper bound, same types as $min-key

Number or String—
$from

Breakpoint where scaling starts

String'sm'
$to

Breakpoint where scaling stops

String'xl'

Requires

Used by

fluid-text

@mixin fluid-text($min, $max, $from: 'sm', $to: 'xl') { ... }

Description

Shorthand for fluid("font-size", ...).

Parameters

NameDescriptionTypeDefault value
$min

Minimum font-size key

Number or String—
$max

Maximum font-size key

Number or String—
$from—String'sm'
$to—String'xl'

Requires

fluid-p

@mixin fluid-p($min, $max, $from: 'sm', $to: 'xl') { ... }

Description

Shorthand for fluid("padding", ...).

Parameters

NameDescriptionTypeDefault value
$min—Number or String—
$max—Number or String—
$from—String'sm'
$to—String'xl'

Requires

fluid-px

@mixin fluid-px($min, $max, $from: 'sm', $to: 'xl') { ... }

Description

Shorthand for fluid("padding-left/right", ...).

Parameters

NameDescriptionTypeDefault value
$min—Number or String—
$max—Number or String—
$from—String'sm'
$to—String'xl'

Requires

fluid-py

@mixin fluid-py($min, $max, $from: 'sm', $to: 'xl') { ... }

Description

Shorthand for fluid("padding-top/bottom", ...).

Parameters

NameDescriptionTypeDefault value
$min—Number or String—
$max—Number or String—
$from—String'sm'
$to—String'xl'

Requires

fluid-gap

@mixin fluid-gap($min, $max, $from: 'sm', $to: 'xl') { ... }

Description

Shorthand for fluid("gap", ...).

Parameters

NameDescriptionTypeDefault value
$min—Number or String—
$max—Number or String—
$from—String'sm'
$to—String'xl'

Requires

configuration

variables

output-css-vars

$output-css-vars: true !default;

Description

Output CSS custom properties (--color-*, --size-*, --text-*, etc.) on :root. Disable if you're using Crayon purely via Sass functions and utility classes.

Type

Bool

layout-columns

$layout-columns: 12 !default;

Description

Number of columns for grid-cols-* and col/row-span-* classes.

Type

Number

layout-divisions

$layout-divisions: (2, 3, 4, 5, 6, 12) !default;

Description

Denominators used to generate fractional width/height classes (e.g. w-1/3, h-3/4).

Type

List

border-widths

$border-widths: (
  "DEFAULT": 1px,
  0: 0px,
  2: 2px,
  4: 4px,
  8: 8px,
) !default;

Description

Border width scale. "DEFAULT" is used by .border with no suffix.

Type

Map

Used by

border-radii

$border-radii: (
  "none": 0,
  "sm": 2px,
  "DEFAULT": 4px,
  "md": 6px,
  "lg": 8px,
  "xl": 12px,
  "2xl": 16px,
  "3xl": 24px,
  "full": 9999px,
) !default;

Description

Border radius scale. Keys map to .rounded-{key} classes and rounded() function.

Type

Map

Used by

breakpoints

$breakpoints: (
  "sm": 640px,
  "md": 768px,
  "lg": 1024px,
  "xl": 1280px,
  "xxl": 1536px,
) !default;

Description

Named breakpoints for responsive utilities and the screen() mixin. Keys must not start with a digit (CSS class restriction).

Type

Map

Used by

font-families

$font-families: (
  "sans": ( sans-serif),
  "serif": ( Georgia, "Times New Roman", serif),
  "mono": ( ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Liberation Mono", Menlo, Monaco, Consolas, monospace),
) !default;

Description

Named font family stacks. The $default-font key is applied to body. Custom fonts should be specified with standard font-face

Type

Map

Used by

default-font

$default-font: "sans" !default;

Description

Which key from $font-families to use as the document default.

Type

String

base-font-size

$base-font-size: 16px !default;

Description

Base font size used to compute rem values.

Type

Length

Used by

font-sizes

$font-sizes: (
  "xs": (0.75, 1rem),
  "sm": (0.875, 1.25rem),
  "base": (1, 1.5rem),
  "lg": (1.125, 1.75rem),
  "xl": (1.25, 1.75rem),
  "2xl": (1.5, 2rem),
  "3xl": (1.875, 2.25rem),
  "4xl": (2.25, 2.5rem),
  "5xl": (3, 1),
  "6xl": (3.75, 1),
  "7xl": (4.5, 1),
  "8xl": (6, 1),
  "9xl": (8, 1),
) !default;

Description

Font size scale. Each entry is (multiplier, line-height).

Type

Map

font-weights

$font-weights: (
  "thin": 100,
  "extralight": 200,
  "light": 300,
  "normal": 400,
  "medium": 500,
  "semibold": 600,
  "bold": 700,
  "extrabold": 800,
  "black": 900,
) !default;

Description

Font weight scale.

Type

Map

Used by

letter-spacings

$letter-spacings: (
  "tighter": -0.05em,
  "tight": -0.025em,
  "normal": 0em,
  "wide": 0.025em,
  "wider": 0.05em,
  "widest": 0.1em,
) !default;

Description

Letter spacing scale.

Type

Map

Used by

line-heights

$line-heights: (
  "none": 1,
  "tight": 1.25,
  "snug": 1.375,
  "normal": 1.5,
  "relaxed": 1.625,
  "loose": 2,
) !default;

Description

Line height scale.

Type

Map

Used by

base-size

$base-size: 4px !default;

Description

Base unit for the sizing scale. All $sizes entries are multiples of this.

Type

Length

Used by

sizes

$sizes: (
  0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5, 5.5, 6, 6.5, 7, 7.5, 8, 8.5, 9, 9.5, 10,
  12, 14, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, 96
) !default;

Description

Spacing scale steps. Values are multiplied by $base-size.

Type

List</code> or <code>Map

Used by

use-tailwind-colors

$use-tailwind-colors: true !default;

Description

Include the full Tailwind v3 colour palette by default. Set to false to start with no colours and define your own via $colors.

Type

Bool

convert-colorspace

$convert-colorspace: true !default;

Description

Whether to convert colour output to a different colour space.

Type

Bool

Used by

output-colorspace

$output-colorspace: oklch !default;

Description

Target colour space for output. Options: srgb, hsl, oklch, oklab, display-p3.

Type

String

use-color-opacity-modifiers

$use-color-opacity-modifiers: true !default;

Description

Generate opacity modifier classes for colours (e.g. .bg-red-500\/50). Uses the $opacities map for available stops.

Type

Bool

colors

$colors: () !default;

Description

Your custom colours, merged on top of the Tailwind palette when $use-tailwind-colors is true. To replace the palette entirely, set $use-tailwind-colors: false and define all your colours with this.

Type

Map

opacities

$opacities: (
  0: 0,
  5: 0.05,
  10: 0.1,
  20: 0.2,
  25: 0.25,
  30: 0.3,
  40: 0.4,
  50: 0.5,
  60: 0.6,
  70: 0.7,
  75: 0.75,
  80: 0.8,
  90: 0.9,
  95: 0.95,
  100: 1,
) !default;

Description

Opacity scale for .opacity-{n} classes and opacity() function.

Type

Map

Used by

decorative

mixins

mask-mesa

@mixin mask-mesa($size: null, $rotate: null, $flip: null) { ... }

Description

"They're waiting for you Gordon...in the test chamberrrrrr."

Parameters

NameDescriptionTypeDefault value
$size

sets the size

Number or Nullnull
$rotate

degrees to rotate the shape (e.g. 90, 180, -90)

Number or Nullnull
$flip

mirror the shape: x or y

String or Nullnull

Example

.avatar { @include crayon.mask-mesa(16); }
.icon   { @include crayon.mask-mesa($rotate: 90); }
.badge  { @include crayon.mask-mesa($flip: x); }
.avatar
  +crayon.mask-mesa(16)

Requires

mask-squircle

@mixin mask-squircle($size: null) { ... }

Description

Clip to a smooth square with evenly rounded corners.

Parameters

NameDescriptionTypeDefault value
$size

sets width and height

Number or Nullnull

Example

.avatar { @include crayon.mask-squircle(12); }
.avatar
  +crayon.mask-squircle(12)

Requires

mask-swedge

@mixin mask-swedge($size: null, $rotate: null, $flip: null) { ... }

Description

Clip to a shape with a sharp top-left corner, large circular arc on the bottom-left, and rounded corners top-right and bottom-right.

Parameters

NameDescriptionTypeDefault value
$size

sets width and height

Number or Nullnull
$rotate

degrees to rotate the mask (e.g. 90, 180)

Number or Nullnull
$flip

mirror the mask shape: x or y

String or Nullnull

Example

.avatar { @include crayon.mask-swedge(16); }
.icon   { @include crayon.mask-swedge($rotate: 180); }
.badge  { @include crayon.mask-swedge($flip: x); }
.avatar
  +crayon.mask-swedge(16)

Requires

mask-pebble

@mixin mask-pebble($size: null, $rotate: null, $flip: null) { ... }

Description

Clip to a soft asymmetric pebble shape. Flip x to shift the mass to the top-left instead.

Parameters

NameDescriptionTypeDefault value
$size

sets width and height

Number or Nullnull
$rotate

degrees to rotate the mask

Number or Nullnull
$flip

mirror the mask shape: x or y

String or Nullnull

Example

.avatar { @include crayon.mask-pebble(12); }
.icon   { @include crayon.mask-pebble($flip: x); }
.badge  { @include crayon.mask-pebble(12, $rotate: 90, $flip: y); }
.avatar
  +crayon.mask-pebble(12)

Requires

display

mixins

container

@mixin container($center: true) { ... }

Description

Makes element max width the same as the current breakpoint

Parameters

NameDescriptionTypeDefault value
$center

Center the container

Booltrue

Example

.page { @include crayon.container; }
.page-start { @include crayon.container($center: false); }
.page
  +crayon.container
.page-start
  +crayon.container($center: false)

Requires

block

@mixin block() { ... }

Description

Display an element as a block.

Parameters

None.

inline

@mixin inline() { ... }

Description

Display an element inline.

Parameters

None.

inline-block

@mixin inline-block() { ... }

Description

Display an element as an inline block.

Parameters

None.

hidden

@mixin hidden() { ... }

Description

Hide an element.

Parameters

None.

hide

@mixin hide() { ... }

Description

Hide an element Alias of hidden.

Parameters

None.

divide

mixins

divide-x

@mixin divide-x($width: "DEFAULT") { ... }

Description

Add vertical dividers between an element's children.

Parameters

NameDescriptionTypeDefault value
$width

: Key from $border-widths

String or Number"DEFAULT"

Example

.columns { @include crayon.divide-x(2); }
.columns
  +crayon.divide-x(2)

Requires

divide-y

@mixin divide-y($width: "DEFAULT") { ... }

Description

Add horizontal dividers between an element's children.

Parameters

NameDescriptionTypeDefault value
$width

: Key from $border-widths

String or Number"DEFAULT"

Example

.stack { @include crayon.divide-y(2); }
.stack
  +crayon.divide-y(2)

Requires

divide-style

@mixin divide-style($style:) { ... }

Description

Set the border style between an element's children.

Parameters

NameDescriptionTypeDefault value
$style:

Border style (e.g. dashed, dotted)

String—

Example

.stack { @include crayon.divide-style(dashed); }
.stack
  +crayon.divide-style(dashed)

divide-color

@mixin divide-color($name:) { ... }

Description

Set the border colour between an element's children.

Parameters

NameDescriptionTypeDefault value
$name:

Colour by name

String—

Example

.stack { @include crayon.divide-color("slate-200"); }
.stack
  +crayon.divide-color("slate-200")

Requires

flexbox

mixins

flex

@mixin flex() { ... }

Description

Create a flex container.

Parameters

None.

inline-flex

@mixin inline-flex() { ... }

Description

Create an inline flex container.

Parameters

None.

flex-row

@mixin flex-row() { ... }

Description

Order flex items horizontally.

Parameters

None.

Used by

flex-col

@mixin flex-col() { ... }

Description

Order flex items vertically.

Parameters

None.

Used by

flex-row-reverse

@mixin flex-row-reverse() { ... }

Description

Lay out flex items horizontally in reverse order.

Parameters

None.

flex-col-reverse

@mixin flex-col-reverse() { ... }

Description

Lay out flex items vertically in reverse order.

Parameters

None.

f-row

@mixin f-row() { ... }

Description

Alias for flex-row.

Parameters

None.

Requires

f-col

@mixin f-col() { ... }

Description

Alias for flex-col.

Parameters

None.

Requires

grow

@mixin grow() { ... }

Description

Allow a flex item to grow and fill available space.

Parameters

None.

no-grow

@mixin no-grow() { ... }

Description

Prevent a flex item from growing.

Parameters

None.

shrink

@mixin shrink() { ... }

Description

Allow a flex item to shrink when necessary.

Parameters

None.

no-shrink

@mixin no-shrink() { ... }

Description

Prevent a flex item from shrinking.

Parameters

None.

flex-wrap

@mixin flex-wrap() { ... }

Description

Allow flex items to wrap onto multiple lines.

Parameters

None.

flex-nowrap

@mixin flex-nowrap() { ... }

Description

Keep flex items on a single line.

Parameters

None.

flex-wrap-reverse

@mixin flex-wrap-reverse() { ... }

Description

Wrap flex items onto multiple lines in reverse order.

Parameters

None.

justify-start

@mixin justify-start() { ... }

Description

Pack flex items at the start.

Parameters

None.

justify-end

@mixin justify-end() { ... }

Description

Pack flex items at the end.

Parameters

None.

justify-center

@mixin justify-center() { ... }

Description

Center flex items.

Parameters

None.

justify-between

@mixin justify-between() { ... }

Description

Distribute flex items with equal space between.

Parameters

None.

justify-around

@mixin justify-around() { ... }

Description

Distribute flex items with equal space around them.

Parameters

None.

justify-evenly

@mixin justify-evenly() { ... }

Description

Distribute flex items with equal space between and around them.

Parameters

None.

items-start

@mixin items-start() { ... }

Description

Align flex items at the start.

Parameters

None.

items-end

@mixin items-end() { ... }

Description

Align flex items at the end.

Parameters

None.

items-center

@mixin items-center() { ... }

Description

Center flex items along.

Parameters

None.

items-baseline

@mixin items-baseline() { ... }

Description

Align flex items along their baselines.

Parameters

None.

items-stretch

@mixin items-stretch() { ... }

Description

Stretch flex items.

Parameters

None.

self-auto

@mixin self-auto() { ... }

Description

Use the flex container's align-items value for an item.

Parameters

None.

self-start

@mixin self-start() { ... }

Description

Align a flex item at the start of the cross axis.

Parameters

None.

self-end

@mixin self-end() { ... }

Description

Align a flex item at the end of the cross axis.

Parameters

None.

self-center

@mixin self-center() { ... }

Description

Center a flex item along the cross axis.

Parameters

None.

self-baseline

@mixin self-baseline() { ... }

Description

Align a flex item along the container's baseline.

Parameters

None.

self-stretch

@mixin self-stretch() { ... }

Description

Stretch a flex item across the cross axis.

Parameters

None.

content-start

@mixin content-start() { ... }

Description

Pack flex lines at the start of the cross axis.

Parameters

None.

content-end

@mixin content-end() { ... }

Description

Pack flex lines at the end of the cross axis.

Parameters

None.

content-center

@mixin content-center() { ... }

Description

Center flex lines along the cross axis.

Parameters

None.

content-between

@mixin content-between() { ... }

Description

Distribute flex lines with equal space between them.

Parameters

None.

content-around

@mixin content-around() { ... }

Description

Distribute flex lines with equal space around them.

Parameters

None.

content-evenly

@mixin content-evenly() { ... }

Description

Distribute flex lines with equal space between and around them.

Parameters

None.

order

@mixin order($value) { ... }

Description

Set the order of a flex item.

Parameters

NameDescriptionTypeDefault value
$value

Position in the flex order, accepts an arbitrary value

Number—

Used by

order-first

@mixin order-first() { ... }

Description

Place a flex item before the others.

Parameters

None.

Requires

order-last

@mixin order-last() { ... }

Description

Place a flex item after all the others.

Parameters

None.

Requires

gap

mixins

gap

@mixin gap($key) { ... }

Description

Add space between rows and columns.

Parameters

NameDescriptionTypeDefault value
$key

Size scale key

Number—

Requires

gap-x

@mixin gap-x($key) { ... }

Description

Add space between columns.

Parameters

NameDescriptionTypeDefault value
$key

Size scale key

Number—

Requires

gap-y

@mixin gap-y($key) { ... }

Description

Add space between rows.

Parameters

NameDescriptionTypeDefault value
$key

Size scale key

Number—

Requires

grid

mixins

grid

@mixin grid() { ... }

Description

Create a grid container.

Parameters

None.

grid-cols

@mixin grid-cols($num) { ... }

Description

Split a grid into columns.

Parameters

NameDescriptionTypeDefault value
$num

Number of columns

Number—

grid-cols-none

@mixin grid-cols-none() { ... }

Description

Remove grid column template.

Parameters

None.

grid-rows

@mixin grid-rows($num) { ... }

Description

Split a grid into rows.

Parameters

NameDescriptionTypeDefault value
$num

Number of rows

Number—

grid-rows-none

@mixin grid-rows-none() { ... }

Description

Remove any grid row template.

Parameters

None.

col-span

@mixin col-span($num) { ... }

Description

Make an item span a number of columns.

Parameters

NameDescriptionTypeDefault value
$num

Number of columns to span

Number—

col-span-full

@mixin col-span-full() { ... }

Description

Make an item span every column.

Parameters

None.

row-span

@mixin row-span($num) { ... }

Description

Make an item span a number of rows.

Parameters

NameDescriptionTypeDefault value
$num

Number of rows to span

Number—

row-span-full

@mixin row-span-full() { ... }

Description

Make an item span every row.

Parameters

None.

auto-cols-auto

@mixin auto-cols-auto() { ... }

Description

Size automatically created grid columns according to their contents.

Parameters

None.

auto-cols-min

@mixin auto-cols-min() { ... }

Description

Size automatically created grid columns to their minimum content width.

Parameters

None.

auto-cols-max

@mixin auto-cols-max() { ... }

Description

Size automatically created grid columns to their maximum content width.

Parameters

None.

auto-cols-fr

@mixin auto-cols-fr() { ... }

Description

Give automatically created grid columns an equal share of available space.

Parameters

None.

auto-rows-auto

@mixin auto-rows-auto() { ... }

Description

Size automatically created grid rows according to their contents.

Parameters

None.

auto-rows-min

@mixin auto-rows-min() { ... }

Description

Size automatically created grid rows to their minimum content height.

Parameters

None.

auto-rows-max

@mixin auto-rows-max() { ... }

Description

Size automatically created grid rows to their maximum content height.

Parameters

None.

auto-rows-fr

@mixin auto-rows-fr() { ... }

Description

Give automatically created grid rows an equal share of available space.

Parameters

None.

grid-flow-row

@mixin grid-flow-row() { ... }

Description

Add new grid items by row.

Parameters

None.

grid-flow-col

@mixin grid-flow-col() { ... }

Description

Add new grid items by column.

Parameters

None.

grid-flow-dense

@mixin grid-flow-dense() { ... }

Description

Fill gaps with smaller grid items when they fit.

Parameters

None.

grid-flow-row-dense

@mixin grid-flow-row-dense() { ... }

Description

Add new grid items by row and backfill gaps where possible.

Parameters

None.

grid-flow-col-dense

@mixin grid-flow-col-dense() { ... }

Description

Add new grid items by column and backfill gaps where possible.

Parameters

None.

grid-cols-range

@mixin grid-cols-range($base, $breakpoints...) { ... }

Description

Change the number of grid columns at different breakpoints.

Parameters

NameDescriptionTypeDefault value
$base

Number of columns by default

Number—
$breakpoints

Keyword args mapping breakpoints to column counts

Arglist—

Example

.gallery { @include crayon.grid-cols-range(1, $md: 2, $lg: 4); }
.gallery
  +crayon.grid-cols-range(1, $md: 2, $lg: 4)

Requires

grid-rows-range

@mixin grid-rows-range($base, $breakpoints...) { ... }

Description

Change the number of grid rows at different breakpoints.

Parameters

NameDescriptionTypeDefault value
$base

Number of rows by default

Number—
$breakpoints

Keyword args mapping breakpoints to row counts

Arglist—

Example

.dashboard { @include crayon.grid-rows-range(1, $md: 2, $lg: 3); }
.dashboard
  +crayon.grid-rows-range(1, $md: 2, $lg: 3)

Requires

height

mixins

h

@mixin h($key) { ... }

Description

Set the height from the size scale, a breakpoint, or a viewport keyword.

Parameters

NameDescriptionTypeDefault value
$key

Size scale key, breakpoint name, screen, vh, svh, lvh, or dvh

Number or String—

Example

.avatar { @include crayon.h(12); }
.avatar
  +crayon.h(12)

min-h

@mixin min-h($key) { ... }

Description

Set the minimum height from the size scale, a breakpoint, or a viewport keyword.

Parameters

NameDescriptionTypeDefault value
$key

Size scale key, breakpoint name, screen, vh, svh, lvh, or dvh

Number or String—

max-h

@mixin max-h($key) { ... }

Description

Set the maximum height from the size scale, a breakpoint, or a viewport keyword.

Parameters

NameDescriptionTypeDefault value
$key

Size scale key, breakpoint name, screen, vh, svh, lvh, or dvh

Number or String—

h-full

@mixin h-full() { ... }

Description

Fill the available height.

Parameters

None.

h-screen

@mixin h-screen() { ... }

Description

Match the viewport height.

Parameters

None.

h-auto

@mixin h-auto() { ... }

Description

Let the browser choose the height.

Parameters

None.

h-fit

@mixin h-fit() { ... }

Description

Fit the height to its content.

Parameters

None.

h-min

@mixin h-min() { ... }

Description

Use the smallest possible content height.

Parameters

None.

h-max

@mixin h-max() { ... }

Description

Use the largest needed content height.

Parameters

None.

min-h-full

@mixin min-h-full() { ... }

Description

Fill the available minimum height.

Parameters

None.

max-h-full

@mixin max-h-full() { ... }

Description

Fill the available maximum height.

Parameters

None.

max-h-none

@mixin max-h-none() { ... }

Description

Remove any maximum height.

Parameters

None.

margin

mixins

m

@mixin m($key, $negative: false) { ... }

Description

Add margin on every side.

Parameters

NameDescriptionTypeDefault value
$key

Size scale key

Number—
$negative

Use a negative margin

Boolfalse

Requires

Used by

mt

@mixin mt($key, $negative: false) { ... }

Description

Add margin to the top.

Parameters

NameDescriptionTypeDefault value
$key

Size scale key

Number—
$negative

Use a negative margin

Boolfalse

Requires

Used by

mb

@mixin mb($key, $negative: false) { ... }

Description

Add margin to the bottom.

Parameters

NameDescriptionTypeDefault value
$key

Size scale key

Number—
$negative

Use a negative margin

Boolfalse

Requires

Used by

ml

@mixin ml($key, $negative: false) { ... }

Description

Add margin to the left.

Parameters

NameDescriptionTypeDefault value
$key

Size scale key

Number—
$negative

Use a negative margin

Boolfalse

Requires

Used by

mr

@mixin mr($key, $negative: false) { ... }

Description

Add margin on the right.

Parameters

NameDescriptionTypeDefault value
$key

Size scale key

Number—
$negative

Use a negative margin

Boolfalse

Requires

Used by

mx

@mixin mx($key, $negative: false) { ... }

Description

Add margin left and right.

Parameters

NameDescriptionTypeDefault value
$key

Size scale key

Number—
$negative

Use a negative margin

Boolfalse

Requires

Used by

my

@mixin my($key, $negative: false) { ... }

Description

Add margin to the top and bottom.

Parameters

NameDescriptionTypeDefault value
$key

Size scale key

Number—
$negative

Use a negative margin

Boolfalse

Requires

Used by

mx-auto

@mixin mx-auto() { ... }

Description

Center an item horizontally with auto margins.

Parameters

None.

minus-m

@mixin minus-m($key) { ... }

Description

Add negative margin on all sides.

Parameters

NameDescriptionTypeDefault value
$key

Size scale key

Number—

Requires

  • [mixin] m

minus-mt

@mixin minus-mt($key) { ... }

Description

Add negative margin to the top.

Parameters

NameDescriptionTypeDefault value
$key

Size scale key

Number—

Requires

  • [mixin] mt

minus-mb

@mixin minus-mb($key) { ... }

Description

Add negative margin to the bottom.

Parameters

NameDescriptionTypeDefault value
$key

Size scale key

Number—

Requires

  • [mixin] mb

minus-ml

@mixin minus-ml($key) { ... }

Description

Add negative margin left.

Parameters

NameDescriptionTypeDefault value
$key

Size scale key

Number—

Requires

  • [mixin] ml

minus-mr

@mixin minus-mr($key) { ... }

Description

Add negative margin right.

Parameters

NameDescriptionTypeDefault value
$key

Size scale key

Number—

Requires

  • [mixin] mr

minus-mx

@mixin minus-mx($key) { ... }

Description

Add negative margin left and right.

Parameters

NameDescriptionTypeDefault value
$key

Size scale key

Number—

Requires

  • [mixin] mx

minus-my

@mixin minus-my($key) { ... }

Description

Add negative margin top and bottom.

Parameters

NameDescriptionTypeDefault value
$key

Size scale key

Number—

Requires

  • [mixin] my

m-auto

@mixin m-auto() { ... }

Description

Add auto margin on every side.

Parameters

None.

my-auto

@mixin my-auto() { ... }

Description

Add auto margin to the top and bottom.

Parameters

None.

mt-auto

@mixin mt-auto() { ... }

Description

Add auto margin to the top.

Parameters

None.

mb-auto

@mixin mb-auto() { ... }

Description

Add auto margin to the bottom.

Parameters

None.

ml-auto

@mixin ml-auto() { ... }

Description

Add auto margin to the left.

Parameters

None.

mr-auto

@mixin mr-auto() { ... }

Description

Add auto margin to the right.

Parameters

None.

m-range

@mixin m-range($base, $breakpoint-range...) { ... }

Description

Responsive margin across breakpoint ranges.

Parameters

NameDescriptionTypeDefault value
$base—Number—
$breakpoint-range—Arglist—

Example

.card { @include crayon.m-range(2, $md: 4, $lg: 6); }
.card
  +crayon.m-range(2, $md: 4, $lg: 6)

Requires

mx-range

@mixin mx-range($base, $breakpoint-range...) { ... }

Description

Responsive horizontal margin across breakpoint ranges.

Parameters

NameDescriptionTypeDefault value
$base—Number—
$breakpoint-range—Arglist—

Example

.container { @include crayon.mx-range(4, $md: 8, $lg: 12); }
.container
  +crayon.mx-range(4, $md: 8, $lg: 12)

Requires

my-range

@mixin my-range($base, $breakpoint-range...) { ... }

Description

Responsive vertical margin across breakpoint ranges.

Parameters

NameDescriptionTypeDefault value
$base—Number—
$breakpoint-range—Arglist—

Example

.section { @include crayon.my-range(6, $md: 10, $lg: 16); }
.section
  +crayon.my-range(6, $md: 10, $lg: 16)

Requires

mt-range

@mixin mt-range($base, $breakpoint-range...) { ... }

Description

Responsive margin-top across breakpoint ranges.

Parameters

NameDescriptionTypeDefault value
$base—Number—
$breakpoint-range—Arglist—

Example

.section { @include crayon.mt-range(6, $md: 10, $lg: 16); }
.section
  +crayon.mt-range(6, $md: 10, $lg: 16)

Requires

mb-range

@mixin mb-range($base, $breakpoint-range...) { ... }

Description

Responsive margin-bottom across breakpoint ranges.

Parameters

NameDescriptionTypeDefault value
$base—Number—
$breakpoint-range—Arglist—

Example

.section { @include crayon.mb-range(6, $md: 10, $lg: 16); }
.section
  +crayon.mb-range(6, $md: 10, $lg: 16)

Requires

ml-range

@mixin ml-range($base, $breakpoint-range...) { ... }

Description

Responsive margin-left across breakpoint ranges.

Parameters

NameDescriptionTypeDefault value
$base—Number—
$breakpoint-range—Arglist—

Example

.card { @include crayon.ml-range(4, $md: 6, $lg: 8); }
.card
  +crayon.ml-range(4, $md: 6, $lg: 8)

Requires

mr-range

@mixin mr-range($base, $breakpoint-range...) { ... }

Description

Responsive margin-right across breakpoint ranges.

Parameters

NameDescriptionTypeDefault value
$base—Number—
$breakpoint-range—Arglist—

Example

.card { @include crayon.mr-range(4, $md: 6, $lg: 8); }
.card
  +crayon.mr-range(4, $md: 6, $lg: 8)

Requires

padding

mixins

p

@mixin p($key) { ... }

Description

Add padding on every side.

Parameters

NameDescriptionTypeDefault value
$key

Size scale key

Number—

Requires

pt

@mixin pt($key) { ... }

Description

Add padding to the top.

Parameters

NameDescriptionTypeDefault value
$key

Size scale key

Number—

Requires

pb

@mixin pb($key) { ... }

Description

Add padding to the bottom.

Parameters

NameDescriptionTypeDefault value
$key

Size scale key

Number—

Requires

pl

@mixin pl($key) { ... }

Description

Add padding to the left.

Parameters

NameDescriptionTypeDefault value
$key

Size scale key

Number—

Requires

pr

@mixin pr($key) { ... }

Description

Add padding to the right.

Parameters

NameDescriptionTypeDefault value
$key

Size scale key

Number—

Requires

px

@mixin px($key) { ... }

Description

Add padding to the left and right.

Parameters

NameDescriptionTypeDefault value
$key

Size scale key

Number—

Requires

py

@mixin py($key) { ... }

Description

Add padding to the top and bottom.

Parameters

NameDescriptionTypeDefault value
$key

Size scale key

Number—

Requires

p-range

@mixin p-range($base, $breakpoint-range...) { ... }

Description

Responsive padding. Base value + overrides at named breakpoints.

Parameters

NameDescriptionTypeDefault value
$base

Size key for default

Number—
$breakpoint-range

Keyword args mapping breakpoint → size key

Arglist—

Example

.hero { @include crayon.p-range(4, $md: 8, $lg: 12); }
.hero
  +crayon.p-range(4, $md: 8, $lg: 12)

Requires

px-range

@mixin px-range($base, $breakpoint-range...) { ... }

Description

Responsive horizontal padding across breakpoint ranges.

Parameters

NameDescriptionTypeDefault value
$base—Number—
$breakpoint-range—Arglist—

Example

.card { @include crayon.px-range(4, $md: 6, $lg: 8); }
.card
  +crayon.px-range(4, $md: 6, $lg: 8)

Requires

py-range

@mixin py-range($base, $breakpoint-range...) { ... }

Description

Responsive vertical padding across breakpoint ranges.

Parameters

NameDescriptionTypeDefault value
$base—Number—
$breakpoint-range—Arglist—

Example

.section { @include crayon.py-range(6, $md: 10, $lg: 16); }
.section
  +crayon.py-range(6, $md: 10, $lg: 16)

Requires

pt-range

@mixin pt-range($base, $breakpoint-range...) { ... }

Description

Responsive padding-top across breakpoint ranges.

Parameters

NameDescriptionTypeDefault value
$base—Number—
$breakpoint-range—Arglist—

Example

.section { @include crayon.pt-range(6, $md: 10, $lg: 16); }
.section
  +crayon.pt-range(6, $md: 10, $lg: 16)

Requires

pb-range

@mixin pb-range($base, $breakpoint-range...) { ... }

Description

Responsive padding-bottom across breakpoint ranges.

Parameters

NameDescriptionTypeDefault value
$base—Number—
$breakpoint-range—Arglist—

Example

.section { @include crayon.pb-range(6, $md: 10, $lg: 16); }
.section
  +crayon.pb-range(6, $md: 10, $lg: 16)

Requires

pl-range

@mixin pl-range($base, $breakpoint-range...) { ... }

Description

Responsive padding-left across breakpoint ranges.

Parameters

NameDescriptionTypeDefault value
$base—Number—
$breakpoint-range—Arglist—

Example

.card { @include crayon.pl-range(4, $md: 6, $lg: 8); }
.card
  +crayon.pl-range(4, $md: 6, $lg: 8)

Requires

pr-range

@mixin pr-range($base, $breakpoint-range...) { ... }

Description

Responsive padding-right across breakpoint ranges.

Parameters

NameDescriptionTypeDefault value
$base—Number—
$breakpoint-range—Arglist—

Example

.card { @include crayon.pr-range(4, $md: 6, $lg: 8); }
.card
  +crayon.pr-range(4, $md: 6, $lg: 8)

Requires

responsive

mixins

screen

@mixin screen($name) { ... }

Description

Wrap content in a min-width media query for a named breakpoint.

Parameters

NameDescriptionTypeDefault value
$name

Key from $breakpoints

String—

Requires

screens

@mixin screens($names...) { ... }

Description

Wrap content in multiple min-width media queries at once.

Parameters

NameDescriptionTypeDefault value
$names

One or more breakpoint keys

Arglist—

Requires

containers

Deprecated!

this is fluff, just use regular container queries

@mixin containers($sizes...) { ... }

Description

Wrap content in container query breakpoints using raw size values. Pass $name as a keyword argument for named containers.

Parameters

NameDescriptionTypeDefault value
$sizes

One or more min-width values (e.g. 400px, 600px)

Arglist—

Requires

show-from

@mixin show-from($name) { ... }

Description

Hidden by default, visible at breakpoint and above.

Parameters

NameDescriptionTypeDefault value
$name

Key from $breakpoints

String—

Requires

hide-from

@mixin hide-from($name) { ... }

Description

Visible by default, hidden at breakpoint and above.

Parameters

NameDescriptionTypeDefault value
$name

Key from $breakpoints

String—

Requires

show-until

@mixin show-until($name) { ... }

Description

Alias for hide-from. Visible by default, hidden at breakpoint and above.

Parameters

NameDescriptionTypeDefault value
$name

Key from $breakpoints

String—

Requires

hide-until

@mixin hide-until($name) { ... }

Description

Alias for show-from. Hidden by default, visible at breakpoint and above.

Parameters

NameDescriptionTypeDefault value
$name

Key from $breakpoints

String—

Requires

portrait

@mixin portrait() { ... }

Description

Wrap content in orientation: portrait.

Parameters

None.

landscape

@mixin landscape() { ... }

Description

Wrap content in orientation: landscape.

Parameters

None.

dark

@mixin dark() { ... }

Description

Wrap content in prefers-color-scheme: dark. @content

Parameters

None.

sass utilities

functions

px-to-rem

@function px-to-rem($px) { ... }

Description

Convert a px value to rem using $base-font-size.

Parameters

NameDescriptionTypeDefault value
$px

Value in px

Length—

Returns

Length —

Value in rem

Requires

Used by

size

functions

size

@function size($key) { ... }

Description

Look up a spacing value from $sizes, returned in rem. Falls back to $base-size * $key for keys not in the map.

Parameters

NameDescriptionTypeDefault value
$key

Scale step (e.g. 4, 12)

Number—

Returns

Length

Requires

Used by

mixins

size

@mixin size($key) { ... }

Description

Set both width and height.

Parameters

NameDescriptionTypeDefault value
$key

Size scale key or breakpoint name

Number or String—

min-size

@mixin min-size($key) { ... }

Description

Set both min-width and min-height.

Parameters

NameDescriptionTypeDefault value
$key

Size scale key or breakpoint name

Number or String—

max-size

@mixin max-size($key) { ... }

Description

Set both max-width and max-height.

Parameters

NameDescriptionTypeDefault value
$key

Size scale key or breakpoint name

Number or String—

size-full

@mixin size-full() { ... }

Description

Fill the available width and height.

Parameters

None.

size-auto

@mixin size-auto() { ... }

Description

Let the browser choose the width and height.

Parameters

None.

sizing

mixins

size-range

@mixin size-range($base, $breakpoint-range...) { ... }

Description

Responsive width + height across breakpoint ranges.

Parameters

NameDescriptionTypeDefault value
$base—Number—
$breakpoint-range—Arglist—

Example

.avatar { @include crayon.size-range(10, $md: 12, $lg: 16); }
.avatar
  +crayon.size-range(10, $md: 12, $lg: 16)

Requires

w-range

@mixin w-range($base, $breakpoint-range...) { ... }

Description

Responsive width across breakpoint ranges.

Parameters

NameDescriptionTypeDefault value
$base—Number—
$breakpoint-range—Arglist—

Example

.panel { @include crayon.w-range(64, $md: 80, $lg: 96); }
.panel
  +crayon.w-range(64, $md: 80, $lg: 96)

Requires

h-range

@mixin h-range($base, $breakpoint-range...) { ... }

Description

Responsive height across breakpoint ranges.

Parameters

NameDescriptionTypeDefault value
$base—Number—
$breakpoint-range—Arglist—

Example

.hero { @include crayon.h-range(64, $md: 80, $lg: 96); }
.hero
  +crayon.h-range(64, $md: 80, $lg: 96)

Requires

gap-range

@mixin gap-range($base, $breakpoint-range...) { ... }

Description

Responsive gap across breakpoint ranges.

Parameters

NameDescriptionTypeDefault value
$base—Number—
$breakpoint-range—Arglist—

Example

.grid { @include crayon.gap-range(4, $md: 6, $lg: 8); }
.grid
  +crayon.gap-range(4, $md: 6, $lg: 8)

Requires

gap-x-range

@mixin gap-x-range($base, $breakpoint-range...) { ... }

Description

Responsive column-gap across breakpoint ranges.

Parameters

NameDescriptionTypeDefault value
$base—Number—
$breakpoint-range—Arglist—

Example

.grid { @include crayon.gap-x-range(4, $md: 6, $lg: 8); }
.grid
  +crayon.gap-x-range(4, $md: 6, $lg: 8)

Requires

gap-y-range

@mixin gap-y-range($base, $breakpoint-range...) { ... }

Description

Responsive row-gap across breakpoint ranges.

Parameters

NameDescriptionTypeDefault value
$base—Number—
$breakpoint-range—Arglist—

Example

.grid { @include crayon.gap-y-range(4, $md: 6, $lg: 8); }
.grid
  +crayon.gap-y-range(4, $md: 6, $lg: 8)

Requires

state

mixins

hover

@mixin hover() { ... }

Description

Wrap content in :hover. @content

Parameters

None.

focus

@mixin focus() { ... }

Description

Wrap content in :focus. @content

Parameters

None.

focus-visible

@mixin focus-visible() { ... }

Description

Wrap content in :focus-visible.

Parameters

None.

Example

.button {
  @include crayon.focus-visible {
    outline: 2px solid currentColor;
  }
}
.button
  +crayon.focus-visible
    outline: 2px solid currentColor

focus-within

@mixin focus-within() { ... }

Description

Wrap content in :focus-within.

Parameters

None.

Example

.field {
  @include crayon.focus-within {
    border-color: currentColor;
  }
}
.field
  +crayon.focus-within
    border-color: currentColor

active

@mixin active() { ... }

Description

Wrap content in :active. @content

Parameters

None.

enabled

@mixin enabled() { ... }

Description

Wrap content in :enabled.

Parameters

None.

Example

.button {
  @include crayon.enabled {
    cursor: pointer;
  }
}
.button
  +crayon.enabled
    cursor: pointer

disabled

@mixin disabled() { ... }

Description

Wrap content in :disabled.

Parameters

None.

Example

.button {
  @include crayon.disabled {
    cursor: not-allowed;
  }
}
.button
  +crayon.disabled
    cursor: not-allowed

checked

@mixin checked() { ... }

Description

Wrap content in :checked.

Parameters

None.

Example

.checkbox {
  @include crayon.checked {
    accent-color: currentColor;
  }
}
.checkbox
  +crayon.checked
    accent-color: currentColor

typography

functions

font-size

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

Description

Look up a font size from $font-sizes, returned in rem.

Parameters

NameDescriptionTypeDefault value
$name

Key from $font-sizes (e.g. "lg", "2xl")

String—

Returns

Length

Requires

Used by

font-weight

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

Description

Look up a font weight from $font-weights.

Parameters

NameDescriptionTypeDefault value
$name

Key from $font-weights (e.g. "bold")

String—

Returns

Number

Requires

Used by

font-family

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

Description

Look up a font family stack from $font-families.

Parameters

NameDescriptionTypeDefault value
$name

Key from $font-families (e.g. "mono")

String—

Returns

List

Requires

Used by

tracking

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

Description

Look up a letter spacing from $letter-spacings.

Parameters

NameDescriptionTypeDefault value
$name

Key from $letter-spacings (e.g. "tight")

String—

Returns

Length

Requires

Used by

leading

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

Description

Look up a line height from $line-heights.

Parameters

NameDescriptionTypeDefault value
$name

Key from $line-heights (e.g. "relaxed")

String—

Returns

Number

Requires

Used by

mixins

text

@mixin text($name) { ... }

Description

Set font-size and line-height from the font size scale.

Parameters

NameDescriptionTypeDefault value
$name

Key from $font-sizes

String—

Requires

Used by

font

@mixin font($name) { ... }

Description

Set font-weight from the font weight scale.

Parameters

NameDescriptionTypeDefault value
$name

Key from $font-weights

String—

Requires

Used by

font-weight

@mixin font-weight($name) { ... }

Description

Set font-weight from the font weight scale.

Parameters

NameDescriptionTypeDefault value
$name

Key from $font-weights

String—

Requires

font-size

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

Description

Set font-size and line-height from the font size scale.

Parameters

NameDescriptionTypeDefault value
$name

Key from $font-sizes

String—

Requires

font-family

@mixin font-family($name) { ... }

Description

Set font-family from the font family map.

Parameters

NameDescriptionTypeDefault value
$name

Key from $font-families

String—

Requires

tracking

@mixin tracking($name) { ... }

Description

Set letter-spacing from the letter spacing scale.

Parameters

NameDescriptionTypeDefault value
$name

Key from $letter-spacings

String—

Requires

Used by

leading

@mixin leading($name) { ... }

Description

Set line-height from the line height scale.

Parameters

NameDescriptionTypeDefault value
$name

Key from $line-heights

String—

Requires

Used by

italic

@mixin italic() { ... }

Description

Set font-style: italic.

Parameters

None.

not-italic

@mixin not-italic() { ... }

Description

Set font-style: normal.

Parameters

None.

text-size-range

@mixin text-size-range($base, $responsive...) { ... }

Description

Responsive font-size + line-height. Base value + overrides at named breakpoints.

Parameters

NameDescriptionTypeDefault value
$base

Font size key for default

String—
$responsive

Keyword args mapping breakpoint → font size key

Arglist—

Requires

text-weight-range

@mixin text-weight-range($base, $responsive...) { ... }

Description

Responsive font-weight.

Parameters

NameDescriptionTypeDefault value
$base—String—
$responsive—Arglist—

Requires

text-leading-range

@mixin text-leading-range($base, $responsive...) { ... }

Description

Responsive line-height.

Parameters

NameDescriptionTypeDefault value
$base—String—
$responsive—Arglist—

Requires

text-tracking-range

@mixin text-tracking-range($base, $responsive...) { ... }

Description

Responsive letter-spacing.

Parameters

NameDescriptionTypeDefault value
$base—String—
$responsive—Arglist—

Requires

width

mixins

w

@mixin w($key) { ... }

Description

Set the width from the size scale, a breakpoint, or a viewport keyword.

Parameters

NameDescriptionTypeDefault value
$key

Size scale key, breakpoint name, screen, vw, svw, lvw, or dvw

Number or String—

Example

.sidebar { @include crayon.w(64); }
.sidebar
  +crayon.w(64)

min-w

@mixin min-w($key) { ... }

Description

Set the minimum width from the size scale, a breakpoint, or a viewport keyword.

Parameters

NameDescriptionTypeDefault value
$key

Size scale key, breakpoint name, screen, vw, svw, lvw, or dvw

Number or String—

max-w

@mixin max-w($key) { ... }

Description

Set the maximum width from the size scale, a breakpoint, or a viewport keyword.

Parameters

NameDescriptionTypeDefault value
$key

Size scale key, breakpoint name, screen, vw, svw, lvw, or dvw

Number or String—

w-full

@mixin w-full() { ... }

Description

Fill the available width.

Parameters

None.

w-screen

@mixin w-screen() { ... }

Description

Match the viewport width.

Parameters

None.

w-auto

@mixin w-auto() { ... }

Description

Let the browser choose the width.

Parameters

None.

w-fit

@mixin w-fit() { ... }

Description

Fit the width to its content.

Parameters

None.

w-min

@mixin w-min() { ... }

Description

Use the smallest possible content width.

Parameters

None.

w-max

@mixin w-max() { ... }

Description

Use the largest needed content width.

Parameters

None.

min-w-full

@mixin min-w-full() { ... }

Description

Fill the available minimum width.

Parameters

None.

min-w-min

@mixin min-w-min() { ... }

Description

Use the smallest possible content width as the minimum width.

Parameters

None.

min-w-max

@mixin min-w-max() { ... }

Description

Use the largest needed content width as the minimum width.

Parameters

None.

min-w-fit

@mixin min-w-fit() { ... }

Description

Fit the minimum width to its content.

Parameters

None.

max-w-full

@mixin max-w-full() { ... }

Description

Fill the available maximum width.

Parameters

None.

max-w-none

@mixin max-w-none() { ... }

Description

Remove any maximum width.

Parameters

None.

max-w-min

@mixin max-w-min() { ... }

Description

Use the smallest possible content width as the maximum width.

Parameters

None.

max-w-max

@mixin max-w-max() { ... }

Description

Use the largest needed content width as the maximum width.

Parameters

None.

max-w-fit

@mixin max-w-fit() { ... }

Description

Fit the maximum width to its content.

Parameters

None.