Merge branch 'master' of github.com:aleutcss/utilities.spacing-responsive

Author: Robin Sandborg

.gitignore

@@ -1,3 +1,3 @@
-bower_components/
+node_modules/
 *.css
 inuit-test.scss

README.md

@@ -1,12 +1,50 @@
 # Spacing-responsive
 
-The inuitcss `spacing-responsive` module provides breakpoint-based classes for
-nudging margins and paddings around responsively, e.g. `.u-mb-none@lap`, `.u-mb-large@desk`.
+The aleutcss `spacing-responsive` extends `utilities.spacing` by adding breakpoint-based classes for
+nudging margins and paddings. It uses `utilities.spacing-responsive` for generating the breakpoints.
 
-Install using Bower:
 
-    $ bower install --save inuit-spacing-responsive
+## Install using npm:
 
-Install using npm:
+```ssh
+    $ npm install --save-dev aleut-responsive-spacing
+```
 
-    $ npm install --save inuit-responsive-spacing
+
+## Usage
+The conventions used in the classes in the spacing module are as follows:
+    `.u-(m|p)(t|r|b|l|h|v)(-negative)(-tiny|-small|-large|-huge|-none)(@breakpoint) {}`
+
+E.g.:
+
+* `.u-p@m` will give you a padding around the whole object (24px as default) on the @m-size
+* `.u-mh-huge@l` will give you a huge (96px as default) horizontal (`h`) margin (`m`) on the @l-size.
+* `.u-mb-none@s` will give you no margin (`m`) bottom (`b`) at the @s-size.
+
+## Enable options
+To enable the optional classes set the variables to `true` before you import
+the `_utilities.spacing-responsive.scss`-file.
+
+```scss
+$u-m-responsive:                  false !default;
+$u-m-responsive-tiny:             false !default;
+$u-m-responsive-small:            false !default;
+$u-m-responsive-large:            false !default;
+$u-m-responsive-huge:             false !default;
+
+$u-m-responsive-negative:         false !default;
+$u-m-responsive-negative-tiny:    false !default;
+$u-m-responsive-negative-small:   false !default;
+$u-m-responsive-negative-large:   false !default;
+$u-m-responsive-negative-huge:    false !default;
+
+$u-m-responsive-none:             false !default;
+
+$u-p-responsive:                  false !default;
+$u-p-responsive-tiny:             false !default;
+$u-p-responsive-small:            false !default;
+$u-p-responsive-large:            false !default;
+$u-p-responsive-huge:             false !default;
+
+$u-p-responsive-none:             false !default;
+```

_utilities.spacing-responsive.scss

@@ -9,31 +9,31 @@
  * `.u-(m|p)(t|r|b|l|h|v)(-negative)(-tiny|-small|-large|-huge|-none)(@breakpoint) {}`
  * = margin/padding top/right/bottom/left/horizontal/vertical negative tiny/small/large/huge/none @breakpoint
  *
-	<div class="u-mr u-mb-small u-mb@lap"></div>
+	<div class="u-mr u-mb-small u-mb@s"></div>
  */
 
 // Predefine the variables below in order to alter and enable specific features.
-$u-m-responsive:                   false !default;
-$u-m-responsive--tiny:             false !default;
-$u-m-responsive--small:            false !default;
-$u-m-responsive--large:            false !default;
-$u-m-responsive--huge:             false !default;
+$u-m-responsive:                  false !default;
+$u-m-responsive-tiny:             false !default;
+$u-m-responsive-small:            false !default;
+$u-m-responsive-large:            false !default;
+$u-m-responsive-huge:             false !default;
 
-$u-m-responsive--negative:         false !default;
-$u-m-responsive--negative-tiny:    false !default;
-$u-m-responsive--negative-small:   false !default;
-$u-m-responsive--negative-large:   false !default;
-$u-m-responsive--negative-huge:    false !default;
+$u-m-responsive-negative:         false !default;
+$u-m-responsive-negative-tiny:    false !default;
+$u-m-responsive-negative-small:   false !default;
+$u-m-responsive-negative-large:   false !default;
+$u-m-responsive-negative-huge:    false !default;
 
-$u-m-responsive--none:             false !default;
+$u-m-responsive-none:             false !default;
 
 $u-p-responsive:                  false !default;
