https://github.com/kristerkari/css-viewport-units-transform

Transform CSS viewport units of a Javascript style object to pixels based on window dimensions
https://github.com/kristerkari/css-viewport-units-transform

css css-in-js vh viewport-units vmax vmin vw

Last synced: about 1 year ago
JSON representation

Transform CSS viewport units of a Javascript style object to pixels based on window dimensions

• Host: GitHub
• URL: https://github.com/kristerkari/css-viewport-units-transform
• Owner: kristerkari
• License: mit
• Created: 2018-05-31T21:45:11.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2024-10-28T17:52:38.000Z (over 1 year ago)
• Last Synced: 2025-03-19T09:14:03.738Z (about 1 year ago)
• Topics: css, css-in-js, vh, viewport-units, vmax, vmin, vw
• Language: JavaScript
• Homepage:
• Size: 748 KB
• Stars: 5
• Watchers: 2
• Forks: 3
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# css-viewport-units-transform

[![Build Status](https://github.com/kristerkari/css-viewport-units-transform/workflows/Tests/badge.svg)](https://github.com/kristerkari/css-viewport-units-transform/actions?workflow=Tests)

[![Coverage Status](https://coveralls.io/repos/github/kristerkari/css-viewport-units-transform/badge.svg?branch=master)](https://coveralls.io/github/kristerkari/css-viewport-units-transform?branch=master)

![Size](https://img.shields.io/bundlephobia/minzip/css-viewport-units-transform.svg)

[![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github)

Transform CSS viewport units of a Javascript style object to pixels based on window dimensions.

Supports `vw`, `vh`, `vmin` and `vmax` units.

```js

import { transform } from "css-viewport-units-transform";

// or const transform = require("css-viewport-units-transform").transform;

transform(

  {

    fontSize: "10vw"

  },

  {

    width: 480,

    height: 100

  }

);

```

↓ ↓ ↓ ↓ ↓ ↓

```js

{

  fontSize: 48;

}

```

or

```js

transform(

  {

    myClass: {

      fontSize: "10vh"

    }

  },

  {

    width: 480,

    height: 100

  }

);

```

↓ ↓ ↓ ↓ ↓ ↓

```js

{

  myClass: {

    fontSize: 10,

  }

}

```

## Dependencies

- None