This package has been deprecated

    Author message:

    Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

    @justeat/f-utils

    3.5.0 • Public • Published

    f-utils 🐻

    npm version Build Status

    Dependency Status

    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:

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

    Install

    npm i @justeat/f-utils

    DownloadsWeekly Downloads

    205

    Version

    3.5.0

    License

    Apache-2.0

    Unpacked Size

    26.6 kB

    Total Files

    25

    Last publish

    Collaborators

    • kathywklee
    • fozzie-bot
    • umar--khan
    • carlos.ortega
    • justeatui
    • gareththackeray
    • sonnyprince
    • dawidchar
    • ashleynolan
    • jonrea
    • djmelonz
    • hwallis
    • simonsje
    • kevinrodrigues
    • oleksiishevchuk
    • xander-marjoram
    • sergii.semenkiv
    • dandel10n
    • cloudcooke
    • meselgroth
    • rjimms92
    • sachazvetelman
    • tompoole
    • luke.parry
    • banksysan
    • sergej-popov
    • thomaswilliammcclean
    • jonpark
    • dsomok
    • benrwhite
    • robertellison
    • anfan
    • lauren.rodney
    • lzuk-je
    • zlatin.ivanov
    • adamashton
    • siggerzz
    • fayecarter
    • alixrichards
    • mwh1989
    • jnewc
    • ross_gratton_jet
    • joshuang2332
    • oliversweb
    • andymayje
    • lizzie.turney
    • charliearlie
    • jamieomaguire
    • anastasiya.t
    • adammorr
    • jonkers
    • juan.amor
    • dan-mcguckin
    • lsphillips