utility-ratio

A small SASS ratio utility. Provides a simple ratio mixin and a configurable ratio class generator.

Installation

npm install elcontraption-utility-ratio --save-dev

Usage

As a mixin:

/**
 * Creates a width:height ratio of 5:3
 */
.notecard {
    @include ratio(5,3);
}

Create classes with the configurable class generator:

/**
 * (In your SASS manifest)
 *
 * Configure ratio classes for 5:3 and 5:4.
 */
$utility-ratio-widths: (5);
$utility-ratio-heights: (3,4);

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

You will then have access to ratio classes in your HTML:

<div class="notecard u-ratio-5to3">

    <div class="notecard-contents">
        5:3
    </div>

</div>

Notes

The first child of the container element will be absolutely positioned relative to the container (full-width, full-height).