Name Last Update
css Loading commit data...
images Loading commit data...
.gitignore Loading commit data...
dom-style-test-runner.coffee Loading commit data...
dom-style-test-runner.js Loading commit data...
index.styl Loading commit data...
package.json Loading commit data...
readme.md Loading commit data...
test Loading commit data...
tests.html Loading commit data...
tests.styl Loading commit data...

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.

Usage

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:

@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:

body
    margin 42px !important

Becomes:

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

Enjoy!

Tests

Run ./test

Released with by Ind.ie under the MIT License.