utility-size

A small scss size utility to set proportional widths of elements. Provides a simple size mixin and a configurable class generator.

Inspired by SUIT CSS.

Installation

Install via NPM:

npm install elcontraption-utility-size

And import in your style manifest:

@import 'elcontraption-utility-size/size';

Using the mixin

The mixin may be used to declare the proportional width of an element within your stylesheet. In this example, .egg will be 1/12th the width of .carton.

.carton {
    width: 100%;
}

.egg {
    @include size(1,12); // will give: width: 8.3333% !important;
}

Using the class generator

The class generator will set up a set of proportional width classes that you may use in your HTML.

Anywhere above the import statement, set up the two configuration variables:

/**
 * Generate classes for a 12 column grid.
 *
 * Pattern: .u-size-XofY
 */
$utility-size-x-values: (1,2,3,4,5,6,7,8,9,10,11,12);
$utility-size-y-values: (12);

@import 'elcontraption-utility-size/size';

You will then be able to use these classes in your HTML:

<div class="carton">
    <div class="egg u-size-1of12">
        //...
    </div>
</div>