readme.md 1.4 KB
Newer Older
1
![Responsive Pixels](https://ind.ie/assets/images/responsive-pixels.svg)
Oskar Kalbag's avatar
Oskar Kalbag committed
2

3
‘Because web development shouldn’t require a calculator.’
Oskar Kalbag's avatar
Oskar Kalbag committed
4

Aral Balkan's avatar
Aral Balkan committed
5
# Pixel-perfect responsive design
6

Aral Balkan's avatar
Aral Balkan committed
7
Responsive pixels is a [Stylus](https://learnboost.github.io/stylus/) library that lets you think in pixels and deploy in rems with pixel fallbacks.
Aral Balkan's avatar
Aral Balkan committed
8 9 10

## Think in pixels, deploy in rems.

11
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).
Aral Balkan's avatar
Aral Balkan committed
12

13
[Read more](http://aralbalkan.com/notes/responsive-pixels/).
Aral Balkan's avatar
Aral Balkan committed
14

15
## Usage
Aral Balkan's avatar
Aral Balkan committed
16

17
Clone this repository and import it into your Stylus sytlesheet.
Aral Balkan's avatar
Aral Balkan committed
18

19
For example, if your project set-up looks like this:
Aral Balkan's avatar
Aral Balkan committed
20

21 22 23 24 25 26
```
my-site
   |__ stylus
         |__ responsive-pixels <— This is where you checked out this project.
         |__ index.styl
```
Aral Balkan's avatar
Aral Balkan committed
27

28
Then, at the top of *index.styl*, do this to import the library:
Aral Balkan's avatar
Aral Balkan committed
29

30 31 32 33
```
@import responsive-pixels
```

Aral Balkan's avatar
Aral Balkan committed
34 35 36
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:
37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55

```styl
body
	margin 42px !important
```

Becomes:

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

Enjoy!

## Tests

Run `./test`
Aral Balkan's avatar
Aral Balkan committed
56

57
**Released with ♥ by [Ind.ie](https://ind.ie) under the MIT License.**