unitcss

⚡️About

Unitcss A cli tool to convert css units in your file helps you swiftly convert units / mesurements in your file or folders.

Using unitcss on files provides an easy way of changing mesurement from px to rem or rem to px or even px to em with only a few commands in your terminal.

🛠 Installing unitcss

npm i -g unitcss

🚧Usage

unitcss --help

   Options:

    unitcss [command] <options>
    <foldername | file> .............. to change unit of files in a folder or in a file its self
    --version, -v .............. check version of unitcss
    --perview, -p .............. preview file to make changes to, this shows you how many px, rem, em... occured in your file


    Working with folders:

    unitcss <foldername> ..... to change unit of files in a folder


    Working with files :

    unitcss <file> ..... to change unit of a file

Now you can import these functions to your projects and use them like this

import { toRem } from 'unitcss';

or

var toRem = require('unitcss');

and then we have the exported helpers and can already do this

toRem('14') or toRem(14)
// => 0.875rem

📁 Documentation View Here

toPx

returns - String

• toPx - Takes in (value, global_size) and Returns String. see file here

toRem

returns - String

• toRem - Takes in (value, global_size) and Returns String. see file here

toEm

returns - String

• toEm - Takes in (value, global_size) and Returns String. see file here

💻 Using the commands

Unitcss allows you to utilize the best of css unit mesurements, here are some examples and a few articles to guide you on the best way to use the measurements, where and when to use them.

• Simple Explanation Of rem & em CSS Units by Traversey Media
• Your Ultimate Guide to CSS Units – All You Need to Know by Alex Devero
• EM, PX, PT, CM, IN… by w3.org community

unitcss assets/css

? What do you want to convert ? (Use arrow keys)
❯ Convert from px to rem
  Convert from rem to px
  Convert from px to em
  Convert from em to px

? What is your root size ? (please this value must be in px) (16px)

================================

[||||||-------------] 34%
[|||||||||||||------] 67%
[|||||||||||||||||||] 100%

UNIT CSS REPORT:

Unitcss is done and we found 88 matches and replaced  88
 File we helped you convert: src/commands/style.css

😀 You see its that simple

Other Interesting Resources

• Most Common CSS Units Of Measure Explained by Milecia McG
• Understanding and Using rem Units in CSS by Adrian Sandu
• CSS Units (CSS Lengths: rems, ems, pixels, percents, and more) by Devtips

MIT © codewonders.dev  ·  GitHub @adenekan41 >  ·