diff options
1 files changed, 194 insertions, 1 deletions
| -rw-r--r-- | docs/components.html | 195 |
diff --git a/docs/components.html b/docs/components.html index 872cba0..e4ba188 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html lang="en"> <head> - <title>Components - Spectre.css CSS Framework</title> + <title>components - Spectre.css CSS Framework</title> <meta charset="utf-8"> <meta name="robots" content="index, follow"> <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> @@ -186,6 +186,199 @@ </div><a class="off-canvas-overlay" href="#close"></a> <div class="off-canvas-content"> <div class="docs-content" id="content"> + <div class="container" id="components"> + <h3 class="s-title">Components<a class="anchor" href="#components" 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> <strong>Spectre.css </strong>is a lightweight, responsive and modern CSS framework for faster and extensible development.</p> + <p> + Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.</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">Accordions</div> + </div> + <div class="card-body">Used to toggle sections of content</div> + <div class="card-footer"><a class="btn btn-primary" href="components/accordions.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">Avatars</div> + </div> + <div class="card-body">User profile pictures</div> + <div class="card-footer"><a class="btn btn-primary" href="components/avatars.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">Badges</div> + </div> + <div class="card-body">Used as unread number indicators</div> + <div class="card-footer"><a class="btn btn-primary" href="components/badges.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">Bars</div> + </div> + <div class="card-body">Progress of a task or the value within the known range</div> + <div class="card-footer"><a class="btn btn-primary" href="components/bars.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">Breadcrumbs</div> + </div> + <div class="card-body">Navigational hierarchies to indicate current location</div> + <div class="card-footer"><a class="btn btn-primary" href="components/breadcrumbs.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">Cards</div> + </div> + <div class="card-body">Flexible content containers</div> + <div class="card-footer"><a class="btn btn-primary" href="components/cards.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">Chips</div> + </div> + <div class="card-body">Complex entities in small blocks</div> + <div class="card-footer"><a class="btn btn-primary" href="components/chips.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">Empty states</div> + </div> + <div class="card-body">Navigational hierarchies to indicate current location</div> + <div class="card-footer"><a class="btn btn-primary" href="components/empty.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">Menu</div> + </div> + <div class="card-body">Vertical list of links or buttons for actions and navigation</div> + <div class="card-footer"><a class="btn btn-primary" href="components/menu.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">Modals</div> + </div> + <div class="card-body">Flexible dialog prompts</div> + <div class="card-footer"><a class="btn btn-primary" href="components/modals.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">Nav</div> + </div> + <div class="card-body">Vertical list of links</div> + <div class="card-footer"><a class="btn btn-primary" href="components/nav.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">Pagination</div> + </div> + <div class="card-body">Vertical list of links or buttons for actions and navigation</div> + <div class="card-footer"><a class="btn btn-primary" href="components/pagination.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">Panels</div> + </div> + <div class="card-body">Flexible view container with auto-expand content section</div> + <div class="card-footer"><a class="btn btn-primary" href="components/panels.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">Popovers</div> + </div> + <div class="card-body">Small overlay content containers</div> + <div class="card-footer"><a class="btn btn-primary" href="components/popovers.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">Steps</div> + </div> + <div class="card-body">Progress indicators of a sequence of task steps</div> + <div class="card-footer"><a class="btn btn-primary" href="components/steps.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">Tabs</div> + </div> + <div class="card-body">Switch between different views</div> + <div class="card-footer"><a class="btn btn-primary" href="components/tabs.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">Tiles</div> + </div> + <div class="card-body">Repeatable or embeddable information blocks</div> + <div class="card-footer"><a class="btn btn-primary" href="components/tiles.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">Toasts</div> + </div> + <div class="card-body">Progress indicators of a sequence of task steps</div> + <div class="card-footer"><a class="btn btn-primary" href="components/toasts.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">Tooltips</div> + </div> + <div class="card-body">Context information labels that appear on hover and focus</div> + <div class="card-footer"><a class="btn btn-primary" href="components/tooltips.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> <p>Designed and built with <span class="text-error">♥</span> 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> |