Adding placeholder default

kenwheeler · Mar 11, 2014 · d4272b9 · d4272b9
1 parent e525d2c
commit d4272b9
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 52 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -200,6 +200,10 @@ <h2>Helper Mixins</h2>
 
 @include clear;
 
+// clear(boolean) : Use false inside media queries to use mixin instead of placeholder
+
+@include clear(false);
+
 // Ellipsis Mixin - ellipsis($width)
 //
 // display: inline-block;
@@ -220,6 +224,10 @@ <h2>Helper Mixins</h2>
 
 @include hide-text;
 
+// hide-text(boolean) : Use false inside media queries to use mixin instead of placeholder
+
+@include hide-text(false);
+
 // Inline List (use on &lt;ul&gt;)
 //
 // list-style-type:none;

diff --git a/demo/styles/main.css b/demo/styles/main.css
@@ -1,3 +1,7 @@
+main:after, main section:after, main section header:after, main section .container:after {
+  content: "";
+  display: table;
+  clear: both; }
 
 
 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
@@ -133,26 +137,14 @@ main {
   width: 100%;
   max-width: 600px;
   margin: auto; }
-  main:after {
-    content: "";
-    display: table;
-    clear: both; }
   main section {
     padding-left: 20px;
     padding-right: 20px;
     width: 100%;
     float: left; }
-    main section:after {
-      content: "";
-      display: table;
-      clear: both; }
     main section header {
       margin: 0px 0px 20px 0px;
       text-align: center; }
