Rename display utilities and add custom prefix

trilbymedia · Aug 16, 2017 · 82e0eef · 82e0eef
1 parent e1889c8
commit 82e0eef
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 27 deletions.
diff --git a/docs/dist/spectre.css b/docs/dist/spectre.css
@@ -2879,32 +2879,33 @@ a.text-error:hover {
 .bg-error {
   background: #e85600;
 }
-.block {
+.d-block {
   display: block;
 }
-.inline {
+.d-inline {
   display: inline;
 }
-.inline-block {
+.d-inline-block {
   display: inline-block;
 }
-.flex {
+.d-flex {
   display: flex;
   display: -ms-flexbox;
   display: -webkit-flex;
 }
-.inline-flex {
+.d-inline-flex {
   display: inline-flex;
   display: -ms-inline-flexbox;
   display: -webkit-inline-flex;
 }
+.d-none,
 .hide {
   display: none !important;
 }
-.visible {
+.d-visible {
   visibility: visible;
 }
-.invisible {
+.d-invisible {
   visibility: hidden;
 }
 .text-hide {

diff --git a/docs/dist/spectre.min.css b/docs/dist/spectre.min.css
diff --git a/docs/getting-started.html b/docs/getting-started.html
@@ -364,9 +364,9 @@ <h3 class="s-title"><a href="#comiling" class="anchor" aria-hidden="true">#</a>C
 
           <h4 id="variables" class="s-subtitle"><a href="#variables" class="anchor" aria-hidden="true">#</a>Variables</h4>
           <div class="docs-note">
-            <p>Spectre.css is designed with consistent design language. You can modify <code>variables.less</code> to create your new or match existing design.
+            <p>Spectre.css is designed with consistent design language. You can modify <code>variables.less</code> to create your new or match existing design.</p>
           </div>
-          <h5 class="s-subtitle">Colors</h5>  
+          <h5 class="s-subtitle">Colors</h5>
           <div class="columns">
             <div class="column col-3 col-md-6">
               <div class="docs-color" style="background:#5764c6;color:#fff;">
@@ -448,8 +448,34 @@ <h5 class="s-subtitle">Colors</h5>
           <h5 class="s-subtitle">Sizes</h5>
           <div class="docs-note">
             <p>The default REM (root em) size in Spectre.css is <code>20px</code>. </p>
-            <p>Please note in Chinese/Japanese/Korean Chrome, Chrome uses 12px as default minimum font size. That is why Spectre sets rem default html font size to <code>20px</code>, which is relatively easy to calculate. </p>
-            <p>Spectre also use <code>4px</code> as the unit size. Sizes of components are based on the unit size. </p>
+            <p>Please note in the Chinese/Japanese/Korean version, Chrome uses 12px as default minimum font size. That is why Spectre sets rem default html font size to <code>20px</code>, which is relatively easy to calculate. </p>
+            <p>Spectre uses <code>4px</code> as the unit size. Sizes of components are based on the unit size. </p>
+          </div>
+          <h5 class="s-subtitle">Custom prefix</h5>
+          <div class="docs-note">
+            <p>There is also a way to add custom prefix to all CSS classes. You can use <a href="https://www.npmjs.com/package/gulp-css-prefix" target="_blank">gulp-css-prefix</a> plugin and add a new Gulp task to enable it. </p>
+          </div>
+
+<!-- custom prefix example -->
+<pre class="code"><code><span class="tag">$</span> npm install <span class="atv">gulp-css-prefix</span>
+</code></pre>
+
+          <div class="docs-note">
+            <p>To add <code>spectre-</code> to all classes, you can add the Gulp task to <code>gulpfile.js</code> file.</p>
+          </div>
+
+<!-- custom prefix example -->
+<pre class="code"><code>var cssPrefix = require('<span class="atv">gulp-css-prefix</span>');
+
+gulp.task('prefix', function() {
+  gulp.src('./dist/*.css')
+      .pipe(cssPrefix('<span class="atv">spectre-</span>'))
+      .pipe(gulp.dest('./dist'))
+});
+</code></pre>
+
+          <div class="docs-note">
+            <p>After you compile your version of Spectre in the /dist, run <code>gulp prefix</code> in the directory of Spectre.</p>
           </div>
         </div>
 

diff --git a/docs/utilities.html b/docs/utilities.html
@@ -328,21 +328,22 @@ <h3 class="s-title"><a href="#display" class="anchor" aria-hidden="true">#</a>Di
 
 <!-- display utilities example -->
 <pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- display: block; --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;block&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;d-block&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
 <span class="com">&lt;!-- display: inline; --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;inline&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;d-inline&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
 <span class="com">&lt;!-- display: inline-block; --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;inline-block&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;d-inline-block&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
 <span class="com">&lt;!-- display: flex; --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;flex&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;d-flex&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
 <span class="com">&lt;!-- display: inline-flex; --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;inline-flex&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;d-inline-flex&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
 <span class="com">&lt;!-- display: none; --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;hide&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;d-none&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;d-hide&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
 <span class="com">&lt;!-- visibility: visible; --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;visible&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;d-visible&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
 <span class="com">&lt;!-- visibility: hidden; --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;invisible&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;d-invisible&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
 <span class="com">&lt;!-- hide text contents --&gt;</span>
 &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-hide&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
 <span class="com">&lt;!-- assistive text for screen reader --&gt;</span>

diff --git a/src/utilities/display.less b/src/utilities/display.less
@@ -1,26 +1,27 @@
 // Display
-.block {
+.d-block {
   display: block;
 }
-.inline {
+.d-inline {
   display: inline;
 }
-.inline-block {
+.d-inline-block {
   display: inline-block;
 }
-.flex {
+.d-flex {
   display: flex;
 }
-.inline-flex {
+.d-inline-flex {
   display: inline-flex;
 }
+.d-none,
 .hide {
   display: none !important;
 }
-.visible {
+.d-visible {
   visibility: visible;
 }
-.invisible {
+.d-invisible {
   visibility: hidden;
 }
 .text-hide {