Ind.ie is now Small Technology Foundation.
Commit 10ba0ab8 authored by Aral Balkan's avatar Aral Balkan

Update the readme and test script.

parent 428489f0
......@@ -8,20 +8,48 @@ Responsive pixels is a [Stylus](https://learnboost.github.io/stylus/) library th
## Think in pixels, deploy in rems.
Pixels are easy to understand, use, and visualise. But they’re not very responsive.
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).
Ems solve those problems but they are difficult to visualise and cumbersome to use without a calculator.
[Read more](http://aralbalkan.com/notes/responsive-pixels/).
Rems are easier to use than ems and, since — like ems — they’re relative units, they are useful in responsive design.
## Usage
Rems still involve maths, however, and are hard to visualise like ems.
Clone this repository and import it into your Stylus sytlesheet.
Responsive Pixels gives you all the advantages of using pixels combined with all the advantages of using rems.
For example, if your project set-up looks like this:
A responsive pixel is a pixel that is equivalent to one rem.
```
my-site
|__ stylus
|__ responsive-pixels <— This is where you checked out this project.
|__ index.styl
```
So you get a relative unit that is also easy to visualise.
Then, at the top of *index.styl*, do this to import the library:
[Read more](http://aralbalkan.com/notes/responsive-pixels/).
```
@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:
```styl
body
margin 42px !important
```
Becomes:
```css
body
margin: 42px !important;
margin: 2.625rem !important;
```
Enjoy!
## Tests
Run `./test`
**Released with ♥ by [Ind.ie](https://ind.ie) under the MIT License.**
\ No newline at end of file
echo "Compiling Responsive Pixels and tests stylus."
./node_modules/stylus/bin/stylus -l < index.styl > css/index.css
./node_modules/stylus/bin/stylus -l < tests.styl > css/tests.css
echo "Launching in-browser rendering tests."
open tests.html
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment