JustMix

Mix and interpolate colors, css units, and more!

Features

• Simple CSS value parsing and interpolation
• Interpolates angles, colors, lengths, percentages, etc.

Why use JustMix?

• Small download size with no dependencies (current minified size is 7KB)
• Optimized for tree-shaking (bundle only what you use)
• Constantly optimized for best performance

Power this project up with 🌟s, ^ star it please.

Setup

Setup for use in the browser

Include this script

<script src="https://unpkg.com/just-mix/dist/just-mix.min.js"></script>

Setup for bundling (or if you want typings for TypeScript)

npm install just-mix --save

Getting Started

Each CSS type in JustMix accepts two or more values and returns a function that can be called to get the value at each offset. The offset is a number between 0 and 1 representing 0% to 100%.

var tween = just.mix.lengths('0px', '10px');
var onePixel = tween(.1);
var twoPixels = tween(.2);
var tenPixels = tween(1);

In this example, 1px is .1 or 10% of the way between 0px and 10px.

API

Using JustMix is easy to use. Each css type has a simple function that two or more parameters. This returns a function that accepts a number between 0 and 1.

angles ()

Demo on CodePen

Browser

const ninety = just.mix.angles('0', '180deg')(.5);
const oneEighty = just.mix.angles('0', '1turn')(.5);
const twoSeventy = just.mix.angles('180deg', '6.2832rad')(.5);
const zero = just.mix.angles('300grad', '.25turn')(.5);

Bundled

import { angles } from 'just-mix';

const ninety = angles('0', '180deg')(.5);
const oneEighty = angles('0', '1turn')(.5);
const twoSeventy = angles('180deg', '6.2832rad')(.5);
const zero = angles('300grad', '.25turn')(.5);

colors ()

Demo on CodePen

Browser

const purple1 = just.mix.colors('red', 'blue')(.5);
const purple2 = just.mix.colors('#ff0000', 'blue')(.5);
const purple3 = just.mix.colors('rgb(255, 0, 0)', 'blue')(.5);
const purple4 = just.mix.colors('hsla(0, 100%, 50%, 1)', 'blue')(.5);

Bundled

import { color } from 'just-mix';

const purple1 = colors('red', 'blue')(.5);
const purple2 = colors('#ff0000', 'blue')(.5);
const purple3 = colors('rgb(255, 0, 0)', 'blue')(.5);
const purple4 = colors('hsla(0, 100%, 50%, 1)', 'blue')(.5);

lengths ()

Browser

const fivePixels = just.mix.lengths('0px', '10px')(.5);
const fiveEms = just.mix.lengths('0em', '10em')(.5);
const fiveRems = just.mix.lengths('0rem', '10rem', .5);

Bundled

import { lengths } from 'just-mix';

const fivePixels = lengths('0px', '10px')(.5);
const fiveEms = lengths('0em', '10em')(.5);
const fiveRems = lengths('0rem', '10rem')(.5);

numbers ()

Browser

const fiveA = just.mix.numbers('0', '10')(.5);
const fiveB = just.mix.numbers(0, 10)(.5);

Bundled

import { numbers } from 'just-mix';

const fiveA = numbers('0', '10')(.5);
const fiveB = numbers(0, 10)(.5);

percents ()

Browser

const fivePercent = just.mix.percents('0%', '10%')(.5);

Bundled

import { percents } from 'just-mix';

const fivePercent = percents('0%', '10%')(.5);

What's next?

Next up is adding support for transforms. Stay tuned!

Contributions

Contributions and issues are very welcome :) Make sure to put in an issue with your intent before doing a Pull Request.