diff options
New Docs category pages
1 files changed, 115 insertions, 0 deletions
| -rw-r--r-- | docs/experimentals.html | 115 |
diff --git a/docs/experimentals.html b/docs/experimentals.html index 94a7a9f..f820e26 100644 --- a/docs/experimentals.html +++ b/docs/experimentals.html @@ -188,11 +188,126 @@ <div class="docs-content" id="content"> <div class="container" id="experimentals"> <h3 class="s-title">Experimentals<a class="anchor" href="#experimentals" aria-hidden="true">#</a></h3> + <div class="docs-ad"> + <div class="hide-md text-center"> + <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> + <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins> + <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> + </div> + <div class="show-md text-center"> + <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins> + <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> + </div> + </div> <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.scss</code> before browsers fully support them. Sometimes, there are some specific browsers targeted components. </p> + <div class="docs-demo columns"> + <div class="column col-6 col-xs-12"> + <div class="card"> + <div class="card-header"> + <div class="card-title h5">Autocomplete</div> + </div> + <div class="card-body">Form component provides suggestions while you type</div> + <div class="card-footer"><a class="btn btn-primary" href="experimentals/autocomplete.html">View</a></div> + </div> + </div> + <div class="column col-6 col-xs-12"> + <div class="card"> + <div class="card-header"> + <div class="card-title h5">Calendars</div> + </div> + <div class="card-body">Date or date range picker and events display based on Flexbox</div> + <div class="card-footer"><a class="btn btn-primary" href="experimentals/calendars.html">View</a></div> + </div> + </div> + <div class="column col-6 col-xs-12"> + <div class="card"> + <div class="card-header"> + <div class="card-title h5">Carousels</div> + </div> + <div class="card-body">Pure CSS slideshows for cycling images</div> + <div class="card-footer"><a class="btn btn-primary" href="experimentals/carousels.html">View</a></div> + </div> + </div> + <div class="column col-6 col-xs-12"> + <div class="card"> + <div class="card-header"> + <div class="card-title h5">Comparison sliders</div> + </div> + <div class="card-body">Pure CSS sliders for comparing two images</div> + <div class="card-footer"><a class="btn btn-primary" href="experimentals/comparison.html">View</a></div> + </div> + </div> + <div class="column col-6 col-xs-12"> + <div class="card"> + <div class="card-header"> + <div class="card-title h5">Filters</div> + </div> + <div class="card-body">CSS only content filters</div> + <div class="card-footer"><a class="btn btn-primary" href="experimentals/filters.html">View</a></div> + </div> + </div> + <div class="column col-6 col-xs-12"> + <div class="card"> + <div class="card-header"> + <div class="card-title h5">Meters</div> + </div> + <div class="card-body">Representing the value within the known range</div> + <div class="card-footer"><a class="btn btn-primary" href="experimentals/meters.html">View</a></div> + </div> + </div> + <div class="column col-6 col-xs-12"> + <div class="card"> + <div class="card-header"> + <div class="card-title h5">Off-canvas</div> + </div> + <div class="card-body">Navigation layout that sidebars can slide in and out of the viewport</div> + <div class="card-footer"><a class="btn btn-primary" href="experimentals/off-canvas.html">View</a></div> + </div> + </div> + <div class="column col-6 col-xs-12"> + <div class="card"> + <div class="card-header"> + <div class="card-title h5">Parallax</div> + </div> + <div class="card-body">Pure CSS Apple TV/tvOS hover parallax effect</div> + <div class="card-footer"><a class="btn btn-primary" href="experimentals/parallax.html">View</a></div> + </div> + </div> + <div class="column col-6 col-xs-12"> + <div class="card"> + <div class="card-header"> + <div class="card-title h5">Progress</div> + </div> + <div class="card-body">Indicating the progress completion of a task</div> + <div class="card-footer"><a class="btn btn-primary" href="experimentals/progress.html">View</a></div> + </div> + </div> + <div class="column col-6 col-xs-12"> + <div class="card"> + <div class="card-header"> + <div class="card-title h5">Sliders</div> + </div> + <div class="card-body">Selecting values from ranges</div> + <div class="card-footer"><a class="btn btn-primary" href="experimentals/sliders.html">View</a></div> + </div> + </div> + <div class="column col-6 col-xs-12"> + <div class="card"> + <div class="card-header"> + <div class="card-title h5">Timelines</div> + </div> + <div class="card-body">Ordered sequences of activities</div> + <div class="card-footer"><a class="btn btn-primary" href="experimentals/timelines.html">View</a></div> + </div> + </div> + </div> + <div class="docs-ad docs-ad-sidebar text-center"> + <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&placement=picturepan2githubio"></script> + </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> |