diff options
Update old docs to new Pug templates
1 files changed, 409 insertions, 645 deletions
| -rw-r--r-- | docs/utilities.html | 1054 |
diff --git a/docs/utilities.html b/docs/utilities.html index 5a2256a..5032ec7 100644 --- a/docs/utilities.html +++ b/docs/utilities.html @@ -1,678 +1,442 @@ <!DOCTYPE html> <html lang="en"> -<head> - <meta charset="utf-8"> - <meta name="robots" content="index, follow"> - <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> - <meta http-equiv="x-ua-compatible" content="ie=edge"> - <meta name="author" content="https://github.com/picturepan2/"> - <title>Utilities - Spectre.css CSS Framework</title> - <link rel="shortcut icon" href="https://picturepan2.github.io/spectre/img/favicons/favicon.ico"> - <link rel="icon" href="https://picturepan2.github.io/spectre/img/favicons/favicon.png"> - <link rel="stylesheet" href="dist/spectre.min.css"> - <link rel="stylesheet" href="dist/spectre-icons.min.css"> - <link rel="stylesheet" href="dist/spectre-exp.min.css"> - <link rel="stylesheet" href="dist/docs.min.css"> -</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 href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a> - </div> - - <div id="sidebar" class="docs-sidebar off-canvas-sidebar"> - <div class="docs-brand"> - <a href="index.html" class="docs-logo"> - <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework"> - <h2>SPECTRE</h2> - </a> - </div> - <div class="docs-nav"> - <div class="accordion-container"> - <div class="accordion"> - <input type="checkbox" id="docs-accordion-1" name="docs-accordion-checkbox" hidden> - <label class="accordion-header c-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</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> - </ul> + <head> + <title>Utilities - Spectre.css CSS Framework</title> + <meta charset="utf-8"> + <meta name="robots" content="index, follow"> + <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> + <meta http-equiv="x-ua-compatible" content="ie=edge"> + <meta name="author" content="Yan Zhu"> + <link rel="shortcut icon" href="img/favicons/favicon.ico"> + <link rel="icon" href="img/favicons/favicon.png"> + <link rel="stylesheet" href="dist/spectre.min.css"> + <link rel="stylesheet" href="dist/spectre-icons.min.css"> + <link rel="stylesheet" href="dist/spectre-exp.min.css"> + <link rel="stylesheet" href="dist/docs.min.css"> + </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-sidebar off-canvas-sidebar" id="sidebar"> + <div class="docs-brand"><a class="docs-logo" href="/"><img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework"> + <h2>SPECTRE</h2></a></div> + <div class="docs-nav"> + <div class="accordion-container"> + <div class="accordion"> + <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/> + <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"><a href="getting-started.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> + </ul> + </div> </div> - </div> - <div class="accordion"> - <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden> - <label class="accordion-header c-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</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 class="accordion"> + <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/> + <label class="accordion-header c-hand" for="accordion-elements">Elements</label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"><a href="elements.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> + </ul> + </div> </div> - </div> - <div class="accordion"> - <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden> - <label class="accordion-header c-hand" for="docs-accordion-3"> - Layout - </label> - <div class="accordion-body"> - <ul class="menu menu-nav"> - <li class="menu-item"> - <a href="layout.html">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> - </ul> + <div class="accordion"> + <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/> + <label class="accordion-header c-hand" for="accordion-layout">Layout</label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"><a href="layout.html#flexbox">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> + </ul> + </div> </div> - </div> - <div class="accordion"> - <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden> - <label class="accordion-header c-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</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#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#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> - </ul> + <div class="accordion"> + <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/> + <label class="accordion-header c-hand" for="accordion-components">Components</label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"><a href="components.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> + </ul> + </div> </div> - </div> - <div class="accordion"> - <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden checked> - <label class="accordion-header c-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</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> - </ul> + <div class="accordion"> + <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/> + <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"><a href="utilities.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> + </ul> + </div> </div> - </div> - <div class="accordion"> - <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden> - <label class="accordion-header c-hand" for="docs-accordion-6"> - Experimentals - </label> - <div class="accordion-body"> - <ul class="menu menu-nav"> - <li class="menu-item"> - <a href="experimentals.html">Autocomplete</a> - </li> - <li class="menu-item"> - <a href="experimentals.html">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> - </ul> + <div class="accordion"> + <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/> + <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"><a href="experimentals.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> + </ul> + </div> </div> </div> </div> - </div> - </div> - - <a class="off-canvas-overlay" href="#close"></a> - - <div id="content" class="docs-content off-canvas-content"> - <div id="utilities" class="container"> - <h3 class="s-title"><a href="#utilities" class="anchor" aria-hidden="true">#</a>Utilities</h3> - </div> - - <div class="container"> - <div class="docs-ad"> - <div class="hide-md"> - <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> - <!-- GitHub-lg --> - <ins class="adsbygoogle" - style="display:inline-block;width:728px;height:90px" - data-ad-client="ca-pub-2225124559530218" - data-ad-slot="9894180784"></ins> - <script> - (adsbygoogle = window.adsbygoogle || []).push({}); - </script> - </div> - <div class="show-md"> - <!-- GitHub-sm --> - <ins class="adsbygoogle" - style="display:inline-block;width:300px;height:250px" - data-ad-client="ca-pub-2225124559530218" - data-ad-slot="9278881734"></ins> - <script> - (adsbygoogle = window.adsbygoogle || []).push({}); - </script> - </div> - </div> - </div> - - <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 id="colors-text" 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-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> - -<!-- colors --> -<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-1" href="#colors">primary link</a></p> - <p><a class="text-secondary p-1" href="#colors">secondary 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> - -<!-- colors --> -<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> - - <h4 id="colors-background" class="s-subtitle">Background colors</h4> - <div class="docs-note"> - <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> - -<!-- colors --> -<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 class="container"> - <div class="docs-ad docs-ad-sidebar"> - <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=picturepan2githubio" id="_carbonads_js"></script> - </div> - </div> - - <div id="cursors" class="container"> - <h3 class="s-title"><a href="#cursors" class="anchor" aria-hidden="true">#</a>Cursor utilities</h3> - <div class="docs-note"> - <p>Cursor utilities specify which mouse cursor to display when mouseover.</p> - </div> - <div class="columns"> - <div class="column"> - <div class="bg-gray docs-block c-hand">c-hand</div> - </div> - <div class="column"> - <div class="bg-gray docs-block c-move">c-move</div> - </div> - <div class="column"> - <div class="bg-gray docs-block c-zoom-in">c-zoom-in</div> - </div> - <div class="column"> - <div class="bg-gray docs-block c-zoom-out">c-zoom-out</div> - </div> - <div class="column"> - <div class="bg-gray docs-block c-not-allowed">c-not-allowed</div> - </div> - <div class="column"> - <div class="bg-gray docs-block c-auto">c-auto</div> - </div> - </div> - -<!-- display utilities --> -<pre class="code" data-lang="HTML"><code><span class="com"><!-- cursor: hand; --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"c-hand"</span>><<span class="tag">/div</span>> -<span class="com"><!-- cursor: move; --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"c-move"</span>><<span class="tag">/div</span>> -<span class="com"><!-- cursor: zoom-in; --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"c-zoom-in"</span>><<span class="tag">/div</span>> -<span class="com"><!-- cursor: zoom-out; --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"c-zoom-out"</span>><<span class="tag">/div</span>> -<span class="com"><!-- cursor: not-allowed; --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"c-not-allowed"</span>><<span class="tag">/div</span>> -<span class="com"><!-- cursor: auto; --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"c-auto"</span>><<span class="tag">/div</span>> + </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"><a class="anchor" href="#colors" aria-hidden="true">#</a>Color utilities</h3> + <p>Color utilities are used for changing colors for text, link and background.</p> + <h4 class="s-subtitle" id="colors-text"><a class="anchor" href="#colors-text" aria-hidden="true">#</a>Text colors</h4> + <div class="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-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-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> - - <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 --> -<pre class="code" data-lang="HTML"><code><span class="com"><!-- display: block; --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"d-block"</span>><<span class="tag">/div</span>> -<span class="com"><!-- display: inline; --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"d-inline"</span>><<span class="tag">/div</span>> -<span class="com"><!-- display: inline-block; --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"d-inline-block"</span>><<span class="tag">/div</span>> -<span class="com"><!-- display: flex; --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"d-flex"</span>><<span class="tag">/div</span>> -<span class="com"><!-- display: inline-flex; --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"d-inline-flex"</span>><<span class="tag">/div</span>> -<span class="com"><!-- display: none; --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"d-none"</span>><<span class="tag">/div</span>> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"d-hide"</span>><<span class="tag">/div</span>> -<span class="com"><!-- visibility: visible; --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"d-visible"</span>><<span class="tag">/div</span>> -<span class="com"><!-- visibility: hidden; --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"d-invisible"</span>><<span class="tag">/div</span>> -<span class="com"><!-- hide text contents --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-hide"</span>><<span class="tag">/div</span>> -<span class="com"><!-- assistive text for screen reader --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-assistive"</span>><<span class="tag">/div</span>> + <div class="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-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-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> - - </div> - - <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> - </div> - </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. + <h4 class="s-subtitle" id="colors-background"><a class="anchor" href="#colors-background" aria-hidden="true">#</a>Background colors</h4> + <div class="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> - - <div class="columns"> - <div class="column"> - <form> - <div class="form-group"> - <label class="form-label" for="input-example-1">Email</label> - <input class="form-input" type="text" id="input-example-1" placeholder="Email"> + <div class="container" id="cursor"> + <h3 class="s-title"><a class="anchor" href="#cursor" aria-hidden="true">#</a>Cursor utilities</h3> + <p>Cursor utilities specify which mouse cursor to display when mouseover.</p> + <div class="columns"> + <div class="column col-4"> + <div class="bg-gray docs-block c-hand">c-hand</div> </div> - <div class="form-group"> - <label class="form-label" for="input-example-2">Password</label> - <input class="form-input" type="password" id="input-example-2" placeholder="Password"> + <div class="column col-4"> + <div class="bg-gray docs-block c-move">c-move</div> </div> - <div class="form-group"> - <label class="form-checkbox"> - <input type="checkbox"> - <i class="form-icon"></i> Remember me - </label> + <div class="column col-4"> + <div class="bg-gray docs-block c-zoom-in">c-zoom-in</div> </div> - <div class="form-group"> - <button class="btn btn-primary">Sign in</button> + <div class="column col-4"> + <div class="bg-gray docs-block c-zoom-out">c-zoom-out</div> </div> - </form> - </div> - <div class="divider-vert" data-content="OR"></div> - <div class="column"> - <form> - <div class="form-group"> - <label class="form-label" for="input-example-3">Email</label> - <input class="form-input" type="text" id="input-example-3" placeholder="Email"> + <div class="column col-4"> + <div class="bg-gray docs-block c-not-allowed">c-not-allowed</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="column col-4"> + <div class="bg-gray docs-block c-auto">c-auto</div> </div> - </form> + </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> - -<!-- divider utilities --> -<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> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"divider text-center"</span> <span class="atn">data-content</span>=<span class="atv">"OR"</span>><<span class="tag">/div</span>> - -<span class="com"><!-- vertical divider element with text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"columns"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"column"</span>> - <span class="com"><!-- column content --></span> - <<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"divider-vert"</span> <span class="atn">data-content</span>=<span class="atv">"OR"</span>><<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"column"</span>> - <span class="com"><!-- column content --></span> - <<span class="tag">/div</span>> -<<span class="tag">/div</span>> -</code></pre> - - </div> + <div class="container" id="display"> + <h3 class="s-title"><a class="anchor" href="#display" aria-hidden="true">#</a>Display utilities</h3> + <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"><a class="anchor" href="#divider" aria-hidden="true">#</a>Divider</h3> + <p>A Divider is used for separating elements.</p> + <div class="columns"> + <div class="column"> + <div class="divider"></div> + </div> + </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> + <div class="columns"> + <div class="column"> + <form> + <div class="form-group"> + <label class="form-label" for="input-example-1">Email</label> + <input class="form-input" id="input-example-1" type="text" placeholder="Email"> + </div> + <div class="form-group"> + <label class="form-label" for="input-example-2">Password</label> + <input class="form-input" id="input-example-2" type="password" placeholder="Password"> + </div> + <div class="form-group"> + <label class="form-checkbox"> + <input type="checkbox"><i class="form-icon"></i> Remember me + </label> + </div> + <div class="form-group"> + <button class="btn btn-primary">Sign in</button> + </div> + </form> + </div> + <div class="divider-vert" data-content="OR"></div> + <div class="column"> + <form> + <div class="form-group"> + <label class="form-label" for="input-example-3">Email</label> + <input class="form-input" id="input-example-3" type="text" placeholder="Email"> + </div> + <div class="form-group"> + <button class="btn btn-primary btn-block">Sign up</button> + <button class="btn btn-link btn-block">Learn more</button> + </div> + </form> + </div> + </div> + <pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- 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> - <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.</p> - </div> - <div class="columns"> - <div class="column col-12 text-center"> - <div class="loading"></div> +<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> - <div class="docs-note"> - <p>Add the <code>loading-lg</code> class for large size. </p> - </div> - <div class="columns"> - <div class="column col-12 text-center"> - <div class="loading loading-lg"></div> + <div class="container" id="loading"> + <h3 class="s-title"><a class="anchor" href="#loading" aria-hidden="true">#</a>Loading</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="columns"> + <div class="column col-12 text-center"> + <div class="loading"></div> + </div> + </div> + <p>Add the <code>loading-lg</code> class for large size.</p> + <div class="columns"> + <div class="column col-12 text-center"> + <div class="loading loading-lg"></div> + </div> + </div> + <pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- 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> - -<!-- loading --> -<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 --> -<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>> + <div class="container" id="position"> + <h3 class="s-title"><a class="anchor" href="#position" aria-hidden="true">#</a>Position utilities</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 and fixed --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"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">"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">"fixed"</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">"centered"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></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> - - </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> +<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="column col-6 text-center"> - <div class="bg-primary text-light docs-shape circle centered"> - circle + <div class="container" id="shapes"> + <h3 class="s-title"><a class="anchor" href="#shapes" aria-hidden="true">#</a>Shape utilities</h3> + <p>Shape utilities are used for change element shapes.</p> + <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> + <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">"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">"circle"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre> </div> - </div> + <div class="container" id="text"> + <h3 class="s-title"><a class="anchor" href="#text" aria-hidden="true">#</a>Text utilities</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> -<!-- shape utilities --> -<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> +<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> - </div> +<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> - <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> +<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> - -<!-- text utilities --> -<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="docs-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 <span class="text-error">♥</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p> - </footer> - </div> - </div> - - <script> - (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ - (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), - m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) - })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); - - ga('create', 'UA-2702768-8', 'auto'); - ga('send', 'pageview'); - </script> -</body> -</html> + <script> + (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ + (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), + m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) + })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); + + ga('create', 'UA-2702768-8', 'auto'); + ga('send', 'pageview'); + </script> + </body> +</html>
\ No newline at end of file |