diff options
Fix Docs hash linking bug
1 files changed, 1283 insertions, 756 deletions
| -rw-r--r-- | docs/layout.html | 2039 |
diff --git a/docs/layout.html b/docs/layout.html index dd4fae5..b20594a 100644 --- a/docs/layout.html +++ b/docs/layout.html @@ -1,799 +1,1326 @@ <!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>Layout - 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>Elements - 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="" checked="checked"/> + <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 checked> - <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#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> </div> - </div> - <div class="accordion"> - <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden> - <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=""/> + <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">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="layout" class="container"> - <h3 class="s-title"><a href="#layout" class="anchor" aria-hidden="true">#</a>Layout</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="grid" class="container"> - <h3 class="s-title"><a href="#grid" class="anchor" aria-hidden="true">#</a>Flexbox grid</h3> - <div class="docs-note"> - <p>Layout includes flexbox based responsive grid system with 12 columns. </p> - </div> - <div class="columns"> - <div class="column"> - <div class="bg-primary text-secondary docs-block"></div> - </div> - <div class="column"> - <div class="bg-primary text-secondary docs-block"></div> - </div> - <div class="column"> - <div class="bg-primary text-secondary docs-block"></div> - </div> - <div class="column"> - <div class="bg-primary text-secondary docs-block"></div> - </div> - <div class="column"> - <div class="bg-primary text-secondary docs-block"></div> - </div> - <div class="column"> - <div class="bg-primary text-secondary docs-block"></div> - </div> - <div class="column"> - <div class="bg-primary text-secondary docs-block"></div> - </div> - <div class="column"> - <div class="bg-primary text-secondary docs-block"></div> - </div> - <div class="column"> - <div class="bg-primary text-secondary docs-block"></div> - </div> - <div class="column"> - <div class="bg-primary text-secondary docs-block"></div> - </div> - <div class="column"> - <div class="bg-primary text-secondary docs-block"></div> - </div> - <div class="column"> - <div class="bg-primary text-secondary docs-block"></div> - </div> - </div> - - <div class="columns"> - <div class="column col-12"> - <div class="bg-gray docs-block">col-12 (100%)</div> - </div> - </div> - <div class="columns"> - <div class="column col-9"> - <div class="bg-gray docs-block">col-9 (75%)</div> - </div> - </div> - <div class="columns"> - <div class="column col-6"> - <div class="bg-gray docs-block">col-6 (50%)</div> - </div> - </div> - <div class="columns"> - <div class="column col-3"> - <div class="bg-gray docs-block">col-3 (25%)</div> - </div> - </div> - - <div class="docs-note"> - <p>Add the <code>columns</code> class to a container with the <code>container</code> class. And add any element you want with the <code>column</code> class inside the container. These columns will take up the space equally. You can specific the width of each column by adding class <code>col-[1-12]</code>.</p> - <p>And you can add the <code>col-gapless</code> class to the <code>columns</code> to have gapless columns.</p> - </div> - - <div class="columns col-gapless"> - <div class="column col-6"> - <div class="bg-gray docs-block">col-6 (gapless)</div> - </div> - <div class="column col-6"> - <div class="bg-gray docs-block">col-6 (gapless)</div> - </div> - </div> + </div><a class="off-canvas-overlay" href="#close"></a> + <div class="off-canvas-content"> + <div class="docs-content" id="content"> + <div class="container" id="typography"> + <h3 class="s-title"><a class="anchor" href="#typography" aria-hidden="true">#</a>Typography</h3> + <p>Typography sets default styles for headings, paragraphs, semantic text, blockquote and lists elements.</p> + <h4 class="s-subtitle" id="typography-headings"><a class="anchor" href="#typography-headings" aria-hidden="true">#</a>Headings</h4> + <div class="columns"> + <div class="column col-12"> + <h1>H1 Heading <small class="label">40px</small></h1> + </div> + <div class="column col-12"> + <h2>H2 Heading <small class="label">32px</small></h2> + </div> + <div class="column col-12"> + <h3>H3 Heading <small class="label">28px</small></h3> + </div> + <div class="column col-12"> + <h4>H4 Heading <small class="label">24px</small></h4> + </div> + <div class="column col-12"> + <h5>H5 Heading <small class="label">20px</small></h5> + </div> + <div class="column col-12"> + <h6>H6 Heading <small class="label">16px</small></h6> + </div> + </div> + <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">h1</span>></span>H1 Heading<span class="hljs-tag"></<span class="hljs-name">h1</span>></span> +<span class="hljs-tag"><<span class="hljs-name">h1</span>></span>H1 Heading <span class="hljs-tag"><<span class="hljs-name">small</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"label"</span>></span>40px<span class="hljs-tag"></<span class="hljs-name">small</span>></span><span class="hljs-tag"></<span class="hljs-name">h1</span>></span> +<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"h1"</span>></span>H1 Heading<span class="hljs-tag"></<span class="hljs-name">span</span>></span> +</code></pre> + <h4 class="s-subtitle" id="typography-paragraphs"><a class="anchor" href="#typography-paragraphs" aria-hidden="true">#</a>Paragraphs</h4> + <p>Lorem ipsum dolor sit amet, consectetur <a href="#typography">adipiscing elit</a>. + Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat. + </p> + <p>Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.</p> + <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Lorem ipsum dolor sit amet, ...<span class="hljs-tag"></<span class="hljs-name">p</span>></span> +<span class="hljs-tag"><<span class="hljs-name">p</span>></span>...<span class="hljs-tag"></<span class="hljs-name">p</span>></span> +</code></pre> + <h4 class="s-subtitle" id="typography-semantic-text"><a class="anchor" href="#typography-semantic-text" aria-hidden="true">#</a>Semantic text elements</h4> + <div class="columns"> + <div class="column col-6 col-xs-12"><abbr title="Internationalization">I18N</abbr><code class="ml-2">abbr</code></div> + <div class="column col-6 col-xs-12"><strong>Bold</strong><code class="ml-2">strong</code><code class="ml-2">b</code></div> + <div class="column col-6 col-xs-12"> + <cite>Citation</cite><code class="ml-2">cite</code> + </div> + <div class="column col-6 col-xs-12"><code>Hello World!</code><code class="ml-2">code</code></div> + <div class="column col-6 col-xs-12"> + <del>Deleted</del><code class="ml-2">del</code> + </div> + <div class="column col-6 col-xs-12"><em>Emphasis</em><code class="ml-2">em</code></div> + <div class="column col-6 col-xs-12"><i>Italic</i><code class="ml-2">i</code></div> + <div class="column col-6 col-xs-12"><ins>Inserted</ins><code class="ml-2">ins</code></div> + <div class="column col-6 col-xs-12"><kbd>Ctrl + S</kbd><code class="ml-2">kbd</code></div> + <div class="column col-6 col-xs-12"> + <mark>Highlighted</mark><code class="ml-2">mark</code> + </div> + <div class="column col-6 col-xs-12"> + <ruby>漢 + <rt>kan</rt>字 + <rt>ji</rt> + </ruby><code class="ml-2">ruby</code> + </div> + <div class="column col-6 col-xs-12"> + <s>Strikethrough</s><code class="ml-2">s</code> + </div> + <div class="column col-6 col-xs-12"><samp>Sample</samp><code class="ml-2">samp</code></div> + <div class="column col-6 col-xs-12">Text <sub>Subscripted</sub><code class="ml-2">sub</code></div> + <div class="column col-6 col-xs-12">Text <sup>Superscripted</sup><code class="ml-2">sup</code></div> + <div class="column col-6 col-xs-12"> + <time>20:00</time><code class="ml-2">time</code> + </div> + <div class="column col-6 col-xs-12"> + <u>Underline</u><code class="ml-2">u</code> + </div> + <div class="column col-6 col-xs-12"> + <var>x</var> = + <var>y</var> + 2<code class="ml-2">var</code> + </div> + </div> + <h4 class="s-subtitle" id="typography-east-asian"><a class="anchor" href="#typography-east-asian" aria-hidden="true">#</a>Optimized for East Asian fonts</h4> + <p class="h5"><small lang="zh-Hans">你好</small>, <small lang="ja">こんにちは</small>,<small lang="ko">안녕하세요</small></p> + <p class="h6">Chinese (Simplified)</p> + <p lang="zh-Hans">革命不是请客吃饭,不是做文章,不是绘画绣花,不能那样雅致,那样从容不迫,“文质彬彬”,那样“温良恭俭让”。革命就是暴动,是一个阶级推翻一个阶级的暴烈的行动。</p> + <p class="h6">Chinese (Tranditional)</p> + <p lang="zh-Hant">山不在高,有仙則名;水不在深,有龍則靈。斯是陋室,惟吾德馨。苔痕上階綠,草色入簾青;談笑有鴻儒,往來無白丁。可以調素琴,閱金經。無絲竹之亂耳,無案牘之勞形。南陽諸葛廬,西蜀子雲亭。孔子云:「何陋之有?」</p> + <p class="h6">Japanese</p> + <p lang="ja">祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。おごれる人も久しからず。ただ春の夜の夢のごとし。たけき者も遂にはほろびぬ、ひとへに風の前の塵に同じ。</p> + <p class="h6">Korean</p> + <p lang="ko">나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다.</p> + <p>Use the <code>lang</code> attribute to the container element to have better Asian CJK (Chinese, Japanese and Korean) font support.</p> + <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"zh-Hans"</span>></span>革命不是请客吃饭,不是做文章……<span class="hljs-tag"></<span class="hljs-name">p</span>></span> +<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"ja"</span>></span>祇園精舎の鐘の声、諸行無常の響きあり……<span class="hljs-tag"></<span class="hljs-name">p</span>></span> +<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"ko"</span>></span>나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로……<span class="hljs-tag"></<span class="hljs-name">p</span>></span> +</code></pre> + <p>And you can use the <code>cjk</code> class or the <code>lang</code> attribute to add spacing between underlines and strike-through text for better Chinese and Japanese readability.</p> + <p lang="ja"> + <u>祇園</u> + <u>精舎</u>の鐘の声、諸行無常の響きあり。 + </p> + <p lang="ja"> + <del>祇園</del> + <del>精舎</del>の鐘の声、諸行無常の響きあり。 + </p> + <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"cjk"</span>></span><span class="hljs-tag"><<span class="hljs-name">u</span>></span>祇園<span class="hljs-tag"></<span class="hljs-name">u</span>></span><span class="hljs-tag"><<span class="hljs-name">u</span>></span>精舎<span class="hljs-tag"></<span class="hljs-name">u</span>></span>の鐘の声、諸行無常の響きあり。……<span class="hljs-tag"></<span class="hljs-name">p</span>></span> +<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"cjk"</span>></span><span class="hljs-tag"><<span class="hljs-name">del</span>></span>祇園<span class="hljs-tag"></<span class="hljs-name">del</span>></span><span class="hljs-tag"><<span class="hljs-name">del</span>></span>精舎<span class="hljs-tag"></<span class="hljs-name">del</span>></span>の鐘の声、諸行無常の響きあり。……<span class="hljs-tag"></<span class="hljs-name">p</span>></span> +</code></pre> + <h4 class="s-subtitle" id="typography-fonts"><a class="anchor" href="#typography-fonts" aria-hidden="true">#</a>Fonts</h4> + <p>Spectre sets the most common and best <code>font-family</code> for each OS with fallback support in old systems. + There are also fonts targeted East Asian typography. + </p> + <pre class="code"><code><span class="hljs-comment">/* Western typography targeted */</span> +<span class="hljs-attribute">font-family</span>: -apple-system, system-ui, BlinkMacSystemFont, <span class="hljs-string">"Segoe UI"</span>, Roboto, <span class="hljs-string">"Helvetica Neue"</span>, sans-serif; +<span class="hljs-comment">/* Monospace typography targeted */</span> +<span class="hljs-attribute">font-family</span>: <span class="hljs-string">"SF Mono"</span>, <span class="hljs-string">"Segoe UI Mono"</span>, <span class="hljs-string">"Roboto Mono"</span>, Menlo, Courier, monospace; - <div class="docs-note"> - <p>By default, Spectre grid has multi-line flexbox enabled. You can add the <code>col-oneline</code> class to <code>columns</code> to make all its child columns positioned in the same single row.</p> - </div> +<span class="hljs-comment">/* Chinese (lang="zh-Hans" and lang="zh-Hant") targeted */</span> +<span class="hljs-attribute">font-family</span>: -apple-system, system-ui, BlinkMacSystemFont, <span class="hljs-string">"Segoe UI"</span>, Roboto, <span class="hljs-string">"PingFang SC"</span>, <span class="hljs-string">"Hiragino Sans GB"</span>, <span class="hljs-string">"Microsoft YaHei"</span>, <span class="hljs-string">"Helvetica Neue"</span>, sans-serif; +<span class="hljs-comment">/* Japanese (lang="ja") targeted */</span> +<span class="hljs-attribute">font-family</span>: -apple-system, system-ui, BlinkMacSystemFont, <span class="hljs-string">"Segoe UI"</span>, Roboto, <span class="hljs-string">"Hiragino Sans"</span>, <span class="hljs-string">"Hiragino Kaku Gothic Pro"</span>, <span class="hljs-string">"Yu Gothic"</span>, YuGothic, Meiryo, <span class="hljs-string">"Helvetica Neue"</span>, sans-serif; +<span class="hljs-comment">/* Korean (lang="ko") targeted */</span> +<span class="hljs-attribute">font-family</span>: -apple-system, system-ui, BlinkMacSystemFont, <span class="hljs-string">"Segoe UI"</span>, Roboto, <span class="hljs-string">"Malgun Gothic"</span>, <span class="hljs-string">"Helvetica Neue"</span>, sans-serif; +</code></pre> + <h4 class="s-subtitle" id="typography-blockquote"><a class="anchor" href="#typography-blockquote" aria-hidden="true">#</a>Blockquote</h4> + <blockquote> + <p>The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life.</p> + <cite>- Bill Gates</cite> + </blockquote> + <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">blockquote</span>></span> + <span class="hljs-tag"><<span class="hljs-name">p</span>></span>The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life. <span class="hljs-tag"></<span class="hljs-name">p</span>></span> + <span class="hljs-tag"><<span class="hljs-name">cite</span>></span>- Bill Gates<span class="hljs-tag"></<span class="hljs-name">cite</span>></span> +<span class="hljs-tag"></<span class="hljs-name">blockquote</span>></span> +</code></pre> + <h4 class="s-subtitle" id="typography-lists"><a class="anchor" href="#typography-lists" aria-hidden="true">#</a>Lists</h4> + <div class="columns"> + <div class="column col-4 col-xs-12"> + <ul class="list"> + <li>list item 1</li> + <li>list item 2 + <ul> + <li>list item 2.1</li> + <li>list item 2.2</li> + <li>list item 2.3</li> + </ul> + </li> + <li>list item 3</li> + </ul> + </div> + <div class="column col-4 col-xs-12"> + <ol class="list"> + <li>list item 1</li> + <li>list item 2 + <ol> + <li>list item 2.1</li> + <li>list item 2.2</li> + <li>list item 2.3</li> + </ol> + </li> + <li>list item 3</li> + </ol> + </div> + <div class="column col-4 col-xs-12"> + <dl class="list"> + <dt>description list term 1</dt> + <dd>description list description 1</dd> + <dt>description list term 2</dt> + <dd>description list description 2</dd> + <dt>description list term 3</dt> + <dd>description list description 3</dd> + </dl> + </div> + </div> + <pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- unordered list --></span> +<span class="hljs-tag"><<span class="hljs-name">ul</span>></span> + <span class="hljs-tag"><<span class="hljs-name">li</span>></span>list item 1<span class="hljs-tag"></<span class="hljs-name">li</span>></span> + <span class="hljs-tag"><<span class="hljs-name">li</span>></span>list item 2 + <span class="hljs-tag"><<span class="hljs-name">ul</span>></span> + <span class="hljs-tag"><<span class="hljs-name">li</span>></span>list item 2.1<span class="hljs-tag"></<span class="hljs-name">li</span>></span> + <span class="hljs-tag"><<span class="hljs-name">li</span>></span>list item 2.2<span class="hljs-tag"></<span class="hljs-name">li</span>></span> + <span class="hljs-tag"><<span class="hljs-name">li</span>></span>list item 2.3<span class="hljs-tag"></<span class="hljs-name">li</span>></span> + <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> + <span class="hljs-tag"></<span class="hljs-name">li</span>></span> + <span class="hljs-tag"><<span class="hljs-name">li</span>></span>list item 3<span class="hljs-tag"></<span class="hljs-name">li</span>></span> +<span class="hljs-tag"></<span class="hljs-name">ul</span>></span> - <div class="columns col-oneline"> - <div class="column col-8"> - <div class="bg-gray docs-block">col-8</div> +<span class="hljs-comment"><!-- description list --></span> +<span class="hljs-tag"><<span class="hljs-name">dl</span>></span> + <span class="hljs-tag"><<span class="hljs-name">dt</span>></span>description list term<span class="hljs-tag"></<span class="hljs-name">dt</span>></span> + <span class="hljs-tag"><<span class="hljs-name">dd</span>></span>description list description<span class="hljs-tag"></<span class="hljs-name">dd</span>></span> +<span class="hljs-tag"></<span class="hljs-name">dl</span>></span></code></pre> </div> - <div class="column col-8"> - <div class="bg-gray docs-block">col-8</div> + <div class="container" id="tables"> + <h3 class="s-title"><a class="anchor" href="#tables" aria-hidden="true">#</a>Tables</h3> + <p>Tables include default styles for tables and data sets.</p> + <div class="columns"> + <div class="column col-12"> + <table class="table table-striped"> + <thead> + <tr> + <th>Name</th> + <th>Genre</th> + <th>Release date</th> + </tr> + </thead> + <tbody> + <tr> + <td>The Shawshank Redemption</td> + <td>Crime, Drama</td> + <td>14 October 1994</td> + </tr> + <tr> + <td>The Godfather</td> + <td>Crime, Drama</td> + <td>24 March 1972</td> + </tr> + <tr> + <td>Schindler's List</td> + <td>Biography, Drama, History</td> + <td>4 February 1994</td> + </tr> + <tr> + <td>Se7en</td> + <td>Crime, Drama, Mystery</td> + <td>22 September 1995</td> + </tr> + </tbody> + </table> + </div> + </div> + <p>Add the <code>table</code> class to any <table> element. + The class will add padding, border and emphasized table header. + Use the <code>table-striped</code> class to <table> to add zebra striped style. + For hoverable table rows, you can add the <code>table-hover</code> class to enable hover style. + </p> + <p>Use the <code>active</code> class to make <tr> element highlighted.</p> + <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">table</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"table table-striped table-hover"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">thead</span>></span> + <span class="hljs-tag"><<span class="hljs-name">tr</span>></span> + <span class="hljs-tag"><<span class="hljs-name">th</span>></span>name<span class="hljs-tag"></<span class="hljs-name">th</span>></span> + <span class="hljs-tag"><<span class="hljs-name">th</span>></span>genre<span class="hljs-tag"></<span class="hljs-name">th</span>></span> + <span class="hljs-tag"><<span class="hljs-name">th</span>></span>release date<span class="hljs-tag"></<span class="hljs-name">th</span>></span> + <span class="hljs-tag"></<span class="hljs-name">tr</span>></span> + <span class="hljs-tag"></<span class="hljs-name">thead</span>></span> + <span class="hljs-tag"><<span class="hljs-name">tbody</span>></span> + <span class="hljs-tag"><<span class="hljs-name">tr</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"active"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">td</span>></span>The Shawshank Redemption<span class="hljs-tag"></<span class="hljs-name">td</span>></span> + <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Crime, Drama<span class="hljs-tag"></<span class="hljs-name">td</span>></span> + <span class="hljs-tag"><<span class="hljs-name">td</span>></span>14 October 1994<span class="hljs-tag"></<span class="hljs-name">td</span>></span> + <span class="hljs-tag"></<span class="hljs-name">tr</span>></span> + <span class="hljs-tag"></<span class="hljs-name">tbody</span>></span> +<span class="hljs-tag"></<span class="hljs-name">table</span>></span></code></pre> </div> - </div> - -<!-- layout --> -<pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"container"</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 col-6"</span>>col-6<<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"column col-3"</span>>col-3<<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"column col-2"</span>>col-2<<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"column col-1"</span>>col-1<<span class="tag">/div</span>> - <<span class="tag">/div</span>> - - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"columns col-gapless"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"column col-6"</span>>col-6<<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"column col-6"</span>>col-6<<span class="tag">/div</span>> - <<span class="tag">/div</span>> - - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"columns col-oneline"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"column col-8"</span>>col-8<<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"column col-8"</span>>col-8<<span class="tag">/div</span>> - <<span class="tag">/div</span>> -<<span class="tag">/div</span>> + <div class="container" id="buttons"> + <h3 class="s-title"><a class="anchor" href="#buttons" aria-hidden="true">#</a>Buttons</h3> + <p>Buttons include simple button styles for actions in different types and sizes.</p> + <div class="columns"> + <div class="column col-12"> + <button class="btn">default button</button> + <button class="btn btn-primary">primary button</button> + <button class="btn btn-link">link button</button> + </div> + </div> + <p>Add the <code>btn</code> class to <a>, <input> or <button> elements for a default button. + There are classes <code>btn-primary</code> and <code>btn-link</code> for predefined primary and link buttons. + </p> + <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn"</span>></span>default button<span class="hljs-tag"></<span class="hljs-name">button</span>></span> +<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary"</span>></span>primary button<span class="hljs-tag"></<span class="hljs-name">button</span>></span> +<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-link"</span>></span>link button<span class="hljs-tag"></<span class="hljs-name">button</span>></span> +</code></pre> + <h4 class="s-subtitle" id="buttons-colors"><a class="anchor" href="#buttons-colors" aria-hidden="true">#</a>Button colors</h4> + <div class="columns"> + <div class="column col-12"> + <button class="btn btn-success">success button</button> + <button class="btn btn-error">error button</button> + </div> + </div> + <p>Add the <code>btn-success</code> or <code>btn-error</code> class for success (green) or error (red) button color. + If you need more button colors, please use <a href="getting-started.html#variables-buttons">button mixins</a> to create your own button color variants. + </p> + <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-success"</span>></span>success button<span class="hljs-tag"></<span class="hljs-name">button</span>></span> +<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-error"</span>></span>error button<span class="hljs-tag"></<span class="hljs-name">button</span>></span> </code></pre> + <h4 class="s-subtitle" id="buttons-sizes"><a class="anchor" href="#buttons-sizes" aria-hidden="true">#</a>Button sizes</h4> + <div class="columns"> + <div class="column col-12"> + <button class="btn btn-primary btn-lg">large <i class="icon icon-arrow-down"></i></button> + <button class="btn btn-primary btn-lg">large button</button> + </div> + <div class="column col-12"> + <button class="btn btn-primary">normal <i class="icon icon-arrow-down"></i></button> + <button class="btn btn-primary">normal button</button> + </div> + <div class="column col-12"> + <button class="btn btn-primary btn-sm">small <i class="icon icon-arrow-down"></i></button> + <button class="btn btn-primary btn-sm">small button</button> + </div> + </div> + <p>Add the <code>btn-sm</code> or <code>btn-lg</code> class for small or large button size. + Also, you can add the <code>btn-block</code> class for a full-width button. + </p> + <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-lg"</span>></span>large button<span class="hljs-tag"></<span class="hljs-name">button</span>></span> +<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-sm"</span>></span>small button<span class="hljs-tag"></<span class="hljs-name">button</span>></span> - <h4 id="grid-offset" class="s-subtitle">Grid offset</h4> - <div class="docs-note"> - <p>The Flexbox grid provides margin auto utilities to set offset. There are <code>col-mx-auto</code>, <code>col-ml-auto</code> and <code>col-mr-auto</code> to set margins between columns without using empty columns.</p> - </div> +<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-block"</span>></span>block button<span class="hljs-tag"></<span class="hljs-name">button</span>></span> - <div class="columns"> - <div class="column col-2"> - <div class="bg-gray docs-block">col-2</div> - </div> - <div class="column col-4 col-mx-auto"> - <div class="bg-gray docs-block">col-4 col-mx-auto</div> - </div> - </div> - <div class="columns"> - <div class="column col-2"> - <div class="bg-gray docs-block">col-2</div> - </div> - <div class="column col-4 col-ml-auto"> - <div class="bg-gray docs-block">col-4 col-ml-auto</div> - </div> - </div> - <div class="columns"> - <div class="column col-4 col-ml-auto"> - <div class="bg-gray docs-block">col-4 col-ml-auto</div> - </div> - <div class="column col-2"> - <div class="bg-gray docs-block">col-2</div> - </div> - </div> - <div class="columns"> - <div class="column col-4 col-mx-auto"> - <div class="bg-gray docs-block">col-4 col-mx-auto</div> - </div> - <div class="column col-2"> - <div class="bg-gray docs-block">col-2</div> - </div> - </div> - <div class="columns"> - <div class="column col-4 col-mr-auto"> - <div class="bg-gray docs-block">col-4 col-mr-auto</div> - </div> - <div class="column col-2"> - <div class="bg-gray docs-block">col-2</div> - </div> - </div> - <div class="columns"> - <div class="column col-4 col-mx-auto"> - <div class="bg-gray docs-block">col-4 col-mx-auto</div> - </div> - </div> - -<!-- layout --> -<pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"container"</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 col-4 col-mr-auto"</span>>col-4 col-mr-auto<<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"column col-2"</span>>col-2<<span class="tag">/div</span>> - <<span class="tag">/div</span>> -<<span class="tag">/div</span>> +<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary btn-lg"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-left"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> large<span class="hljs-tag"></<span class="hljs-name">button</span>></span> +<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-left"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> normal<span class="hljs-tag"></<span class="hljs-name">button</span>></span> +<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary btn-sm"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-left"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> small<span class="hljs-tag"></<span class="hljs-name">button</span>></span> </code></pre> - - <h4 id="grid-nesting" class="s-subtitle">Grid nesting</h4> - <div class="docs-note"> - <p>To nest grids, add the new <code>columns</code> and <code>column</code> structure within an existing column.</p> - </div> - <div class="columns"> - <div class="column col-6"> - <div class="bg-gray docs-block">col-6</div> + <p>Please note that you could use the <code>btn-action</code> class for a square button, or add another <code>circle</code> class for a round button, which is often used as a Float Action Button (FAB).</p> <div class="columns"> - <div class="column col-6"> - <div class="bg-primary docs-block">col-6</div> + <div class="column col-xs-12"> + <button class="btn btn-action btn-primary btn-lg"><i class="icon icon-menu"></i></button> + <button class="btn btn-action btn-primary"><i class="icon icon-menu"></i></button> + <button class="btn btn-action btn-primary btn-sm"><i class="icon icon-menu"></i></button> </div> - <div class="column col-6"> - <div class="bg-primary docs-block">col-6</div> + <div class="column col-xs-12"> + <button class="btn btn-action btn-primary btn-lg circle"><i class="icon icon-arrow-up"></i></button> + <button class="btn btn-action btn-primary circle"><i class="icon icon-arrow-up"></i></button> + <button class="btn btn-action btn-primary btn-sm circle"><i class="icon icon-arrow-up"></i></button> </div> </div> - </div> - <div class="column col-6"> - <div class="bg-gray docs-block">col-6</div> - </div> - </div> - -<!-- layout --> -<pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"container"</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 col-6"</span>>col-6 - <<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 col-6"</span>>col-6<<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"column col-6"</span>>col-6<<span class="tag">/div</span>> - <<span class="tag">/div</span>> - <<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"column col-6"</span>>col-6<<span class="tag">/div</span>> - <<span class="tag">/div</span>> -<<span class="tag">/div</span>> + <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-action"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-left"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span> +<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-action circle"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-left"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></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="responsive" class="container"> - <h3 class="s-title"><a href="#responsive" class="anchor" aria-hidden="true">#</a>Responsive</h3> - <div class="docs-note"> - <p>Spectre provides a neat responsive layout grid system and responsive visibility utilities. </p> - </div> - <div class="columns"> - <div class="column col-10 col-lg-8 col-md-6 col-sm-4"> - <div class="bg-gray docs-block">col-10 <br> col-lg-8 <br> col-md-6 <br> col-sm-4</div> - </div> - <div class="column col-2 col-lg-4 col-md-6 col-sm-8"> - <div class="bg-gray docs-block">col-2 <br> col-lg-4 <br> col-md-6 <br> col-sm-8</div> + <h4 class="s-subtitle" id="buttons-states"><a class="anchor" href="#buttons-states" aria-hidden="true">#</a>Button states</h4> + <p>Add the <code>active</code> class for active button state style.</p> + <div class="columns"> + <div class="column col-12"> + <button class="btn active">default active</button> + <button class="btn btn-primary active">primary active</button> + <button class="btn btn-link active">link active</button> + </div> + </div> + <p>Add the <code>disabled</code> class or the <code>disabled</code> attribute for disabled button state style.</p> + <div class="columns"> + <div class="column col-12"> + <button class="btn disabled" tabindex="-1">default disabled</button> + <button class="btn btn-primary" disabled="" tabindex="-1">primary disabled</button> + <button class="btn btn-link" disabled="" tabindex="-1">link disabled</button> + </div> + </div> + <pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- buttons with disabled state --></span> +<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn disabled"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"-1"</span>></span>disabled button<span class="hljs-tag"></<span class="hljs-name">button</span>></span> +<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn"</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"-1"</span>></span>disabled button<span class="hljs-tag"></<span class="hljs-name">button</span>></span> +</code></pre> + <p>A button with the <code>loading</code> class can show loading indicator.</p> + <div class="columns"> + <div class="column col-12"> + <button class="btn loading">default button</button> + <button class="btn btn-primary loading">primary button</button> + <button class="btn btn-link loading">link button</button> + </div> + </div> + <pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- buttons with loading state --></span> +<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn loading"</span>></span>button<span class="hljs-tag"></<span class="hljs-name">button</span>></span> +<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary loading"</span>></span>primary button<span class="hljs-tag"></<span class="hljs-name">button</span>></span> +</code></pre> + <h4 class="s-subtitle" id="buttons-groups"><a class="anchor" href="#buttons-groups" aria-hidden="true">#</a>Button groups</h4> + <div class="columns"> + <div class="column col-md-12"> + <div class="btn-group"> + <button class="btn">first button</button> + <button class="btn">second button</button> + <button class="btn">third button</button> + </div> + </div> + <div class="column col-md-12"> + <div class="btn-group btn-group-block"> + <button class="btn btn-primary">first button</button> + <button class="btn btn-primary">second button</button> + <button class="btn btn-primary">third button</button> + </div> + </div> + </div> + <div class="columns"> + <div class="column col-md-12"> + <div class="btn-group"> + <button class="btn btn-sm active">first button</button> + <button class="btn btn-sm">second button</button> + <button class="btn btn-sm">third button</button> + </div> + </div> + <div class="column col-md-12"> + <div class="btn-group btn-group-block"> + <button class="btn btn-primary btn-sm active">first button</button> + <button class="btn btn-primary btn-sm">second button</button> + <button class="btn btn-primary btn-sm">third button</button> + </div> + </div> + </div> + <p>If you want to use buttons as a group, add the <code>btn-group</code> class to the container. + You can add the <code>btn-group-block</code> class for a full-width button group. + </p> + <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">"btn-group btn-group-block"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn"</span>></span>first button<span class="hljs-tag"></<span class="hljs-name">button</span>></span> + <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn"</span>></span>second button<span class="hljs-tag"></<span class="hljs-name">button</span>></span> + <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn"</span>></span>third button<span class="hljs-tag"></<span class="hljs-name">button</span>></span> +<span class="hljs-tag"></<span class="hljs-name">div</span>></span> </code></pre> </div> - </div> - - <div class="docs-note"> - <p>There are <code>col-xs-[1-12]</code>, <code>col-sm-[1-12]</code>, <code>col-md-[1-12]</code>, <code>col-lg-[1-12]</code> and <code>col-xl-[1-12]</code> available for flexible grid across mobile, tablet and desktop viewport usage.</p> - <ul> - <li><code>col-xs-[1-12]</code> apply to window width smaller than or equal to <strong>480px</strong>. </li> - <li><code>col-sm-[1-12]</code> apply to window width smaller than or equal to <strong>600px</strong>. </li> - <li><code>col-md-[1-12]</code> apply to window width smaller than or equal to <strong>840px</strong>. </li> - <li><code>col-lg-[1-12]</code> apply to window width smaller than or equal to <strong>960px</strong>. </li> - <li><code>col-xl-[1-12]</code> apply to window width smaller than or equal to <strong>1280px</strong>. </li> - <li><code>col-[1-12]</code> apply to all window width, including the width wider than <strong>1280px</strong>. </li> - </ul> - </div> - -<!-- layout --> -<pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"container"</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 col-xs-6"</span>>col-xs-6<<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"column col-xs-3"</span>>col-xs-3<<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"column col-xs-3"</span>>col-xs-3<<span class="tag">/div</span>> - <<span class="tag">/div</span>> -<<span class="tag">/div</span>> + <div class="container" id="forms"> + <h3 class="s-title"><a class="anchor" href="#forms" aria-hidden="true">#</a>Forms</h3> + <p>Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch.</p> + <div class="columns"> + <div class="column col-6 col-xs-12"> + <div class="form-group"> + <label class="form-label" for="input-example-1">Name</label> + <input class="form-input" id="input-example-1" type="text" placeholder="Name"> + </div> + <div class="form-group"> + <label class="form-label" for="input-example-2">Email</label> + <input class="form-input" id="input-example-2" type="email" placeholder="Email"> + </div> + </div> + </div> + <pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- form input control --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"input-example-1"</span>></span>Name<span class="hljs-tag"></<span class="hljs-name">label</span>></span> + <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"input-example-1"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Name"</span>></span> +<span class="hljs-tag"></<span class="hljs-name">div</span>></span> </code></pre> - - <h4 id="responsive-container" class="s-subtitle">Responsive container</h4> - <div class="docs-note"> - <p>The responsive layout also provides fixed-width containers. Use <code>grid-xs</code>(480px), <code>grid-sm</code> (600px), <code>grid-md</code> (840px), <code>grid-lg</code> (960px) or <code>grid-xl</code> (1280px) to <code>container</code> for a fixed-width container with the specific max-width.</p> - </div> - -<!-- layout --> -<pre class="code" data-lang="HTML"><code><span class="com"><!-- 100% width container with max-width set to grid-lg (960px) --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"container grid-lg"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"columns"</span>> - ... - <<span class="tag">/div</span>> -<<span class="tag">/div</span>> + <div class="columns"> + <div class="column col-6 col-xs-12"> + <div class="form-group"> + <label class="form-label" for="input-example-3">Message</label> + <textarea class="form-input" id="input-example-3" placeholder="Textarea" rows="3"></textarea> + </div> + </div> + </div> + <pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- form textarea control --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"input-example-3"</span>></span>Message<span class="hljs-tag"></<span class="hljs-name">label</span>></span> + <span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"input-example-3"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Textarea"</span> <span class="hljs-attr">rows</span>=<span class="hljs-string">"3"</span>></span><span class="hljs-tag"></<span class="hljs-name">textarea</span>></span> +<span class="hljs-tag"></<span class="hljs-name">div</span>></span> </code></pre> + <div class="columns"> + <div class="column col-6 col-xs-12"> + <div class="form-group"> + <select class="form-select"> + <option>Choose an option</option> + <option>Slack</option> + <option>Skype</option> + <option>Hipchat</option> + </select> + </div> + <div class="form-group"> + <select class="form-select" multiple=""> + <option>Choose an option</option> + <option>Slack</option> + <option>Skype</option> + <option>Hipchat</option> + </select> + </div> + </div> + </div> + <pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- form select control --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">select</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-select"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">option</span>></span>Choose an option<span class="hljs-tag"></<span class="hljs-name">option</span>></span> + <span class="hljs-tag"><<span class="hljs-name">option</span>></span>Slack<span class="hljs-tag"></<span class="hljs-name">option</span>></span> + <span class="hljs-tag"><<span class="hljs-name">option</span>></span>Skype<span class="hljs-tag"></<span class="hljs-name">option</span>></span> + <span class="hljs-tag"><<span class="hljs-name">option</span>></span>Hipchat<span class="hljs-tag"></<span class="hljs-name">option</span>></span> + <span class="hljs-tag"></<span class="hljs-name">select</span>></span> +<span class="hljs-tag"></<span class="hljs-name">div</span>></span> +</code></pre> + <div class="columns"> + <div class="column col-6 col-xs-12"> + <form> + <div class="form-group"> + <label class="form-label">Gender</label> + <label class="form-radio"> + <input type="radio" name="gender" checked=""><i class="form-icon"></i> Male + </label> + <label class="form-radio"> + <input type="radio" name="gender"><i class="form-icon"></i> Female + </label> + </div> + </form> + </div> + </div> + <pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- form radio control --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-label"</span>></span>Gender<span class="hljs-tag"></<span class="hljs-name">label</span>></span> + <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-radio"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"gender"</span> <span class="hljs-attr">checked</span>></span> + <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> Male + <span class="hljs-tag"></<span class="hljs-name">label</span>></span> + <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-radio"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"gender"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> Female + <span class="hljs-tag"></<span class="hljs-name">label</span>></span> +<span class="hljs-tag"></<span class="hljs-name">div</span>></span> +</code></pre> + <div class="columns"> + <div class="column col-6 col-xs-12"> + <div class="form-group"> + <label class="form-switch"> + <input type="checkbox"><i class="form-icon"></i> Send me emails with news and tips + </label> + </div> + <div class="form-group"> + <label class="form-switch"> + <input type="checkbox" checked=""><i class="form-icon"></i> Send me emails with news and tips + </label> + </div> + </div> + </div> + <pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- form switch control --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-switch"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> Send me emails with news and tips + <span class="hljs-tag"></<span class="hljs-name">label</span>></span> +<span class="hljs-tag"></<span class="hljs-name">div</span>></span> +</code></pre> + <div class="columns"> + <div class="column col-6 col-xs-12"> + <div class="form-group"> + <label class="form-checkbox"> + <input type="checkbox"><i class="form-icon"></i> Remember me + </label> + </div> + <div class="form-group"> + <label class="form-checkbox"> + <input type="checkbox" checked=""><i class="form-icon"></i> Remember me + </label> + </div> + </div> + </div> + <pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- form checkbox control --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-checkbox"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> Remember me + <span class="hljs-tag"></<span class="hljs-name">label</span>></span> +<span class="hljs-tag"></<span class="hljs-name">div</span>></span> +</code></pre> + <p>You can use <code>:indeterminate</code> pseudo class for indeterminate state of checkboxes.</p> + <h4 class="s-subtitle" id="forms-horizontal"><a class="anchor" href="#forms-horizontal" aria-hidden="true">#</a>Horizontal forms</h4> + <p>If you want to have a horizontal form, add the <code>form-horizontal</code> class to the <form> container. + And add the <code>col-<1-12></code> and <code>col-xs/sm/lg/xl-<1-12></code> class to the child elements for responsive form row layout. + </p> + <div class="columns"> + <div class="column col-9 col-sm-12"> + <form class="form-horizontal" action="#forms"> + <div class="form-group"> + <div class="col-3 col-sm-12"> + <label class="form-label" for="input-example-4">Name</label> + </div> + <div class="col-9 col-sm-12"> + <input class="form-input" id="input-example-4" type="text" placeholder="Name"> + </div> + </div> + <div class="form-group"> + <div class="col-3 col-sm-12"> + <label class="form-label" for="input-example-5">Email</label> + </div> + <div class="col-9 col-sm-12"> + <input class="form-input" id="input-example-5" type="email" placeholder="Email"> + </div> + </div> + <div class="form-group"> + <div class="col-3 col-sm-12"> + <label class="form-label">Gender</label> + </div> + <div class="col-9 col-sm-12"> + <label class="form-radio"> + <input type="radio" name="gender"><i class="form-icon"></i> Male + </label> + <label class="form-radio"> + <input type="radio" name="gender" checked=""><i class="form-icon"></i> Female + </label> + </div> + </div> + <div class="form-group"> + <div class="col-3 col-sm-12"> + <label class="form-label">Source</label> + </div> + <div class="col-9 col-sm-12"> + <select class="form-select" multiple=""> + <option>Slack</option> + <option>Skype</option> + <option>Hipchat</option> + </select> + </div> + </div> + <div class="form-group"> + <div class="col-9 col-sm-12 col-ml-auto"> + <label class="form-switch"> + <input type="checkbox"><i class="form-icon"></i> Send me emails with news and tips + </label> + </div> + </div> + <div class="form-group"> + <div class="col-3 col-sm-12"> + <label class="form-label" for="input-example-6">Message</label> + </div> + <div class="col-9 col-sm-12"> + <textarea class="form-input" id="input-example-6" placeholder="Textarea" rows="3"></textarea> + </div> + </div> + <div class="form-group"> + <div class="col-9 col-sm-12 col-ml-auto"> + <label class="form-checkbox"> + <input type="checkbox"><i class="form-icon"></i> Remember me + </label> + </div> + </div> + </form> + </div> + </div> + <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-horizontal"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-3 col-sm-12"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"input-example-1"</span>></span>Name<span class="hljs-tag"></<span class="hljs-name">label</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">"col-9 col-sm-12"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"input-example-1"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Name"</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-comment"><!-- form structure --></span> +<span class="hljs-tag"></<span class="hljs-name">form</span>></span> +</code></pre> + <h4 class="s-subtitle" id="forms-sizes"><a class="anchor" href="#forms-sizes" aria-hidden="true">#</a>Form sizes</h4> + <p>For smaller or larger input and select controls, you could add the <code>input-sm</code>/<code>input-lg</code>, <code>select-sm</code>/<code>select-lg</code> and <code>label-sm</code>/<code>label-lg</code> classes to the elements.</p> + <div class="columns"> + <div class="column col-4 col-xs-12"> + <label class="form-label label-sm">Label</label> + </div> + <div class="column col-4 col-xs-12"> + <input class="form-input input-sm" type="text" placeholder="Name"> + </div> + <div class="column col-4 col-xs-12"> + <select class="form-select select-sm"> + <option>Choose an option</option> + <option>Slack</option> + <option>Skype</option> + <option>Hipchat</option> + </select> + </div> + </div> + <div class="columns"> + <div class="column col-4 col-xs-12"> + <label class="form-label label-lg">Label</label> + </div> + <div class="column col-4 col-xs-12"> + <input class="form-input input-lg" type="text" placeholder="Name"> + </div> + <div class="column col-4 col-xs-12"> + <select class="form-select select-lg"> + <option>Choose an option</option> + <option>Slack</option> + <option>Skype</option> + <option>Hipchat</option> + </select> + </div> + </div> + <p>You can add the <code>input-sm</code>/<code>input-lg</code> classes to the input-checkbox, input-radio and input-switch to have different sizes.</p> + <h4 class="s-subtitle" id="forms-icons"><a class="anchor" href="#forms-icons" aria-hidden="true">#</a>Form icons</h4> + <p>Spectre Form components has <a href="#icons">Spectre Icons</a> support.</p> + <p>Add a wrapper with the <code>has-icon-left</code>/<code>has-icon-right</code> class to <input> element. + And add the icon with <code>form-icon</code> class next to the <input>. + </p> + <div class="columns"> + <div class="column col-4 col-xs-12"> + <div class="has-icon-left"> + <input class="form-input input-sm" type="text" placeholder="Name"><i class="form-icon icon icon-arrow-right"></i> + </div> + </div> + <div class="column col-4 col-xs-12"> + <div class="has-icon-left tooltip" data-tooltip="Lorem ipsum dolor sit amet"> + <input class="form-input" type="text" placeholder="Name"><i class="form-icon icon icon-arrow-right"></i> + </div> + </div> + <div class="column col-4 col-xs-12"> + <div class="has-icon-left"> + <input class="form-input input-lg" type="text" placeholder="Name"><i class="form-icon icon icon-arrow-right"></i> + </div> + </div> + </div> + <div class="columns"> + <div class="column col-4 col-xs-12"> + <div class="has-icon-right"> + <input class="form-input input-sm" type="text" placeholder="Name"><i class="form-icon icon icon-check"></i> + </div> + </div> + <div class="column col-4 col-xs-12"> + <div class="has-icon-right"> + <input class="form-input" type="text" placeholder="Name"><i class="form-icon icon icon-check"></i> + </div> + </div> + <div class="column col-4 col-xs-12"> + <div class="has-icon-right"> + <input class="form-input input-lg" type="text" placeholder="Name"><i class="form-icon icon icon-check"></i> + </div> + </div> + </div> + <pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- form input with Spectre icon --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"has-icon-left"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"..."</span>></span> + <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon icon icon-check"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> +<span class="hljs-tag"></<span class="hljs-name">div</span>></span> +</code></pre> + <p>You can use the <code>loading</code> class for loading or posting state.</p> + <div class="columns"> + <div class="column col-4 col-xs-12"> + <div class="has-icon-right"> + <input class="form-input input-sm" type="text" placeholder="Name"><i class="form-icon loading"></i> + </div> + </div> + <div class="column col-4 col-xs-12"> + <div class="has-icon-right"> + <input class="form-input" type="text" placeholder="Name"><i class="form-icon loading"></i> + </div> + </div> + <div class="column col-4 col-xs-12"> + <div class="has-icon-right"> + <input class="form-input input-lg" type="text" placeholder="Name"><i class="form-icon loading"></i> + </div> + </div> + </div> + <pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- form input with loading icon --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"has-icon-right"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"..."</span>></span> + <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon loading"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> +<span class="hljs-tag"></<span class="hljs-name">div</span>></span> +</code></pre> + <h4 class="s-subtitle" id="forms-input"><a class="anchor" href="#forms-input" aria-hidden="true">#</a>Input types</h4> + <div class="columns"> + <div class="column col-9 col-sm-12"> + <form class="form-horizontal" action="#forms"> + <div class="form-group"> + <div class="col-3"> + <label class="form-label" for="input-example-8">Email</label> + </div> + <div class="col-9"> + <input class="form-input" id="input-example-8" type="email" placeholder="Email" value="spectre@example.com" pattern="[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$"> + </div> + </div> + <div class="form-group"> + <div class="col-3"> + <label class="form-label" for="input-example-9">URL</label> + </div> + <div class="col-9"> + <input class="form-input" id="input-example-9" type="url" placeholder="URL" value="https://github.com/picturepan2/spectre"> + </div> + </div> + <div class="form-group"> + <div class="col-3"> + <label class="form-label" for="input-example-10">Search</label> + </div> + <div class="col-9"> + <input class="form-input" id="input-example-10" type="search" placeholder="Search"> + </div> + </div> + <div class="form-group"> + <div class="col-3"> + <label class="form-label" for="input-example-11">Tel</label> + </div> + <div class="col-9"> + <input class="form-input" id="input-example-11" type="tel" placeholder="Tel" value="1-(888)-888-8888"> + </div> + </div> + <div class="form-group"> + <div class="col-3"> + <label class="form-label" for="input-example-12">Password</label> + </div> + <div class="col-9"> + <input class="form-input" id="input-example-12" type="password" placeholder="Password" value="123456789"> + </div> + </div> + <div class="form-group"> + <div class="col-3"> + <label class="form-label" for="input-example-13">Number</label> + </div> + <div class="col-9"> + <input class="form-input" id="input-example-13" type="number" placeholder="00" value="66"> + </div> + </div> + <div class="form-group"> + <div class="col-3"> + <label class="form-label" for="input-example-14">Date</label> + </div> + <div class="col-9"> + <input class="form-input" id="input-example-14" type="date" value="2016-12-31"> + </div> + </div> + <div class="form-group"> + <div class="col-3"> + <label class="form-label" for="input-example-15">Color</label> + </div> + <div class="col-9"> + <input class="form-input" id="input-example-15" type="color" value="#5755d9"> + </div> + </div> + <div class="form-group"> + <div class="col-3"> + <label class="form-label" for="input-example-16">File</label> + </div> + <div class="col-9"> + <input class="form-input" id="input-example-16" type="file"> + </div> + </div> + </form> + </div> + </div> + <h4 class="s-subtitle" id="forms-input-groups"><a class="anchor" href="#forms-input-groups" aria-hidden="true">#</a>Input groups</h4> + <div class="columns"> + <div class="column col-xs-12"> + <div class="input-group"> + <input class="form-input input-sm" type="text" placeholder="username"> + <select class="form-select select-sm"> + <option>Slack</option> + <option>Skype</option> + <option>Hipchat</option> + </select> + </div> + </div> + <div class="column col-xs-12"> + <div class="input-group"><span class="input-group-addon addon-sm">slack.com/</span> + <input class="form-input input-sm" type="text" placeholder="site name"> + <button class="btn btn-primary input-group-btn btn-sm">Submit</button> + </div> + </div> + </div> + <div class="columns"> + <div class="column col-xs-12"> + <div class="input-group"> + <input class="form-input" type="text" placeholder="username"> + <select class="form-select"> + <option>Slack</option> + <option>Skype</option> + <option>Hipchat</option> + </select> + </div> + </div> + <div class="column col-xs-12"> + <div class="input-group"><span class="input-group-addon">slack.com/</span> + <input class="form-input" type="text" placeholder="site name"> + <button class="btn btn-primary input-group-btn">Submit</button> + </div> + </div> + </div> + <div class="columns"> + <div class="column col-xs-12"> + <div class="input-group"> + <label class="form-switch"> + <input type="checkbox"><i class="form-icon"></i> + </label> + <input class="form-input" type="text" placeholder="name"> + </div> + </div> + <div class="column col-xs-12"> + <div class="input-group"> + <label class="form-checkbox"> + <input type="checkbox"><i class="form-icon"></i> + </label> + <input class="form-input" type="text" placeholder="name"> + </div> + </div> + </div> + <div class="columns"> + <div class="column col-xs-12"> + <div class="input-group"> + <input class="form-input input-lg" type="text" placeholder="username"> + <select class="form-select select-lg"> + <option>Slack</option> + <option>Skype</option> + <option>Hipchat</option> + </select> + </div> + </div> + <div class="column col-xs-12"> + <div class="input-group"><span class="input-group-addon addon-lg">slack.com/</span> + <input class="form-input input-lg" type="text" placeholder="site name"> + <button class="btn btn-primary input-group-btn btn-lg">Submit</button> + </div> + </div> + </div> + <p>If you want to attach text and button along with an input, add the <code>input-group</code> class to the input container. + And add the <code>input-group-addon</code> class to the text element and <code>input-group-btn</code> to the button element. + </p> + <pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- normal input group --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-group"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-group-addon"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">span</span>></span> + <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"..."</span>></span> +<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <h4 id="responsive-visibility" class="s-subtitle">Responsive visibility</h4> - <div class="docs-note"> - <p>The responsive visibility utilities help show and hide elements on specific viewport sizes. </p> - </div> - <table class="docs-table table table-striped text-center"> - <thead> - <tr> - <th></th> - <th>size-xs</th> - <th>size-sm</th> - <th>size-md</th> - <th>size-lg</th> - <th>size-xl</th> - </tr> - </thead> - <tbody> - <tr> - <td class="text-left">hide-xs</td> - <td><div class="bg-secondary docs-dot"></div></td> - <td><div class="bg-primary docs-dot"></div></td> - <td><div class="bg-primary docs-dot"></div></td> - <td><div class="bg-primary docs-dot"></div></td> - <td><div class="bg-primary docs-dot"></div></td> - </tr> - <tr> - <td class="text-left">hide-sm</td> - <td><div class="bg-secondary docs-dot"></div></td> - <td><div class="bg-secondary docs-dot"></div></td> - <td><div class="bg-primary docs-dot"></div></td> - <td><div class="bg-primary docs-dot"></div></td> - <td><div class="bg-primary docs-dot"></div></td> - </tr> - <tr> - <td class="text-left">hide-md</td> - <td><div class="bg-secondary docs-dot"></div></td> - <td><div class="bg-secondary docs-dot"></div></td> - <td><div class="bg-secondary docs-dot"></div></td> - <td><div class="bg-primary docs-dot"></div></td> - <td><div class="bg-primary docs-dot"></div></td> - </tr> - <tr> - <td class="text-left">hide-lg</td> - <td><div class="bg-secondary docs-dot"></div></td> - <td><div class="bg-secondary docs-dot"></div></td> - <td><div class="bg-secondary docs-dot"></div></td> - <td><div class="bg-secondary docs-dot"></div></td> - <td><div class="bg-primary docs-dot"></div></td> - </tr> - <tr> - <td class="text-left">hide-xl</td> - <td><div class="bg-secondary docs-dot"></div></td> - <td><div class="bg-secondary docs-dot"></div></td> - <td><div class="bg-secondary docs-dot"></div></td> - <td><div class="bg-secondary docs-dot"></div></td> - <td><div class="bg-secondary docs-dot"></div></td> - </tr> - </tbody> - </table> - - <div class="docs-note"> - <p>For hiding elements on specific viewport sizes, there are classes <code>hide-xs</code>, <code>hide-sm</code>, <code>hide-md</code>, <code>hide-lg</code> and <code>hide-xl</code> available.</p> - <ul> - <li><code>hide-xs</code> hides elements when the window width is smaller than or equal to <strong>480px</strong>. </li> - <li><code>hide-sm</code> hides elements when the window width is smaller than or equal to <strong>600px</strong>. </li> - <li><code>hide-md</code> hides elements when the window width is smaller than or equal to <strong>840px</strong>. </li> - <li><code>hide-lg</code> hides elements when the window width is smaller than or equal to <strong>960px</strong>. </li> - <li><code>hide-xl</code> hides elements when the window width is smaller than or equal to <strong>1280px</strong>. </li> - </ul> - </div> +<span class="hljs-comment"><!-- large input group --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-group"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-group-addon addon-lg"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">span</span>></span> + <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input input-lg"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"..."</span>></span> +<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <table class="docs-table table table-striped text-center"> - <thead> - <tr> - <th></th> - <th>size-xs</th> - <th>size-sm</th> - <th>size-md</th> - <th>size-lg</th> - <th>size-xl</th> - </tr> - </thead> - <tbody> - <tr> - <td class="text-left">show-xs</td> - <td><div class="bg-primary docs-dot"></div></td> - <td><div class="bg-secondary docs-dot"></div></td> - <td><div class="bg-secondary docs-dot"></div></td> - <td><div class="bg-secondary docs-dot"></div></td> - <td><div class="bg-secondary docs-dot"></div></td> - </tr> - <tr> - <td class="text-left">show-sm</td> - <td><div class="bg-primary docs-dot"></div></td> - <td><div class="bg-primary docs-dot"></div></td> - <td><div class="bg-secondary docs-dot"></div></td> - <td><div class="bg-secondary docs-dot"></div></td> - <td><div class="bg-secondary docs-dot"></div></td> - </tr> - <tr> - <td class="text-left">show-md</td> - <td><div class="bg-primary docs-dot"></div></td> - <td><div class="bg-primary docs-dot"></div></td> - <td><div class="bg-primary docs-dot"></div></td> - <td><div class="bg-secondary docs-dot"></div></td> - <td><div class="bg-secondary docs-dot"></div></td> - </tr> - <tr> - <td class="text-left">show-lg</td> - <td><div class="bg-primary docs-dot"></div></td> - <td><div class="bg-primary docs-dot"></div></td> - <td><div class="bg-primary docs-dot"></div></td> - <td><div class="bg-primary docs-dot"></div></td> - <td><div class="bg-secondary docs-dot"></div></td> - </tr> - <tr> - <td class="text-left">show-xl</td> - <td><div class="bg-primary docs-dot"></div></td> - <td><div class="bg-primary docs-dot"></div></td> - <td><div class="bg-primary docs-dot"></div></td> - <td><div class="bg-primary docs-dot"></div></td> - <td><div class="bg-primary docs-dot"></div></td> - </tr> - </tbody> - </table> +<span class="hljs-comment"><!-- normal input group with button --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-group"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-group-addon"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">span</span>></span> + <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"..."</span>></span> + <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary input-group-btn"</span>></span>Submit<span class="hljs-tag"></<span class="hljs-name">button</span>></span> +<span class="hljs-tag"></<span class="hljs-name">div</span>></span> +</code></pre> + <h4 class="s-subtitle" id="forms-validation"><a class="anchor" href="#forms-validation" aria-hidden="true">#</a>Form validation styles</h4> + <p>To use form validation styles, you can either add <code>is-success</code> or <code>is-error</code> class to the controls or add <code>has-success</code> or <code>has-error</code> class to parent elements. + Use the <code>form-input-hint</code> class to provide form validation success and error messages. + </p> + <div class="columns"> + <div class="column col-9 col-sm-12"> + <fieldset> + <legend>Input</legend> + <div class="form-group"> + <label class="form-label" for="input-example-17">Name</label> + <input class="form-input is-success" id="input-example-17" type="text" placeholder="Name"> + <p class="form-input-hint">The name is valid.</p> + </div> + <div class="form-group has-error"> + <label class="form-label" for="input-example-18">Password</label> + <input class="form-input" id="input-example-18" type="password" placeholder="Password"> + <p class="form-input-hint">Passwords must have at least 8 characters.</p> + </div> + <div class="form-group"> + <label class="form-label" for="input-example-21">Email</label> + <input class="form-input" id="input-example-21" type="text" placeholder="Email" pattern="[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$"> + <p class="form-input-hint">The Email address is unavailable.</p> + </div> + </fieldset> + <fieldset> + <legend>Select</legend> + <div class="form-group"> + <select class="form-select is-error"> + <option>Choose an option</option> + <option>Slack</option> + <option>Skype</option> + <option>Hipchat</option> + </select> + <p class="form-input-hint">The option is invalid.</p> + </div> + <div class="form-group has-success"> + <select class="form-select"> + <option>Choose an option</option> + <option>Slack</option> + <option>Skype</option> + <option>Hipchat</option> + </select> + <p class="form-input-hint">The option is available.</p> + </div> + </fieldset> + <fieldset> + <legend>Checkbox, Radio and Switch (Error state only)</legend> + <div class="form-group"> + <label class="form-checkbox is-error"> + <input type="checkbox" checked=""><i class="form-icon"></i> I'm not a robot. + </label> + </div> + <div class="form-group has-error"> + <label class="form-radio"> + <input type="radio" name="gender" checked=""><i class="form-icon"></i> Male + </label> + <label class="form-radio"> + <input type="radio" name="gender"><i class="form-icon"></i> Female + </label> + </div> + <div class="form-group"> + <label class="form-switch is-error"> + <input type="checkbox" checked=""><i class="form-icon"></i> Send me emails with news and tips + </label> + </div> + </fieldset> + </div> + </div> + <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">form</span>></span> + <span class="hljs-comment"><!-- form validation class: has-success --></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group has-success"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"input-example-1"</span>></span>Name<span class="hljs-tag"></<span class="hljs-name">label</span>></span> + <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"input-example-1"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"..."</span>></span> + <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input-hint"</span>></span>The name is invalid.<span class="hljs-tag"></<span class="hljs-name">p</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <div class="docs-note"> - <p>For showing elements on specific viewport sizes, there are classes <code>show-xs</code>, <code>show-sm</code>, <code>show-md</code>, <code>show-lg</code> and <code>show-xl</code> available.</p> - <ul> - <li><code>show-xs</code> shows elements when the window width is smaller than or equal to <strong>480px</strong>. </li> - <li><code>show-sm</code> shows elements when the window width is smaller than or equal to <strong>600px</strong>. </li> - <li><code>show-md</code> shows elements when the window width is smaller than or equal to <strong>840px</strong>. </li> - <li><code>show-lg</code> shows elements when the window width is smaller than or equal to <strong>960px</strong>. </li> - <li><code>show-xl</code> shows elements when the window width is smaller than or equal to <strong>1280px</strong>. </li> - </ul> - <p>Spectre also has a responsive web test tool Responsive Resizer. You can clone the <a href="https://github.com/picturepan2/responsive-resizer" target="_blank">GitHub Repo</a> to use it locally or use it online.</p> - <p><a href="https://picturepan2.github.io/responsive-resizer/" class="btn btn-primary" target="_blank">Responsive Resizer</a></p> - </div> - </div> + <span class="hljs-comment"><!-- form validation class: is-success --></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"input-example-1"</span>></span>Name<span class="hljs-tag"></<span class="hljs-name">label</span>></span> + <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input is-success"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"input-example-1"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"..."</span>></span> + <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input-hint"</span>></span>The name is invalid.<span class="hljs-tag"></<span class="hljs-name">p</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <div id="navbar" class="container"> - <h3 class="s-title"><a href="#navbar" class="anchor" aria-hidden="true">#</a>Navbar</h3> - <div class="docs-note"> - <p>Navbar is a layout container that appears in the header of apps and websites. </p> - </div> - <div class="columns"> - <div class="column"> - <div class="navbar"> - <div class="navbar-section"> - <a href="#navbar" class="navbar-brand mr-2">Spectre.css</a> - <a href="#navbar" class="btn btn-link">Docs</a> - <a href="https://github.com/picturepan2/spectre" class="btn btn-link">GitHub</a> - </div> - <div class="navbar-section"> - <div class="input-group input-inline"> - <input class="form-input" type="text" placeholder="search"> - <button class="btn btn-primary input-group-btn">Search</button> - </div> + <span class="hljs-comment"><!-- form validation example for checkbox, radio and switch --></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-checkbox is-error"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> Remember me + <span class="hljs-tag"></<span class="hljs-name">label</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"></<span class="hljs-name">form</span>></span> +</code></pre> + <h4 class="s-subtitle" id="forms-disabled"><a class="anchor" href="#forms-disabled" aria-hidden="true">#</a>Form disabled styles</h4> + <p> + Add the <code>disabled</code> attribute to the element or <fieldset> for a disabled form components style.</p> + <div class="columns"> + <div class="column col-6 col-xs-12"> + <form action="#forms"> + <fieldset disabled=""> + <div class="form-group"> + <label class="form-label" for="input-example-19">Name</label> + <input class="form-input" id="input-example-19" type="text" placeholder="Name"> + </div> + <div class="form-group"> + <label class="form-label">Gender</label> + <label class="form-radio"> + <input type="radio" name="gender" disabled=""><i class="form-icon"></i> Male + </label> + <label class="form-radio"> + <input type="radio" name="gender" disabled=""><i class="form-icon"></i> Female + </label> + </div> + <div class="form-group"> + <select class="form-select" disabled=""> + <option>Choose an option</option> + <option>Slack</option> + <option>Skype</option> + <option>Hipchat</option> + </select> + </div> + <div class="form-group"> + <label class="form-switch"> + <input type="checkbox" disabled=""><i class="form-icon"></i> Send me emails with news and tips + </label> + </div> + <div class="form-group"> + <label class="form-label" for="input-example-20">Message</label> + <textarea class="form-input" id="input-example-20" placeholder="Textarea" rows="3" disabled=""></textarea> + </div> + <div class="form-group"> + <label class="form-checkbox"> + <input type="checkbox" disabled=""><i class="form-icon"></i> Remember me + </label> + </div> + </fieldset> + </form> </div> </div> + <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"#forms"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">fieldset</span> <span class="hljs-attr">disabled</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"input-example-19"</span>></span>Name<span class="hljs-tag"></<span class="hljs-name">label</span>></span> + <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"input-example-19"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Name"</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">"form-group"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-label"</span>></span>Gender<span class="hljs-tag"></<span class="hljs-name">label</span>></span> + <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-radio"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"gender"</span> <span class="hljs-attr">disabled</span>></span> + <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> Male + <span class="hljs-tag"></<span class="hljs-name">label</span>></span> + <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-radio"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"gender"</span> <span class="hljs-attr">disabled</span>></span> + <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> Female + <span class="hljs-tag"></<span class="hljs-name">label</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">"form-group"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">select</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-select"</span> <span class="hljs-attr">disabled</span>></span> + <span class="hljs-tag"><<span class="hljs-name">option</span>></span>Choose an option<span class="hljs-tag"></<span class="hljs-name">option</span>></span> + <span class="hljs-tag"><<span class="hljs-name">option</span>></span>Slack<span class="hljs-tag"></<span class="hljs-name">option</span>></span> + <span class="hljs-tag"><<span class="hljs-name">option</span>></span>Skype<span class="hljs-tag"></<span class="hljs-name">option</span>></span> + <span class="hljs-tag"><<span class="hljs-name">option</span>></span>Hipchat<span class="hljs-tag"></<span class="hljs-name">option</span>></span> + <span class="hljs-tag"></<span class="hljs-name">select</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">"form-group"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-switch"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">disabled</span>></span> + <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> Send me emails with news and tips + <span class="hljs-tag"></<span class="hljs-name">label</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">"form-group"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"input-example-20"</span>></span>Message<span class="hljs-tag"></<span class="hljs-name">label</span>></span> + <span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"input-example-20"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Textarea"</span> <span class="hljs-attr">rows</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">disabled</span>></span><span class="hljs-tag"></<span class="hljs-name">textarea</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">"form-group"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-checkbox"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">disabled</span>></span> + <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> Remember me + <span class="hljs-tag"></<span class="hljs-name">label</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"></<span class="hljs-name">fieldset</span>></span></code></pre> </div> - </div> - <div class="docs-note"> - <p>The navbar component can include logo brand, nav links and buttons, search box or any combination of those elements. Each section with the <code>navbar-section</code> class will be evenly distributed in the container.</p> - </div> + <div class="container" id="icons"> + <h3 class="s-title"><a class="anchor" href="#icons" aria-hidden="true">#</a>Icons</h3> + </div> + <div class="container" id="labels"> + <h3 class="s-title"><a class="anchor" href="#labels" aria-hidden="true">#</a>Labels</h3> + <p>Labels are formatted text tags for highlighted, informative information.</p> + <div class="columns"> + <div class="column"><span class="label mr-1">default label</span><span class="label label-primary mr-1">primary label</span><span class="label label-secondary mr-1">secondary label</span><span class="label label-success mr-1">success label</span><span class="label label-warning mr-1">warning label</span><span class="label label-error">error label</span></div> + </div> + <p>Add the <code>label</code> class to <span> or <small> elements. + You can add another class <code>label-primary</code>, <code>label-secondary</code>, <code>label-success</code>, <code>label-warning</code> and <code>label-error</code> for colored labels. + </p> + <div class="columns"> + <div class="column"><span class="label label-rounded mr-1">default label</span><span class="label label-rounded label-primary">primary label</span></div> + </div> + <p>Add the <code>label-rounded</code> class to have rounded labels.</p> + <pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- normal labels --></span> +<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"label"</span>></span>default label<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">"label label-primary"</span>></span>primary label<span class="hljs-tag"></<span class="hljs-name">span</span>></span> -<!-- navbar --> -<pre class="code" data-lang="HTML"><code><<span class="tag">header</span> <span class="atn">class</span>=<span class="atv">"navbar"</span>> - <<span class="tag">section</span> <span class="atn">class</span>=<span class="atv">"navbar-section"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"navbar-brand mr-2"</span>>Spectre.css<<span class="tag">/a</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"btn btn-link"</span>>Docs<<span class="tag">/a</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"https://github.com/picturepan2/spectre"</span> <span class="atn">class</span>=<span class="atv">"btn btn-link"</span>>GitHub<<span class="tag">/a</span>> - <<span class="tag">/section</span>> - <<span class="tag">section</span> <span class="atn">class</span>=<span class="atv">"navbar-section"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"input-group input-inline"</span>> - <<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">placeholder</span>=<span class="atv">"search"</span>> - <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary input-group-btn"</span>>Search<<span class="tag">/button</span>> - <<span class="tag">/div</span>> - <<span class="tag">/section</span>> -<<span class="tag">/header</span>> +<span class="hljs-comment"><!-- rounded labels --></span> +<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"label label-rounded label-primary"</span>></span>primary label<span class="hljs-tag"></<span class="hljs-name">span</span>></span></code></pre> + </div> + <div class="container" id="code"> + <h3 class="s-title"><a class="anchor" href="#code" aria-hidden="true">#</a>Code</h3> + <p>Code is used for styling inline and multiline code snippets.</p> + <p>For inline code, you can use the <code> element. + For multiline code snippet blocks, you can use <pre> with the <code>code</code> class as a container, and add <code> inside it. + The <code>data-lang</code> ibute is rendered as the language name in the top right. + </p> + <pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- code snippets --></span> +<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn"</span>></span> + Submit +<span class="hljs-tag"></<span class="hljs-name">button</span>></span> </code></pre> - - <div class="docs-note"> - <p>You can use <code>navbar-center</code> class to have a centered section.</p> - </div> - - <div class="columns"> - <div class="column col-12"> - <div class="navbar"> - <div class="navbar-section"> - <a href="#navbar" class="btn btn-link">Docs</a> - <a href="#navbar" class="btn btn-link">Examples</a> + <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">pre</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"code"</span> <span class="hljs-attr">data-lang</span>=<span class="hljs-string">"HTML"</span>></span><span class="hljs-tag"><<span class="hljs-name">code</span>></span><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"com"</span>></span>&lt;!-- code snippets --&gt;<span class="hljs-tag"></<span class="hljs-name">span</span>></span> +&lt;<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tag"</span>></span>button<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">"atn"</span>></span>class<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">"atv"</span>></span>&quot;btn&quot;<span class="hljs-tag"></<span class="hljs-name">span</span>></span>&gt; + Submit +&lt;<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tag"</span>></span>/button<span class="hljs-tag"></<span class="hljs-name">span</span>></span>&gt; +<span class="hljs-tag"></<span class="hljs-name">code</span>></span><span class="hljs-tag"></<span class="hljs-name">pre</span>></span></code></pre> + </div> + <div class="container" id="media"> + <h3 class="s-title"><a class="anchor" href="#media" aria-hidden="true">#</a>Media</h3> + <p>Media includes responsive images, figures and video classes.</p> + <h4 class="s-subtitle" id="media-images"><a class="anchor" href="#media-images" aria-hidden="true">#</a>Images</h4> + <p>Add the <code>img-responsive</code> class to <img> elements. The images will scale with the parent sizes.</p> + <div class="columns"> + <div class="column col-12"><img class="img-responsive rounded" src="img/osx-el-capitan.jpg" alt="macOS El Capitan Wallpaper"></div> + </div> + <p>Add the <code>img-fit-contain</code> or <code>img-fit-cover</code> class to <img> or <video> elements. The media will crop itself to fit inside the element (and you don't need another container). + This feature can replace the classic background image trick. Microsoft Edge support <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/objectfitandobjectposition/" target="_blank">is shipped</a> with Build Number 16299+. + </p> + <div class="columns"> + <div class="column col-6 col-xs-12"> + <figure class="figure"><img class="img-fit-contain rounded" src="img/osx-yosemite.jpg" alt="macOS Yosemite Wallpaper" style="background: #f8f9fa; height: 10rem; width: 100%;"> + <figcaption class="figure-caption text-center">img-fit-contain</figcaption> + </figure> </div> - <div class="navbar-center"> - <img src="img/spectre-logo.svg" alt="Spectre.css"> + <div class="column col-6 col-xs-12"> + <figure class="figure"><img class="img-fit-cover rounded" src="img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper" style="background: #f8f9fa; height: 10rem; width: 100%;"> + <figcaption class="figure-caption text-center">img-fit-cover</figcaption> + </figure> + </div> + </div> + <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/osx-el-capitan.jpg"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"img-responsive ..."</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"..."</span>></span> +<span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/osx-el-capitan.jpg"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"img-fit-contain ..."</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"..."</span>></span> +<span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/osx-el-capitan.jpg"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"img-fit-cover ..."</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"..."</span>></span> +</code></pre> + <h4 class="s-subtitle" id="media-figure"><a class="anchor" href="#media-figure" aria-hidden="true">#</a>Figure</h4> + <p>You can use the element <figure> for an image with a caption. + Add the <code>figure</code> class to <figure> element. + The images with the <code>img-responsive</code> class will be responsive. + And the included class <code>figure-caption</code> will provide basic style for caption. + Also, you can use <code>text-left</code>, <code>text-center</code> and <code>text-right</code> for caption alignment. + </p> + <div class="columns"> + <div class="column col-12"> + <figure class="figure"><img class="img-responsive rounded" src="img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper"> + <figcaption class="figure-caption text-center">macOS Yosemite wallpaper</figcaption> + </figure> </div> - <div class="navbar-section"> - <a href="https://twitter.com/spectrecss" class="btn btn-link">Twitter</a> - <a href="https://github.com/picturepan2/spectre" class="btn btn-link">GitHub</a> + </div> + <h4 class="s-subtitle" id="media-video"><a class="anchor" href="#media-video" aria-hidden="true">#</a>Video</h4> + <p>For responsive video, add a container with the <code>video-responsive</code> class. + Insert any YouTube, Youku or other iframe/embed video inside the container. + The ratio is 16:9 by default. + You may add <code>video-responsive-4-3</code> for 4:3 ratio video container or <code>video-responsive-1-1</code> for 1:1 ratio. + </p> + <div class="columns"> + <div class="column col-12"> + <div class="video-responsive"> + <iframe width="560" height="315" src="https://www.youtube.com/embed/7DbslbKsQSk" allowfullscreen=""></iframe> + </div> </div> </div> + <p>For responsive <video> elements, you can add the <code>video-responsive</code> class directly.</p> + <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">"video-responsive video-responsive-4-3"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">iframe</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"..."</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"..."</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"..."</span> <span class="hljs-attr">frameborder</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">allowfullscreen</span>></span><span class="hljs-tag"></<span class="hljs-name">iframe</span>></span> +<span class="hljs-tag"></<span class="hljs-name">div</span>></span> + +<span class="hljs-tag"><<span class="hljs-name">video</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"video-responsive"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"..."</span>></span>...<span class="hljs-tag"></<span class="hljs-name">video</span>></span></code></pre> </div> </div> - -<!-- navbar --> -<pre class="code" data-lang="HTML"><code><<span class="tag">header</span> <span class="atn">class</span>=<span class="atv">"navbar"</span>> - <<span class="tag">section</span> <span class="atn">class</span>=<span class="atv">"navbar-section"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"btn btn-link"</span>>Docs<<span class="tag">/a</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"btn btn-link"</span>>Examples<<span class="tag">/a</span>> - <<span class="tag">/section</span>> - <<span class="tag">section</span> <span class="atn">class</span>=<span class="atv">"navbar-center"</span>> - <span class="com"><!-- centered logo or brand --></span> - <<span class="tag">/section</span>> - <<span class="tag">section</span> <span class="atn">class</span>=<span class="atv">"navbar-section"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"btn btn-link"</span>>Twitter<<span class="tag">/a</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"btn btn-link"</span>>GitHub<<span class="tag">/a</span>> - <<span class="tag">/section</span>> -<<span class="tag">/header</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 |