diff --git a/README.md b/README.md index 9d02674..985bcff 100644 --- a/README.md +++ b/README.md @@ -12,23 +12,33 @@ See also: https://github.com/pierreburel/sass-em ## Install -Download [`_rem.scss`](https://raw.githubusercontent.com/pierreburel/sass-rem/master/_rem.scss) or install with [Bower](http://bower.io/): +Download [`_rem.scss`](https://raw.githubusercontent.com/pierreburel/sass-rem/master/_rem.scss) or install with [Bower](http://bower.io/) or [npm](https://www.npmjs.com/): + +### Bower ``` bower install sass-rem ``` +### npm + +``` +npm install sass-rem +``` + --- ## Usage -Import `_rem.scss`, set the html font-size to 62.5% (depending of `$rem-baseline`) and use the `rem` mixin or function : +Import `_rem.scss`, set the root font-size with `rem-baseline` mixin and use the `rem` mixin or function. + +### SCSS ```scss @import "rem"; html { - font-size: 62.5%; + @include rem-baseline; } h1 { @@ -44,7 +54,7 @@ h1 { } ``` -That will output : +### CSS ```css html { @@ -66,7 +76,11 @@ h1 { } ``` -You can disable pixel fallback by setting `$rem-fallback` to `false` : +--- + +You can disable pixel fallback by setting `$rem-fallback` to `false`. + +### CSS ```css h1 { @@ -79,7 +93,11 @@ h1 { } ``` -You can totally disable rem units by setting `$rem-px-only` to `true` (lt-ie9 only stylesheet for example) : +--- + +You can totally disable rem units by setting `$rem-px-only` to `true` (for a lt-ie9 only stylesheet for example). + +### CSS ```css h1 { @@ -91,3 +109,87 @@ h1 { padding: 10px; } ``` + +--- + +## Changing baseline + +By default, sass-rem uses a 10px baseline (root font size to 62.5%) for readability reasons (10px = 1rem). +You can change this value using the `$rem-baseline` variable. +The `rem-baseline` mixin will adjust the root font size and `rem` function and mixin will calculate rem values and px fallbacks automatically. + +### SCSS + +```scss +@import "rem"; + +$rem-baseline: 16px; + +html { + @include rem-baseline; // Optional with 16px baseline +} + +h1 { + @include rem(( + font-size: 24px, + margin: 10px 1rem + )); +} +``` + +### CSS + +```css +html { + font-size: 100%; +} + +h1 { + font-size: 24px; + font-size: 1.5rem; + margin: 10px 16px; + margin: 0.625rem 1rem; +} +``` + +--- + +You can also change the baseline zoom by passing the desired zoom to the `rem-baseline` mixin which will calculate it depending of `$rem-baseline`. Useful for creating responsive typography depending on viewport, especially with a different baseline than 16px. + +### SCSS + +```scss +@import "rem"; + +html { + @include rem-baseline; // Default to 100% + + @media (max-width: 400px) { + @include rem-baseline(75%); + } + + @media (min-width: 800px) { + @include rem-baseline(125%); + } +} +``` + +### CSS + +```css +html { + font-size: 62.5%; +} + +@media (max-width: 400px) { + html { + font-size: 46.875%; + } +} + +@media (min-width: 800px) { + html { + font-size: 78.125%; + } +} +``` diff --git a/_rem.scss b/_rem.scss index be56bf9..739e8a6 100644 --- a/_rem.scss +++ b/_rem.scss @@ -16,6 +16,10 @@ $rem-px-only: false !default; @return if($test-list == $list, space, comma); } +@mixin rem-baseline($zoom: 100%) { + font-size: $zoom / 16px * $rem-baseline; +} + @function rem-convert($to, $values...) { $result: (); $separator: rem-separator($values); diff --git a/bower.json b/bower.json index 04be824..10efaa5 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "sass-rem", "description": "Sass mixin and function to use rem units with pixel fallback.", - "version": "1.1.1", + "version": "1.2.0", "homepage": "https://github.com/pierreburel/sass-rem", "main": "_rem.scss", "authors": [ @@ -16,6 +16,7 @@ "license": "MIT", "ignore": [ "**/.*", - "sache.json" + "sache.json", + "package.json" ] } diff --git a/package.json b/package.json index 2345ef3..2000ae6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "sass-rem", - "version": "1.1.1", + "version": "1.2.0", "description": "Sass mixin and function to use rem units with pixel fallback.", "keywords": [ "sass",