-$u-p-responsive--tiny:            false !default;
-$u-p-responsive--small:           false !default;
-$u-p-responsive--large:           false !default;
-$u-p-responsive--huge:            false !default;
+$u-p-responsive-tiny:             false !default;
+$u-p-responsive-small:            false !default;
+$u-p-responsive-large:            false !default;
+$u-p-responsive-huge:             false !default;
 
-$u-p-responsive--none:            false !default;
+$u-p-responsive-none:             false !default;
 
 
 
@@ -94,7 +94,7 @@ $u-p-responsive--none:            false !default;
 }
 
 
-@if ($u-m-responsive--tiny == true) {
+@if ($u-m-responsive-tiny == true) {
 
     /**
      * Add tiny margins.
@@ -115,7 +115,7 @@ $u-p-responsive--none:            false !default;
 }
 
 
-@if ($u-m-responsive--small == true) {
+@if ($u-m-responsive-small == true) {
 
     /**
      * Add small margins.
@@ -136,7 +136,7 @@ $u-p-responsive--none:            false !default;
 }
 
 
-@if ($u-m-responsive--large == true) {
+@if ($u-m-responsive-large == true) {
 
     /**
      * Add large margins.
@@ -157,7 +157,7 @@ $u-p-responsive--none:            false !default;
 }
 
 
-@if ($u-m-responsive--huge == true) {
+@if ($u-m-responsive-huge == true) {
 
     /**
      * Add huge margins.
@@ -178,7 +178,7 @@ $u-p-responsive--none:            false !default;
 }
 
 
-@if ($u-m-responsive--none == true) {
+@if ($u-m-responsive-none == true) {
 
     /**
      * Remove margins.
@@ -199,7 +199,7 @@ $u-p-responsive--none:            false !default;
 }
 
 
-@if ($u-m-responsive--negative == true) {
+@if ($u-m-responsive-negative == true) {
 
     /**
      * Negative margins.
@@ -220,7 +220,7 @@ $u-p-responsive--none:            false !default;
 }
 
 
-@if ($u-m-responsive--negative-tiny == true) {
+@if ($u-m-responsive-negative-tiny == true) {
 
     /**
      * Tiny negative margins.
@@ -241,7 +241,7 @@ $u-p-responsive--none:            false !default;
 }
 
 
-@if ($u-m-responsive--negative-small == true) {
+@if ($u-m-responsive-negative-small == true) {
 
     /**
      * Small negative margins.
@@ -262,7 +262,7 @@ $u-p-responsive--none:            false !default;
 }
 
 
-@if ($u-m-responsive--negative-large == true) {
+@if ($u-m-responsive-negative-large == true) {
 
     /**
      * Large negative margins.
@@ -283,7 +283,7 @@ $u-p-responsive--none:            false !default;
 }
 
 
-@if ($u-m-responsive--negative-huge == true) {
+@if ($u-m-responsive-negative-huge == true) {
 
     /**
      * Huge negative margins.
@@ -330,7 +330,7 @@ $u-p-responsive--none:            false !default;
 }
 
 
-@if ($u-p-responsive--tiny == true) {
+@if ($u-p-responsive-tiny == true) {
 
     /**
      * Add tiny paddings.
@@ -351,7 +351,7 @@ $u-p-responsive--none:            false !default;
 }
 
 
-@if ($u-p-responsive--small == true) {
+@if ($u-p-responsive-small == true) {
 
     /**
      * Add small paddings.
@@ -372,7 +372,7 @@ $u-p-responsive--none:            false !default;
 }
 
 
-@if ($u-p-responsive--large == true) {
+@if ($u-p-responsive-large == true) {
 
     /**
      * Add large paddings.
@@ -393,7 +393,7 @@ $u-p-responsive--none:            false !default;
 }
 
 
-@if ($u-p-responsive--huge == true) {
+@if ($u-p-responsive-huge == true) {
 
     /**
      * Add huge paddings.
@@ -414,7 +414,7 @@ $u-p-responsive--none:            false !default;
 }
 
 
-@if ($u-p-responsive--none == true) {
+@if ($u-p-responsive-none == true) {
 
     /**
      * Remove paddings.