elcontraption-utility-ratio
A small scss ratio utility.
Last updated 5 years ago by elcontraption .
Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install elcontraption-utility-ratio 
SYNC missed versions from official npm registry.

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).

Current Tags

  • 0.1.7                                ...           latest (5 years ago)

8 Versions

  • 0.1.7                                ...           5 years ago
  • 0.1.6                                ...           5 years ago
  • 0.1.5                                ...           5 years ago
  • 0.1.4                                ...           5 years ago
  • 0.1.3                                ...           5 years ago
  • 0.1.2                                ...           5 years ago
  • 0.1.1                                ...           5 years ago
  • 0.1.0                                ...           5 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (0)
None
Dev Dependencies (7)
Dependents (1)

Copyright 2014 - 2016 © taobao.org |