JSPM

scaled-vars

1.0.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 5
  • Score
    100M100P100Q33870F
  • License MIT

A Javascript library for mapping CSS custom properties from a numerical range.

Package Exports

  • scaled-vars

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (scaled-vars) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

scaled-vars

A Javascript library for mapping and applying CSS custom properties from a numerical range.

Getting Started

Installing

To install scaled-vars, run the following command in your terminal:

npm install --save scaled-vars

Sample Usage

// Import statement - ES5 Syntax.
var ScaledVars = require('scaled-vars');

// Import statement - ES6 Syntax.
import ScaledVars from 'scaled-vars';

// Initialize library with list of variable options.
var variables = new ScaledVars([
  {
    name: 'my-var',
    scale: ScaledVars.Scales
      .scaleLinear()
      .domain([0, 1000])
      .range([0, 10]),
  },
  {
    name: 'my-other-var',
    scale: ScaledVars.Scales
      .scaleLinear()
      .domain([0, 1000])
      .range([0, 10]),
    transform: (x) => (x + 2),
    unit: 'px',
    element: document.querySelector('.myclass'),
  },
]);

// Update variables and set them as CSS Custom Properties on the DOM
variables.update(300);
// 'my-var' => '3' (applied to Document's ":root" element)
// 'my-other-var' => '5px' (applied to specified element)

Scripts

Cutting a build

To cut a build, run:

npm run build

Development

To start the dev server, run:

npm run dev

Tests

To run unit tests, run:

npm test

API

Coming soon.