npm

Need private packages and team management tools?Check out npm Orgs. »

This package has been deprecated

Author message:

Please use @scalescss/utilities-size instead

scales-overrides-size

1.1.0 • Public • Published

Size Overrides for Scales

A set of classes for changing the width of an element.

Requirements

Scales patterns use the Sass CSS preprocessor, you'll need either Ruby Sass or LibSass.

Installation

  • NPM: npm install --save scales-overrides-size
  • Bower: bower install --save scales-overrides-size

Usage

By default there is a class for every 5% step from 5 to 100 in the format .size-[percent]. Simply put a class in your HTML and the width will change by that percentage.

<p class="size-50">This changes the width of the element to 50%</p>

Available Classes

  • .size-5
  • .size-10
  • .size-15
  • .size-20
  • .size-25
  • .size-30
  • .size-35
  • .size-40
  • .size-45
  • .size-50
  • .size-55
  • .size-60
  • .size-65
  • .size-70
  • .size-75
  • .size-80
  • .size-85
  • .size-90
  • .size-95
  • .size-100

Available variables

  • $size-range-start
    • Value of the first class
    • Default: 5
  • $size-range-end
    • Value of the last class
    • Default: 100
  • $size-step-value
    • Increment between values
    • Default: 5

The Scales Namespace Variable

All Scales patterns expose the $scales-namespace variable.

$scales-namespace accepts a string that will prefix all Scales classes. The default value is null.

To give all Scales classes a namespace, you will need to set this variable in a file that is imported before any scales files. For example:

@import your-project/settings; // $scales-namespace is set in this file
@import your-project/scales; // Imports the Scales library
@import your-project/project // The rest of your project imports

Keywords

none

install

npm i scales-overrides-size

Downloadsweekly downloads

64

version

1.1.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability