diff options
1 files changed, 70 insertions, 64 deletions
| -rw-r--r-- | docs/getting-started.html | 134 |
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"> |