diff options
| author | Yan Zhu <picturepan2@hotmail.com> | 2017-08-03 14:08:54 +0300 |
|---|---|---|
| committer | Yan Zhu <picturepan2@hotmail.com> | 2017-08-03 14:08:54 +0300 |
| commit | a2f1864da01e76c59d682b897398b100eb3bc25a (patch) | |
| tree | 102afeb3d4caae3d2560f7c4523890a3bbe15c58 /docs/layout.html | |
| parent | 706c3577c517631e8460b58afe975e6f6abe2c79 (diff) | |
Update the Docs HTML structure
Diffstat (limited to 'docs/layout.html')
| -rw-r--r-- | docs/layout.html | 146 |
1 files changed, 73 insertions, 73 deletions
diff --git a/docs/layout.html b/docs/layout.html index c910811..c90809a 100644 --- a/docs/layout.html +++ b/docs/layout.html @@ -12,22 +12,22 @@ <link rel="stylesheet" href="css/docs.css" /> </head> <body> - <section class="section section-header bg-secondary"> - <section class="grid-header container grid-960"> + <div class="section section-header bg-secondary"> + <div class="grid-header container grid-960"> <nav class="navbar"> - <section class="navbar-section"> + <div class="navbar-section"> <a href="#sidebar" class="btn btn-lg btn-link btn-action show-sm"><i class="icon icon-menu"></i></a> <a href="index.html" class="navbar-brand">Spectre.css Docs</a> - </section> - <section class="navbar-section"> + </div> + <div class="navbar-section"> <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a> - </section> + </div> </nav> - </section> - </section> + </div> + </div> - <section class="container grid-960"> - <section class="columns"> + <div class="container grid-960"> + <div class="columns"> <div id="sidebar" class="docs-sidebar column col-sm-12"> <div class="docs-nav"> <div class="accordion"> @@ -253,11 +253,11 @@ <a href="#sidebar-close" id="sidebar-close" class="docs-nav-clear"></a> <div class="docs-content column col-sm-12"> - <section id="grid" class="container"> + <div id="grid" class="container"> <header class="text-center"><h3><a href="#grid" class="anchor" aria-hidden="true">#</a>Flexbox grid</h3></header> - <section class="notes"> + <div class="notes"> <p><strong>Layout</strong> includes flexbox based responsive grid system with 12 columns. </p> - </section> + </div> <div class="columns"> <div class="column"> <div class="bg-primary text-secondary docs-block"></div> @@ -318,10 +318,10 @@ </div> </div> - <section class="notes"> + <div class="notes"> <p>Add the <code>columns</code> class to a container with the <code>container</code> class. And add any element you want with the <code>column</code> class inside the container. These columns will take up the space equally. You can specific the width of each column by adding class <code>col-[1-12]</code>.</p> <p>And you can add the <code>col-gapless</code> class to have gapless columns.</p> - </section> + </div> <div class="columns col-gapless"> <div class="column col-6"> @@ -332,9 +332,9 @@ </div> </div> - <section class="notes"> + <div class="notes"> <p>By default, Spectre grid has multi-line flexbox enabled. You can add the <code>col-oneline</code> class to <code>columns</code> to make all its child columns positioned in the same single row.</p> - </section> + </div> <div class="columns col-oneline"> <div class="column col-8"> @@ -361,9 +361,9 @@ <<span class="tag">/div</span>> </code></pre> - </section> + </div> - <section id="responsive" class="container"> + <div id="responsive" class="container"> <header class="text-center"><h3><a href="#responsive" class="anchor" aria-hidden="true">#</a>Responsive grid</h3></header> <div class="notes"> <p>Spectre provides a neat responsive layout grid system and responsive visibility utilities. </p> @@ -389,7 +389,7 @@ </div> </div> - <section class="notes"> + <div class="notes"> <p>There are <code>col-xs-[1-12]</code>, <code>col-sm-[1-12]</code>, <code>col-md-[1-12]</code>, <code>col-lg-[1-12]</code> and <code>col-xl-[1-12]</code> available for flexible grid across mobile, tablet and desktop viewport usage.</p> <ul> <li><code>col-xs-[1-12]</code> apply to window width smaller than or equal to <strong>480px</strong>. </li> @@ -398,7 +398,7 @@ <li><code>col-lg-[1-12]</code> apply to window width smaller than or equal to <strong>960px</strong>. </li> <li><code>col-xl-[1-12]</code> apply to window width smaller than or equal to <strong>1280px</strong>. </li> </ul> - </section> + </div> <!-- layout example --> <pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"container"</span>> @@ -482,7 +482,7 @@ </tbody> </table> - <section class="notes"> + <div class="notes"> <p>For hiding elements on specific viewport sizes, there are classes <code>hide-xs</code>, <code>hide-sm</code>, <code>hide-md</code>, <code>hide-lg</code> and <code>hide-xl</code> available.</p> <ul> <li><code>hide-xs</code> hides elements when the window width is smaller than or equal to <strong>480px</strong>. </li> @@ -491,7 +491,7 @@ <li><code>hide-lg</code> hides elements when the window width is smaller than or equal to <strong>960px</strong>. </li> <li><code>hide-xl</code> hides elements when the window width is smaller than or equal to <strong>1280px</strong>. </li> </ul> - </section> + </div> <table class="docs-table table text-center"> <thead> @@ -548,7 +548,7 @@ </tbody> </table> - <section class="notes"> + <div class="notes"> <p>For showing elements on specific viewport sizes, there are classes <code>show-xs</code>, <code>show-sm</code>, <code>show-md</code>, <code>show-lg</code> and <code>show-xl</code> available.</p> <ul> <li><code>show-xs</code> shows elements when the window width is smaller than or equal to <strong>480px</strong>. </li> @@ -559,34 +559,34 @@ </ul> <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.</p> <p><a href="https://picturepan2.github.io/responsive-resizer/" class="btn btn-primary" target="_blank">Responsive Resizer</a></p> - </section> - </section> + </div> + </div> - <section id="navbar" class="container"> + <div id="navbar" class="container"> <header class="text-center"><h3><a href="#navbar" class="anchor" aria-hidden="true">#</a>Navbar</h3></header> - <section class="notes"> + <div class="notes"> <p><strong>Navbar</strong> is a layout container that appears in the header of apps and websites. </p> - </section> + </div> <div class="columns"> <div class="column"> - <section class="navbar"> - <section class="navbar-section"> + <div class="navbar"> + <div class="navbar-section"> <a href="#navbar" class="navbar-brand mr-10">Spectre.css</a> <a href="#navbar" class="btn btn-link">Docs</a> <a href="https://github.com/picturepan2/spectre" class="btn btn-link">GitHub</a> - </section> - <section class="navbar-section"> + </div> + <div class="navbar-section"> <div class="input-group input-inline"> <input class="form-input" type="text" placeholder="search" /> <button class="btn btn-primary input-group-btn">Search</button> </div> - </section> - </section> + </div> + </div> </div> </div> - <section class="notes"> + <div class="notes"> <p>The navbar component can include logo brand, nav links and buttons, search box or any combination of those elements. Each section with the <code>navbar-section</code> class will be evenly distributed in the container.</p> - </section> + </div> <!-- navbar example --> <pre class="code" data-lang="HTML"><code><<span class="tag">header</span> <span class="atn">class</span>=<span class="atv">"navbar"</span>> @@ -606,24 +606,24 @@ <div class="columns"> <div class="column col-12"> - <section class="navbar"> - <section class="navbar-section"> + <div class="navbar"> + <div class="navbar-section"> <a href="#navbar" class="btn btn-link">Docs</a> <a href="#navbar" class="btn btn-link">Examples</a> - </section> - <section class="navbar-center"> + </div> + <div class="navbar-center"> <figure class="avatar" data-initial="S" style="background-color: #5764c6;"></figure> - </section> - <section class="navbar-section"> + </div> + <div class="navbar-section"> <a href="https://twitter.com/spectrecss" class="btn btn-link">Twitter</a> <a href="https://github.com/picturepan2/spectre" class="btn btn-link">GitHub</a> - </section> - </section> + </div> + </div> </div> </div> - <section class="notes"> + <div class="notes"> <p>You can use <code>navbar-center</code> class to have a centered section.</p> - </section> + </div> <!-- navbar example --> <pre class="code" data-lang="HTML"><code><<span class="tag">header</span> <span class="atn">class</span>=<span class="atv">"navbar"</span>> @@ -641,13 +641,13 @@ <<span class="tag">/header</span>> </code></pre> - </section> + </div> - <section id="panels" class="container"> + <div id="panels" class="container"> <header class="text-center"><h3><a href="#panels" class="anchor" aria-hidden="true">#</a>Panels</h3></header> - <section class="notes"> + <div class="notes"> <p><strong>Panels</strong> are flexible view container layout with auto-expand content section.</p> - </section> + </div> <div class="columns"> <div class="column col-6 col-xs-12"> <div class="panel"> @@ -781,9 +781,9 @@ </div> </div> - <section class="notes"> + <div class="notes"> <p>Add a container element with the <code>panel</code> class. And add child elements with the <code>panel-header</code>, <code>panel-nav</code>, <code>panel-body</code> and/or <code>panel-footer</code> class. The <code>panel-body</code> can be auto expanded and vertically scrollable. </p> - </section> + </div> <!-- panels example --> <pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"panel"</span>> @@ -802,16 +802,16 @@ <<span class="tag">/div</span>> </code></pre> - </section> + </div> - <section id="empty" class="container"> + <div id="empty" class="container"> <header class="text-center"><h3><a href="#empty" class="anchor" aria-hidden="true">#</a>Empty states / blank slates</h3></header> - <section class="notes"> + <div class="notes"> <p><strong>Empty states/blank slates</strong> are commonly used as placeholders for first time use, empty data and error screens.</p> - </section> + </div> <div class="columns"> <div class="column col-12"> - <section class="empty"> + <div class="empty"> <div class="empty-icon"> <i class="icon icon-message"></i> </div> @@ -820,10 +820,10 @@ <div class="empty-action"> <button class="btn btn-primary">Send a message</button> </div> - </section> + </div> </div> <div class="column col-12"> - <section class="empty"> + <div class="empty"> <div class="empty-icon"> <i class="icon icon-mail"></i> </div> @@ -835,10 +835,10 @@ <div class="empty-action"> <button class="btn btn-link">Skip</button> </div> - </section> + </div> </div> <div class="column col-12"> - <section class="empty"> + <div class="empty"> <div class="empty-icon"> <i class="icon icon-people"></i> </div> @@ -848,13 +848,13 @@ <input type="text" class="form-input" placeholder="" /> <button class="btn btn-primary input-group-btn">Search</button> </div> - </section> + </div> </div> </div> - <section class="notes"> + <div class="notes"> <p>An empty state component can include icons, messages (title and subtitle messages) and action buttons or any combination of those elements. Add <code>empty-icon</code>, <code>empty-title</code>, <code>empty-subtitle</code> or <code>empty-action</code> to the elements. HTML structure is exampled below. </p> - </section> + </div> <!-- empty states example --> <pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"empty"</span>> @@ -869,9 +869,9 @@ <<span class="tag">/div</span>> </code></pre> - </section> + </div> - <section class="container"> + <div class="container"> <div class="divider"></div> <ul class="pagination"> <li class="page-item page-prev"> @@ -887,18 +887,18 @@ </a> </li> </ul> - </section> + </div> </div> - </section> - </section> + </div> + </div> - <footer class="section section-footer bg-secondary"> - <section id="copyright" class="grid-footer container grid-960"> + <footer class="section section-footer bg-gray"> + <div id="copyright" class="grid-footer container grid-960"> <p> <a href="index.html#introduction" target="_blank">Documents</a> | <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</a> | <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> | Version <span class="version"></span> </p> <p>Designed and built with ♥ 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> - </section> + </div> </footer> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ |