@omegion1npm/cum-at-quasi

1.0.0 • Public • Published

CSS calc() to pixels transform

NPM version Build Status Size contributions welcome

Tiny Javascript library to transform CSS properties with CSS calc() function values to pixels based on window and element dimensions.

Install

yarn add --save @omegion1npm/cum-at-quasi

or

npm install --save @omegion1npm/cum-at-quasi

Usage

Pixels

import { transform } from "@omegion1npm/cum-at-quasi";

transform({
  prop: "width",
  value: "calc(10px + (100px / 3.5))"
});

     

38.57142857142857

Percentages

import { transform } from "@omegion1npm/cum-at-quasi";

const parentElementDimensions = {
  width: 480,
  height: 100
};

transform({
  prop: "width",
  value: "calc(100% - 10px)",
  parent: parentElementDimensions
});

     

470

Viewport units

import { transform } from "@omegion1npm/cum-at-quasi";

const windowDimensions = {
  width: 480,
  height: 640
};

transform({
  prop: "height",
  value: "calc(50vh + 10px)",
  win: windowDimensions
});

     

330

rem unit

import { transform } from "@omegion1npm/cum-at-quasi";

transform({
  prop: "fontSize",
  value: "calc(2rem + 1px)",
});

     

33

em unit

When em units are used on font-size, the size is relative to the font-size of the parent.

When used on other properties, it’s relative to the font-size of the element itself.

https://www.digitalocean.com/community/tutorials/css-rem-vs-em-units

import { transform } from "@omegion1npm/cum-at-quasi";

transform({
  prop: "fontSize",
  value: "calc(2em + 1px)",
  parent: {
    font: {
      size: 16
    }
  }
});

     

33
import { transform } from "@omegion1npm/cum-at-quasi";

transform({
  prop: "height",
  value: "calc(10px + 2em)",
  font: {
    size: 16
  }
});

     

42

min(), max(), clamp()

import { transform } from "@omegion1npm/cum-at-quasi";

transform({
  prop: "height",
  value: "calc(min(2px, 3px) + clamp(100px, 150px, 200px) + max(1px, 2px))",
});

     

154

More examples

For more examples, please have a look at the tests.

Dependencies

Readme

Keywords

Package Sidebar

Install

npm i @omegion1npm/cum-at-quasi

Weekly Downloads

0

Version

1.0.0

License

MIT

Unpacked Size

12.5 kB

Total Files

10

Last publish

Collaborators

  • ptkhanh1994