‘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).
Clone this repository and import it into your Stylus sytlesheet.
For example, if your project set-up looks like this:
my-site |__ 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:
You can now write your Stylus using only pixel values and they will be translated into the correct REM values with pixel fallbacks.
body margin 42px !important
body margin: 42px !important; margin: 2.625rem !important;