Fallback disabled and 10px baseline by default

pierreburel · Jul 13, 2017 · 9d1cae4 · 9d1cae4
1 parent a156b73
commit 9d1cae4
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 78 deletions.
diff --git a/README.md b/README.md
@@ -1,95 +1,99 @@
 # Rem
 
-Sass mixin and function to use rem units with pixel fallback.  
+Sass function and mixin to use rem units with optional pixel fallback.  
+
+*Breaking change in 2.0*: `$rem-fallback` is now set to `false` ([see support](http://caniuse.com/#feat=rem)) and `$rem-baseline` to `16px` by default.  
 
 Demo: [Sassmeister](http://sassmeister.com/gist/f75f0ffd0910a99eee77) / [Codepen](http://codepen.io/pierreburel/pen/ogGzgX)
 
-Compatibility: [Sass](https://github.com/sass/sass) 3.2+ (3.3+ for maps), [LibSass](https://github.com/sass/libsass) and [PHPSass](https://github.com/richthegeek/phpsass)
+Compatibility: [Sass](https://github.com/sass/sass) 3.2+ (3.3+ for maps) and [LibSass](https://github.com/sass/libsass).  
 
 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/) or [npm](https://www.npmjs.com/):
+Download [`_rem.scss`](https://raw.githubusercontent.com/pierreburel/sass-rem/master/_rem.scss) or install with [Yarn](https://yarnpkg.com/), [npm](https://www.npmjs.com/) or [Bower](http://bower.io/):
 
-### Bower
+* `yarn add sass-rem`
+* `npm install sass-rem --save`
+* `bower install sass-rem --save`
 
-```
-bower install sass-rem
-```
+---
+
+## Usage
 
-### npm
+Import `_rem.scss` and use the `rem` function.
 
+### SCSS
+
+```scss
+@import "rem";
+
+.demo {
+  font-size: rem(24px); // Simple
+  padding: rem(5px 10px); // Multiple values
+  border-bottom: rem(1px solid black); // Multiple mixed values
+  box-shadow: rem(0 0 2px #ccc, inset 0 0 5px #eee); // Comma-separated values
+  text-shadow: rem(1px 1px) #eee, rem(-1px) 0 #eee; // Alternate use
+}
 ```
-npm install sass-rem
+
+### CSS
+
+```css
+.demo {
+  font-size: 1.5rem;
+  padding: 0.3125rem 0.625rem;
+  border-bottom: 0.0625rem solid black;
+  box-shadow: 0 0 0.125rem #ccc, inset 0 0 0.3125rem #eee;
+  text-shadow: 0.0625rem 0.0625rem #eee, -0.0625rem 0 #eee;
+}
 ```
 
 ---
 
-## Usage
+## Using pixel fallback
 
-Import `_rem.scss`, set the root font-size with `rem-baseline` mixin and use the `rem` mixin or function.
+You can enable pixel fallback by setting `$rem-fallback` to `true`, but you will have to use the mixin instead of the function.
 
 ### SCSS
 
 ```scss
 @import "rem";
 
-html {
-  @include rem-baseline;
-}
+$rem-fallback: true;
 
-h1 {
+.demo {
   @include rem(font-size, 24px); // Simple
-  @include rem(border-bottom, 1px solid black); // Shorthand
-  @include rem(box-shadow, 0 0 2px #ccc, inset 0 0 5px #eee); // Multiple values
-  text-shadow: rem(1px 1px #eee, -1px -1px #eee); // Function and multiple values, warning: no fallback possible with rem function
-  // Map support (Sass 3.3+)
+  @include rem(padding, 5px 10px); // Multiple values
+  @include rem(border-bottom, 1px solid black); // Multiple mixed values
+  @include rem(box-shadow, 0 0 2px #ccc, inset 0 0 5px #eee); // Comma-separated values
+  // Multiple properties
   @include rem((
-    margin: 20px 1rem,
-    padding: 10px
+    margin: 10px 5px,
+    text-shadow: (1px 1px #eee, -1px -1px #eee) // Parentheses needed because of comma
   ));
 }
 ```
 
 ### CSS
 
 ```css
-html {
-  font-size: 62.5%;
-}
-
-h1 {
+.demo {
   font-size: 24px;
-  font-size: 2.4rem;
+  font-size: 1.5rem;
+  padding: 5px 10px;
+  padding: 0.3125rem 0.625rem;
   border-bottom: 1px solid black;
-  border-bottom: 0.1rem solid black;
+  border-bottom: 0.0625rem solid black;
   box-shadow: 0 0 2px #ccc, inset 0 0 5px #eee;
-  box-shadow: 0 0 0.2rem #ccc, inset 0 0 0.5rem #eee;
-  text-shadow: 0.1rem 0.1rem #eee, -0.1rem -0.1rem #eee; // No fallback
-  margin: 20px 10px;
-  margin: 2rem 1rem;
-  padding: 10px;
-  padding: 1rem;
-}
-```
-
----
-
-You can disable pixel fallback by setting `$rem-fallback` to `false`.
-
-### CSS
-
-```css
-h1 {
-  font-size: 2.4rem;
-  border-bottom: 0.1rem solid black;
-  box-shadow: 0 0 0.2rem #ccc, inset 0 0 0.5rem #eee;
-  text-shadow: 0.1rem 0.1rem #eee, -0.1rem -0.1rem #eee;
-  margin: 2rem 1rem;
-  padding: 1rem;
+  box-shadow: 0 0 0.125rem #ccc, inset 0 0 0.3125rem #eee;
+  margin: 10px 5px;
+  margin: 0.625rem 0.3125rem;
+  text-shadow: 1px 1px #eee, -1px -1px #eee;
+  text-shadow: 0.0625rem 0.0625rem #eee, -0.0625rem -0.0625rem #eee;
 }
 ```
 
@@ -100,55 +104,48 @@ You can totally disable rem units by setting `$rem-px-only` to `true` (for a lt-
 ### CSS
 
 ```css
-h1 {
+.demo {
   font-size: 24px;
+  padding: 5px 10px;
   border-bottom: 1px solid black;
   box-shadow: 0 0 2px #ccc, inset 0 0 5px #eee;
-  text-shadow: 1px 1px #eee, -1px -1px #eee; // Fallback works here
-  margin: 20px 10px;
-  padding: 10px;
+  margin: 10px;
+  text-shadow: 1px 1px #eee, -1px -1px #eee;
 }
 ```
 
 ---
 
 ## 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.
+By default, sass-rem now uses a 16px baseline, but you can change this value with `$rem-baseline` and by using the `rem-baseline` mixin on the html element to adjust the root font size. The `rem` function and mixin will calculate rem values accordingly.
+For example, you can set `$rem-baseline` to 10px to have a root font size of 62.5% and improve readability (10px = 1rem), which was the pre-2.0 behavior.
 
 ### SCSS
 
 ```scss
 @import "rem";
 
-$rem-baseline: 16px;
+$rem-baseline: 10px;
 
 html {
-  @include rem-baseline; // Optional with 16px baseline
+  @include rem-baseline;
 }
 
-h1 {
-  @include rem((
-    font-size: 24px,
-    margin: 10px 1rem
-  ));
+.demo {
+  font-size: rem(24px);
 }
 ```
 
 ### CSS
 
 ```css
 html {
-  font-size: 100%;
+  font-size: 62.5%;
 }
 
-h1 {
-  font-size: 24px;
-  font-size: 1.5rem;
-  margin: 10px 16px;
-  margin: 0.625rem 1rem;
+.demo {
+  font-size: 2.4rem;
 }
 ```
 
@@ -161,6 +158,8 @@ You can also change the baseline zoom by passing the desired zoom to the `rem-ba
 ```scss
 @import "rem";
 
+$rem-baseline: 10px;
+
 html {
   @include rem-baseline; // Default zoom to 100%
 

diff --git a/_rem.scss b/_rem.scss
@@ -1,5 +1,5 @@
-$rem-baseline: 10px !default;
-$rem-fallback: true !default;
+$rem-baseline: 16px !default;
+$rem-fallback: false !default;
 $rem-px-only: false !default;
 
 @function rem-separator($list, $separator: false) {

diff --git 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.2.3",
+  "description": "Sass function and mixin to use rem units with optional pixel fallback.",
+  "version": "2.0.0",
   "homepage": "https://github.com/pierreburel/sass-rem",
   "main": "_rem.scss",
   "authors": [

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "sass-rem",
-  "version": "1.2.4",
-  "description": "Sass mixin and function to use rem units with pixel fallback.",
+  "version": "2.0.0",
+  "description": "Sass function and mixin to use rem units with optional pixel fallback.",
   "keywords": [
     "sass",
     "rem",

diff --git a/sache.json b/sache.json
@@ -1,6 +1,6 @@
 {
   "name": "sass-rem",
-  "description": "Sass mixin and function to use rem units with pixel fallback.",
+  "description": "Sass function and mixin to use rem units with optional pixel fallback.",
   "tags": [
     "sass",
     "rem",