Summary Files Commits Branches @commit @diff @stats
path: root / docs / utilities.html
diff options
context:
space:
mode:
1 files changed, 453 insertions, 187 deletions
-rw-r--r--docs/utilities.html640
diff --git a/docs/utilities.html b/docs/utilities.html
index 27706a7..5077792 100644
--- a/docs/utilities.html
+++ b/docs/utilities.html
@@ -6,107 +6,325 @@
<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="author" content="https://github.com/picturepan2/" />
- <title>Utilities - Spectre.css </title>
+ <title>Utilities - Spectre.css CSS Framework</title>
<link rel="stylesheet" href="dist/spectre.css" />
<link rel="stylesheet" href="dist/spectre-icons.css" />
<link rel="stylesheet" href="css/docs.css" />
</head>
<body>
- <section class="section section-header bg-gray">
- <section class="grid-header container grid-960">
- <nav class="navbar">
- <section class="navbar-section">
- <a href="#sidebar" class="btn btn-lg btn-link btn-action show-sm"><i class="icon icon-menu"></i></a>
- <a href="index.html" class="navbar-brand mr-10">Spectre.css</a>
- <a href="index.html" class="btn btn-link">Docs</a>
- </section>
- <section class="navbar-section">
+ <div class="s-container container">
+ <div class="columns">
+ <div class="s-brand">
+ <a href="index.html" class="s-logo tooltip tooltip-bottom" data-tooltip="Spectre.css CSS Framework">
+ <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework" />
+ <h2>Spectre.css</h2>
+ </a>
+ <div class="menu-btn">
+ <a href="#sidebar" class="btn btn-link btn-action"><i class="icon icon-menu"></i></a>
+ </div>
+ <div class="float-btn">
<a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a>
- </section>
- </nav>
- </section>
- </section>
-
- <section class="container grid-960">
- <section class="columns">
- <div id="sidebar" class="docs-sidebar column col-3 col-sm-12">
- <ul class="docs-nav nav">
- <li class="nav-item">
- <a href="index.html#introduction">Getting started</a>
- </li>
- <li class="nav-item">
- <a href="elements.html">Elements</a>
- </li>
- <li class="nav-item">
- <a href="layout.html">Layout</a>
- </li>
- <li class="nav-item">
- <a href="components.html">Components</a>
- </li>
- <li class="nav-item active">
- <a href="utilities.html">Utilities</a>
- <ul class="nav">
- <li class="nav-item">
- <a href="utilities.html#position">Position</a>
- </li>
- <li class="nav-item">
- <a href="utilities.html#display">Display</a>
- </li>
- <li class="nav-item">
- <a href="utilities.html#text">Text</a>
- </li>
- <li class="nav-item">
- <a href="utilities.html#shapes">Shapes</a>
- </li>
- <li class="nav-item">
- <a href="utilities.html#divider">Divider</a>
- </li>
- <li class="nav-item">
- <a href="utilities.html#loading">Loading</a>
- </li>
- </ul>
- </li>
- <li class="nav-item">
- <a href="experimentals.html">Experimentals</a>
- </li>
- </ul>
+ </div>
+ </div>
+ <div id="sidebar" class="s-sidebar">
+ <div class="s-nav">
+ <div class="accordion">
+ <div class="accordion-item">
+ <input type="checkbox" id="docs-accordion-1" name="docs-accordion-checkbox" hidden />
+ <label class="accordion-header hand" for="docs-accordion-1">
+ Getting started
+ </label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item">
+ <a href="getting-started.html#introduction">Introduction</a>
+ </li>
+ <li class="menu-item">
+ <a href="getting-started.html#installation">Installation</a>
+ </li>
+ <li class="menu-item">
+ <a href="getting-started.html#compiling">Custom version</a>
+ </li>
+ <li class="menu-item">
+ <a href="getting-started.html#browsers">Browser support</a>
+ </li>
+ <li class="menu-item">
+ <a href="getting-started.html#whatsnew">What's new</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion-item">
+ <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden />
+ <label class="accordion-header hand" for="docs-accordion-2">
+ Elements
+ </label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item">
+ <a href="elements.html#typography">Typography</a>
+ </li>
+ <li class="menu-item">
+ <a href="elements.html#tables">Tables</a>
+ </li>
+ <li class="menu-item">
+ <a href="elements.html#buttons">Buttons</a>
+ </li>
+ <li class="menu-item">
+ <a href="elements.html#forms">Forms</a>
+ </li>
+ <li class="menu-item">
+ <a href="elements.html#icons">Icons</a>
+ </li>
+ <li class="menu-item">
+ <a href="elements.html#labels">Labels</a>
+ </li>
+ <li class="menu-item">
+ <a href="elements.html#codes">Codes</a>
+ </li>
+ <li class="menu-item">
+ <a href="elements.html#media">Media</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion-item">
+ <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden />
+ <label class="accordion-header hand" for="docs-accordion-3">
+ Layout
+ </label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item">
+ <a href="layout.html#grid">Flexbox grid</a>
+ </li>
+ <li class="menu-item">
+ <a href="layout.html#responsive">Responsive</a>
+ </li>
+ <li class="menu-item">
+ <a href="layout.html#navbar">Navbar</a>
+ </li>
+ <li class="menu-item">
+ <a href="layout.html#panels">Panels</a>
+ </li>
+ <li class="menu-item">
+ <a href="layout.html#empty">Empty states</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion-item">
+ <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden />
+ <label class="accordion-header hand" for="docs-accordion-4">
+ Components
+ </label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item">
+ <a href="components.html#accordions">Accordions</a>
+ </li>
+ <li class="menu-item">
+ <a href="components.html#autocomplete">Autocomplete</a>
+ </li>
+ <li class="menu-item">
+ <a href="components.html#avatars">Avatars</a>
+ </li>
+ <li class="menu-item">
+ <a href="components.html#badges">Badges</a>
+ </li>
+ <li class="menu-item">
+ <a href="components.html#bars">Bars</a>
+ </li>
+ <li class="menu-item">
+ <a href="components.html#breadcrumbs">Breadcrumbs</a>
+ </li>
+ <li class="menu-item">
+ <a href="components.html#cards">Cards</a>
+ </li>
+ <li class="menu-item">
+ <a href="components.html#chips">Chips</a>
+ </li>
+ <li class="menu-item">
+ <a href="components.html#menus">Menus</a>
+ </li>
+ <li class="menu-item">
+ <a href="components.html#modals">Modals</a>
+ </li>
+ <li class="menu-item">
+ <a href="components.html#navs">Navs</a>
+ </li>
+ <li class="menu-item">
+ <a href="components.html#pagination">Pagination</a>
+ </li>
+ <li class="menu-item">
+ <a href="components.html#popovers">Popovers</a>
+ </li>
+ <li class="menu-item">
+ <a href="components.html#steps">Steps</a>
+ </li>
+ <li class="menu-item">
+ <a href="components.html#tabs">Tabs</a>
+ </li>
+ <li class="menu-item">
+ <a href="components.html#tiles">Tiles</a>
+ </li>
+ <li class="menu-item">
+ <a href="components.html#toasts">Toasts</a>
+ </li>
+ <li class="menu-item">
+ <a href="components.html#tooltips">Tooltips</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion-item">
+ <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden checked />
+ <label class="accordion-header hand" for="docs-accordion-5">
+ Utilities
+ </label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item">
+ <a href="utilities.html#colors">Colors</a>
+ </li>
+ <li class="menu-item">
+ <a href="utilities.html#display">Display</a>
+ </li>
+ <li class="menu-item">
+ <a href="utilities.html#divider">Divider</a>
+ </li>
+ <li class="menu-item">
+ <a href="utilities.html#loading">Loading</a>
+ </li>
+ <li class="menu-item">
+ <a href="utilities.html#position">Position</a>
+ </li>
+ <li class="menu-item">
+ <a href="utilities.html#shapes">Shapes</a>
+ </li>
+ <li class="menu-item">
+ <a href="utilities.html#text">Text</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion-item">
+ <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden />
+ <label class="accordion-header hand" for="docs-accordion-6">
+ Experimentals
+ </label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item">
+ <a href="experimentals.html#calendars">Calendars</a>
+ </li>
+ <li class="menu-item">
+ <a href="experimentals.html#carousels">Carousels</a>
+ </li>
+ <li class="menu-item">
+ <a href="experimentals.html#comparison">Comparison sliders</a>
+ </li>
+ <li class="menu-item">
+ <a href="experimentals.html#filters">Filters</a>
+ </li>
+ <li class="menu-item">
+ <a href="experimentals.html#meters">Meters</a>
+ </li>
+ <li class="menu-item">
+ <a href="experimentals.html#parallax">Parallax</a>
+ </li>
+ <li class="menu-item">
+ <a href="experimentals.html#progress">Progress</a>
+ </li>
+ <li class="menu-item">
+ <a href="experimentals.html#sliders">Sliders</a>
+ </li>
+ <li class="menu-item">
+ <a href="experimentals.html#timelines">Timelines</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
<a href="#sidebar-close" id="sidebar-close" class="docs-nav-clear"></a>
- <div class="docs-content column col-9 col-sm-12">
- <section id="position" class="container">
- <header class="text-center"><h3><a href="#position" class="anchor" aria-hidden="true">#</a>Position utilities</h3></header>
- <section class="notes">
- <p><strong>Position utilities</strong> are used for useful layout and position things, including clearfix, float, position and margin/padding utilities.</p>
- </section>
+ <div id="content" class="s-content">
+ <div id="colors" class="container">
+ <h3 class="s-title"><a href="#colors" class="anchor" aria-hidden="true">#</a>Color utilities</h3>
+ <div class="docs-note">
+ <p>Color utilities are used for changing colors for text, link and background.</p>
+ </div>
+ <h4 class="s-subtitle">Text colors</h4>
+ <div class="docs-note">
+ <p><span class="text-primary">primary color</span></p>
+ <p><span class="text-secondary">secondary color</span></p>
+ <p><span class="text-gray">gray color</span></p>
+ <p><span class="text-light bg-dark p-5 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>
-<!-- position utilities example -->
-<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- clear float --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;clearfix&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- float: left and right --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;float-left&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;float-right&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- position: relative, absolute and fixed --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;rel&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;abs&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;fixed&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- centered block --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;centered&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- margin: 10px and 5px in 4 directions. mt-10 = margin-top: 10px; --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;mt-10&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;mt-5&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- padding: 10px and 5px in 4 directions. pt-10 = padding-top: 10px; --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;pt-10&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;pt-5&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+<!-- colors example -->
+<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;text-primary&quot;</span>&gt;primary color&lt;<span class="tag">/span</span>&gt;
+&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;text-secondary&quot;</span>&gt;secondary color&lt;<span class="tag">/span</span>&gt;
+&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;text-gray&quot;</span>&gt;gray color&lt;<span class="tag">/span</span>&gt;
+&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;text-light&quot;</span>&gt;light color&lt;<span class="tag">/span</span>&gt;
+&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;text-success&quot;</span>&gt;success color&lt;<span class="tag">/span</span>&gt;
+&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;text-warning&quot;</span>&gt;warning color&lt;<span class="tag">/span</span>&gt;
+&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;text-error&quot;</span>&gt;error color&lt;<span class="tag">/span</span>&gt;
+</code></pre>
+
+ <div class="docs-note">
+ <p><a class="text-primary p-5" href="#colors">primary link</a></p>
+ <p><a class="text-secondary p-5" href="#colors">secondary link</a></p>
+ <p><a class="text-gray p-5" href="#colors">gray link</a></p>
+ <p><a class="text-light bg-dark p-5 rounded" href="#colors">light link</a></p>
+ <p><a class="text-success p-5" href="#colors">success link</a></p>
+ <p><a class="text-warning p-5" href="#colors">warning link</a></p>
+ <p><a class="text-error p-5" href="#colors">error link</a></p>
+ </div>
+
+<!-- colors example -->
+<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">a</span> <span class="atn">class</span>=<span class="atv">&quot;text-primary&quot;</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;primary color&lt;<span class="tag">/a</span>&gt;
+&lt;<span class="tag">a</span> <span class="atn">class</span>=<span class="atv">&quot;text-secondary&quot;</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;secondary color&lt;<span class="tag">/a</span>&gt;
+&lt;<span class="tag">a</span> <span class="atn">class</span>=<span class="atv">&quot;text-gray&quot;</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;gray color&lt;<span class="tag">/a</span>&gt;
+&lt;<span class="tag">a</span> <span class="atn">class</span>=<span class="atv">&quot;text-light&quot;</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;light color&lt;<span class="tag">/a</span>&gt;
+&lt;<span class="tag">a</span> <span class="atn">class</span>=<span class="atv">&quot;text-success&quot;</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;success color&lt;<span class="tag">/a</span>&gt;
+&lt;<span class="tag">a</span> <span class="atn">class</span>=<span class="atv">&quot;text-warning&quot;</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;warning color&lt;<span class="tag">/a</span>&gt;
+&lt;<span class="tag">a</span> <span class="atn">class</span>=<span class="atv">&quot;text-error&quot;</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;error color&lt;<span class="tag">/a</span>&gt;
</code></pre>
- </section>
+ <h4 class="s-subtitle">Background colors</h4>
+ <div class="docs-note">
+ <p><span class="bg-primary text-light p-5 rounded">primary bg</span></p>
+ <p><span class="bg-secondary text-primary p-5 rounded">secondary bg</span></p>
+ <p><span class="bg-dark text-light p-5 rounded">dark bg</span></p>
+ <p><span class="bg-gray p-5 rounded">gray bg</span></p>
+ <p><span class="bg-success text-light p-5 rounded">success bg</span></p>
+ <p><span class="bg-warning text-light p-5 rounded">warning bg</span></p>
+ <p><span class="bg-error text-light p-5 rounded">error bg</span></p>
+ </div>
- <section id="display" class="container">
- <header class="text-center"><h3><a href="#display" class="anchor" aria-hidden="true">#</a>Display utilities</h3></header>
- <section class="notes">
- <p><strong>Display utilities</strong> are used for display and hidden things.</p>
- </section>
+<!-- colors example -->
+<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bg-primary&quot;</span>&gt;primary bg&lt;<span class="tag">/div</span>&gt;
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bg-secondary&quot;</span>&gt;secondary bg&lt;<span class="tag">/div</span>&gt;
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bg-dark&quot;</span>&gt;dark bg&lt;<span class="tag">/div</span>&gt;
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bg-gray&quot;</span>&gt;gray bg&lt;<span class="tag">/div</span>&gt;
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bg-success&quot;</span>&gt;success bg&lt;<span class="tag">/div</span>&gt;
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bg-warning&quot;</span>&gt;warning bg&lt;<span class="tag">/div</span>&gt;
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bg-error&quot;</span>&gt;error bg&lt;<span class="tag">/div</span>&gt;
+</code></pre>
+
+ </div>
+
+ <div id="display" class="container">
+ <h3 class="s-title"><a href="#display" class="anchor" aria-hidden="true">#</a>Display utilities</h3>
+ <div class="docs-note">
+ <p>Display utilities are used for display and hidden things.</p>
+ </div>
<!-- display utilities example -->
<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- display: block; --&gt;</span>
@@ -131,70 +349,13 @@
&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-assistive&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
</code></pre>
- </section>
-
- <section id="text" class="container">
- <header class="text-center"><h3><a href="#text" class="anchor" aria-hidden="true">#</a>Text utilities</h3></header>
- <section class="notes">
- <p><strong>Text utilities</strong> are used for text alignment, styles and overflow things.</p>
- </section>
-
-<!-- text utilities example -->
-<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- left-aligned text --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-left&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- center-aligned text --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-center&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- right-aligned text --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-right&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- justified text --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-justify&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-
-<span class="com">&lt;!-- Lowercased text --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-lowercase&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- Uppercased text --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-uppercase&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- Capitalized text --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-capitalize&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-
-<span class="com">&lt;!-- Normal weight text --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-normal&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- Bold text --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-bold&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- Italicized text --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-italic&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- Larger text (120%) --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-large&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-
-<span class="com">&lt;!-- Overflow behavior: display an ellipsis to represent clipped text --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-ellipsis&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- Overflow behavior: truncate the text --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-clip&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- Text may be broken at arbitrary points --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-break&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-</code></pre>
-
- </section>
-
- <section id="shapes" class="container">
- <header class="text-center"><h3><a href="#shapes" class="anchor" aria-hidden="true">#</a>Shape utilities</h3></header>
- <section class="notes">
- <p><strong>Shape utilities</strong> are used for change element shapes.</p>
- </section>
-
-<!-- shape utilities example -->
-<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- rounded element --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;rounded&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- circle element --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;circle&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-</code></pre>
-
- </section>
+ </div>
- <section id="divider" class="container">
- <header class="text-center"><h3><a href="#divider" class="anchor" aria-hidden="true">#</a>Divider</h3></header>
- <section class="notes">
- <p>A <strong>Divider</strong> is used for separating elements.</p>
- </section>
+ <div id="divider" class="container">
+ <h3 class="s-title"><a href="#divider" class="anchor" aria-hidden="true">#</a>Divider</h3>
+ <div class="docs-note">
+ <p>A Divider is used for separating elements.</p>
+ </div>
<div class="columns">
<div class="column">
<div class="divider"></div>
@@ -202,7 +363,9 @@
</div>
<div class="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>
@@ -243,7 +406,7 @@
</div>
</div>
-<!-- shape utilities example -->
+<!-- divider utilities example -->
<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- divider element --&gt;</span>
&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;divider&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
<span class="com">&lt;!-- divider element with text --&gt;</span>
@@ -260,55 +423,158 @@
&lt;<span class="tag">/div</span>&gt;
&lt;<span class="tag">/div</span>&gt;
</code></pre>
- </section>
+ </div>
- <section id="loading" class="container">
- <header class="text-center"><h3><a href="#loading" class="anchor" aria-hidden="true">#</a>Loading</h3></header>
- <section class="notes">
- <p><strong>Loading indicator</strong> is used for loading or updating. Also, you can add the <code>loading</code> class to buttons for loading status.</p>
- </section>
+ <div id="loading" class="container">
+ <h3 class="s-title"><a href="#loading" class="anchor" aria-hidden="true">#</a>Loading</h3>
+ <div class="docs-note">
+ <p>Loading indicator is used for loading or updating. Also, you can add the <code>loading</code> class to buttons for loading status. Add the <code>btn-lg</code> class for large size. </p>
+ </div>
<div class="columns">
- <div class="column">
+ <div class="column col-12 text-center">
<div class="loading"></div>
</div>
</div>
+ <div class="docs-note">
+ <p>Add the <code>btn-lg</code> class for large size. </p>
+ </div>
+ <div class="columns">
+ <div class="column col-12 text-center">
+ <div class="loading loading-lg"></div>
+ <p class="text-gray">Loading</p>
+ </div>
+ </div>
<!-- loading example -->
<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- loading element --&gt;</span>
&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;loading&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;loading loading-lg&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+</code></pre>
+
+ </div>
+
+ <div id="position" class="container">
+ <h3 class="s-title"><a href="#position" class="anchor" aria-hidden="true">#</a>Position utilities</h3>
+ <div class="docs-note">
+ <p>Position utilities are used for useful layout and position things, including clearfix, float, position and margin/padding utilities.</p>
+ </div>
+
+<!-- position utilities example -->
+<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- clear float --&gt;</span>
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;clearfix&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+<span class="com">&lt;!-- float: left and right --&gt;</span>
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;float-left&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;float-right&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+<span class="com">&lt;!-- position: relative, absolute and fixed --&gt;</span>
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;relative&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;absolute&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;fixed&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+<span class="com">&lt;!-- centered block --&gt;</span>
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;centered&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+<span class="com">&lt;!-- m-1 {margin: 4px;} m-2 {margin: 8px;} --&gt;</span>
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;m-1&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;m-2&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+<span class="com">&lt;!-- margin in 4 directions. mt-1 {margin-top: 4px;} mt-2 {margin-top: 8px;} --&gt;</span>
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;mt-1&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;mt-2&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+<span class="com">&lt;!-- mx-1 {margin-left: 4px; margin-right: 4px;} --&gt;</span>
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;mx-1&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;mx-2&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;my-1&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;my-2&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+<span class="com">&lt;!-- p-1 {padding: 4px;} p-2 {padding: 8px;} --&gt;</span>
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;p-1&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;p-2&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+<span class="com">&lt;!-- padding in 4 directions. pt-1 {padding-top: 4px;} pt-2 {padding-top: 8px;} --&gt;</span>
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;pt-1&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;pt-2&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+<span class="com">&lt;!-- px-1 {padding-left: 4px; padding-right: 4px;} --&gt;</span>
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;px-1&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;px-2&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;py-1&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;py-2&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
</code></pre>
- </section>
+ </div>
+
+ <div id="shapes" class="container">
+ <h3 class="s-title"><a href="#shapes" class="anchor" aria-hidden="true">#</a>Shape utilities</h3>
+ <div class="docs-note">
+ <p>Shape utilities are used for change element shapes.</p>
+ </div>
+ <div class="columns">
+ <div class="column col-6 text-center">
+ <div class="bg-primary text-light docs-shape rounded centered">
+ rounded
+ </div>
+ </div>
+ <div class="column col-6 text-center">
+ <div class="bg-primary text-light docs-shape circle centered">
+ circle
+ </div>
+ </div>
+ </div>
+
+<!-- shape utilities example -->
+<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- rounded element --&gt;</span>
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;rounded&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+<span class="com">&lt;!-- circle element --&gt;</span>
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;circle&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+</code></pre>
+
+ </div>
+
+ <div id="text" class="container">
+ <h3 class="s-title"><a href="#text" class="anchor" aria-hidden="true">#</a>Text utilities</h3>
+ <div class="docs-note">
+ <p>Text utilities are used for text alignment, styles and overflow things.</p>
+ </div>
+
+<!-- text utilities example -->
+<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- left-aligned text --&gt;</span>
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-left&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+<span class="com">&lt;!-- center-aligned text --&gt;</span>
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-center&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+<span class="com">&lt;!-- right-aligned text --&gt;</span>
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-right&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+<span class="com">&lt;!-- justified text --&gt;</span>
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-justify&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+
+<span class="com">&lt;!-- Lowercased text --&gt;</span>
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-lowercase&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+<span class="com">&lt;!-- Uppercased text --&gt;</span>
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-uppercase&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+<span class="com">&lt;!-- Capitalized text --&gt;</span>
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-capitalize&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+
+<span class="com">&lt;!-- Normal weight text --&gt;</span>
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-normal&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+<span class="com">&lt;!-- Bold text --&gt;</span>
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-bold&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+<span class="com">&lt;!-- Italicized text --&gt;</span>
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-italic&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+<span class="com">&lt;!-- Larger text (120%) --&gt;</span>
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-large&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+
+<span class="com">&lt;!-- Overflow behavior: display an ellipsis to represent clipped text --&gt;</span>
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-ellipsis&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+<span class="com">&lt;!-- Overflow behavior: truncate the text --&gt;</span>
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-clip&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+<span class="com">&lt;!-- Text may be broken at arbitrary points --&gt;</span>
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-break&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+</code></pre>
+
+ </div>
+
+ <footer class="s-footer">
+ <p><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 ♥ by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+ </footer>
- <section class="container">
- <div class="divider"></div>
- <ul class="pagination">
- <li class="page-item page-prev">
- <a href="components.html">
- <p class="page-item-subtitle">Previous</p>
- <h4 class="page-item-title">Components</h4>
- </a>
- </li>
- <li class="page-item page-next">
- <a href="experimentals.html">
- <p class="page-item-subtitle">Next</p>
- <h4 class="page-item-title">Experimentals</h4>
- </a>
- </li>
- </ul>
- </section>
</div>
- </section>
- </section>
+ </div>
+ </div>
- <footer class="bg-gray">
- <section id="copyright" class="grid-footer container grid-960">
- <p>
- <a href="index.html#introduction" target="_blank">Documents</a> | <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</a> | <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> | Version <span class="version"></span>
- </p>
- <p>Designed and built with ♥ by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
- </section>
- </footer>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),