ferris-ds 🎡

Design system for WBEZ.org

Version: 6.0.2

GitHub data updated: Jan 29, 2020


These are mixins and functions

Tools > @function px-to-rem

@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)
Tools > @function str-replace

@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
Tools > @mixin box-shadow-default

@mixin box-shadow-default

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

Tools > @mixin font-setting

@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
Tools > @mixin gap

@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