Determines whether rems() conversion includes a pixel-value fallback for older browsers like IE8.

Font size all other values will use for calculation. Will be converted to rems.

Line-height for base font-size. Essentially determines the baseline grid for alignment.

A rough estimate of how loose line-heights should be calculated against their font-sizes (when automatically generated).

Reference for the project's main font-stack.

Reference for the project's monospaced font-stack.

Description of weights, styles and formats for the project's web fonts. The root key value determines the name, while each inner key determines the weights, styles, and formats.

Relative path to fonts from CSS file

The base vertical unit. Used in type-space and grid functions.

The base horizontal unit. Used in type-space and grid functions.

Automatically scale type values?

Modular scale ratio

Utility spacing class configuration.

A description of class names and their associated display value. Used for generating utility classes via display-classes mixin.

Whether to show console outputs of line-heights that are automatically calculated.

Stores all auto-generated silent classes into a map that is then output as a comment at the end of the final css. Useful for getting an overview of values that are stored by the framework.

Breakpoint strings to use with media-query mixin.

Total columns to base your grid on.

Space between grid items.

Use BEM-style naming for grid classes?

Generate silent classes for the grid?

Use a flex-based grid?

Use an inline-block-based grid? Can be used in conjunction with flex as a fallback.

Use a float-based grid?

With inline-block-based grids, we need to "fix" the space between items with a negative letter-spacing value. This value might change based on your project's base font.

Include push grid classes?

Include pull grid classes?

String to include before grid width classes.

List of media-queries (as defined in $breakpoints) that should have width utility classes.

List of media-queries (as defined in $breakpoints) that should have grid-push utility classes.

List of media-queries (as defined in $breakpoints) that should have grid-pull utility classes.

Index of all colors used in the project. This is the one place colors should be used from. Accessing them should be done via the colors function. Note: 'type', 'links', and 'bg' must be defined.

Font-stack for using the user's operating system's native font.

Abstraction of the base spacing unit used in any mixin or function that defines spacing units.

Ratio used to calculate the difference between font sizes and spacing units.

H1 font-size

H1 line-height

H2 font-size

H2 line-height

H3 font-size

h3 line-height

H4 font-size

h4 line-height

H5 font-size

h5 line-height

h6 line-height

paragraph font-size

paragraph line-height

small font-size

small line-height

Quickly generate a font-size in rems (with a pixel fallback if $rem-px-fallback = true). Optionally calculates baseline-aligned line-height a using $base-line-height and the baseline-calc function.

Output rem values using the typographic grid. This is the prefered method of adding padding and margins because it enforces consistent spacing around all elements.

A wrapper function for @font-face(). Takes a configuration map and passes the keys to @font-face(). Loops through each font-name's (root map keys) weight and style.

Font file names must be the same as their CSS font-family values. Example: arial font, 400 weight would be arial-400.ttf and the CSS value would be font-family: 'arial'; font-weight: 400.

Takes a pixel value and creates a property with a rem value. If $rem-px-fallback is true, a pixel fallback is also included.

The responsive component to _output-spacing-classes. Invokes spacing-utilites that loops through a set of media-queries defined in $breakpoints. This is most useful for creating responsive spacing classes.

Takes a map of class names and style properties and outputs utility (override) classes over a specified number of breakpoints. Useful for creating a number of single-use classes over multiple breakpoints. Always makes property declarations !important.

The responsive component to _output-display-classes. Invokes _output-display-classes while looping through a set of media-queries defined in $breakpoints. This is most useful for creating responsive display classes.

Enclose a block of code with a media query as named in $breakpoints. To create more consolodated code, most (if not all) media queries should be called through this mixin. Multiple media-queries can be defined, separated by a comma. This will place your content into multiple separate media-queries at once (useful if you need the same css at different breakpoints). Alternative Uses:

• Passing multiple media queries separated by an 'and' (quoted) to combine them, compiles to something like @media screen and (min-width: 500px) and (max-width: 900px){}.
• Passing a value like min-width 1200px or max-height 300px allows for arbitrary breakpoints.
• Passing max 1200px 'and' smalls will create a combined media-query with a predefined one from $$breakpoints.
• Passing height smalls will replace width with height within the smalls breakpoint. Similarly, using min smalls would replace 'max' with 'min'.

Important: This must be called in order to use any of the tools. Pulls together config variables and routes them into structures expected by the framework, then makes them global. For instance, the $type-h1-size variable is accepted as a list, but will be available as a single size, while making $type-h1-lh available.

