Variables are a way of storing small pieces of code to reuse in your stylesheet. Changing the variable's code value will update it everywhere the variable is used.

Controls how long animations play for. Make sure that your animations aren't a trigger for seizure and photosensitive disorders, vertigo, and cognitive concerns such as ADHD. You may also want to use a prefers-reduced-motion media query for people who have expressed a desire for less animation.

Controls how animations accelerate and decelerate. The easing terms communicate how elements on the page relate to each other.

Make sure that your animations don't flash, strobe, or have too great a contrast between the static elements they are placed next to, so as to not be a trigger for conditions such as vertigo and ADHD. You may also want to use a prefers-reduced-motion media query for people who have expressed a desire for less animation.

The main focus of the animated element.

Sub-items the character may be animating.

The background which a character is placed on. Can also apply to background elements and layout.

Controls how thick borders are.

Font family variables are used to associate an imported typefaces with an abstract name. This allows us to be able to control and change typefaces quickly and easily. See font family utility classes.

Font family variables are used to control and keep a specific set of font sizes consistent. Font sizes are split into two type: body font sizes and heading font sizes.

Controls the spacing between letters, based off the set global type size.

These variables control the thickness of the characters for each typeface. It is important to make sure your font weight isn't too thin, as it may make your content too difficult to see for people experiencing low vision conditions.

Variables used to control initial, document-level settings.

Sets the outermost spacing area for content and the browser viewport.

Controls the grid template column sizes of the main content area.

Map that sets the grid column widths for posts.

Map that sets the distance of post content from the lefthand side of the viewport.

Sets the widths for sponsor ads.

Sets the maximum width for large amounts of text content.

Sets the ratio used for modular scale calculation. See functions.ms.

Sets the initial document font size in pixels. Used for things like em and rem calculation. See functions.em and functions.rem.

Controls how far apart lines of text are.

For body text, the WCAG requires a line height percentage of 150 or higher. This aids with legibility and covers a large degree of accessibility concerns, including low vision conditions, cognitive considerations such as dyslexia, and language and learning disabilities.

It is improtant to keep line heights unitless, so the ratio they describe will be maintained if a person increases the font size.

Variables used to point to different kinds of resources.

Variables used to ensure @supports declarations are standardized.

Maps are collections of related values contained in a variable.

Organizes the site breakpoints. Breakpoints are declared with pixel values to work with the Mappy Breakpoints mixin.

Breakpoint names are based on the ergonomics of how people position themselves around their devices, to help keep usability top-of-mind.

Organizes the stacking order for items assigned a z-index value. See functions.z

Functions allow you to use conditional logic for your CSS values.

Generates an em value from a pixel measurement, derived from the base type size.

Generates a size value from a modular scale. Defaults to the global type size and ratio.

Generates a rem value from a pixel measurement, derived from the base type size.

Removes the unit from a measurement, transforming it into a number.

Calls a z-index value from the z-index map. Used to create a terse, yet managed system of z-index declarations.

Mixins let you repeat groups of CSS declarations across your stylesheet. They also let you use conditional logic to adjust what is declared.

Applies a clearfix hack.

Generates color scheme CSS property values for both dark mode and light mode

$name: Color scheme string name used in a layout file $scheme-light: SCSS color scheme map for light mode $scheme-dark: SCSS color scheme map for dark mode

Generates dark mode related CSS based on the user settings, Outputs the entire content of the mixin under scopes

Controls section content headings.

Applies the third level heading style from a set of 8 heading styles. Used for h1 elements in generic page temlplates.

Applies the fourth level heading style from a set of 8 heading styles. Used for h2 elements in blog posts.

Applies the fifth level heading style from a set of 8 heading styles. Used for h3 elements in blog posts.

Applies the sixth level heading style from a set of 8 heading styles. Used for h4 elements in blog posts.

Removes content from the page using four different techniques.

Reveals hidden content using four different techniques. This mixin is useful for revealing content that has been hidden on a different breakpoint.

If you have to hide content, make sure that its message or functionality is still preserved.

The lede is the opening sentence or paragraph of a news article, summarizing the most important aspects of the story. The lede() mixin allows us to style paragraphs even if they are not the first p element present on the page.

Generates link color and hover and focus states.

Controls left and right margins for post content.

Adds images to specific section s of post content

Controls left and right margins for post content.

Ensures that VoiceOver will declare the presence of list items, even if the list bullet has been removed. Apply to the ul, ol, dl element. See u-preserve-list-semantics.

Creates a basic full-width responsive element whose aspect ratio scales proportionately. See u-responsify.

Shift interactive elements down slightly when activated to make them feel more button-like.

Generates a property + CSS custom property with a fallback for IE 11. Modified from this post: https://vgpena.github.io/winning-with-css-variables/

$property: The CSS property to modify $varName: The scoped variable name to look up