npm package: @justeat/f-utils
Description: Sass utility functions and mixins for the Fozzie framework
Latest version: 3.5.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# `f-utils` :bear:

[![npm version](https://badge.fury.io/js/%40justeat%2Ff-utils.svg)](https://badge.fury.io/js/%40justeat%2Ff-utils)
[![Build Status](https://travis-ci.org/justeat/f-utils.svg)](https://travis-ci.org/justeat/f-utils)

[![Dependency Status](https://gemnasium.com/badges/github.com/justeat/f-utils.svg)](https://gemnasium.com/github.com/justeat/f-utils)

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](https://www.npmjs.com/package/eyeglass).

If you are using the [fozzie gulp build tasks](https://www.npmjs.com/package/@justeat/gulp-build-fozzie), then Eyeglass is automatically setup ready to use.  If not, you can use it in one of the following ways:

- [Gulp](https://github.com/sass-eyeglass/eyeglass/blob/master/site-src/docs/integrations/gulp.md)
- [WebPack](https://github.com/sass-eyeglass/eyeglass/issues/153#issuecomment-300895607)

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

    ```bash
    yarn add @justeat/f-utils
    ```

3.  Then within your Sass files, you will need to import this module.

    ```scss
    @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:**
```scss
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:**
```scss
line-height: line-height(16px, 24px);
```


#### strip-units(*value*)

Remove the unit of a measurement.

**Usage:**
```scss
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:**
```scss
z-index: zIndex(high);
```



### mixins

#### alert-variant(*backgroundColour*, *textColour*)
Used in alert modifier classes to colorize the alert

**Usage:**
```scss
@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:**
```scss
@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:**
```scss
@include rating-fill();

//Override default values
@include rating-fill(5);
```


#### truncate(*boundary*)
Forces overly long spans of text to truncate

**Defaults:**
boundary: null

**Usage:**
```scss
@include truncate();

//Override default values
@include bordered(200px);
```


#### rem(*property*, *sizeValue*)
Convert value to REMs

**Defaults:**
sizeValue: $font-size-base

**Usage:**
```scss
@include rem(font-size, 16px);
```


#### em(*property*, *sizeValue*)
Convert value to EMs

**Defaults:**
sizeValue: $font-size-base

**Usage:**
```scss
@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:**
```scss
@include font-size(mid);
```