Naturally Processed Meals

    This package has been deprecated

    Author message:

    https://github.com/springernature/frontend-toolkits/blob/master/DEPRECATED.md

    @springernature/global-spacing

    0.1.0 • Public • Published

    global-spacing

    Exposes a global-spacing function that validates spacing units passed to it against a SASS list named $global-spacing.

    This global-spacing package defines $global-spacing is an empty list, so must be redefined at either the brand or product level. For example:

    $global-spacing: (
        5,
        10,
        15,
        20,
        40,
        60
    );

    The global-spacing() function takes up to 4 arguments, which represent the values you would normally pass when using shorthand spacing CSS properties.

    Example usage

    padding: global-spacing(5) outputs padding: 5px

    margin: global-spacing(5, 5, 10) outputs margin: 5px 5px 10px

    If any value passed to the global-spacing() function does not exist in the $global-spacing list, the function will return null.

    What if I need a value not defined in the list?

    $global-spacing is intended to improve consistency, not be a rigid ruleset. There are scenarios when the values in $global-spacing won't be suitable. For example, you may need to use a keyword value such as auto, inherit, unset, or you may need a specific numberic value because 'reasons'.

    In those scenarios there are two options:

    1. Use the shorthand and then overwrite the values as necessary
    margin: global-spacing(5, 5, 10);
    margin-right: auto;
    1. Use the long hand
    margin-top: global-spacing(5);
    margin-right: auto;
    margin-bottom: global-spacing(10);
    margin-left: global-spacing(5);

    Keywords

    none

    Install

    npm i @springernature/global-spacing

    DownloadsWeekly Downloads

    153

    Version

    0.1.0

    License

    MIT

    Unpacked Size

    2.45 kB

    Total Files

    5

    Last publish

    Collaborators

    • roshandeorukhkar-sn
    • benjclark
    • sonniesedge
    • rlau
    • dotcode
    • joseluisbolos
    • hollsk
    • moddular
    • jpw
    • nickcall
    • howlingmad
    • sndigital
    • davidpauljunior
    • morgaan