diff options
1 files changed, 453 insertions, 187 deletions
| -rw-r--r-- | docs/utilities.html | 640 |
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"><!-- clear float --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"clearfix"</span>><<span class="tag">/div</span>> -<span class="com"><!-- float: left and right --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"float-left"</span>><<span class="tag">/div</span>> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"float-right"</span>><<span class="tag">/div</span>> -<span class="com"><!-- position: relative, absolute and fixed --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"rel"</span>><<span class="tag">/div</span>> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"abs"</span>><<span class="tag">/div</span>> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"fixed"</span>><<span class="tag">/div</span>> -<span class="com"><!-- centered block --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"centered"</span>><<span class="tag">/div</span>> -<span class="com"><!-- margin: 10px and 5px in 4 directions. mt-10 = margin-top: 10px; --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"mt-10"</span>><<span class="tag">/div</span>> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"mt-5"</span>><<span class="tag">/div</span>> -<span class="com"><!-- padding: 10px and 5px in 4 directions. pt-10 = padding-top: 10px; --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"pt-10"</span>><<span class="tag">/div</span>> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"pt-5"</span>><<span class="tag">/div</span>> +<!-- colors example --> +<pre class="code" data-lang="HTML"><code><<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"text-primary"</span>>primary color<<span class="tag">/span</span>> +<<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"text-secondary"</span>>secondary color<<span class="tag">/span</span>> +<<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"text-gray"</span>>gray color<<span class="tag">/span</span>> +<<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"text-light"</span>>light color<<span class="tag">/span</span>> +<<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"text-success"</span>>success color<<span class="tag">/span</span>> +<<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"text-warning"</span>>warning color<<span class="tag">/span</span>> +<<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"text-error"</span>>error color<<span class="tag">/span</span>> +</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><<span class="tag">a</span> <span class="atn">class</span>=<span class="atv">"text-primary"</span> <span class="atn">href</span>=<span class="atv">"#"</span>>primary color<<span class="tag">/a</span>> +<<span class="tag">a</span> <span class="atn">class</span>=<span class="atv">"text-secondary"</span> <span class="atn">href</span>=<span class="atv">"#"</span>>secondary color<<span class="tag">/a</span>> +<<span class="tag">a</span> <span class="atn">class</span>=<span class="atv">"text-gray"</span> <span class="atn">href</span>=<span class="atv">"#"</span>>gray color<<span class="tag">/a</span>> +<<span class="tag">a</span> <span class="atn">class</span>=<span class="atv">"text-light"</span> <span class="atn">href</span>=<span class="atv">"#"</span>>light color<<span class="tag">/a</span>> +<<span class="tag">a</span> <span class="atn">class</span>=<span class="atv">"text-success"</span> <span class="atn">href</span>=<span class="atv">"#"</span>>success color<<span class="tag">/a</span>> +<<span class="tag">a</span> <span class="atn">class</span>=<span class="atv">"text-warning"</span> <span class="atn">href</span>=<span class="atv">"#"</span>>warning color<<span class="tag">/a</span>> +<<span class="tag">a</span> <span class="atn">class</span>=<span class="atv">"text-error"</span> <span class="atn">href</span>=<span class="atv">"#"</span>>error color<<span class="tag">/a</span>> </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><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"bg-primary"</span>>primary bg<<span class="tag">/div</span>> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"bg-secondary"</span>>secondary bg<<span class="tag">/div</span>> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"bg-dark"</span>>dark bg<<span class="tag">/div</span>> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"bg-gray"</span>>gray bg<<span class="tag">/div</span>> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"bg-success"</span>>success bg<<span class="tag">/div</span>> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"bg-warning"</span>>warning bg<<span class="tag">/div</span>> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"bg-error"</span>>error bg<<span class="tag">/div</span>> +</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"><!-- display: block; --></span> @@ -131,70 +349,13 @@ <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-assistive"</span>><<span class="tag">/div</span>> </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"><!-- left-aligned text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-left"</span>><<span class="tag">/div</span>> -<span class="com"><!-- center-aligned text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-center"</span>><<span class="tag">/div</span>> -<span class="com"><!-- right-aligned text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-right"</span>><<span class="tag">/div</span>> -<span class="com"><!-- justified text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-justify"</span>><<span class="tag">/div</span>> - -<span class="com"><!-- Lowercased text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-lowercase"</span>><<span class="tag">/div</span>> -<span class="com"><!-- Uppercased text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-uppercase"</span>><<span class="tag">/div</span>> -<span class="com"><!-- Capitalized text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-capitalize"</span>><<span class="tag">/div</span>> - -<span class="com"><!-- Normal weight text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-normal"</span>><<span class="tag">/div</span>> -<span class="com"><!-- Bold text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-bold"</span>><<span class="tag">/div</span>> -<span class="com"><!-- Italicized text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-italic"</span>><<span class="tag">/div</span>> -<span class="com"><!-- Larger text (120%) --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-large"</span>><<span class="tag">/div</span>> - -<span class="com"><!-- Overflow behavior: display an ellipsis to represent clipped text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-ellipsis"</span>><<span class="tag">/div</span>> -<span class="com"><!-- Overflow behavior: truncate the text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-clip"</span>><<span class="tag">/div</span>> -<span class="com"><!-- Text may be broken at arbitrary points --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-break"</span>><<span class="tag">/div</span>> -</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"><!-- rounded element --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"rounded"</span>><<span class="tag">/div</span>> -<span class="com"><!-- circle element --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"circle"</span>><<span class="tag">/div</span>> -</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"><!-- divider element --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"divider"</span>><<span class="tag">/div</span>> <span class="com"><!-- divider element with text --></span> @@ -260,55 +423,158 @@ <<span class="tag">/div</span>> <<span class="tag">/div</span>> </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"><!-- loading element --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"loading"</span>><<span class="tag">/div</span>> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"loading loading-lg"</span>><<span class="tag">/div</span>> +</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"><!-- clear float --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"clearfix"</span>><<span class="tag">/div</span>> +<span class="com"><!-- float: left and right --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"float-left"</span>><<span class="tag">/div</span>> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"float-right"</span>><<span class="tag">/div</span>> +<span class="com"><!-- position: relative, absolute and fixed --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"relative"</span>><<span class="tag">/div</span>> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"absolute"</span>><<span class="tag">/div</span>> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"fixed"</span>><<span class="tag">/div</span>> +<span class="com"><!-- centered block --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"centered"</span>><<span class="tag">/div</span>> +<span class="com"><!-- m-1 {margin: 4px;} m-2 {margin: 8px;} --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"m-1"</span>><<span class="tag">/div</span>> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"m-2"</span>><<span class="tag">/div</span>> +<span class="com"><!-- margin in 4 directions. mt-1 {margin-top: 4px;} mt-2 {margin-top: 8px;} --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"mt-1"</span>><<span class="tag">/div</span>> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"mt-2"</span>><<span class="tag">/div</span>> +<span class="com"><!-- mx-1 {margin-left: 4px; margin-right: 4px;} --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"mx-1"</span>><<span class="tag">/div</span>> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"mx-2"</span>><<span class="tag">/div</span>> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"my-1"</span>><<span class="tag">/div</span>> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"my-2"</span>><<span class="tag">/div</span>> +<span class="com"><!-- p-1 {padding: 4px;} p-2 {padding: 8px;} --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"p-1"</span>><<span class="tag">/div</span>> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"p-2"</span>><<span class="tag">/div</span>> +<span class="com"><!-- padding in 4 directions. pt-1 {padding-top: 4px;} pt-2 {padding-top: 8px;} --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"pt-1"</span>><<span class="tag">/div</span>> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"pt-2"</span>><<span class="tag">/div</span>> +<span class="com"><!-- px-1 {padding-left: 4px; padding-right: 4px;} --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"px-1"</span>><<span class="tag">/div</span>> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"px-2"</span>><<span class="tag">/div</span>> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"py-1"</span>><<span class="tag">/div</span>> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"py-2"</span>><<span class="tag">/div</span>> </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"><!-- rounded element --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"rounded"</span>><<span class="tag">/div</span>> +<span class="com"><!-- circle element --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"circle"</span>><<span class="tag">/div</span>> +</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"><!-- left-aligned text --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-left"</span>><<span class="tag">/div</span>> +<span class="com"><!-- center-aligned text --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-center"</span>><<span class="tag">/div</span>> +<span class="com"><!-- right-aligned text --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-right"</span>><<span class="tag">/div</span>> +<span class="com"><!-- justified text --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-justify"</span>><<span class="tag">/div</span>> + +<span class="com"><!-- Lowercased text --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-lowercase"</span>><<span class="tag">/div</span>> +<span class="com"><!-- Uppercased text --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-uppercase"</span>><<span class="tag">/div</span>> +<span class="com"><!-- Capitalized text --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-capitalize"</span>><<span class="tag">/div</span>> + +<span class="com"><!-- Normal weight text --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-normal"</span>><<span class="tag">/div</span>> +<span class="com"><!-- Bold text --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-bold"</span>><<span class="tag">/div</span>> +<span class="com"><!-- Italicized text --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-italic"</span>><<span class="tag">/div</span>> +<span class="com"><!-- Larger text (120%) --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-large"</span>><<span class="tag">/div</span>> + +<span class="com"><!-- Overflow behavior: display an ellipsis to represent clipped text --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-ellipsis"</span>><<span class="tag">/div</span>> +<span class="com"><!-- Overflow behavior: truncate the text --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-clip"</span>><<span class="tag">/div</span>> +<span class="com"><!-- Text may be broken at arbitrary points --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-break"</span>><<span class="tag">/div</span>> +</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), |