Tools

These are mixins and functions

@function px-to-rem

Convert pixels to rem. EX: px-to-rem(16px)

Parameter	Default	Description
$pixel-size	''	{String} Pixel value to convert (required)
$context	$font-root	{String} Substring to replace (defaults to $font-root)

@function str-replace

String replace for class names just like in JS. Used to rename map variables. Stolen from CSS Tricks.

Parameter	Default	Description
$string	''	{String} Initial string (required)
$search	''	{String} Substring to replace (required)
$replace	''	{String} New value

@mixin box-shadow-default

This is just a general purpose box-shadow, written out for easy reference.

@mixin font-setting

This will help us move away from silent classes for setting font-families. It still keeps our two main font-family rules in one place. p { @include font-setting('secondary') }

Parameter	Default	Description
$type	'primary'	Version of font-setting. Options: primary \| secondary

@mixin gap

This is to account for the eminent deprecation of grid-gap. Some browsers honor gap, while others are living in the past with grid-gap. This keeps us working for both names. Eventually, we can remove this mixin in favor of just using gap. The new gap naming is introduced on Chrome 68+, Safari 11.2, Firefox 61+, and Edge 16+
Example: .my-grid { @include gap($size-m) }

Parameter	Default	Description
$size	$size-b	Size of gap