f-utils
🐻
Sass utility functions and mixins for the Fozzie framework
Usage
- The easiest way to use fozzie modules in your Sass setup is to use Eyeglass.
If you are using the fozzie gulp build tasks, then Eyeglass is automatically setup ready to use. If not, you can use it in one of the following ways:
-
Install the f-utils module using NPM or Yarn:
yarn add @justeat/f-utils
-
Then within your Sass files, you will need to import this module.
@import 'f-utils';
You can then use the f-utils
module and the mixins and functions that come along with that.
List of utils
functions
spacing(key)
Allows developers to specify the amount of spacing they require via a shortcut function.
Accesses the spacing map definition in the fozzie variables file.
Defaults: key: 'base'
Usage:
margin: spacing(d);
line-height(fontSize, lineHeight, scale)
Given a font-size and a line-height (in pixels) returns a unitless line-height value.
Defaults: fontSize: 'body-s' lineHeight: '20' scale: 'default'
Usage:
line-height: line-height(16px, 24px);
strip-units(value)
Remove the unit of a measurement.
Usage:
strip-units(400px) > 400
map-to-em(breakpointMap, baseFontSize)
Convert a map of breakpoints to ems
Defaults: baseFontSize: $font-size-base
Usage:
$breakpoints: map-to-em((
narrow : 400px,
mid : 750px,
wide : 1000px,
huge : 1250px
), 16);
decimal-round()
Docs to come…
em-to-px()
Docs to come…
map-to-px()
Docs to come…
zIndex(key)
Allows developers to specify the amount of zIndex they require via a shortcut function.
Accesses the spacing map definition in the fozzie variables file.
Defaults: key: 'lowest'
Usage:
z-index: zIndex(high);
mixins
alert-variant(backgroundColour, textColour)
Used in alert modifier classes to colorize the alert
Usage:
@include alert-variant(orange, black);
bordered(borderRadius, padding, borderColour)
Used in bordered utility class to add padding, border and border radius to element
Defaults: borderRadius: $border-radius padding: spacing(e) borderColour: $color-border
Usage:
@include bordered();
//Override default values
@include bordered(10px, 30px, green);
rating-fill(maxStars)
Used in rating modifier to fill the star ratings
Defaults: maxStars: 6
Usage:
@include rating-fill();
//Override default values
@include rating-fill(5);
truncate(boundary)
Forces overly long spans of text to truncate
Defaults: boundary: null
Usage:
@include truncate();
//Override default values
@include bordered(200px);
rem(property, sizeValue)
Convert value to REMs
Defaults: sizeValue: $font-size-base
Usage:
@include rem(font-size, 16px);
em(property, sizeValue)
Convert value to EMs
Defaults: sizeValue: $font-size-base
Usage:
@include em(font-size, 16px);
font-size(key, lineHeight, scale, relativeToParent)
font-size helper.
Allows direct use of font-size map keys rather than specific values and converts px
definitions to REM with respect to the base font-size.
Defaults: key: 'base' lineHeight: true scale: 'default' relativeToParent: false
Usage:
@include font-size(mid);