IMPORTANT: Change back to rem unit, and default html font size is 20px.

1 files changed, 70 insertions, 64 deletions

diff --git a/docs/getting-started.html b/docs/getting-started.html
index a283d1a..5a1afc1 100644
--- a/docs/getting-started.html
+++ b/docs/getting-started.html
@@ -365,86 +365,92 @@
           <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.
-            <h5>Colors</h5>
-            <div class="columns">
-              <div class="column col-3 col-md-6">
-                <div class="docs-color" style="background:#5764c6;color:#fff;">
-                  <div class="color-title">#5764c6</div>
-                  <div class="color-subtitle">Primary</div>
-                </div>
+          </div>
+          <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;">
+                <div class="color-title">#5764c6</div>
+                <div class="color-subtitle">Primary</div>
               </div>
-              <div class="column col-3 col-md-6">
-                <div class="docs-color" style="background:#eff1fa;color:#5764c6;">
-                  <div class="color-title">#eff1fa</div>
-                  <div class="color-subtitle">Secondary</div>
-                </div>
+            </div>
+            <div class="column col-3 col-md-6">
+              <div class="docs-color" style="background:#eff1fa;color:#5764c6;">
+                <div class="color-title">#eff1fa</div>
+                <div class="color-subtitle">Secondary</div>
               </div>
             </div>
-            <div class="columns">
-              <div class="column col-3 col-md-6">
-                <div class="docs-color" style="background:#454d5d;color:#fff;">
-                  <div class="color-title">#454d5d</div>
-                  <div class="color-subtitle">Dark</div>
-                </div>
+          </div>
+          <div class="columns">
+            <div class="column col-3 col-md-6">
+              <div class="docs-color" style="background:#454d5d;color:#fff;">
+                <div class="color-title">#454d5d</div>
+                <div class="color-subtitle">Dark</div>
               </div>
-              <div class="column col-3 col-md-6">
-                <div class="docs-color" style="background:#727e96;color:#fff;">
-                  <div class="color-title">#727e96</div>
-                  <div class="color-subtitle">Gray dark</div>
-                </div>
+            </div>
+            <div class="column col-3 col-md-6">
+              <div class="docs-color" style="background:#727e96;color:#fff;">
+                <div class="color-title">#727e96</div>
+                <div class="color-subtitle">Gray dark</div>
               </div>
-              <div class="column col-3 col-md-6">
-                <div class="docs-color" style="background:#acb3c2;color:#fff;">
-                  <div class="color-title">#acb3c2</div>
-                  <div class="color-subtitle">Gray</div>
-                </div>
+            </div>
+            <div class="column col-3 col-md-6">
+              <div class="docs-color" style="background:#acb3c2;color:#fff;">
+                <div class="color-title">#acb3c2</div>
+                <div class="color-subtitle">Gray</div>
               </div>
-              <div class="column col-3 col-md-6">
-                <div class="docs-color" style="background:#e7e9ed;color:#727e96;">
-                  <div class="color-title">#e7e9ed</div>
-                  <div class="color-subtitle">Gray light</div>
-                </div>
+            </div>
+            <div class="column col-3 col-md-6">
+              <div class="docs-color" style="background:#e7e9ed;color:#727e96;">
+                <div class="color-title">#e7e9ed</div>
+                <div class="color-subtitle">Gray light</div>
               </div>
-              <div class="column col-3 col-md-6">
-                <div class="docs-color" style="background:#f0f1f4;color:#727e96;">
-                  <div class="color-title">#f0f1f4</div>
-                  <div class="color-subtitle">Border</div>
-                </div>
+            </div>
+            <div class="column col-3 col-md-6">
+              <div class="docs-color" style="background:#f0f1f4;color:#727e96;">
+                <div class="color-title">#f0f1f4</div>
+                <div class="color-subtitle">Border</div>
               </div>
-              <div class="column col-3 col-md-6">
-                <div class="docs-color" style="background:#f8f9fa;color:#727e96;">
-                  <div class="color-title">#f8f9fa</div>
-                  <div class="color-subtitle">Background</div>
-                </div>
+            </div>
+            <div class="column col-3 col-md-6">
+              <div class="docs-color" style="background:#f8f9fa;color:#727e96;">
+                <div class="color-title">#f8f9fa</div>
+                <div class="color-subtitle">Background</div>
               </div>
-              <div class="column col-3 col-md-6">
-                <div class="docs-color" style="background:#fff;color:#727e96;">
-                  <div class="color-title">#fff</div>
-                  <div class="color-subtitle">Light</div>
-                </div>
+            </div>
+            <div class="column col-3 col-md-6">
+              <div class="docs-color" style="background:#fff;color:#727e96;">
+                <div class="color-title">#fff</div>
+                <div class="color-subtitle">Light</div>
               </div>
             </div>
-            <div class="columns">
-              <div class="column col-3 col-md-6">
-                <div class="docs-color" style="background:#32b643;color:#fff;">
-                  <div class="color-title">#32b643</div>
-                  <div class="color-subtitle">Success</div>
-                </div>
+          </div>
+          <div class="columns">
+            <div class="column col-3 col-md-6">
+              <div class="docs-color" style="background:#32b643;color:#fff;">
+                <div class="color-title">#32b643</div>
+                <div class="color-subtitle">Success</div>
               </div>
-              <div class="column col-3 col-md-6">
-                <div class="docs-color" style="background:#ffb700;color:#fff;">
-                  <div class="color-title">#ffb700</div>
-                  <div class="color-subtitle">Warning</div>
-                </div>
+            </div>
+            <div class="column col-3 col-md-6">
+              <div class="docs-color" style="background:#ffb700;color:#fff;">
+                <div class="color-title">#ffb700</div>
+                <div class="color-subtitle">Warning</div>
               </div>
-              <div class="column col-3 col-md-6">
-                <div class="docs-color" style="background:#e85600;color:#fff;">
-                  <div class="color-title">#e85600</div>
-                  <div class="color-subtitle">Error</div>
-                </div>
+            </div>
+            <div class="column col-3 col-md-6">
+              <div class="docs-color" style="background:#e85600;color:#fff;">
+                <div class="color-title">#e85600</div>
+                <div class="color-subtitle">Error</div>
               </div>
             </div>
           </div>
+          <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>
+          </div>
         </div>
 
         <div id="accessibility" class="container">