Fix #187

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ca6031413577fb748a73970619dd9a3f71464ed7..63d78eba68f05e928401daf42c0dd14bb3e036ca 100644 (file)
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -26,6 +26,7 @@
 * Fix #676 checkbox/radio wrapping
 * Feature #479 has-icons placement
 * Fix #442 selected table row
+* Fix #187 add customize page
 
 ## 0.4.0
 

diff --git a/docs/_includes/subnav-overview.html b/docs/_includes/subnav-overview.html
index c4de1e9e34bb27404da596bb125becd165c6f516..516449bf333983a476eb41f84ff88cefe05d40cd 100644 (file)
--- a/docs/_includes/subnav-overview.html
+++ b/docs/_includes/subnav-overview.html
@@ -4,6 +4,9 @@
       <a class="nav-item is-tab {% if page.doc-subtab == 'start' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/start/">
         Start
       </a>
+      <a class="nav-item is-tab {% if page.doc-subtab == 'customize' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/customize/">
+        Customize
+      </a>
       <a class="nav-item is-tab {% if page.doc-subtab == 'classes' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/classes/">
         Classes
       </a>

diff --git a/docs/documentation/overview/customize.html b/docs/documentation/overview/customize.html
new file mode 100644 (file)
index 0000000..6ca9ccb
--- /dev/null
+++ b/docs/documentation/overview/customize.html
@@ -0,0 +1,91 @@
+---
+layout: documentation
+doc-tab: overview
+doc-subtab: customize
+---
+
+{% include subnav-overview.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Customizing with Sass</h1>
+    <h2 class="subtitle">Create your <strong>own theme</strong> with a simple set of <strong>variables</strong></h2>
+
+    <hr>
+
+    <div class="content">
+      <p>If you're familiar with <a href="http://sass-lang.com/">Sass</a> and want to <strong>customize</strong> Bulma with your own colors and variables, just install Bulma via <strong>npm</strong>:</p>
+    </div>
+
+    <article class="media is-large">
+      <div class="media-left">
+        <p class="title is-5">1</p>
+      </div>
+      <div class="media-content">
+        <p class="title is-5">
+          <strong>Download</strong> the source files:
+        </p>
+{% highlight bash %}
+npm install bulma
+{% endhighlight %}
+        <div class="content">or clone the repository: <a href="https://github.com/jgthms/bulma">https://github.com/jgthms/bulma</a></div>
+      </div>
+    </article>
+
+    <article class="media is-large">
+      <div class="media-left">
+        <p class="title is-5">2</p>
+      </div>
+      <div class="media-content">
+        <p class="title is-5">
+          <strong>Set</strong> your variables
+        </p>
+        <p class="subtitle is-6">
+          Add your own colors, set new fonts, override Bulma styles...
+        </p>
+{% highlight sass %}
+// 1. Import the initial variables
+@import "../sass/utilities/initial-variables"
+
+// 2. Set your own initial variables
+// Update blue
+$blue: #72d0eb
+// Add pink
+$pink: #ffb3b3
+// Add a serif family
+$family-serif: "Merriweather", "Georgia", serif
+
+// 3. Set the derived variables
+// Use the new pink as the primary color
+$primary: $pink
+// Use the existing orange as the danger color
+$danger: $orange
+// Use the new serif family
+$family-primary: $family-serif
+
+// 4. Import the rest of Bulma
+@import "../bulma"
+{% endhighlight %}
+        </p>
+      </div>
+    </article>
+
+    <article class="media is-large">
+      <div class="media-left">
+        <p class="title is-5">3</p>
+      </div>
+      <div class="media-content">
+        <p class="title is-5">
+          See the <strong>result</strong>: before and after
+        </p>
+        <p class="subtitle is-6">
+          Notice how the <code>$blue-invert</code> is now black instead of white, based on <code>findColorInvert(#72d0eb)</code></p>
+        </p>
+        <figure>
+          <img width="640" height="640" src="{{site.url}}/images/customize-before.png" alt="Customizing Bulma with Sass">
+          <img width="640" height="640" src="{{site.url}}/images/customize-after.png" alt="Customizing Bulma with Sass">
+        </figure>
+      </div>
+    </article>
+  </div>
+</section>

diff --git a/docs/documentation/overview/start.html b/docs/documentation/overview/start.html
index 2b0f9dede4c1489bdc085b374a81d238bf43a162..51b520d262ca20701c97b503f2e7f8f5a6ecd506 100644 (file)
--- a/docs/documentation/overview/start.html
+++ b/docs/documentation/overview/start.html
@@ -66,84 +66,5 @@ npm install bulma
 {% endhighlight %}
       </div>
     </div>
-
-    <hr>
-
-    <h3 class="title">Customizing with Sass</h3>
-
-    <div class="content">
-      <p>If you're familiar with <a href="http://sass-lang.com/">Sass</a> and want to <strong>customize</strong> Bulma with your own colors and variables, just install Bulma via <strong>npm</strong>:</p>
-    </div>
-
-    <article class="media is-large">
-      <div class="media-left">
-        <p class="title is-5">1</p>
-      </div>
-      <div class="media-content">
-        <p class="title is-5">
-          <strong>Download</strong> the source files:
-        </p>
-{% highlight bash %}
-npm install bulma
-{% endhighlight %}
-        <div class="content">or clone the repository: <a href="https://github.com/jgthms/bulma">https://github.com/jgthms/bulma</a></div>
-      </div>
-    </article>
-
-    <article class="media is-large">
-      <div class="media-left">
-        <p class="title is-5">2</p>
-      </div>
-      <div class="media-content">
-        <p class="title is-5">
-          <strong>Set</strong> your variables
-        </p>
-        <p class="subtitle is-6">
-          Add your own colors, set new fonts, override Bulma styles...
-        </p>
-{% highlight sass %}
-// 1. Import the initial variables
-@import "../sass/utilities/initial-variables"
-
-// 2. Set your own initial variables
-// Update blue
-$blue: #72d0eb
-// Add pink
-$pink: #ffb3b3
-// Add a serif family
-$family-serif: "Merriweather", "Georgia", serif
-
-// 3. Set the derived variables
-// Use the new pink as the primary color
-$primary: $pink
-// Use the existing orange as the danger color
-$danger: $orange
-// Use the new serif family
-$family-primary: $family-serif
-
-// 4. Import the rest of Bulma
-@import "../bulma"
-{% endhighlight %}
-        </p>
-      </div>
-    </article>
-
-    <article class="media is-large">
-      <div class="media-left">
-        <p class="title is-5">3</p>
-      </div>
-      <div class="media-content">
-        <p class="title is-5">
-          See the <strong>result</strong>: before and after
-        </p>
-        <p class="subtitle is-6">
-          Notice how the <code>$blue-invert</code> is now black instead of white, based on <code>findColorInvert(#72d0eb)</code></p>
-        </p>
-        <figure>
-          <img width="640" height="640" src="{{site.url}}/images/customize-before.png" alt="Customizing Bulma with Sass">
-          <img width="640" height="640" src="{{site.url}}/images/customize-after.png" alt="Customizing Bulma with Sass">
-        </figure>
-      </div>
-    </article>
   </div>
 </section>