@justeat/f-utils

f-utils :bear:

Sass utility functions and mixins for the Fozzie framework

---

Usage

1. 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:

• Gulp
• WebPack

1. Install the f-utils module using NPM or Yarn:

   yarn add @justeat/f-utils
   

2. 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);