Widths
aleutcss’ widths tooling allows you to generate a suite of utility classes for sizing pieces of UI responsively.
Install using npm:
$ npm install --save-dev aleut.tools.widths
Usage
Basic usage of the functions in a SCSS-file:
This will generate a series of classes in the format .u-1/3
to be used for
sizing:
/3 /3
Pass in the columns we want the widths to have, and an optional suffix for responsive widths. E.g. to create thirds and quarters for a small breakpoint:
This will yield:
/3- /3- /4- /4- /4-