-      main section header:after {
-        content: "";
-        display: table;
-        clear: both; }
       main section header h2 {
         background: none;
         font-size: 1.5rem;
@@ -170,10 +162,6 @@ main {
       width: 100%;
       max-width: 600px;
       margin-bottom: 20px; }
-      main section .container:after {
-        content: "";
-        display: table;
-        clear: both; }
     main section .float-tile {
       padding-left: 20px;
       padding-right: 20px;

diff --git a/docs/guff.html b/docs/guff.html
@@ -488,7 +488,7 @@ <h3 id="mixins">Mixins</h3>
             <div class="content"><div class='highlight'><pre><span class="hljs-at_rule">@<span class="hljs-keyword">mixin</span><span class="hljs-preprocessor"> container</span> {</span>
   <span class="hljs-attribute">width</span><span class="hljs-value">: <span class="hljs-number">100</span>%;</span>
   <span class="hljs-attribute">max-width</span><span class="hljs-value">: $grid-max-width;</span>
-  <span class="hljs-at_rule">@<span class="hljs-keyword">include</span><span class="hljs-preprocessor"> clear</span>(false);</span>
+  <span class="hljs-at_rule">@<span class="hljs-keyword">include</span><span class="hljs-preprocessor"> clear</span>;</span>
 }</pre></div></div>
 
         </li>
@@ -688,14 +688,15 @@ <h3 id="mixins">Mixins</h3>
 
             </div>
 
-            <div class="content"><div class='highlight'><pre><span class="hljs-at_rule">@<span class="hljs-keyword">mixin</span><span class="hljs-preprocessor"> clear</span>($<span class="hljs-keyword">extend</span>:<span class="hljs-preprocessor"> true</span>) {</span>
-  <span class="hljs-at_rule">@<span class="hljs-keyword">if</span> $<span class="hljs-keyword">extend</span> {</span>
-    <span class="hljs-at_rule">@<span class="hljs-keyword">extend</span> %clear;</span>
-  } <span class="hljs-at_rule">@<span class="hljs-keyword">else</span> {</span>
-    &amp;<span class="hljs-pseudo">:after</span> {
-    <span class="hljs-attribute">content</span><span class="hljs-value">:<span class="hljs-string">""</span>;</span>
-    <span class="hljs-attribute">display</span><span class="hljs-value">:table;</span>
-    <span class="hljs-attribute">clear</span><span class="hljs-value">:both;</span>
+            <div class="content"><div class='highlight'><pre>@mixin clear($extend: true) {
+  @if $extend {
+    @extend %clear;
+  }
+  @else {
+    #{'&amp;'}:after {
+    content:"";
+    display:table;
+    clear:both;
     }
   }
 }</pre></div></div>
@@ -713,12 +714,10 @@ <h3 id="mixins">Mixins</h3>
 
             </div>
 
-            <div class="content"><div class='highlight'><pre>%<span class="hljs-attribute">clear</span> {
-  &amp;<span class="hljs-pseudo">:after</span> {
+            <div class="content"><div class='highlight'><pre>%<span class="hljs-attribute">clear</span><span class="hljs-pseudo">:after</span> {
   <span class="hljs-attribute">content</span><span class="hljs-value">:<span class="hljs-string">""</span>;</span>
   <span class="hljs-attribute">display</span><span class="hljs-value">:table;</span>
   <span class="hljs-attribute">clear</span><span class="hljs-value">:both;</span>
-  }
 }</pre></div></div>
 
         </li>
@@ -737,12 +736,13 @@ <h3 id="mixins">Mixins</h3>
             <div class="content"><div class='highlight'><pre>
 <span class="hljs-at_rule">@<span class="hljs-keyword">mixin</span><span class="hljs-preprocessor"> hide-text</span>($<span class="hljs-keyword">extend</span>:<span class="hljs-preprocessor"> true</span>) {</span>
   <span class="hljs-at_rule">@<span class="hljs-keyword">if</span> $<span class="hljs-keyword">extend</span> {</span>
-      <span class="hljs-at_rule">@<span class="hljs-keyword">extend</span> %hide-text;</span>
-    } <span class="hljs-at_rule">@<span class="hljs-keyword">else</span> {</span>
-      <span class="hljs-attribute">overflow</span><span class="hljs-value">:hidden;</span>
-      <span class="hljs-attribute">text-indent</span><span class="hljs-value">: <span class="hljs-number">100</span>%;</span>
-      <span class="hljs-attribute">white-space</span><span class="hljs-value">: nowrap;</span>
-    }
+    <span class="hljs-at_rule">@<span class="hljs-keyword">extend</span> %hide-text;</span>
+  }
+  <span class="hljs-at_rule">@<span class="hljs-keyword">else</span> {</span>
+  <span class="hljs-attribute">overflow</span><span class="hljs-value">:hidden;</span>
+  <span class="hljs-attribute">text-indent</span><span class="hljs-value">: <span class="hljs-number">100</span>%;</span>
+  <span class="hljs-attribute">white-space</span><span class="hljs-value">: nowrap;</span>
+  }
 }</pre></div></div>
 
         </li>

diff --git a/guff.scss b/guff.scss
@@ -202,29 +202,37 @@ $grid-max-width: 1024px !default;
 }
 
 // Clearfix include
-@mixin clear() {
-  &:after {
-  content:"";
-  display:table;
-  clear:both;
+@mixin clear($extend: true) {
+  @if $extend {
+    @extend %clear;
+  }
+  @else {
+    #{'&'}:after {
+    content:"";
+    display:table;
+    clear:both;
+    }
   }
 }
 
 // Placeholder for clear
-%clear {
-  &:after {
+%clear:after {
   content:"";
   display:table;
   clear:both;
-  }
 }
 
 // Text hider
 
-@mixin hide-text() {
+@mixin hide-text($extend: true) {
+  @if $extend {
+    @extend %hide-text;
+  }
+  @else {
   overflow:hidden;
   text-indent: 100%;
   white-space: nowrap;
+  }
 }
 
 // Placeholder for hide-text

diff --git a/src/_mixins.scss b/src/_mixins.scss
@@ -82,29 +82,37 @@
 }
 
 // Clearfix include
-@mixin clear() {
-  &:after {
-  content:"";
-  display:table;
-  clear:both;
+@mixin clear($extend: true) {
+  @if $extend {
+    @extend %clear;
+  }
+  @else {
+    #{'&'}:after {
+    content:"";
+    display:table;
+    clear:both;
+    }
   }
 }
 
 // Placeholder for clear
-%clear {
-  &:after {
+%clear:after {
   content:"";
   display:table;
   clear:both;
-  }
 }
 
 // Text hider
 
-@mixin hide-text() {
+@mixin hide-text($extend: true) {
+  @if $extend {
+    @extend %hide-text;
+  }
+  @else {
   overflow:hidden;
   text-indent: 100%;
   white-space: nowrap;
+  }
 }
 
 // Placeholder for hide-text