Summary Files Commits Branches @commit @diff @stats
path: root / docs / utilities
diff options
context:
space:
mode:
Commitef6d8056d26fe952891e47660f1cb0d1ed7041f1 (patch)
Author
 Yan Zhu <picturepan2@hotmail.com>
2018-11-08 07:42:33 +0800
Committer
 GitHub <noreply@github.com>
2018-11-08 07:42:33 +0800
Files26e1a053ee953a570e54939ef30c2c89636a6acf /docs/utilities
Spectre-Dark-Gruvbox-ef6d8056d26fe952891e47660f1cb0d1ed7041f1.tar
Spectre-Dark-Gruvbox-ef6d8056d26fe952891e47660f1cb0d1ed7041f1.tar.gz
Spectre-Dark-Gruvbox-ef6d8056d26fe952891e47660f1cb0d1ed7041f1.zip
Parent0a6c76429b294c26d318479c05736537f3d95abb (diff)
Parenteb7fd9d2538accfe5d291ca93d2ce7dd6e62fefa (diff)
Merge pull request #522 from picturepan2/0.5.5 v0.5.5
0.5.5
8 files changed, 2070 insertions, 0 deletions
-rw-r--r--docs/utilities/colors.html287
-rw-r--r--docs/utilities/cursors.html257
-rw-r--r--docs/utilities/display.html246
-rw-r--r--docs/utilities/divider.html285
-rw-r--r--docs/utilities/loading.html242
-rw-r--r--docs/utilities/position.html260
-rw-r--r--docs/utilities/shapes.html237
-rw-r--r--docs/utilities/text.html256
diff --git a/docs/utilities/colors.html b/docs/utilities/colors.html
new file mode 100644
index 0000000..483628c
--- /dev/null
+++ b/docs/utilities/colors.html
@@ -0,0 +1,287 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Color utilities - Utilities - 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">
+ <meta http-equiv="x-ua-compatible" content="ie=edge">
+ <meta name="description" content="Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. 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.">
+ <meta name="author" content="Yan Zhu">
+ <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+ <link rel="icon" href="../img/favicons/favicon.png">
+ <link rel="stylesheet" href="../dist/spectre.min.css">
+ <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+ <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+ <link rel="stylesheet" href="../dist/docs.min.css">
+ <link rel="canonical" href="https://picturepan2.github.io/spectre/utilities/colors.html">
+ </head>
+ <body>
+ <div class="docs-container off-canvas off-canvas-sidebar-show">
+ <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+ <div class="btns"><a class="btn btn-primary float-right" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a><a class="btn mr-1 float-right" href="https://www.paypal.me/picturepan2" target="_blank">Sponsor</a></div>
+ </div>
+ <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+ <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+ <h2>SPECTRE</h2></a>
+ </div>
+ <div class="docs-nav">
+ <div class="accordion-container">
+ <div class="accordion">
+ <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+ </li>
+ <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+ </li>
+ <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+ </li>
+ <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+ </li>
+ <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+ </li>
+ <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+ </li>
+ <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+ </li>
+ <li class="menu-item"><a href="../elements/icons.html">Icons</a>
+ </li>
+ <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+ </li>
+ <li class="menu-item"><a href="../elements/code.html">Code</a>
+ </li>
+ <li class="menu-item"><a href="../elements/media.html">Media</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+ </li>
+ <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+ </li>
+ <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-components">Components</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+ </li>
+ <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+ </li>
+ <li class="menu-item"><a href="../components/badges.html">Badges</a>
+ </li>
+ <li class="menu-item"><a href="../components/bars.html">Bars</a>
+ </li>
+ <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+ </li>
+ <li class="menu-item"><a href="../components/cards.html">Cards</a>
+ </li>
+ <li class="menu-item"><a href="../components/chips.html">Chips</a>
+ </li>
+ <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+ </li>
+ <li class="menu-item"><a href="../components/menu.html">Menu</a>
+ </li>
+ <li class="menu-item"><a href="../components/modals.html">Modals</a>
+ </li>
+ <li class="menu-item"><a href="../components/nav.html">Nav</a>
+ </li>
+ <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+ </li>
+ <li class="menu-item"><a href="../components/panels.html">Panels</a>
+ </li>
+ <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+ </li>
+ <li class="menu-item"><a href="../components/steps.html">Steps</a>
+ </li>
+ <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+ </li>
+ <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+ </li>
+ <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+ </li>
+ <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+ <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/display.html">Display</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/position.html">Position</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/text.html">Text</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div><a class="off-canvas-overlay" href="#close"></a>
+ <div class="off-canvas-content">
+ <div class="docs-content" id="content">
+ <div class="container" id="colors">
+ <h3 class="s-title">Color utilities<a class="anchor" href="#colors" 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>Color utilities are used for changing colors for text, link and background.</p>
+ <h4 class="s-subtitle" id="colors-text">Text colors<a class="anchor" href="#colors-text" aria-hidden="true">#</a></h4>
+ <div class="docs-demo columns">
+ <div class="column col-12">
+ <p><span class="text-primary">primary color</span></p>
+ <p><span class="text-secondary">secondary color</span></p>
+ <p><span class="text-dark">dark color</span></p>
+ <p><span class="text-gray">gray color</span></p>
+ <p><span class="text-light bg-dark p-1 rounded">light color</span></p>
+ <p><span class="text-success">success color</span></p>
+ <p><span class="text-warning">warning color</span></p>
+ <p><span class="text-error">error color</span></p>
+ </div>
+ </div>
+ <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-primary"</span>&gt;</span>primary color<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-secondary"</span>&gt;</span>secondary color<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-dark"</span>&gt;</span>dark color<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-gray"</span>&gt;</span>gray color<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-light"</span>&gt;</span>light color<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-success"</span>&gt;</span>success color<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-warning"</span>&gt;</span>warning color<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-error"</span>&gt;</span>error color<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
+</code></pre>
+ <div class="docs-demo columns">
+ <div class="column col-12">
+ <p><a class="text-primary p-1" href="#colors">primary link</a></p>
+ <p><a class="text-secondary p-1" href="#colors">secondary link</a></p>
+ <p><a class="text-dark p-1" href="#colors">dark link</a></p>
+ <p><a class="text-gray p-1" href="#colors">gray link</a></p>
+ <p><a class="text-light bg-dark p-1 rounded" href="#colors">light link</a></p>
+ <p><a class="text-success p-1" href="#colors">success link</a></p>
+ <p><a class="text-warning p-1" href="#colors">warning link</a></p>
+ <p><a class="text-error p-1" href="#colors">error link</a></p>
+ </div>
+ </div>
+ <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-primary"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>primary color<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-secondary"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>secondary color<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-dark"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>dark color<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-gray"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>gray color<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-light"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>light color<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-success"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>success color<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-warning"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>warning color<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-error"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>error color<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+</code></pre>
+ <h4 class="s-subtitle" id="colors-background">Background colors<a class="anchor" href="#colors-background" aria-hidden="true">#</a></h4>
+ <div class="docs-demo columns">
+ <div class="column col-12">
+ <p><span class="bg-primary p-1 rounded">primary bg</span></p>
+ <p><span class="bg-secondary text-primary p-1 rounded">secondary bg</span></p>
+ <p><span class="bg-dark p-1 rounded">dark bg</span></p>
+ <p><span class="bg-gray p-1 rounded">gray bg</span></p>
+ <p><span class="bg-success p-1 rounded">success bg</span></p>
+ <p><span class="bg-warning p-1 rounded">warning bg</span></p>
+ <p><span class="bg-error p-1 rounded">error bg</span></p>
+ </div>
+ </div>
+ <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-primary"</span>&gt;</span>primary bg<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-secondary"</span>&gt;</span>secondary bg<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-dark"</span>&gt;</span>dark bg<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-gray"</span>&gt;</span>gray bg<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-success"</span>&gt;</span>success bg<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-warning"</span>&gt;</span>warning bg<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-error"</span>&gt;</span>error bg<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+ <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&amp;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">&hearts;</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>
+ </div>
+ </div>
+ </div>
+ </div>
+ <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),
+ m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+ })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+ ga('create', 'UA-2702768-8', 'auto');
+ ga('send', 'pageview');
+ </script>
+ </body>
+</html> \ No newline at end of file
diff --git a/docs/utilities/cursors.html b/docs/utilities/cursors.html
new file mode 100644
index 0000000..8a19b81
--- /dev/null
+++ b/docs/utilities/cursors.html
@@ -0,0 +1,257 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Cursor utilities - Utilities - 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">
+ <meta http-equiv="x-ua-compatible" content="ie=edge">
+ <meta name="description" content="Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. 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.">
+ <meta name="author" content="Yan Zhu">
+ <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+ <link rel="icon" href="../img/favicons/favicon.png">
+ <link rel="stylesheet" href="../dist/spectre.min.css">
+ <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+ <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+ <link rel="stylesheet" href="../dist/docs.min.css">
+ <link rel="canonical" href="https://picturepan2.github.io/spectre/utilities/cursors.html">
+ </head>
+ <body>
+ <div class="docs-container off-canvas off-canvas-sidebar-show">
+ <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+ <div class="btns"><a class="btn btn-primary float-right" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a><a class="btn mr-1 float-right" href="https://www.paypal.me/picturepan2" target="_blank">Sponsor</a></div>
+ </div>
+ <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+ <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+ <h2>SPECTRE</h2></a>
+ </div>
+ <div class="docs-nav">
+ <div class="accordion-container">
+ <div class="accordion">
+ <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+ </li>
+ <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+ </li>
+ <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+ </li>
+ <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+ </li>
+ <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+ </li>
+ <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+ </li>
+ <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+ </li>
+ <li class="menu-item"><a href="../elements/icons.html">Icons</a>
+ </li>
+ <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+ </li>
+ <li class="menu-item"><a href="../elements/code.html">Code</a>
+ </li>
+ <li class="menu-item"><a href="../elements/media.html">Media</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+ </li>
+ <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+ </li>
+ <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-components">Components</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+ </li>
+ <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+ </li>
+ <li class="menu-item"><a href="../components/badges.html">Badges</a>
+ </li>
+ <li class="menu-item"><a href="../components/bars.html">Bars</a>
+ </li>
+ <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+ </li>
+ <li class="menu-item"><a href="../components/cards.html">Cards</a>
+ </li>
+ <li class="menu-item"><a href="../components/chips.html">Chips</a>
+ </li>
+ <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+ </li>
+ <li class="menu-item"><a href="../components/menu.html">Menu</a>
+ </li>
+ <li class="menu-item"><a href="../components/modals.html">Modals</a>
+ </li>
+ <li class="menu-item"><a href="../components/nav.html">Nav</a>
+ </li>
+ <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+ </li>
+ <li class="menu-item"><a href="../components/panels.html">Panels</a>
+ </li>
+ <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+ </li>
+ <li class="menu-item"><a href="../components/steps.html">Steps</a>
+ </li>
+ <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+ </li>
+ <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+ </li>
+ <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+ </li>
+ <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+ <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/display.html">Display</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/position.html">Position</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/text.html">Text</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div><a class="off-canvas-overlay" href="#close"></a>
+ <div class="off-canvas-content">
+ <div class="docs-content" id="content">
+ <div class="container" id="cursors">
+ <h3 class="s-title">Cursor utilities<a class="anchor" href="#cursors" 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>Cursor utilities specify which mouse cursor to display when mouseover.</p>
+ <div class="docs-demo columns">
+ <div class="column col-4">
+ <div class="bg-gray docs-block c-hand">c-hand</div>
+ </div>
+ <div class="column col-4">
+ <div class="bg-gray docs-block c-move">c-move</div>
+ </div>
+ <div class="column col-4">
+ <div class="bg-gray docs-block c-zoom-in">c-zoom-in</div>
+ </div>
+ <div class="column col-4">
+ <div class="bg-gray docs-block c-zoom-out">c-zoom-out</div>
+ </div>
+ <div class="column col-4">
+ <div class="bg-gray docs-block c-not-allowed">c-not-allowed</div>
+ </div>
+ <div class="column col-4">
+ <div class="bg-gray docs-block c-auto">c-auto</div>
+ </div>
+ </div>
+ <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- cursor: hand; --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-hand"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- cursor: move; --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-move"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- cursor: zoom-in; --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-zoom-in"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- cursor: zoom-out; --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-zoom-out"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- cursor: not-allowed; --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-not-allowed"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- cursor: auto; --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-auto"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+ <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&amp;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">&hearts;</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>
+ </div>
+ </div>
+ </div>
+ </div>
+ <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),
+ m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+ })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+ ga('create', 'UA-2702768-8', 'auto');
+ ga('send', 'pageview');
+ </script>
+ </body>
+</html> \ No newline at end of file
diff --git a/docs/utilities/display.html b/docs/utilities/display.html
new file mode 100644
index 0000000..8676a48
--- /dev/null
+++ b/docs/utilities/display.html
@@ -0,0 +1,246 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Display utilities - Utilities - 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">
+ <meta http-equiv="x-ua-compatible" content="ie=edge">
+ <meta name="description" content="Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. 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.">
+ <meta name="author" content="Yan Zhu">
+ <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+ <link rel="icon" href="../img/favicons/favicon.png">
+ <link rel="stylesheet" href="../dist/spectre.min.css">
+ <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+ <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+ <link rel="stylesheet" href="../dist/docs.min.css">
+ <link rel="canonical" href="https://picturepan2.github.io/spectre/utilities/display.html">
+ </head>
+ <body>
+ <div class="docs-container off-canvas off-canvas-sidebar-show">
+ <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+ <div class="btns"><a class="btn btn-primary float-right" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a><a class="btn mr-1 float-right" href="https://www.paypal.me/picturepan2" target="_blank">Sponsor</a></div>
+ </div>
+ <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+ <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+ <h2>SPECTRE</h2></a>
+ </div>
+ <div class="docs-nav">
+ <div class="accordion-container">
+ <div class="accordion">
+ <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+ </li>
+ <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+ </li>
+ <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+ </li>
+ <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+ </li>
+ <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+ </li>
+ <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+ </li>
+ <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+ </li>
+ <li class="menu-item"><a href="../elements/icons.html">Icons</a>
+ </li>
+ <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+ </li>
+ <li class="menu-item"><a href="../elements/code.html">Code</a>
+ </li>
+ <li class="menu-item"><a href="../elements/media.html">Media</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+ </li>
+ <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+ </li>
+ <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-components">Components</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+ </li>
+ <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+ </li>
+ <li class="menu-item"><a href="../components/badges.html">Badges</a>
+ </li>
+ <li class="menu-item"><a href="../components/bars.html">Bars</a>
+ </li>
+ <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+ </li>
+ <li class="menu-item"><a href="../components/cards.html">Cards</a>
+ </li>
+ <li class="menu-item"><a href="../components/chips.html">Chips</a>
+ </li>
+ <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+ </li>
+ <li class="menu-item"><a href="../components/menu.html">Menu</a>
+ </li>
+ <li class="menu-item"><a href="../components/modals.html">Modals</a>
+ </li>
+ <li class="menu-item"><a href="../components/nav.html">Nav</a>
+ </li>
+ <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+ </li>
+ <li class="menu-item"><a href="../components/panels.html">Panels</a>
+ </li>
+ <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+ </li>
+ <li class="menu-item"><a href="../components/steps.html">Steps</a>
+ </li>
+ <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+ </li>
+ <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+ </li>
+ <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+ </li>
+ <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+ <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/display.html">Display</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/position.html">Position</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/text.html">Text</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div><a class="off-canvas-overlay" href="#close"></a>
+ <div class="off-canvas-content">
+ <div class="docs-content" id="content">
+ <div class="container" id="display">
+ <h3 class="s-title">Display utilities<a class="anchor" href="#display" 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>Display utilities are used for display and hidden things.</p>
+ <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- display: block; --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-block"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- display: inline; --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-inline"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- display: inline-block; --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-inline-block"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- display: flex; --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-flex"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- display: inline-flex; --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-inline-flex"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- display: none; --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-none"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-hide"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- visibility: visible; --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-visible"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- visibility: hidden; --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-invisible"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- hide text contents --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-hide"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- assistive text for screen reader --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-assistive"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+ <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&amp;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">&hearts;</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>
+ </div>
+ </div>
+ </div>
+ </div>
+ <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),
+ m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+ })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+ ga('create', 'UA-2702768-8', 'auto');
+ ga('send', 'pageview');
+ </script>
+ </body>
+</html> \ No newline at end of file
diff --git a/docs/utilities/divider.html b/docs/utilities/divider.html
new file mode 100644
index 0000000..338ed70
--- /dev/null
+++ b/docs/utilities/divider.html
@@ -0,0 +1,285 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Divider - Utilities - 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">
+ <meta http-equiv="x-ua-compatible" content="ie=edge">
+ <meta name="description" content="Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. 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.">
+ <meta name="author" content="Yan Zhu">
+ <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+ <link rel="icon" href="../img/favicons/favicon.png">
+ <link rel="stylesheet" href="../dist/spectre.min.css">
+ <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+ <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+ <link rel="stylesheet" href="../dist/docs.min.css">
+ <link rel="canonical" href="https://picturepan2.github.io/spectre/utilities/divider.html">
+ </head>
+ <body>
+ <div class="docs-container off-canvas off-canvas-sidebar-show">
+ <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+ <div class="btns"><a class="btn btn-primary float-right" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a><a class="btn mr-1 float-right" href="https://www.paypal.me/picturepan2" target="_blank">Sponsor</a></div>
+ </div>
+ <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+ <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+ <h2>SPECTRE</h2></a>
+ </div>
+ <div class="docs-nav">
+ <div class="accordion-container">
+ <div class="accordion">
+ <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+ </li>
+ <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+ </li>
+ <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+ </li>
+ <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+ </li>
+ <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+ </li>
+ <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+ </li>
+ <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+ </li>
+ <li class="menu-item"><a href="../elements/icons.html">Icons</a>
+ </li>
+ <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+ </li>
+ <li class="menu-item"><a href="../elements/code.html">Code</a>
+ </li>
+ <li class="menu-item"><a href="../elements/media.html">Media</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+ </li>
+ <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+ </li>
+ <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-components">Components</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+ </li>
+ <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+ </li>
+ <li class="menu-item"><a href="../components/badges.html">Badges</a>
+ </li>
+ <li class="menu-item"><a href="../components/bars.html">Bars</a>
+ </li>
+ <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+ </li>
+ <li class="menu-item"><a href="../components/cards.html">Cards</a>
+ </li>
+ <li class="menu-item"><a href="../components/chips.html">Chips</a>
+ </li>
+ <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+ </li>
+ <li class="menu-item"><a href="../components/menu.html">Menu</a>
+ </li>
+ <li class="menu-item"><a href="../components/modals.html">Modals</a>
+ </li>
+ <li class="menu-item"><a href="../components/nav.html">Nav</a>
+ </li>
+ <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+ </li>
+ <li class="menu-item"><a href="../components/panels.html">Panels</a>
+ </li>
+ <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+ </li>
+ <li class="menu-item"><a href="../components/steps.html">Steps</a>
+ </li>
+ <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+ </li>
+ <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+ </li>
+ <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+ </li>
+ <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+ <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/display.html">Display</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/position.html">Position</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/text.html">Text</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div><a class="off-canvas-overlay" href="#close"></a>
+ <div class="off-canvas-content">
+ <div class="docs-content" id="content">
+ <div class="container" id="divider">
+ <h3 class="s-title">Divider<a class="anchor" href="#divider" 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>A Divider is used for separating elements.</p>
+ <div class="docs-demo columns">
+ <div class="column">
+ <div class="divider"></div>
+ </div>
+ </div>
+ <div class="docs-demo columns">
+ <div class="column">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus.
+ <div class="divider text-center" data-content="OR"></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus.
+ </div>
+ </div>
+ <div class="docs-demo columns">
+ <div class="column">
+ <form>
+ <div class="form-group">
+ <label class="form-label" for="input-example-1">Email</label>
+ <input class="form-input" id="input-example-1" type="text" placeholder="Email">
+ </div>
+ <div class="form-group">
+ <label class="form-label" for="input-example-2">Password</label>
+ <input class="form-input" id="input-example-2" type="password" placeholder="Password">
+ </div>
+ <div class="form-group">
+ <label class="form-checkbox">
+ <input type="checkbox"><i class="form-icon"></i> Remember me
+ </label>
+ </div>
+ <div class="form-group">
+ <button class="btn btn-primary">Sign in</button>
+ </div>
+ </form>
+ </div>
+ <div class="divider-vert" data-content="OR"></div>
+ <div class="column">
+ <form>
+ <div class="form-group">
+ <label class="form-label" for="input-example-3">Email</label>
+ <input class="form-input" id="input-example-3" type="text" placeholder="Email">
+ </div>
+ <div class="form-group">
+ <button class="btn btn-primary btn-block">Sign up</button>
+ <button class="btn btn-link btn-block">Learn more</button>
+ </div>
+ </form>
+ </div>
+ </div>
+ <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- divider element --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"divider"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- divider element with text --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"divider text-center"</span> <span class="hljs-attr">data-content</span>=<span class="hljs-string">"OR"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+
+<span class="hljs-comment">&lt;!-- vertical divider element with text --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column"</span>&gt;</span>
+ <span class="hljs-comment">&lt;!-- column content --&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"divider-vert"</span> <span class="hljs-attr">data-content</span>=<span class="hljs-string">"OR"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column"</span>&gt;</span>
+ <span class="hljs-comment">&lt;!-- column content --&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+ <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&amp;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">&hearts;</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>
+ </div>
+ </div>
+ </div>
+ </div>
+ <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),
+ m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+ })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+ ga('create', 'UA-2702768-8', 'auto');
+ ga('send', 'pageview');
+ </script>
+ </body>
+</html> \ No newline at end of file
diff --git a/docs/utilities/loading.html b/docs/utilities/loading.html
new file mode 100644
index 0000000..274f239
--- /dev/null
+++ b/docs/utilities/loading.html
@@ -0,0 +1,242 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Loading - Utilities - 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">
+ <meta http-equiv="x-ua-compatible" content="ie=edge">
+ <meta name="description" content="Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. 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.">
+ <meta name="author" content="Yan Zhu">
+ <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+ <link rel="icon" href="../img/favicons/favicon.png">
+ <link rel="stylesheet" href="../dist/spectre.min.css">
+ <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+ <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+ <link rel="stylesheet" href="../dist/docs.min.css">
+ <link rel="canonical" href="https://picturepan2.github.io/spectre/utilities/loading.html">
+ </head>
+ <body>
+ <div class="docs-container off-canvas off-canvas-sidebar-show">
+ <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+ <div class="btns"><a class="btn btn-primary float-right" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a><a class="btn mr-1 float-right" href="https://www.paypal.me/picturepan2" target="_blank">Sponsor</a></div>
+ </div>
+ <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+ <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+ <h2>SPECTRE</h2></a>
+ </div>
+ <div class="docs-nav">
+ <div class="accordion-container">
+ <div class="accordion">
+ <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+ </li>
+ <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+ </li>
+ <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+ </li>
+ <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+ </li>
+ <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+ </li>
+ <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+ </li>
+ <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+ </li>
+ <li class="menu-item"><a href="../elements/icons.html">Icons</a>
+ </li>
+ <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+ </li>
+ <li class="menu-item"><a href="../elements/code.html">Code</a>
+ </li>
+ <li class="menu-item"><a href="../elements/media.html">Media</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+ </li>
+ <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+ </li>
+ <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-components">Components</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+ </li>
+ <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+ </li>
+ <li class="menu-item"><a href="../components/badges.html">Badges</a>
+ </li>
+ <li class="menu-item"><a href="../components/bars.html">Bars</a>
+ </li>
+ <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+ </li>
+ <li class="menu-item"><a href="../components/cards.html">Cards</a>
+ </li>
+ <li class="menu-item"><a href="../components/chips.html">Chips</a>
+ </li>
+ <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+ </li>
+ <li class="menu-item"><a href="../components/menu.html">Menu</a>
+ </li>
+ <li class="menu-item"><a href="../components/modals.html">Modals</a>
+ </li>
+ <li class="menu-item"><a href="../components/nav.html">Nav</a>
+ </li>
+ <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+ </li>
+ <li class="menu-item"><a href="../components/panels.html">Panels</a>
+ </li>
+ <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+ </li>
+ <li class="menu-item"><a href="../components/steps.html">Steps</a>
+ </li>
+ <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+ </li>
+ <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+ </li>
+ <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+ </li>
+ <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+ <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/display.html">Display</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/position.html">Position</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/text.html">Text</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div><a class="off-canvas-overlay" href="#close"></a>
+ <div class="off-canvas-content">
+ <div class="docs-content" id="content">
+ <div class="container" id="loading">
+ <h3 class="s-title">Loading<a class="anchor" href="#loading" 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>
+ Loading indicator is used for loading or updating.
+ You can add the <code>loading</code> class to a container for loading status.
+ </p>
+ <div class="docs-demo columns">
+ <div class="column col-12 text-center">
+ <div class="loading"></div>
+ </div>
+ </div>
+ <p>Add the <code>loading-lg</code> class for large size.</p>
+ <div class="docs-demo columns">
+ <div class="column col-12 text-center">
+ <div class="loading loading-lg"></div>
+ </div>
+ </div>
+ <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- loading element --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"loading"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"loading loading-lg"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+ <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&amp;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">&hearts;</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>
+ </div>
+ </div>
+ </div>
+ </div>
+ <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),
+ m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+ })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+ ga('create', 'UA-2702768-8', 'auto');
+ ga('send', 'pageview');
+ </script>
+ </body>
+</html> \ No newline at end of file
diff --git a/docs/utilities/position.html b/docs/utilities/position.html
new file mode 100644
index 0000000..e0e94b7
--- /dev/null
+++ b/docs/utilities/position.html
@@ -0,0 +1,260 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Position utilities - Utilities - 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">
+ <meta http-equiv="x-ua-compatible" content="ie=edge">
+ <meta name="description" content="Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. 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.">
+ <meta name="author" content="Yan Zhu">
+ <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+ <link rel="icon" href="../img/favicons/favicon.png">
+ <link rel="stylesheet" href="../dist/spectre.min.css">
+ <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+ <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+ <link rel="stylesheet" href="../dist/docs.min.css">
+ <link rel="canonical" href="https://picturepan2.github.io/spectre/utilities/position.html">
+ </head>
+ <body>
+ <div class="docs-container off-canvas off-canvas-sidebar-show">
+ <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+ <div class="btns"><a class="btn btn-primary float-right" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a><a class="btn mr-1 float-right" href="https://www.paypal.me/picturepan2" target="_blank">Sponsor</a></div>
+ </div>
+ <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+ <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+ <h2>SPECTRE</h2></a>
+ </div>
+ <div class="docs-nav">
+ <div class="accordion-container">
+ <div class="accordion">
+ <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+ </li>
+ <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+ </li>
+ <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+ </li>
+ <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+ </li>
+ <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+ </li>
+ <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+ </li>
+ <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+ </li>
+ <li class="menu-item"><a href="../elements/icons.html">Icons</a>
+ </li>
+ <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+ </li>
+ <li class="menu-item"><a href="../elements/code.html">Code</a>
+ </li>
+ <li class="menu-item"><a href="../elements/media.html">Media</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+ </li>
+ <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+ </li>
+ <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-components">Components</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+ </li>
+ <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+ </li>
+ <li class="menu-item"><a href="../components/badges.html">Badges</a>
+ </li>
+ <li class="menu-item"><a href="../components/bars.html">Bars</a>
+ </li>
+ <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+ </li>
+ <li class="menu-item"><a href="../components/cards.html">Cards</a>
+ </li>
+ <li class="menu-item"><a href="../components/chips.html">Chips</a>
+ </li>
+ <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+ </li>
+ <li class="menu-item"><a href="../components/menu.html">Menu</a>
+ </li>
+ <li class="menu-item"><a href="../components/modals.html">Modals</a>
+ </li>
+ <li class="menu-item"><a href="../components/nav.html">Nav</a>
+ </li>
+ <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+ </li>
+ <li class="menu-item"><a href="../components/panels.html">Panels</a>
+ </li>
+ <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+ </li>
+ <li class="menu-item"><a href="../components/steps.html">Steps</a>
+ </li>
+ <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+ </li>
+ <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+ </li>
+ <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+ </li>
+ <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+ <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/display.html">Display</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/position.html">Position</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/text.html">Text</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div><a class="off-canvas-overlay" href="#close"></a>
+ <div class="off-canvas-content">
+ <div class="docs-content" id="content">
+ <div class="container" id="position">
+ <h3 class="s-title">Position utilities<a class="anchor" href="#position" 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>Position utilities are used for useful layout and position things, including clearfix, float, position and margin/padding utilities.</p>
+ <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- clear float --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"clearfix"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- float: left and right --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"float-left"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"float-right"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- position: relative, absolute, fixed and sticky --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p-relative"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p-absolute"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p-fixed"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p-sticky"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- centered block --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p-centered"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+
+<span class="hljs-comment">&lt;!-- m-1 {margin: 4px;} m-2 {margin: 8px;} --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m-1"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m-2"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- margin in 4 directions. mt-1 {margin-top: 4px;} mt-2 {margin-top: 8px;} --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mt-1"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mt-2"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- mx-1 {margin-left: 4px; margin-right: 4px;} --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mx-1"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mx-2"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"my-1"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"my-2"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- p-1 {padding: 4px;} p-2 {padding: 8px;} --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p-1"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p-2"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- padding in 4 directions. pt-1 {padding-top: 4px;} pt-2 {padding-top: 8px;} --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pt-1"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pt-2"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- px-1 {padding-left: 4px; padding-right: 4px;} --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"px-1"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"px-2"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-1"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-2"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+ <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&amp;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">&hearts;</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>
+ </div>
+ </div>
+ </div>
+ </div>
+ <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),
+ m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+ })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+ ga('create', 'UA-2702768-8', 'auto');
+ ga('send', 'pageview');
+ </script>
+ </body>
+</html> \ No newline at end of file
diff --git a/docs/utilities/shapes.html b/docs/utilities/shapes.html
new file mode 100644
index 0000000..659f8f2
--- /dev/null
+++ b/docs/utilities/shapes.html
@@ -0,0 +1,237 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Shape utilities - Utilities - 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">
+ <meta http-equiv="x-ua-compatible" content="ie=edge">
+ <meta name="description" content="Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. 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.">
+ <meta name="author" content="Yan Zhu">
+ <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+ <link rel="icon" href="../img/favicons/favicon.png">
+ <link rel="stylesheet" href="../dist/spectre.min.css">
+ <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+ <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+ <link rel="stylesheet" href="../dist/docs.min.css">
+ <link rel="canonical" href="https://picturepan2.github.io/spectre/utilities/shapes.html">
+ </head>
+ <body>
+ <div class="docs-container off-canvas off-canvas-sidebar-show">
+ <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+ <div class="btns"><a class="btn btn-primary float-right" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a><a class="btn mr-1 float-right" href="https://www.paypal.me/picturepan2" target="_blank">Sponsor</a></div>
+ </div>
+ <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+ <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+ <h2>SPECTRE</h2></a>
+ </div>
+ <div class="docs-nav">
+ <div class="accordion-container">
+ <div class="accordion">
+ <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+ </li>
+ <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+ </li>
+ <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+ </li>
+ <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+ </li>
+ <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+ </li>
+ <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+ </li>
+ <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+ </li>
+ <li class="menu-item"><a href="../elements/icons.html">Icons</a>
+ </li>
+ <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+ </li>
+ <li class="menu-item"><a href="../elements/code.html">Code</a>
+ </li>
+ <li class="menu-item"><a href="../elements/media.html">Media</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+ </li>
+ <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+ </li>
+ <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-components">Components</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+ </li>
+ <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+ </li>
+ <li class="menu-item"><a href="../components/badges.html">Badges</a>
+ </li>
+ <li class="menu-item"><a href="../components/bars.html">Bars</a>
+ </li>
+ <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+ </li>
+ <li class="menu-item"><a href="../components/cards.html">Cards</a>
+ </li>
+ <li class="menu-item"><a href="../components/chips.html">Chips</a>
+ </li>
+ <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+ </li>
+ <li class="menu-item"><a href="../components/menu.html">Menu</a>
+ </li>
+ <li class="menu-item"><a href="../components/modals.html">Modals</a>
+ </li>
+ <li class="menu-item"><a href="../components/nav.html">Nav</a>
+ </li>
+ <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+ </li>
+ <li class="menu-item"><a href="../components/panels.html">Panels</a>
+ </li>
+ <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+ </li>
+ <li class="menu-item"><a href="../components/steps.html">Steps</a>
+ </li>
+ <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+ </li>
+ <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+ </li>
+ <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+ </li>
+ <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+ <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/display.html">Display</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/position.html">Position</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/text.html">Text</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div><a class="off-canvas-overlay" href="#close"></a>
+ <div class="off-canvas-content">
+ <div class="docs-content" id="content">
+ <div class="container" id="shapes">
+ <h3 class="s-title">Shape utilities<a class="anchor" href="#shapes" 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>Shape utilities are used for changing element shapes.</p>
+ <div class="docs-demo columns">
+ <div class="column col-6 text-center">
+ <div class="bg-primary text-light docs-shape s-rounded centered">s-rounded</div>
+ </div>
+ <div class="column col-6 text-center">
+ <div class="bg-primary text-light docs-shape s-circle centered">s-circle</div>
+ </div>
+ </div>
+ <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- rounded element --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"s-rounded"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- circle element --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"s-circle"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+ <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&amp;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">&hearts;</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>
+ </div>
+ </div>
+ </div>
+ </div>
+ <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),
+ m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+ })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+ ga('create', 'UA-2702768-8', 'auto');
+ ga('send', 'pageview');
+ </script>
+ </body>
+</html> \ No newline at end of file
diff --git a/docs/utilities/text.html b/docs/utilities/text.html
new file mode 100644
index 0000000..0f800e3
--- /dev/null
+++ b/docs/utilities/text.html
@@ -0,0 +1,256 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Text utilities - Utilities - 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">
+ <meta http-equiv="x-ua-compatible" content="ie=edge">
+ <meta name="description" content="Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. 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.">
+ <meta name="author" content="Yan Zhu">
+ <link rel="shortcut icon" href="../img/favicons/favicon.ico">
+ <link rel="icon" href="../img/favicons/favicon.png">
+ <link rel="stylesheet" href="../dist/spectre.min.css">
+ <link rel="stylesheet" href="../dist/spectre-icons.min.css">
+ <link rel="stylesheet" href="../dist/spectre-exp.min.css">
+ <link rel="stylesheet" href="../dist/docs.min.css">
+ <link rel="canonical" href="https://picturepan2.github.io/spectre/utilities/text.html">
+ </head>
+ <body>
+ <div class="docs-container off-canvas off-canvas-sidebar-show">
+ <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
+ <div class="btns"><a class="btn btn-primary float-right" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a><a class="btn mr-1 float-right" href="https://www.paypal.me/picturepan2" target="_blank">Sponsor</a></div>
+ </div>
+ <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+ <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+ <h2>SPECTRE</h2></a>
+ </div>
+ <div class="docs-nav">
+ <div class="accordion-container">
+ <div class="accordion">
+ <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
+ </li>
+ <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
+ </li>
+ <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
+ </li>
+ <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../elements/typography.html">Typography</a>
+ </li>
+ <li class="menu-item"><a href="../elements/tables.html">Tables</a>
+ </li>
+ <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
+ </li>
+ <li class="menu-item"><a href="../elements/forms.html">Forms</a>
+ </li>
+ <li class="menu-item"><a href="../elements/icons.html">Icons</a>
+ </li>
+ <li class="menu-item"><a href="../elements/labels.html">Labels</a>
+ </li>
+ <li class="menu-item"><a href="../elements/code.html">Code</a>
+ </li>
+ <li class="menu-item"><a href="../elements/media.html">Media</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
+ </li>
+ <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
+ </li>
+ <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-components">Components</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
+ </li>
+ <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
+ </li>
+ <li class="menu-item"><a href="../components/badges.html">Badges</a>
+ </li>
+ <li class="menu-item"><a href="../components/bars.html">Bars</a>
+ </li>
+ <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
+ </li>
+ <li class="menu-item"><a href="../components/cards.html">Cards</a>
+ </li>
+ <li class="menu-item"><a href="../components/chips.html">Chips</a>
+ </li>
+ <li class="menu-item"><a href="../components/empty.html">Empty states</a>
+ </li>
+ <li class="menu-item"><a href="../components/menu.html">Menu</a>
+ </li>
+ <li class="menu-item"><a href="../components/modals.html">Modals</a>
+ </li>
+ <li class="menu-item"><a href="../components/nav.html">Nav</a>
+ </li>
+ <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
+ </li>
+ <li class="menu-item"><a href="../components/panels.html">Panels</a>
+ </li>
+ <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
+ </li>
+ <li class="menu-item"><a href="../components/steps.html">Steps</a>
+ </li>
+ <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
+ </li>
+ <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
+ </li>
+ <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
+ </li>
+ <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+ <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/display.html">Display</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/position.html">Position</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
+ </li>
+ <li class="menu-item"><a href="../utilities/text.html">Text</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion">
+ <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
+ </li>
+ <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div><a class="off-canvas-overlay" href="#close"></a>
+ <div class="off-canvas-content">
+ <div class="docs-content" id="content">
+ <div class="container" id="text">
+ <h3 class="s-title">Text utilities<a class="anchor" href="#text" 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>Text utilities are used for text alignment, styles and overflow things.</p>
+ <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- left-aligned text --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-left"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- center-aligned text --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- right-aligned text --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-right"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- justified text --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-justify"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+
+<span class="hljs-comment">&lt;!-- Lowercased text --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-lowercase"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- Uppercased text --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-uppercase"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- Capitalized text --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-capitalize"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+
+<span class="hljs-comment">&lt;!-- Normal weight text --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-normal"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- Bold text --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-bold"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- Italicized text --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-italic"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- Larger text (120%) --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-large"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+
+<span class="hljs-comment">&lt;!-- Overflow behavior: display an ellipsis to represent clipped text --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-ellipsis"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- Overflow behavior: truncate the text --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-clip"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-comment">&lt;!-- Text may be broken at arbitrary points --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-break"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+ <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&amp;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">&hearts;</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>
+ </div>
+ </div>
+ </div>
+ </div>
+ <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),
+ m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+ })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+ ga('create', 'UA-2702768-8', 'auto');
+ ga('send', 'pageview');
+ </script>
+ </body>
+</html> \ No newline at end of file