{"id":23410840,"url":"https://github.com/adenekan41/unitcss","last_synced_at":"2025-04-12T03:23:00.937Z","repository":{"id":57386460,"uuid":"252531447","full_name":"adenekan41/unitcss","owner":"adenekan41","description":"🦊 A cli tool to convert units in your css file","archived":false,"fork":false,"pushed_at":"2024-02-03T04:15:34.000Z","size":3231,"stargazers_count":21,"open_issues_count":1,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-25T22:51:29.950Z","etag":null,"topics":["cli","css","measurements","px-to-em","px-to-rem","px-to-vh","unit"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/unitcss","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/adenekan41.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-04-02T18:11:01.000Z","updated_at":"2024-07-04T20:36:25.000Z","dependencies_parsed_at":"2022-09-05T05:00:26.533Z","dependency_job_id":null,"html_url":"https://github.com/adenekan41/unitcss","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adenekan41%2Funitcss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adenekan41%2Funitcss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adenekan41%2Funitcss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adenekan41%2Funitcss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/adenekan41","download_url":"https://codeload.github.com/adenekan41/unitcss/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248208603,"owners_count":21065203,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cli","css","measurements","px-to-em","px-to-rem","px-to-vh","unit"],"created_at":"2024-12-22T17:52:37.732Z","updated_at":"2025-04-12T03:23:00.914Z","avatar_url":"https://github.com/adenekan41.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n\t\u003ca href=\"https://i.ibb.co/mD4CQGx/Group-4.png\"\u003e\n\t\t\u003cimg src=\"https://i.ibb.co/mD4CQGx/Group-4.png\" width=\"456\" alt=\"unitcss\"\u003e\n\t\u003c/a\u003e\n\u003c/p\u003e\n\n[![NPM](https://nodei.co/npm/unitcss.png)](https://nodei.co/npm/unitcss/)\n\n## ⚡️About\n\n[Unitcss](https://github.com/adenekan41/unitcss) A cli tool to convert css units in your file **helps you swiftly convert units / mesurements in your file or folders**.\n\n**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.\n\n## 🛠 Installing [unitcss](https://github.com/adenekan41/unitcss)\n\n```bash\nnpm i -g unitcss\n```\n\n## 🚧Usage\n\n```bash\nunitcss --help\n\n   Options:\n\n    unitcss [command] \u003coptions\u003e\n    \u003cfoldername | file\u003e .............. to change unit of files in a folder or in a file its self\n    --version, -v .............. check version of unitcss\n    --perview, -p .............. preview file to make changes to, this shows you how many px, rem, em... occured in your file\n\n\n    Working with folders:\n\n    unitcss \u003cfoldername\u003e ..... to change unit of files in a folder\n\n\n    Working with files :\n\n    unitcss \u003cfile\u003e ..... to change unit of a file\n\n```\n\n#### Now you can import these functions to your projects and use them like this\n\n```js\nimport { toRem } from 'unitcss';\n```\n\nor\n\n```js\nvar toRem = require('unitcss');\n```\n\nand then we have the exported helpers and can already do this\n\n```js\ntoRem('14') or toRem(14)\n// =\u003e 0.875rem\n```\n\n## 📁 Documentation [View Here](https://urley.netlify.com)\n\n### toPx\n\n\u003e returns - String\n\n- `toPx` - Takes in (`value`, `global_size`) and Returns `String`.\n  see file\n  [here](https://github.com/adenekan41/unitcss/blob/master/src/utils/convert.js)\n\n### toRem\n\n\u003e returns - String\n\n- `toRem` - Takes in (`value`, `global_size`) and Returns `String`.\n  see file\n  [here](https://github.com/adenekan41/unitcss/blob/master/src/utils/convert.js)\n\n### toEm\n\n\u003e returns - String\n\n- `toEm` - Takes in (`value`, `global_size`) and Returns `String`.\n  see file\n  [here](https://github.com/adenekan41/unitcss/blob/master/src/utils/convert.js)\n\n### 💻 Using the commands\n\nUnitcss 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.\n\n- [Simple Explanation Of rem \u0026 em CSS Units](https://www.youtube.com/watch?v=H4UtKu11yXg) by Traversey Media\n- [Your Ultimate Guide to CSS Units – All You Need to Know](https://blog.alexdevero.com/css-units-ultimate-guide/) by Alex Devero\n- [EM, PX, PT, CM, IN…](https://www.w3.org/Style/Examples/007/units.en.html) by w3.org community\n\n```bash\nunitcss assets/css\n\n? What do you want to convert ? (Use arrow keys)\n❯ Convert from px to rem\n  Convert from rem to px\n  Convert from px to em\n  Convert from em to px\n\n? What is your root size ? (please this value must be in px) (16px)\n\n================================\n\n[||||||-------------] 34%\n[|||||||||||||------] 67%\n[|||||||||||||||||||] 100%\n\nUNIT CSS REPORT:\n\nUnitcss is done and we found 88 matches and replaced  88\n File we helped you convert: src/commands/style.css\n\n\n```\n\n😀 You see its that simple\n\n### Other Interesting Resources\n\n- [Most Common CSS Units Of Measure Explained](https://dev.to/flippedcoding/most-common-css-units-of-measure-explained-2kee) by Milecia McG\n- [Understanding and Using rem Units in CSS](https://www.sitepoint.com/understanding-and-using-rem-units-in-css/) by Adrian Sandu\n- [CSS Units (CSS Lengths: rems, ems, pixels, percents, and more)](https://www.youtube.com/watch?v=qrduUUdxBSY) by Devtips\n\n\u003e MIT © [codewonders.dev](https://codewonders.dev) \u0026nbsp;\u0026middot;\u0026nbsp; GitHub\n\u003e [@adenekan41](https://github.com/adenekan41) \u003e\n\u003e \u0026nbsp;\u0026middot;\u0026nbsp;\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadenekan41%2Funitcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadenekan41%2Funitcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadenekan41%2Funitcss/lists"}