diff options
Diffstat (limited to 'docs/experimentals.html')
| -rw-r--r-- | docs/experimentals.html | 116 |
1 files changed, 58 insertions, 58 deletions
diff --git a/docs/experimentals.html b/docs/experimentals.html index 1ae469e..c67d757 100644 --- a/docs/experimentals.html +++ b/docs/experimentals.html @@ -13,22 +13,22 @@ <link rel="stylesheet" href="css/docs.css" /> </head> <body> - <section class="section section-header bg-gray"> - <section class="grid-header container grid-960"> + <div class="section section-header bg-gray"> + <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"> @@ -254,18 +254,18 @@ <a href="#sidebar-close" id="sidebar-close" class="docs-nav-clear"></a> <div class="docs-content column col-9 col-sm-12"> - <section id="experimentals" class="container"> + <div id="experimentals" class="container"> <header class="text-center"><h3><a href="#experimentals" class="anchor" aria-hidden="true">#</a>Experimentals</h3></header> - <section class="notes"> + <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> - </section> - </section> + </div> + </div> - <section id="calendars" class="container"> + <div id="calendars" class="container"> <header class="text-center"><h3><a href="#calendars" class="anchor" aria-hidden="true">#</a>Calendars</h3></header> - <section class="notes"> + <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> - </section> + </div> <div class="columns"> <div class="column col-4 col-md-12"> <div class="calendar"> @@ -422,13 +422,13 @@ </div> </div> - </section> + </div> - <section id="carousels" class="container"> + <div id="carousels" class="container"> <header class="text-center"><h3><a href="#carousels" class="anchor" aria-hidden="true">#</a>Carousels</h3></header> - <section class="notes"> + <div class="notes"> <p><strong>Carousels</strong> are slideshows for cycling images. It is built in pure CSS.</p> - </section> + </div> <div class="columns"> <div class="column col-12"> <div class="carousel"> @@ -487,13 +487,13 @@ </div> </div> - </section> + </div> - <section id="comparison" class="container"> + <div id="comparison" class="container"> <header class="text-center"><h3><a href="#comparison" class="anchor" aria-hidden="true">#</a>Comparison Sliders</h3></header> - <section class="notes"> + <div class="notes"> <p><strong>Comparison Sliders</strong> are sliders for comparing two images. It is built in pure CSS.</p> - </section> + </div> <div class="columns"> <div class="column col-12"> <div class="comparison-slider"> @@ -525,13 +525,13 @@ <<span class="tag">/div</span>> </code></pre> - </section> + </div> - <section id="filters" class="container"> + <div id="filters" class="container"> <header class="text-center"><h3><a href="#filters" class="anchor" aria-hidden="true">#</a>Filters</h3></header> - <section class="notes"> + <div class="notes"> <p><strong>Filters</strong> are CSS only content filters.</p> - </section> + </div> <div class="columns"> <div class="column col-12"> <div class="filter"> @@ -650,13 +650,13 @@ </div> </div> - </section> + </div> - <section id="meters" class="container"> + <div id="meters" class="container"> <header class="text-center"><h3><a href="#meters" class="anchor" aria-hidden="true">#</a>Meters</h3></header> - <section class="notes"> + <div class="notes"> <p><strong>Meters</strong> represent the value within the known range.</p> - </section> + </div> <div class="columns"> <div class="column col-3 col-xs-12"> <meter class="meter" value="20" min="0" max="100"></meter> @@ -671,9 +671,9 @@ <meter class="meter" value="20" min="0" low="30" optimum="90" high="80" max="100"></meter> </div> </div> - <section class="notes"> + <div class="notes"> <p></p> - </section> + </div> <!-- meters example --> <pre class="code" data-lang="HTML"><code><span class="com"><!-- Meter is green when low < value < high --></span> @@ -685,13 +685,13 @@ <<span class="tag">meter</span> <span class="atn">class</span>=<span class="atv">"meter"</span> <span class="atn">value</span>=<span class="atv">"20"</span> <span class="atn">optimum</span>=<span class="atv">"90"</span> <span class="atn">min</span>=<span class="atv">"0"</span> <span class="atn">max</span>=<span class="atv">"100"</span> <span class="atn">low</span>=<span class="atv">"30"</span> <span class="atn">high</span>=<span class="atv">"80"</span>><<span class="tag">/meter</span>> </code></pre> - </section> + </div> - <section id="parallax" class="container"> + <div id="parallax" class="container"> <header class="text-center"><h3><a href="#parallax" class="anchor" aria-hidden="true">#</a>Parallax</h3></header> - <section class="notes"> + <div class="notes"> <p>The <strong>Parallax</strong> acts like Apple TV/tvOS hover parallax effect. It is built in pure CSS.</p> - </section> + </div> <div class="columns"> <div class="column col-12"> <div class="parallax"> @@ -728,13 +728,13 @@ <<span class="tag">/div</span>> </code></pre> - </section> + </div> - <section id="progress" class="container"> + <div id="progress" class="container"> <header class="text-center"><h3><a href="#progress" class="anchor" aria-hidden="true">#</a>Progress</h3></header> - <section class="notes"> + <div class="notes"> <p>The <strong>Progress</strong> indicates the progress completion of a task.</p> - </section> + </div> <div class="columns"> <div class="column col-3 col-xs-12"> <progress class="progress" value="75" max="100"></progress> @@ -755,13 +755,13 @@ <<span class="tag">progress</span> <span class="atn">class</span>=<span class="atv">"progress"</span> <span class="atn">max</span>=<span class="atv">"100"</span>><<span class="tag">/progress</span>> </code></pre> - </section> + </div> - <section id="sliders" class="container"> + <div id="sliders" class="container"> <header class="text-center"><h3><a href="#sliders" class="anchor" aria-hidden="true">#</a>Sliders</h3></header> - <section class="notes"> + <div class="notes"> <p><strong>Sliders</strong> are for selecting values from ranges.</p> - </section> + </div> <div class="columns"> <div class="column col-6 col-xs-12"> <input class="slider tooltip" data-tooltip="50" type="range" min="0" max="100" value="50" /> @@ -775,13 +775,13 @@ <pre class="code" data-lang="HTML"><code><<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"slider"</span> <span class="atn">type</span>=<span class="atv">"range"</span> <span class="atn">min</span>=<span class="atv">"0"</span> <span class="atn">max</span>=<span class="atv">"100"</span> <span class="atn">value</span>=<span class="atv">"50"</span> <span class="tag">/</span>> </code></pre> - </section> + </div> - <section id="timelines" class="container"> + <div id="timelines" class="container"> <header class="text-center"><h3><a href="#timelines" class="anchor" aria-hidden="true">#</a>Timelines</h3></header> - <section class="notes"> + <div class="notes"> <p><strong>Timelines</strong> are ordered sequences of activities.</p> - </section> + </div> <div class="columns"> <div class="column col-9 col-sm-12"> <div class="timeline"> @@ -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"> @@ -881,18 +881,18 @@ </a> </li> </ul> - </section> + </div> </div> - </section> - </section> + </div> + </div> <footer class="section section-footer bg-gray"> - <section id="copyright" class="grid-footer container grid-960"> + <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(){ |