1.4 KB

Responsive Pixels

‘Because web development shouldn’t require a calculator.’

Pixel-perfect responsive design

Responsive pixels is a Stylus library that lets you think in pixels and deploy in rems with pixel fallbacks.

Think in pixels, deploy in rems.

A responsive pixel is a pixel that is equivalent to one rem. Responsive Pixels achieves this using Stylus mixins. You can scale your whole design up or down by changing the root pixel size on supported browsers (this is exactly how modern browsers scale web sites).

Read more.


Clone this repository and import it into your Stylus sytlesheet.

For example, if your project set-up looks like this:

   |__ stylus
         |__ responsive-pixels <— This is where you checked out this project.
         |__ index.styl

Then, at the top of index.styl, do this to import the library:

@import responsive-pixels

You can now write your Stylus using only pixel values and they will be translated into the correct REM values with pixel fallbacks.

For example:

    margin 42px !important


    margin: 42px !important;
    margin: 2.625rem !important;



Run ./test

Released with by under the MIT License.