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

postcss-scale

v1.0.1

Published

Scale values from one range to another. Because why not.

Downloads

14

Readme

PostCSS plugin to scale values

In design it is often useful to relate one set of values to another. For example the viewport width to font size, or container width to line-height. We can do this using the CSS calc function, but scaling from one range of values to another is often cumbersome and error-prone to write manually. With a bit of PostCSS magic we can let the computer do this for us.

For example, let's say you want to vary the font size of your header based on the min and max width of the current breakpoint. Your break point is between 20em and 50em and you'd like to vary the header size between 2em end 4em. The following (Post)CSS will do that for you:

article h1 {
  font-size: 2em;
}

@media (min-width: 20em) {
  article h1 {
    font-size: scale(20em, 50em, 2em, 4em, 100vw);
  }
}

@media (min-width: 50em) {
  article h1 {
    font-size: 4em;    
  }
}

The scale function takes five values:

  • min base (defines the lower limit of the base range)
  • max base (defines the upper limit of the base range)
  • min target (defines the lower limit of the target range)
  • max target (defines the upper limit of the target range)
  • input (expression)
scale(minBase, maxBase, minTarget, maxTarget, expression)

The input value mapped from the base range to the target range can be any expression. Note that the output values are not clamped so they can be outside the target range (this is why we're using media queries to "clamp" the values at the lower and upper limit of the target range).

Installation

Install through npm:

npm install postcss-scale

Then include postcss-scale in your PostCSS plugins list.

Credits

Thanks to Tim Brown (@nicewebtype) for getting the discussion going on scales and CSS locks going.