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

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>

Current Tags

  • 0.1.9                                ...           latest (5 years ago)

8 Versions

  • 0.1.9                                ...           5 years ago
  • 0.1.8                                ...           5 years ago
  • 0.1.7                                ...           5 years ago
  • 0.1.5                                ...           5 years ago
  • 0.1.4                                ...           5 years ago
  • 0.1.3                                ...           5 years ago
  • 0.1.2                                ...           6 years ago
  • 0.1.1                                ...           6 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 (6)

Copyright 2014 - 2016 © taobao.org |