dialog-size

Painless CSS sizes

Usage no npm install needed!

<script type="module">
  import dialogSize from 'https://cdn.skypack.dev/dialog-size';
</script>

README

dialog(size) GitHub version npm version travis build

dialog(size) 📖

A relative size-system that aims to ease the dialog between design and frontend by providing a system that is easily extendable and does not rely on names.

Play around with it in the demo

Installation 💾

npm:

npm install dialog-size

yarn:

yarn dialog-size

Basic usage ☝️

  1. Import dialog-size.scss

    @import 'dialog-size/dialog-size';
    

    PS: make sure to add node_modules to your import paths

  2. Define a palette of possible sizes by setting the $dialog-sizes

    $dialog-sizes:
        (0.2rem tiny) // size(-1)
        0.5rem
        (0.75rem small)
        0.8rem
        (1rem medium isBase) // size(0)
        1.2rem
        (1.5rem large)
        3.5rem
        5rem
        (10rem huge)
        20rem;  // size(1)
    
  3. Call the size() function

    body {
        padding: size(-1); // => 0.2rem
        font-size: size(0); // => 1rem
    }
    
    h1 {
        font-size: size(1); // => 20rem
        padding: size(large) 0; // => 1.5rem 0
    }
    
    p {
        padding: size(3rem); // => 3.5rem
    }
    

Usage 📝

Once $dialog-sizes is set up, the size() function can be used in three different ways

Relative system

  • size(0) will return the base size (1rem)
  • size(1) will return the largest size in your system (20rem)
  • size(-1) will return the smallest size in your system (0.2rem)
  • size(.2) will snap to the closest value in your system

Names

You can also refer to absolute points in your size system by using names

  • size(large) will return 1.5rem

Relative to Name

  • size("smaller than large") will return 1.2rem.

Value

There is also the possibility to use a size in the same unit than your system. (In this case REM)

  • size(9rem) will return 10rem since it's the closest in your system

Relative to last used

It is possible to use a direct sibling size to the one that you have used previously:

  • Assuming that the last call was: size(large) (=> 1.5rem), size(smaller) will return 1.2rem each consecutive call will go one step down until it reaches the smallest size.

Contributors 👯

License 👮🏼

Created with ♥ by meodai. Licensed under the MIT License.