Update margins, update read & demo

README.md

@@ -663,30 +663,30 @@ Form the Utilities Layer in ITCSS, each a single responsibility class. They are
 Adds margins, Nebula CSS encourages [single direction margin declarations](http:https://csswizardry.com/2012/06/single-direction-margin-declarations/) to eliminate confusion around collapsing borders
 
 ```html
-<div class="u-push-right"></div>
-<div class="u-push-bottom"></div>
-<div class="u-push-right@sm"></div>
+<div class="u-push-left-md"></div>
+<div class="u-push-bottom-md"></div>
+<div class="u-push-left-md@sm"></div>
 ```
 
 ### Flush
 Removes margins
 ```html
-<div class="u-push-top"></div>
-<div class="u-push-right"></div>
-<div class="u-push-bottom"></div>
-<div class="u-push-left"></div>
-<div class="u-push-left@lg"></div>
+<div class="u-push-top-md"></div>
+<div class="u-push-right-md"></div>
+<div class="u-push-bottom-md"></div>
+<div class="u-push-left-md"></div>
+<div class="u-push-left-md@lg"></div>
 ```
 
 ### Soft
 Adds padding
 ```html
-<div class="u-soft"></div>
-<div class="u-soft-top"></div>
-<div class="u-soft-right"></div>
-<div class="u-soft-bottom"></div>
-<div class="u-soft-left"></div>
-<div class="u-soft-left@lg"></div>
+<div class="u-soft-md"></div>
+<div class="u-soft-top-md"></div>
+<div class="u-soft-right-md"></div>
+<div class="u-soft-bottom-md"></div>
+<div class="u-soft-left-md"></div>
+<div class="u-soft-left-md@lg"></div>
 ```
 
 ### Hard

demo/index.html

@@ -591,5 +591,46 @@ <h3 id="matrix-list">Matrix list at breakpoint</h3>
  </div>
 
  </section>
+
+ <section class="o-section-md">
+ <div class="o-site-wrap o-site-wrap--padding">
+ <h2>Utilities</h2>
+ <h3>Push / Flush - Margins</h3>
+ <p>Push adds margins using <code>$nb-spacing-unit</code>, flush removes margins</p>
+ <div class="demo-card u-push-bottom-md">
+ <div class="demo-card-alt u-push-bottom-md">
+ push bottom
+ </div>
+ </div>
+ <div class="demo-card u-push-bottom-md">
+ <div class="demo-card-alt u-push-left-md">
+ push left
+ </div>
+ </div>
+
+ <h3>Soft / Hard - Padding</h3>
+ <p>Soft adds padding using <code>$nb-spacing-unit</code>, soft removes padding</p>
+ <div class="demo-card u-push-bottom-md">
+ <div class="demo-card-alt u-soft-top-md">
+ soft top
+ </div>
+ </div>
+ <div class="demo-card u-push-bottom-md">
+ <div class="demo-card-alt u-soft-right-md">
+ soft right
+ </div>
+ </div>
+ <div class="demo-card u-push-bottom-md">
+ <div class="demo-card-alt u-soft-bottom-md">
+ soft bottom
+ </div>
+ </div>
+ <div class="demo-card u-push-bottom-md">
+ <div class="demo-card-alt u-soft-left-md">
+ soft left
+ </div>
+ </div>
+ </div>
+ </section>
 </body>
 </html>

demo/scss/components/_card.scss

@@ -1,5 +1,12 @@
 .demo-card {
- padding: ($nb-spacing-unit * 0.5) $nb-spacing-unit;
+ padding: $nb-spacing-unit;
  background: #222;
  color: #fff;
 }
+
+.demo-card-alt {
+ display: inline-block;
+ padding: 0;
+ background: #fff;
+ color: #222;
+}

nebula-css/tools/_spacing.scss

@@ -4,7 +4,7 @@
 
  @if $action == 'push' {
  $property: 'margin';
- $directions: 'bottom', 'right';
+ $directions: 'bottom', 'left';
  } @else {
  $property: 'padding';
  $directions: 'top', 'right', 'bottom', 'left';