diff options
Completely rewritten Docs experience
1 files changed, 55 insertions, 77 deletions
| -rw-r--r-- | docs/layout.html | 132 |
diff --git a/docs/layout.html b/docs/layout.html index 1b224b5..888b093 100644 --- a/docs/layout.html +++ b/docs/layout.html @@ -12,24 +12,19 @@ <link rel="stylesheet" href="css/docs.css" /> </head> <body> - <div class="section section-header bg-secondary"> - <div class="grid-header container grid-960"> - <nav class="navbar"> - <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> + <div class="container"> + <div class="columns"> + <div id="sidebar" class="s-sidebar"> + <div class="s-brand"> + <a href="index.html" class="s-logo"> + <img src="img/spectre-logo.svg" alt="Spectre.css" /> + <h2>Spectre.css</h2> + </a> </div> - <div class="navbar-section"> + <div class="float-btn"> <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a> </div> - </nav> - </div> - </div> - - <div class="container grid-960"> - <div class="columns"> - <div id="sidebar" class="docs-sidebar column col-sm-12"> - <div class="docs-nav"> + <div class="s-nav"> <div class="accordion"> <div class="accordion-item"> <input type="checkbox" id="docs-accordion-1" name="docs-accordion-checkbox" hidden /> @@ -39,19 +34,19 @@ <div class="accordion-body"> <ul class="menu menu-nav"> <li class="menu-item"> - <a href="index.html#introduction">Introduction</a> + <a href="getting-started.html#introduction">Introduction</a> </li> <li class="menu-item"> - <a href="index.html#installation">Installation</a> + <a href="getting-started.html#installation">Installation</a> </li> <li class="menu-item"> - <a href="index.html#compiling">Custom version</a> + <a href="getting-started.html#compiling">Custom version</a> </li> <li class="menu-item"> - <a href="index.html#browsers">Browser support</a> + <a href="getting-started.html#browsers">Browser support</a> </li> <li class="menu-item"> - <a href="index.html#whatsnew">What's new</a> + <a href="getting-started.html#whatsnew">What's new</a> </li> </ul> </div> @@ -252,11 +247,11 @@ </div> <a href="#sidebar-close" id="sidebar-close" class="docs-nav-clear"></a> - <div class="docs-content column col-sm-12"> + <div class="s-content"> <div id="grid" class="container"> - <h3 class="text-center"><a href="#grid" class="anchor" aria-hidden="true">#</a>Flexbox grid</h3> + <h3 class="s-title"><a href="#grid" class="anchor" aria-hidden="true">#</a>Flexbox grid</h3> <div class="notes"> - <p><strong>Layout</strong> includes flexbox based responsive grid system with 12 columns. </p> + <p>Layout includes flexbox based responsive grid system with 12 columns. </p> </div> <div class="columns"> <div class="column"> @@ -299,22 +294,22 @@ <div class="columns"> <div class="column col-12"> - <div class="bg-secondary text-primary docs-block">col-12 (100%)</div> + <div class="bg-gray docs-block">col-12 (100%)</div> </div> </div> <div class="columns"> <div class="column col-9"> - <div class="bg-secondary text-primary docs-block">col-9 (75%)</div> + <div class="bg-gray docs-block">col-9 (75%)</div> </div> </div> <div class="columns"> <div class="column col-6"> - <div class="bg-secondary text-primary docs-block">col-6 (50%)</div> + <div class="bg-gray docs-block">col-6 (50%)</div> </div> </div> <div class="columns"> <div class="column col-3"> - <div class="bg-secondary text-primary docs-block">col-3 (25%)</div> + <div class="bg-gray docs-block">col-3 (25%)</div> </div> </div> @@ -325,10 +320,10 @@ <div class="columns col-gapless"> <div class="column col-6"> - <div class="bg-secondary text-primary docs-block">col-6 (gapless)</div> + <div class="bg-gray docs-block">col-6 (gapless)</div> </div> <div class="column col-6"> - <div class="bg-secondary text-primary docs-block">col-6 (gapless)</div> + <div class="bg-gray docs-block">col-6 (gapless)</div> </div> </div> @@ -338,10 +333,10 @@ <div class="columns col-oneline"> <div class="column col-8"> - <div class="bg-secondary text-primary docs-block">col-8</div> + <div class="bg-gray docs-block">col-8</div> </div> <div class="column col-8"> - <div class="bg-secondary text-primary docs-block">col-8</div> + <div class="bg-gray docs-block">col-8</div> </div> </div> @@ -364,28 +359,28 @@ </div> <div id="responsive" class="container"> - <h3 class="text-center"><a href="#responsive" class="anchor" aria-hidden="true">#</a>Responsive grid</h3> + <h3 class="s-title"><a href="#responsive" class="anchor" aria-hidden="true">#</a>Responsive grid</h3> <div class="notes"> <p>Spectre provides a neat responsive layout grid system and responsive visibility utilities. </p> </div> <div class="columns"> <div class="column col-lg-6"> - <div class="bg-secondary text-primary docs-block">col-lg-6</div> + <div class="bg-gray docs-block">col-lg-6</div> </div> </div> <div class="columns"> <div class="column col-md-6"> - <div class="bg-secondary text-primary docs-block">col-md-6</div> + <div class="bg-gray docs-block">col-md-6</div> </div> </div> <div class="columns"> <div class="column col-sm-6"> - <div class="bg-secondary text-primary docs-block">col-sm-6</div> + <div class="bg-gray docs-block">col-sm-6</div> </div> </div> <div class="columns"> <div class="column col-xs-6"> - <div class="bg-secondary text-primary docs-block">col-xs-6</div> + <div class="bg-gray docs-block">col-xs-6</div> </div> </div> @@ -410,7 +405,7 @@ <<span class="tag">/div</span>> </code></pre> - <h4 class="text-center">Responsive container</h4> + <h4 class="s-subtitle">Responsive container</h4> <div class="notes"> <p>The responsive layout also provides fixed-width containers. Use <code>grid-480</code>, <code>grid-960</code> or <code>grid-1280</code> to <code>container</code> for a fixed-width container with the specific max-width.</p> </div> @@ -423,7 +418,7 @@ <<span class="tag">/div</span>> </code></pre> - <h4 class="text-center">Responsive visibility</h4> + <h4 class="s-subtitle">Responsive visibility</h4> <div class="notes"> <p>The responsive visibility utilities help show and hide elements on specific viewport sizes. </p> </div> @@ -563,9 +558,9 @@ </div> <div id="navbar" class="container"> - <h3 class="text-center"><a href="#navbar" class="anchor" aria-hidden="true">#</a>Navbar</h3> + <h3 class="s-title"><a href="#navbar" class="anchor" aria-hidden="true">#</a>Navbar</h3> <div class="notes"> - <p><strong>Navbar</strong> is a layout container that appears in the header of apps and websites. </p> + <p>Navbar is a layout container that appears in the header of apps and websites. </p> </div> <div class="columns"> <div class="column"> @@ -604,6 +599,10 @@ <<span class="tag">/header</span>> </code></pre> + <div class="notes"> + <p>You can use <code>navbar-center</code> class to have a centered section.</p> + </div> + <div class="columns"> <div class="column col-12"> <div class="navbar"> @@ -612,7 +611,7 @@ <a href="#navbar" class="btn btn-link">Examples</a> </div> <div class="navbar-center"> - <figure class="avatar" data-initial="S" style="background-color: #5764c6;"></figure> + <img src="img/spectre-logo.svg" alt="Spectre.css" /> </div> <div class="navbar-section"> <a href="https://twitter.com/spectrecss" class="btn btn-link">Twitter</a> @@ -621,9 +620,6 @@ </div> </div> </div> - <div class="notes"> - <p>You can use <code>navbar-center</code> class to have a centered section.</p> - </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>> @@ -644,9 +640,9 @@ </div> <div id="panels" class="container"> - <h3 class="text-center"><a href="#panels" class="anchor" aria-hidden="true">#</a>Panels</h3> + <h3 class="s-title"><a href="#panels" class="anchor" aria-hidden="true">#</a>Panels</h3> <div class="notes"> - <p><strong>Panels</strong> are flexible view container layout with auto-expand content section.</p> + <p>Panels are flexible view container layout with auto-expand content section.</p> </div> <div class="columns"> <div class="column col-6 col-xs-12"> @@ -655,7 +651,7 @@ <figure class="avatar avatar-lg"> <img src="img/avatar-2.png" alt="Avatar" /> </figure> - <div class="panel-title mt-10">Bruce Banner</div> + <div class="panel-title h5 mt-10">Bruce Banner</div> <div class="panel-subtitle">THE HULK</div> </div> <nav class="panel-nav"> @@ -714,7 +710,7 @@ <div class="column col-6 col-xs-12"> <div class="panel"> <div class="panel-header"> - <div class="panel-title">Comments</div> + <div class="panel-title h6">Comments</div> </div> <div class="panel-body"> <div class="tile"> @@ -805,9 +801,9 @@ </div> <div id="empty" class="container"> - <h3 class="text-center"><a href="#empty" class="anchor" aria-hidden="true">#</a>Empty states / blank slates</h3> + <h3 class="s-title"><a href="#empty" class="anchor" aria-hidden="true">#</a>Empty states / blank slates</h3> <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> + <p>Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens.</p> </div> <div class="columns"> <div class="column col-12"> @@ -815,7 +811,7 @@ <div class="empty-icon"> <i class="icon icon-message"></i> </div> - <h4 class="empty-title">You have no new messages</h4> + <p class="empty-title h5">You have no new messages</p> <p class="empty-subtitle">Click the button to start a conversation</p> <div class="empty-action"> <button class="btn btn-primary">Send a message</button> @@ -827,7 +823,7 @@ <div class="empty-icon"> <i class="icon icon-mail"></i> </div> - <h4 class="empty-title">You've successfully signed up</h4> + <p class="empty-title h5">You've successfully signed up</p> <p class="empty-subtitle">Click the button to invite your friends</p> <div class="empty-action"> <button class="btn btn-primary">Invite your friends</button> @@ -842,7 +838,7 @@ <div class="empty-icon"> <i class="icon icon-people"></i> </div> - <h4 class="empty-title">You are not following anyone</h4> + <p class="empty-title h5">You are not following anyone</p> <p class="empty-subtitle">Start to meet new friends</p> <div class="empty-action input-group input-inline"> <input type="text" class="form-input" placeholder="" /> @@ -861,7 +857,7 @@ <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"empty-icon"</span>> <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-people"</span>><<span class="tag">/i</span>> <<span class="tag">/div</span>> - <<span class="tag">h4</span> <span class="atn">class</span>=<span class="atv">"empty-title"</span>>You have no new messages<<span class="tag">/h4</span>> + <<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">"empty-title h5"</span>>You have no new messages<<span class="tag">/p</span>> <<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">"empty-subtitle"</span>>Click the button to start a conversation.<<span class="tag">/p</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"empty-action"</span>> <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary"</span>>Send a message<<span class="tag">/button</span>> @@ -871,33 +867,15 @@ </div> - <div class="container"> - <div class="divider"></div> - <ul class="pagination"> - <li class="page-item page-prev"> - <a href="elements.html"> - <p class="page-item-subtitle">Previous</p> - <h4 class="page-item-title">Elements</h4> - </a> - </li> - <li class="page-item page-next"> - <a href="components.html"> - <p class="page-item-subtitle">Next</p> - <h4 class="page-item-title">Components</h4> - </a> - </li> - </ul> - </div> + <footer class="s-footer"> + <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</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>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> + </footer> + </div> </div> </div> - <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> | <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</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> - </div> - </footer> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), |