diff options
Diffstat (limited to 'docs/utilities.html')
| -rw-r--r-- | docs/utilities.html | 529 |
1 files changed, 182 insertions, 347 deletions
diff --git a/docs/utilities.html b/docs/utilities.html index 4f07572..d38e2bf 100644 --- a/docs/utilities.html +++ b/docs/utilities.html @@ -6,6 +6,7 @@ <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"> @@ -13,13 +14,17 @@ <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.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><a class="btn btn-primary" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a></div> + <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> + <h2>SPECTRE</h2></a> + </div> <div class="docs-nav"> <div class="accordion-container"> <div class="accordion"> @@ -27,11 +32,14 @@ <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.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#custom">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> + <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> @@ -40,14 +48,22 @@ <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.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#code">Code</a></li> - <li class="menu-item"><a href="elements.html#media">Media</a></li> + <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> @@ -56,9 +72,12 @@ <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.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/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> @@ -67,25 +86,44 @@ <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.html#accordions">Accordions</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#empty">Empty states</a></li> - <li class="menu-item"><a href="components.html#menu">Menu</a></li> - <li class="menu-item"><a href="components.html#modals">Modals</a></li> - <li class="menu-item"><a href="components.html#nav">Nav</a></li> - <li class="menu-item"><a href="components.html#pagination">Pagination</a></li> - <li class="menu-item"><a href="components.html#panels">Panels</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> + <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> @@ -94,14 +132,22 @@ <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.html#colors">Colors</a></li> - <li class="menu-item"><a href="utilities.html#cursors">Cursors</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> + <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> @@ -110,17 +156,28 @@ <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.html#autocomplete">Autocomplete</a></li> - <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#off-canvas">Off-canvas</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> + <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> @@ -129,8 +186,8 @@ </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="container" id="utilities"> + <h3 class="s-title">Utilities<a class="anchor" href="#utilities" 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> @@ -142,308 +199,86 @@ <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"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-primary"</span>></span>primary color<span class="hljs-tag"></<span class="hljs-name">span</span>></span> -<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-secondary"</span>></span>secondary color<span class="hljs-tag"></<span class="hljs-name">span</span>></span> -<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-dark"</span>></span>dark color<span class="hljs-tag"></<span class="hljs-name">span</span>></span> -<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-gray"</span>></span>gray color<span class="hljs-tag"></<span class="hljs-name">span</span>></span> -<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-light"</span>></span>light color<span class="hljs-tag"></<span class="hljs-name">span</span>></span> -<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-success"</span>></span>success color<span class="hljs-tag"></<span class="hljs-name">span</span>></span> -<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-warning"</span>></span>warning color<span class="hljs-tag"></<span class="hljs-name">span</span>></span> -<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-error"</span>></span>error color<span class="hljs-tag"></<span class="hljs-name">span</span>></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"><<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>></span>primary color<span class="hljs-tag"></<span class="hljs-name">a</span>></span> -<span class="hljs-tag"><<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>></span>secondary color<span class="hljs-tag"></<span class="hljs-name">a</span>></span> -<span class="hljs-tag"><<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>></span>dark color<span class="hljs-tag"></<span class="hljs-name">a</span>></span> -<span class="hljs-tag"><<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>></span>gray color<span class="hljs-tag"></<span class="hljs-name">a</span>></span> -<span class="hljs-tag"><<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>></span>light color<span class="hljs-tag"></<span class="hljs-name">a</span>></span> -<span class="hljs-tag"><<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>></span>success color<span class="hljs-tag"></<span class="hljs-name">a</span>></span> -<span class="hljs-tag"><<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>></span>warning color<span class="hljs-tag"></<span class="hljs-name">a</span>></span> -<span class="hljs-tag"><<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>></span>error color<span class="hljs-tag"></<span class="hljs-name">a</span>></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"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-primary"</span>></span>primary bg<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-secondary"</span>></span>secondary bg<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-dark"</span>></span>dark bg<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-gray"</span>></span>gray bg<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-success"</span>></span>success bg<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-warning"</span>></span>warning bg<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-error"</span>></span>error bg<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre> - </div> - <div class="container" id="cursors"> - <h3 class="s-title">Cursor utilities<a class="anchor" href="#cursors" aria-hidden="true">#</a></h3> - <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"><!-- cursor: hand; --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-hand"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-comment"><!-- cursor: move; --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-move"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-comment"><!-- cursor: zoom-in; --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-zoom-in"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-comment"><!-- cursor: zoom-out; --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-zoom-out"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-comment"><!-- cursor: not-allowed; --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-not-allowed"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-comment"><!-- cursor: auto; --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-auto"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre> - </div> - <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 docs-ad-sidebar text-center"> - <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&placement=picturepan2githubio"></script> - </div> - <p>Display utilities are used for display and hidden things.</p> - <pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- display: block; --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-block"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-comment"><!-- display: inline; --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-inline"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-comment"><!-- display: inline-block; --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-inline-block"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-comment"><!-- display: flex; --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-flex"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-comment"><!-- display: inline-flex; --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-inline-flex"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-comment"><!-- display: none; --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-none"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-hide"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-comment"><!-- visibility: visible; --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-visible"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-comment"><!-- visibility: hidden; --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-invisible"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-comment"><!-- hide text contents --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-hide"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-comment"><!-- assistive text for screen reader --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-assistive"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre> - </div> - <div class="container" id="divider"> - <h3 class="s-title">Divider<a class="anchor" href="#divider" aria-hidden="true">#</a></h3> - <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> + <p> <strong>Spectre.css </strong>is a lightweight, responsive and modern CSS framework for faster and extensible development.</p> + <p> + Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.</p> <div class="docs-demo columns"> - <div class="column"> - <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 class="column col-6 col-xs-12"> + <div class="card"> + <div class="card-header"> + <div class="card-title h5">Color utilities</div> </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 class="card-body">Colors for text, link and background</div> + <div class="card-footer"><a class="btn btn-primary" href="utilities/colors.html">View</a></div> + </div> + </div> + <div class="column col-6 col-xs-12"> + <div class="card"> + <div class="card-header"> + <div class="card-title h5">Cursor utilities</div> </div> - <div class="form-group"> - <label class="form-checkbox"> - <input type="checkbox"><i class="form-icon"></i> Remember me - </label> + <div class="card-body">Mouse cursor to display when mouseover</div> + <div class="card-footer"><a class="btn btn-primary" href="utilities/cursors.html">View</a></div> + </div> + </div> + <div class="column col-6 col-xs-12"> + <div class="card"> + <div class="card-header"> + <div class="card-title h5">Display utilities</div> </div> - <div class="form-group"> - <button class="btn btn-primary">Sign in</button> + <div class="card-body">Display and hidden things</div> + <div class="card-footer"><a class="btn btn-primary" href="utilities/display.html">View</a></div> + </div> + </div> + <div class="column col-6 col-xs-12"> + <div class="card"> + <div class="card-header"> + <div class="card-title h5">Divider</div> </div> - </form> + <div class="card-body">Separating elements</div> + <div class="card-footer"><a class="btn btn-primary" href="utilities/divider.html">View</a></div> + </div> </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 class="column col-6 col-xs-12"> + <div class="card"> + <div class="card-header"> + <div class="card-title h5">Loading</div> </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 class="card-body">Indicating loading or updating state</div> + <div class="card-footer"><a class="btn btn-primary" href="utilities/loading.html">View</a></div> + </div> + </div> + <div class="column col-6 col-xs-12"> + <div class="card"> + <div class="card-header"> + <div class="card-title h5">Position utilities</div> </div> - </form> + <div class="card-body">Useful layout and position things</div> + <div class="card-footer"><a class="btn btn-primary" href="utilities/position.html">View</a></div> + </div> </div> - </div> - <pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- divider element --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"divider"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-comment"><!-- divider element with text --></span> -<span class="hljs-tag"><<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>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> - -<span class="hljs-comment"><!-- vertical divider element with text --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column"</span>></span> - <span class="hljs-comment"><!-- column content --></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<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>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column"</span>></span> - <span class="hljs-comment"><!-- column content --></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre> - </div> - <div class="container" id="loading"> - <h3 class="s-title">Loading<a class="anchor" href="#loading" aria-hidden="true">#</a></h3> - <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 class="column col-6 col-xs-12"> + <div class="card"> + <div class="card-header"> + <div class="card-title h5">Shape utilities</div> + </div> + <div class="card-body">Changing element shapes</div> + <div class="card-footer"><a class="btn btn-primary" href="utilities/shapes.html">View</a></div> + </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 class="column col-6 col-xs-12"> + <div class="card"> + <div class="card-header"> + <div class="card-title h5">Text utilities</div> + </div> + <div class="card-body">Text alignment, styles and overflow things</div> + <div class="card-footer"><a class="btn btn-primary" href="utilities/text.html">View</a></div> + </div> </div> </div> - <pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- loading element --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"loading"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"loading loading-lg"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre> - </div> - <div class="container" id="position"> - <h3 class="s-title">Position utilities<a class="anchor" href="#position" aria-hidden="true">#</a></h3> - <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"><!-- clear float --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"clearfix"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-comment"><!-- float: left and right --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"float-left"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"float-right"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-comment"><!-- position: relative, absolute, fixed and sticky --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p-relative"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p-absolute"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p-fixed"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p-sticky"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-comment"><!-- centered block --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p-centered"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> - -<span class="hljs-comment"><!-- m-1 {margin: 4px;} m-2 {margin: 8px;} --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m-1"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m-2"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-comment"><!-- margin in 4 directions. mt-1 {margin-top: 4px;} mt-2 {margin-top: 8px;} --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mt-1"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mt-2"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-comment"><!-- mx-1 {margin-left: 4px; margin-right: 4px;} --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mx-1"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mx-2"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"my-1"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"my-2"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-comment"><!-- p-1 {padding: 4px;} p-2 {padding: 8px;} --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p-1"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p-2"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-comment"><!-- padding in 4 directions. pt-1 {padding-top: 4px;} pt-2 {padding-top: 8px;} --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pt-1"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pt-2"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-comment"><!-- px-1 {padding-left: 4px; padding-right: 4px;} --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"px-1"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"px-2"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-1"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py-2"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre> - </div> - <div class="container" id="shapes"> - <h3 class="s-title">Shape utilities<a class="anchor" href="#shapes" aria-hidden="true">#</a></h3> - <p>Shape utilities are used for change 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 class="docs-ad docs-ad-sidebar text-center"> + <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&placement=picturepan2githubio"></script> </div> - <pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- rounded element --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"s-rounded"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-comment"><!-- circle element --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"s-circle"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre> - </div> - <div class="container" id="text"> - <h3 class="s-title">Text utilities<a class="anchor" href="#text" aria-hidden="true">#</a></h3> - <p>Text utilities are used for text alignment, styles and overflow things.</p> - <pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- left-aligned text --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-left"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-comment"><!-- center-aligned text --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-comment"><!-- right-aligned text --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-right"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-comment"><!-- justified text --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-justify"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> - -<span class="hljs-comment"><!-- Lowercased text --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-lowercase"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-comment"><!-- Uppercased text --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-uppercase"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-comment"><!-- Capitalized text --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-capitalize"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> - -<span class="hljs-comment"><!-- Normal weight text --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-normal"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-comment"><!-- Bold text --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-bold"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-comment"><!-- Italicized text --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-italic"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-comment"><!-- Larger text (120%) --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-large"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> - -<span class="hljs-comment"><!-- Overflow behavior: display an ellipsis to represent clipped text --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-ellipsis"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-comment"><!-- Overflow behavior: truncate the text --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-clip"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-comment"><!-- Text may be broken at arbitrary points --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-break"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre> </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> |