diff options
Completely rewritten Docs experience
1 files changed, 41 insertions, 58 deletions
| -rw-r--r-- | docs/experimentals.html | 99 |
diff --git a/docs/experimentals.html b/docs/experimentals.html index 84c9365..50a7f48 100644 --- a/docs/experimentals.html +++ b/docs/experimentals.html @@ -13,24 +13,19 @@ <link rel="stylesheet" href="css/docs.css" /> </head> <body> - <div class="section section-header bg-gray"> - <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 /> @@ -40,19 +35,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> @@ -253,18 +248,18 @@ </div> <a href="#sidebar-close" id="sidebar-close" class="docs-nav-clear"></a> - <div class="docs-content column col-9 col-sm-12"> + <div class="s-content"> <div id="experimentals" class="container"> - <h3 class="text-center"><a href="#experimentals" class="anchor" aria-hidden="true">#</a>Experimentals</h3> + <h3 class="s-title"><a href="#experimentals" class="anchor" aria-hidden="true">#</a>Experimentals</h3> <div class="notes"> <p>The Experimentals include experimental elements and features, mostly are not yet ready for wide use. These elements and components are limited inside <code>spectre-exp.less</code> before browsers fully support them. Sometimes, there are some specific browsers targeted components.</p> </div> </div> <div id="calendars" class="container"> - <h3 class="text-center"><a href="#calendars" class="anchor" aria-hidden="true">#</a>Calendars</h3> + <h3 class="s-title"><a href="#calendars" class="anchor" aria-hidden="true">#</a>Calendars</h3> <div class="notes"> - <p><strong>Calendars</strong> are designed for date or date range picker and events display. It is made with flex layout.</p> + <p>Calendars are designed for date or date range picker and events display. It is made with flex layout.</p> </div> <div class="columns"> <div class="column col-4 col-md-12"> @@ -330,7 +325,7 @@ </div> </div> - <h4 class="text-center">Calendars large</h4> + <h4 class="s-subtitle">Calendars large</h4> <div class="columns"> <div class="column col-12"> <div class="calendar calendar-lg"> @@ -425,9 +420,9 @@ </div> <div id="carousels" class="container"> - <h3 class="text-center"><a href="#carousels" class="anchor" aria-hidden="true">#</a>Carousels</h3> + <h3 class="s-title"><a href="#carousels" class="anchor" aria-hidden="true">#</a>Carousels</h3> <div class="notes"> - <p><strong>Carousels</strong> are slideshows for cycling images. It is built in pure CSS.</p> + <p>Carousels are slideshows for cycling images. It is built in pure CSS.</p> </div> <div class="columns"> <div class="column col-12"> @@ -490,9 +485,9 @@ </div> <div id="comparison" class="container"> - <h3 class="text-center"><a href="#comparison" class="anchor" aria-hidden="true">#</a>Comparison Sliders</h3> + <h3 class="s-title"><a href="#comparison" class="anchor" aria-hidden="true">#</a>Comparison Sliders</h3> <div class="notes"> - <p><strong>Comparison Sliders</strong> are sliders for comparing two images. It is built in pure CSS.</p> + <p>Comparison Sliders are sliders for comparing two images. It is built in pure CSS.</p> </div> <div class="columns"> <div class="column col-12"> @@ -528,9 +523,9 @@ </div> <div id="filters" class="container"> - <h3 class="text-center"><a href="#filters" class="anchor" aria-hidden="true">#</a>Filters</h3> + <h3 class="s-title"><a href="#filters" class="anchor" aria-hidden="true">#</a>Filters</h3> <div class="notes"> - <p><strong>Filters</strong> are CSS only content filters.</p> + <p>Filters are CSS only content filters.</p> </div> <div class="columns"> <div class="column col-12"> @@ -653,9 +648,9 @@ </div> <div id="meters" class="container"> - <h3 class="text-center"><a href="#meters" class="anchor" aria-hidden="true">#</a>Meters</h3> + <h3 class="s-title"><a href="#meters" class="anchor" aria-hidden="true">#</a>Meters</h3> <div class="notes"> - <p><strong>Meters</strong> represent the value within the known range.</p> + <p>Meters represent the value within the known range.</p> </div> <div class="columns"> <div class="column col-3 col-xs-12"> @@ -688,9 +683,9 @@ </div> <div id="parallax" class="container"> - <h3 class="text-center"><a href="#parallax" class="anchor" aria-hidden="true">#</a>Parallax</h3> + <h3 class="s-title"><a href="#parallax" class="anchor" aria-hidden="true">#</a>Parallax</h3> <div class="notes"> - <p>The <strong>Parallax</strong> acts like Apple TV/tvOS hover parallax effect. It is built in pure CSS.</p> + <p>The Parallax acts like Apple TV/tvOS hover parallax effect. It is built in pure CSS.</p> </div> <div class="columns"> <div class="column col-12"> @@ -731,9 +726,9 @@ </div> <div id="progress" class="container"> - <h3 class="text-center"><a href="#progress" class="anchor" aria-hidden="true">#</a>Progress</h3> + <h3 class="s-title"><a href="#progress" class="anchor" aria-hidden="true">#</a>Progress</h3> <div class="notes"> - <p>The <strong>Progress</strong> indicates the progress completion of a task.</p> + <p>The Progress indicates the progress completion of a task.</p> </div> <div class="columns"> <div class="column col-3 col-xs-12"> @@ -758,9 +753,9 @@ </div> <div id="sliders" class="container"> - <h3 class="text-center"><a href="#sliders" class="anchor" aria-hidden="true">#</a>Sliders</h3> + <h3 class="s-title"><a href="#sliders" class="anchor" aria-hidden="true">#</a>Sliders</h3> <div class="notes"> - <p><strong>Sliders</strong> are for selecting values from ranges.</p> + <p>Sliders are for selecting values from ranges.</p> </div> <div class="columns"> <div class="column col-6 col-xs-12"> @@ -778,9 +773,9 @@ </div> <div id="timelines" class="container"> - <h3 class="text-center"><a href="#timelines" class="anchor" aria-hidden="true">#</a>Timelines</h3> + <h3 class="s-title"><a href="#timelines" class="anchor" aria-hidden="true">#</a>Timelines</h3> <div class="notes"> - <p><strong>Timelines</strong> are ordered sequences of activities.</p> + <p>Timelines are ordered sequences of activities.</p> </div> <div class="columns"> <div class="column col-9 col-sm-12"> @@ -871,27 +866,15 @@ </div> - <div class="container"> - <div class="divider"></div> - <ul class="pagination"> - <li class="page-item page-prev"> - <a href="utilities.html"> - <p class="page-item-subtitle">Previous</p> - <h4 class="page-item-title">Utilities</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), |