npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@jamilservices/sb-module-to-rem

v1.0.4

Published

Simply Builder Module - convert pixels to rem

Downloads

13

Readme

@jamilservices/sb-module-to-rem

Simply Builder Module - Convert Pixels, Points, and Ems to Rem

The toRem function is a utility for converting length units (px, em, pt) to rem units in JavaScript.
This conversion is particularly useful for responsive web design, where rem units provide scalability and flexibility. The module simplifies the process of ensuring that elements scale proportionally across different screen sizes by leveraging the rem unit, which is based on the root element's font size.

SimplyBuilder SimplyBuilder SimplyBuilder - sb-module-to-rem GitHub License

GitHub package.json dynamic GitHub Release Test with Node.js

npm - @jamilservices/sb-module-to-rem yarn - @jamilservices/sb-module-to-rem

Open in StackBlitz

Table of Contents

Features

(go to top)

  • Multiple Units: Converts px, em, and pt units to rem.
  • Customizable Precision: Allows specifying the number of decimal places in the returned value.
  • Error Handling: Returns the original value for unrecognized units and logs a warning.

Installation

(go to top)
To install the toRem function, use the following npm command:

  • from GitHub (npm/yarn):
npm install --save-dev git+https://github.com/SimplyBuilder/sb-module-to-rem.git
yarn add --dev git+https://github.com/SimplyBuilder/sb-module-to-rem.git
  • from npm (npm/yarn):
npm install --save-dev @jamilservices/sb-module-to-rem
yarn add --dev @jamilservices/sb-module-to-rem

[!NOTE] This will add the toRem module as a development dependency in your project.

  • CDN:
https://unpkg.com/@jamilservices/sb-module-to-rem@latest/src/main.js

https://cdn.jsdelivr.net/gh/SimplyBuilder/sb-module-to-rem@latest/src/main.min.js

Usage

(go to top)
Once installed, you can import the toRem function into your JavaScript project like so:

  • from install (npm/yarn):
import { toRem } from '@jamilservices/sb-module-to-rem';

  • from cdn (html):
<script type="module">
import { toRem } from 'https://unpkg.com/@jamilservices/sb-module-to-rem@latest/src/main.js';
// code
</script>

or

<script type="module">
import { toRem } from 'https://cdn.jsdelivr.net/gh/SimplyBuilder/sb-module-to-rem@latest/src/main.min.js';
// code
</script>

Now you can use the function in your project to convert length units to rem.

Basic Conversion

(go to top)
Convert a length from pixels to rem:

const lengthInRem = toRem("24px");
console.log(lengthInRem); // Output: "1.5rem"

Specifying Decimal Places

(go to top)
You can specify the number of decimal places in the returned value:

const preciseLengthInRem = toRem("18px", 2);
console.log(preciseLengthInRem); // Output: "1.12rem"

Handling Other Units

(go to top)
Convert lengths from em or pt to rem:

const lengthFromEm = toRem("2em");
console.log(lengthFromEm); // Output based on default base of 16px for 1em

const lengthFromPt = toRem("12pt");
console.log(lengthFromPt); // Output based on conversion factor from pt to px to rem

Unrecognized Units

(go to top)
For unrecognized units, the original value is returned:

const unchangedLength = toRem("5vw");
console.log(unchangedLength); // Output: "5vw"

License

(go to top)

Released under MIT by @jamilservicos. (go to top)

  • You can freely modify and reuse.
  • The original license must be included with copies of this software.
  • Please link back to this repo if you use a significant portion the source code.

👩‍💻💻 Technologies

(go to top)

JavaScript TypeScript Nodejs