Generates CSS for interpolated length properties. In other words, it will generate multiple values for a property over multiple media-queries.

It has 5 required parameters, including the target property, initial screen size, initial value, final screen size and final value.

It has two optional parameters which include an easing property, which is a string representation of a CSS animation-timing-function, and finally a number of bending-points that determines how many interpolations steps are applied along the easing function.

TL;DR: Automatically calculate the baseline of any particular font-size.

Creates unitless line-heights that align to the baseline grid with consideration to the aesthetics of a given font size. Essentially makes sure larger font-sizes have smaller line-heights, while smaller font-sizes have larger ones. Uses constraints based on upper and lower limits of pleasing line-heights, and finds where a given font-size should sit within those constraints. $baseline-slack increases the upper constraints, allowing for taller line-heights on larger font sizes.

The rate of change from large to small line-height is mostly a logarithmic curve.

Depends on baseline() for calculation and _baseline-curve() to determine the deviance from the upper and lower constraints.

A functional version of the type-space mixin.

Calculates rem values. Used by px-to-rems mixin. The $base-size is used to calculate the value (e.g. if the body's font-size is 16px, then the rem value of 24px would be 1.5rem).

Function for calculating em values. The $context is used to calculate the final value. Different from px-to-rems() by generating a value with an em. $context is often necessary based on the situation.

Interpolates lists of strings to generate dynamic class names. Using a specific format (see below) and a set of placeholders provided by functions, a class name can be generated in a more flexible fashion. Will also filter out optional strings if they appear at the beginning or end of a string (such as values between two placeholders). Using lists allows for better caching and creates inherent dependencies between optional characters and their placeholders. For instance, '{%var%}{_}' implies that the _ is dependent on {%var%} (if {%var%} is evaluated to be blank, then _ is also blank).

Format Syntax

• {%key%} - Variable: Expects to be replaced by a value provided by a map.
• {_} - Placeholder: Optional spacing value. Will be filtered out if not surrounded by non-blank characters.

Get a color value from the global $base-colors map. Darker and lighter tones are available by passing a second string.

Takes a string representation of an cubic-bezier easing, and returns its 4-digit list value.

Takes a string representation of an cubic-bezier easing, and returns the corresponding cubic-bezier statement.

Creates a percentage based on the $size / $context while allowing for a contextual calculations (($total/$context) * ($columns/$total)).

For instance, if you have a grid of 12 columns and you've created an item that is 7 columns wide, its children would then be in a 7/12 context. In order to maintain the grid and calculate the width of a child that spans 4 columns, it would have to be 1 quarter of 7/12.

Creates a width property with a percentage based on the $columns / $total. Also includes flex-based properties if $grid-flex is enabled.

Uses $_human-readable-numerators and $_human-readable-denominators to create percentages based on $grid-columns. $property accepts any property, as well as lists of properties.

Generates basic grid classes based on passed in options.

Creates a grid container (row) based on your grid configuration.

Creates a grid item (column) based on your grid configuration set to a width based on the $columns passed in.

Creates responsive grid classes by running through all the grid-setup mixins. Uses the media-queries defined in the $breakpoint-has- variables to create media-query-scoped classes.

Creates responsive width classes (using width-setup mixin). Loops across all breakpoints in $breakpoint-has-widths. Creates classes with width property values (flex-basis and max-width for flex-based grids) based on the grid.

Creates responsive grid-push classes. Loops across all breakpoints in breakpoints in $breakpoint-has-push. Creates classes with left property values based on the grid.

Creates responsive grid-pull classes. Loops across all breakpoints in $breakpoint-has-pull. Creates classes with right property values based on the grid.

A robust exponent multiplication which allows for decimal-based exponents. This fully replaces Compass' pow() function (allows for float-based exponents).

Returns the natural logarithm of a number.

A good aproximation for $x close to 1

Returns a two-element list containing the normalized fraction and exponent of number.

Returns $x * 2^$exp

Returns the factorial of a non-negative integer.

Greatest Common Divisor calculation (useful for calculating grids and widths).

Find the square root of a value.

Determines the Sine of an angle. Reference

Use linear interpolation to produce a calc value for a particular screen size.

This is a crude Sass port webkits cubic-bezier-webkits function. Will return a "solved" cubic-bezier function for any given $x.

Solves a bezier's $x for a given cubic-bezier set.

Linear interpolation

Get the golden ratio from $base.

Formatting for utility display classes.

Second words used to represent numbers in a fraction; Corresponds to grid interval names (whole, half, third, etc.).

First words used to represent numbers in a fraction; Corresponds to grid interval names (one, two, three, etc.).

Holds all cached function calls and their results.

Used for defining automatic headings functions.

Silent class registry. Holds all auto-generated silent classes for debugging.

All breakpoint names

Grabs the first $_all-breakpoints name, allowing for abstraction.

Grabs the last $_all-breakpoints name, allowing for abstraction.

H6 font-size

Style any number of headings all at once.

Formats fonts taken from $web-fonts and creates their equivilent weight (with correct font-style) output.

Generates cross-browser font-face declarations when called. $name is required, arbitrary, and what you will use in font stacks.

Used exclusively by create-overrides to iterate through a map of classes, properties, and values to create responsive classes.

Generates classes with display properties defined in $class-list. Intelligently extends duplicated display properties.

Outputs all known auto-generated silent classes as a JSON-style list.

Add clearfix to a class

Pulls typography variables apart and puts them into easier to use pieces. For instance $type-h1-size starts as a list and becomes a single value, while adding $type-h1-lh (line-height) to the global scope for use.

Allows creating many border properties at once. Works like the standard border shorthand style but allows varied styles on different border directions.

Specificity increaser. Useful for increasing specificity of a selector instead of using !important.

Cross-browser (including IE8-) opacity.

Turn off the bullet for an element of a list

Turns off the bullets for an entire list

Aligns a font-size to a baseline ($baseline). Returns a unitless value relative to the font-size (equivilent to ems). An optional multiple can be used to make a variation on the given baseline (using decimals will divide the the baseline).

Calculates a where a number($x) sits along a parabolic arc (curve). Change the curve's severity by changing its $accel. An $accel of 1 is a smooth arc. Uses this formula: y = (sqrt((x^1)+x) - sqrt(x^1)) / .4142135623730951 ( Visual )

Checks if a type-size is declared as larger than 1, then either extracts the second value or calculates a line-height.

Generates a pixel value that is an exponent of a ratio ($ratio defaults to $scale-ratio value)

Convert list ratios into single values, allowing for larger values first and then normalizing those by reversing the division logic. Always returns a value with a decimal (float).

A good approximation for $x close to 0. Used with pow.

splits a String into a list of strings by separating the string into substrings, using a specified separator string to determine where to make each split.

Split a string into a list of strings

Checks if a value is blank, used specifically for list-filter

Find the relative luminance of a color. Used by color-contrast(). Adapted from color.js

Find contrast between two colors. Adapted from color.js

Takes base color values and generates a full color palette. Used by the $$base-colors map to create a project's palette, accessible via colors().

Arguments:

• $map: Color map you want to create variations of. Defaults to $$base-colors.
• $functions: color functions used to generate variations (e.g. lighten or darken). Can use any blend function, provided $blending-colors are provided.
• $increments: percentage amount to apply $function to each $variations.
• $variations: actual names for each color tone when colors() used.
• $blending-colors: used when a function is a blend. Can be a list or a single color.

Combines two color maps (or really any double-nested map)

Makes sure color map contains the necessary depth to be used by colors function

Generates responsive spacing and padding classes.

Changes percent value to decimal.

Converts pixel dimensions to viewport width (vw) dimensions.

Wrapper for Sass' internal get-function that allows for compatibility across Sass versions. If version is higher than 3.5, then the function is returned, otherwise, just the name.

Wrapper for Sass' internal call that allows for compatibility across Sass versions. If version is higher than 3.5, then the function is returned, otherwise, just the name.

Memoize (cache) a function's return values and arguments. Speeds up processing on intensive functions that get called many times (with the same arguments). NOTE: This can actually increase processing time if used too often or on simple functions as the lookup process isn't free. Every cached value is unique.

Remove lengths (px, em, rem, etc.) from a value. Usually a variable. This is sometimes required because Sass cannot calculate incompatible units (px * rem for instance).

Converts a list to a string with an optional separator.

Casts a string into a number.

Add $unit to $value

Convert a value to a list. $keep accepts 'keys', 'values', or 'both' for map conversion.

Generic contains function(similar to javascript's indexOf). Parses a variable($data) for a $value. Returns boolean. Delegates methods to the appropriate function based on variable type.