diff options
Merge pull request #551 from picturepan2/0.5.8 v0.5.8
0.5.8
4 files changed, 91 insertions, 55 deletions
| -rw-r--r-- | docs/layout/grid.html | 127 | ||||
| -rw-r--r-- | docs/layout/hero.html | 6 | ||||
| -rw-r--r-- | docs/layout/navbar.html | 6 | ||||
| -rw-r--r-- | docs/layout/responsive.html | 7 |
diff --git a/docs/layout/grid.html b/docs/layout/grid.html index 83a8c9e..f7088c3 100644 --- a/docs/layout/grid.html +++ b/docs/layout/grid.html @@ -31,7 +31,7 @@ </div> <div class="docs-sidebar off-canvas-sidebar" id="sidebar"> <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework"> - <h2>SPECTRE</h2></a> + <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a> </div> <div class="docs-nav"> <div class="accordion-container"> @@ -64,7 +64,7 @@ </li> <li class="menu-item"><a href="../elements/forms.html">Forms</a> </li> - <li class="menu-item"><a href="../elements/icons.html">Icons</a> + <li class="menu-item"><a href="../elements/icons.html">Icons.css</a> </li> <li class="menu-item"><a href="../elements/labels.html">Labels</a> </li> @@ -217,37 +217,37 @@ <div class="bg-primary text-secondary docs-block"></div> </div> <div class="column"> - <div class="bg-primary text-secondary docs-block"></div> + <div class="bg-secondary text-primary docs-block"></div> </div> <div class="column"> <div class="bg-primary text-secondary docs-block"></div> </div> <div class="column"> - <div class="bg-primary text-secondary docs-block"></div> + <div class="bg-secondary text-primar docs-block"></div> </div> <div class="column"> <div class="bg-primary text-secondary docs-block"></div> </div> <div class="column"> - <div class="bg-primary text-secondary docs-block"></div> + <div class="bg-secondary text-primar docs-block"></div> </div> <div class="column"> <div class="bg-primary text-secondary docs-block"></div> </div> <div class="column"> - <div class="bg-primary text-secondary docs-block"></div> + <div class="bg-secondary text-primar docs-block"></div> </div> <div class="column"> <div class="bg-primary text-secondary docs-block"></div> </div> <div class="column"> - <div class="bg-primary text-secondary docs-block"></div> + <div class="bg-secondary text-primar docs-block"></div> </div> <div class="column"> <div class="bg-primary text-secondary docs-block"></div> </div> <div class="column"> - <div class="bg-primary text-secondary docs-block"></div> + <div class="bg-secondary text-primar docs-block"></div> </div> </div> <div class="columns"> @@ -291,7 +291,7 @@ <div class="bg-gray docs-block">col-6 (gapless)</div> </div> <div class="column col-6"> - <div class="bg-gray docs-block">col-6 (gapless)</div> + <div class="bg-secondary text-primary docs-block">col-6 (gapless)</div> </div> </div> <pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- gapless columns --></span> @@ -315,54 +315,85 @@ <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-8"</span>></span>col-8<span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> </code></pre> - <h4 class="s-subtitle" id="grid-offset">Grid offset<a class="anchor" href="#grid-offset" aria-hidden="true">#</a></h4> + <h4 class="s-subtitle" id="grid-nesting">Grid nesting<a class="anchor" href="#grid-nesting" aria-hidden="true">#</a></h4> + <p>To nest grids, add the new <code>columns</code> and <code>column</code> structure within an existing column.</p> + <div class="docs-demo columns"> + <div class="column col-6"> + <div class="bg-gray docs-block">col-6</div> + <div class="columns"> + <div class="column col-6"> + <div class="bg-secondary text-primary docs-block">col-6</div> + </div> + <div class="column col-6"> + <div class="bg-secondary text-primary docs-block">col-6</div> + </div> + </div> + </div> + <div class="column col-6"> + <div class="bg-gray docs-block">col-6</div> + </div> + </div> + <pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- grid nesting example --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-6"</span>></span>col-6 + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-6"</span>></span>col-6<span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-6"</span>></span>col-6<span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-6"</span>></span>col-6<span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"></<span class="hljs-name">div</span>></span> +</code></pre> + <h4 class="s-subtitle" id="grid-offset">Column offset<a class="anchor" href="#grid-offset" aria-hidden="true">#</a></h4> <p> The Flexbox grid provides margin auto utilities to set offset. There are <code>col-mx-auto</code>, <code>col-ml-auto</code> and <code>col-mr-auto</code> to set margins between columns without using empty columns. </p> - <div class="columns"> + <div class="columns text-center"> <div class="column col-2"> <div class="bg-gray docs-block">col-2</div> </div> <div class="column col-4 col-mx-auto"> - <div class="bg-gray docs-block">col-4 col-mx-auto</div> + <div class="bg-secondary text-primary docs-block">col-4 col-mx-auto</div> </div> </div> - <div class="columns"> + <div class="columns text-center"> <div class="column col-2"> <div class="bg-gray docs-block">col-2</div> </div> <div class="column col-4 col-ml-auto"> - <div class="bg-gray docs-block">col-4 col-ml-auto</div> + <div class="bg-secondary text-primary docs-block">col-4 col-ml-auto</div> </div> </div> - <div class="columns"> + <div class="columns text-center"> <div class="column col-4 col-ml-auto"> - <div class="bg-gray docs-block">col-4 col-ml-auto</div> + <div class="bg-secondary text-primary docs-block">col-4 col-ml-auto</div> </div> <div class="column col-2"> <div class="bg-gray docs-block">col-2</div> </div> </div> - <div class="columns"> + <div class="columns text-center"> <div class="column col-4 col-mx-auto"> - <div class="bg-gray docs-block">col-4 col-mx-auto</div> + <div class="bg-secondary text-primary docs-block">col-4 col-mx-auto</div> </div> <div class="column col-2"> <div class="bg-gray docs-block">col-2</div> </div> </div> - <div class="columns"> + <div class="columns text-center"> <div class="column col-4 col-mr-auto"> - <div class="bg-gray docs-block">col-4 col-mr-auto</div> + <div class="bg-secondary text-primary docs-block">col-4 col-mr-auto</div> </div> <div class="column col-2"> <div class="bg-gray docs-block">col-2</div> </div> </div> - <div class="columns"> + <div class="columns text-center"> <div class="column col-4 col-mx-auto"> - <div class="bg-gray docs-block">col-4 col-mx-auto</div> + <div class="bg-secondary text-primary docs-block">col-4 col-mx-auto</div> </div> </div> <pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- grid offset example --></span> @@ -373,34 +404,38 @@ <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> </code></pre> - <h4 class="s-subtitle" id="grid-nesting">Grid nesting<a class="anchor" href="#grid-nesting" aria-hidden="true">#</a></h4> - <p>To nest grids, add the new <code>columns</code> and <code>column</code> structure within an existing column.</p> - <div class="docs-demo columns"> - <div class="column col-6"> - <div class="bg-gray docs-block">col-6</div> - <div class="columns"> - <div class="column col-6"> - <div class="bg-primary docs-block">col-6</div> - </div> - <div class="column col-6"> - <div class="bg-primary docs-block">col-6</div> - </div> - </div> + <h4 class="s-subtitle" id="column-auto">Auto width column<a class="anchor" href="#column-auto" aria-hidden="true">#</a></h4> + <p>You can add the <code>col-auto</code> class to the <code>column</code> to have auto width columns. + There are <code>col-xl-auto</code>, <code>col-lg-auto</code>, <code>col-md-auto</code>, <code>col-sm-auto</code> and <code>col-xs-auto</code> to set auto width in different viewport sizes. + </p> + <div class="columns"> + <div class="column col-auto"> + <div class="bg-secondary text-primary docs-block">col-auto</div> </div> - <div class="column col-6"> - <div class="bg-gray docs-block">col-6</div> + <div class="column"> + <div class="bg-gray docs-block">col</div> </div> </div> - <pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- grid nesting example --></span> + <div class="columns"> + <div class="column col-lg-auto col-6"> + <div class="bg-secondary text-primary docs-block">col-lg-auto</div> + </div> + <div class="column"> + <div class="bg-gray docs-block">col</div> + </div> + </div> + <pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- auto width column example --></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-6"</span>></span>col-6 - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-6"</span>></span>col-6<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-6"</span>></span>col-6<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-6"</span>></span>col-6<span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-auto"</span>></span>col-auto<span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column"</span>></span>col<span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"></<span class="hljs-name">div</span>></span> + +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-lg-auto col-6"</span>></span>col-lg-auto<span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column"</span>></span>col<span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> </code></pre> @@ -409,7 +444,7 @@ </div> </div> <div class="docs-footer container grid-lg" id="copyright"> - <p><a href="getting-started.html" target="_blank">Documents</a> · <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · Version <span class="version"></span></p> + <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p> <p>Designed and built with <span class="text-error">♥</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p> </div> </div> diff --git a/docs/layout/hero.html b/docs/layout/hero.html index 995876c..b749778 100644 --- a/docs/layout/hero.html +++ b/docs/layout/hero.html @@ -31,7 +31,7 @@ </div> <div class="docs-sidebar off-canvas-sidebar" id="sidebar"> <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework"> - <h2>SPECTRE</h2></a> + <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a> </div> <div class="docs-nav"> <div class="accordion-container"> @@ -64,7 +64,7 @@ </li> <li class="menu-item"><a href="../elements/forms.html">Forms</a> </li> - <li class="menu-item"><a href="../elements/icons.html">Icons</a> + <li class="menu-item"><a href="../elements/icons.html">Icons.css</a> </li> <li class="menu-item"><a href="../elements/labels.html">Labels</a> </li> @@ -249,7 +249,7 @@ </div> </div> <div class="docs-footer container grid-lg" id="copyright"> - <p><a href="getting-started.html" target="_blank">Documents</a> · <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · Version <span class="version"></span></p> + <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p> <p>Designed and built with <span class="text-error">♥</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p> </div> </div> diff --git a/docs/layout/navbar.html b/docs/layout/navbar.html index 0f00a00..136ebf2 100644 --- a/docs/layout/navbar.html +++ b/docs/layout/navbar.html @@ -31,7 +31,7 @@ </div> <div class="docs-sidebar off-canvas-sidebar" id="sidebar"> <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework"> - <h2>SPECTRE</h2></a> + <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a> </div> <div class="docs-nav"> <div class="accordion-container"> @@ -64,7 +64,7 @@ </li> <li class="menu-item"><a href="../elements/forms.html">Forms</a> </li> - <li class="menu-item"><a href="../elements/icons.html">Icons</a> + <li class="menu-item"><a href="../elements/icons.html">Icons.css</a> </li> <li class="menu-item"><a href="../elements/labels.html">Labels</a> </li> @@ -272,7 +272,7 @@ </div> </div> <div class="docs-footer container grid-lg" id="copyright"> - <p><a href="getting-started.html" target="_blank">Documents</a> · <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · Version <span class="version"></span></p> + <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p> <p>Designed and built with <span class="text-error">♥</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p> </div> </div> diff --git a/docs/layout/responsive.html b/docs/layout/responsive.html index 0ba690f..056f201 100644 --- a/docs/layout/responsive.html +++ b/docs/layout/responsive.html @@ -31,7 +31,7 @@ </div> <div class="docs-sidebar off-canvas-sidebar" id="sidebar"> <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework"> - <h2>SPECTRE</h2></a> + <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a> </div> <div class="docs-nav"> <div class="accordion-container"> @@ -64,7 +64,7 @@ </li> <li class="menu-item"><a href="../elements/forms.html">Forms</a> </li> - <li class="menu-item"><a href="../elements/icons.html">Icons</a> + <li class="menu-item"><a href="../elements/icons.html">Icons.css</a> </li> <li class="menu-item"><a href="../elements/labels.html">Labels</a> </li> @@ -499,6 +499,7 @@ <li><code>show-lg</code> shows elements when the window width is smaller than or equal to <strong>960px</strong>.</li> <li><code>show-xl</code> shows elements when the window width is smaller than or equal to <strong>1280px</strong>.</li> </ul> + <h4 class="s-subtitle" id="responsive-resizer">Responsive Resizer<a class="anchor" href="#responsive-resizer" aria-hidden="true">#</a></h4> <p> Spectre also has a responsive web test tool Responsive Resizer. You can clone the <a href="https://github.com/picturepan2/responsive-resizer" target="_blank">GitHub Repo</a> to use it locally or use it online. @@ -509,7 +510,7 @@ </div> </div> <div class="docs-footer container grid-lg" id="copyright"> - <p><a href="getting-started.html" target="_blank">Documents</a> · <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · Version <span class="version"></span></p> + <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p> <p>Designed and built with <span class="text-error">♥</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p> </div> </div> |