Summary Files Commits Branches @commit @diff @stats
path: root / docs / layout.html
diff options
context:
space:
mode:
Commit329fec6799945d878247d6d70f1a6ad26ade3f77 (patch)
Author
 Yan Zhu <picturepan2@hotmail.com>
2018-06-10 11:09:52 +0800
Committer
 GitHub <noreply@github.com>
2018-06-10 11:09:52 +0800
Files9225a7e69444531c04fba3f028b49c73c80c1d47 /docs/layout.html
Spectre-Dark-Gruvbox-329fec6799945d878247d6d70f1a6ad26ade3f77.tar
Spectre-Dark-Gruvbox-329fec6799945d878247d6d70f1a6ad26ade3f77.tar.gz
Spectre-Dark-Gruvbox-329fec6799945d878247d6d70f1a6ad26ade3f77.zip
Parent7a6af53bca72b549b2cbf1948763348bd5b30dcd (diff)
Parent1c439a3201df5b559b124940c8fcc2702c345631 (diff)
Merge pull request #451 from picturepan2/0.5.2
0.5.2
1 files changed, 662 insertions, 766 deletions
-rw-r--r--docs/layout.html1428
diff --git a/docs/layout.html b/docs/layout.html
index dd4fae5..0c003ad 100644
--- a/docs/layout.html
+++ b/docs/layout.html
@@ -1,799 +1,695 @@
<!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>Layout - Spectre.css CSS Framework</title>
+ <meta charset="utf-8">
+ <meta name="robots" content="index, follow">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+ <meta http-equiv="x-ua-compatible" content="ie=edge">
+ <meta name="author" content="Yan Zhu">
+ <link rel="shortcut icon" href="img/favicons/favicon.ico">
+ <link rel="icon" href="img/favicons/favicon.png">
+ <link rel="stylesheet" href="dist/spectre.min.css">
+ <link rel="stylesheet" href="dist/spectre-icons.min.css">
+ <link rel="stylesheet" href="dist/spectre-exp.min.css">
+ <link rel="stylesheet" href="dist/docs.min.css">
+ </head>
+ <body>
+ <div class="docs-container off-canvas off-canvas-sidebar-show">
+ <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a><a class="btn btn-primary" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a></div>
+ <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+ <div class="docs-brand"><a class="docs-logo" href="/"><img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+ <h2>SPECTRE</h2></a></div>
+ <div class="docs-nav">
+ <div class="accordion-container">
+ <div class="accordion">
+ <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="getting-started.html#introduction">Introduction</a></li>
+ <li class="menu-item"><a href="getting-started.html#installation">Installation</a></li>
+ <li class="menu-item"><a href="getting-started.html#custom">Custom version</a></li>
+ <li class="menu-item"><a href="getting-started.html#browsers">Browser support</a></li>
+ <li class="menu-item"><a href="getting-started.html#whatsnew">What's new</a></li>
+ </ul>
+ </div>
</div>
- </div>
- <div class="accordion">
- <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden>
- <label class="accordion-header c-hand" for="docs-accordion-2">
- Elements
- </label>
- <div class="accordion-body">
- <ul class="menu menu-nav">
- <li class="menu-item">
- <a href="elements.html">Typography</a>
- </li>
- <li class="menu-item">
- <a href="elements.html#tables">Tables</a>
- </li>
- <li class="menu-item">
- <a href="elements.html#buttons">Buttons</a>
- </li>
- <li class="menu-item">
- <a href="elements.html#forms">Forms</a>
- </li>
- <li class="menu-item">
- <a href="elements.html#icons">Icons</a>
- </li>
- <li class="menu-item">
- <a href="elements.html#labels">Labels</a>
- </li>
- <li class="menu-item">
- <a href="elements.html#codes">Codes</a>
- </li>
- <li class="menu-item">
- <a href="elements.html#media">Media</a>
- </li>
- </ul>
+ <div class="accordion">
+ <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="elements.html#typography">Typography</a></li>
+ <li class="menu-item"><a href="elements.html#tables">Tables</a></li>
+ <li class="menu-item"><a href="elements.html#buttons">Buttons</a></li>
+ <li class="menu-item"><a href="elements.html#forms">Forms</a></li>
+ <li class="menu-item"><a href="elements.html#icons">Icons</a></li>
+ <li class="menu-item"><a href="elements.html#labels">Labels</a></li>
+ <li class="menu-item"><a href="elements.html#code">Code</a></li>
+ <li class="menu-item"><a href="elements.html#media">Media</a></li>
+ </ul>
+ </div>
</div>
- </div>
- <div class="accordion">
- <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden 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="" checked="checked"/>
+ <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="layout.html#flexbox">Flexbox grid</a></li>
+ <li class="menu-item"><a href="layout.html#responsive">Responsive</a></li>
+ <li class="menu-item"><a href="layout.html#navbar">Navbar</a></li>
+ </ul>
+ </div>
</div>
- </div>
- <div class="accordion">
- <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden>
- <label class="accordion-header c-hand" for="docs-accordion-4">
- Components
- </label>
- <div class="accordion-body">
- <ul class="menu menu-nav">
- <li class="menu-item">
- <a href="components.html">Accordions</a>
- </li>
- <li class="menu-item">
- <a href="components.html#avatars">Avatars</a>
- </li>
- <li class="menu-item">
- <a href="components.html#badges">Badges</a>
- </li>
- <li class="menu-item">
- <a href="components.html#bars">Bars</a>
- </li>
- <li class="menu-item">
- <a href="components.html#breadcrumbs">Breadcrumbs</a>
- </li>
- <li class="menu-item">
- <a href="components.html#cards">Cards</a>
- </li>
- <li class="menu-item">
- <a href="components.html#chips">Chips</a>
- </li>
- <li class="menu-item">
- <a href="components.html#empty">Empty states</a>
- </li>
- <li class="menu-item">
- <a href="components.html#menus">Menus</a>
- </li>
- <li class="menu-item">
- <a href="components.html#modals">Modals</a>
- </li>
- <li class="menu-item">
- <a href="components.html#navs">Navs</a>
- </li>
- <li class="menu-item">
- <a href="components.html#pagination">Pagination</a>
- </li>
- <li class="menu-item">
- <a href="components.html#panels">Panels</a>
- </li>
- <li class="menu-item">
- <a href="components.html#popovers">Popovers</a>
- </li>
- <li class="menu-item">
- <a href="components.html#steps">Steps</a>
- </li>
- <li class="menu-item">
- <a href="components.html#tabs">Tabs</a>
- </li>
- <li class="menu-item">
- <a href="components.html#tiles">Tiles</a>
- </li>
- <li class="menu-item">
- <a href="components.html#toasts">Toasts</a>
- </li>
- <li class="menu-item">
- <a href="components.html#tooltips">Tooltips</a>
- </li>
- </ul>
+ <div class="accordion">
+ <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <label class="accordion-header c-hand" for="accordion-components">Components</label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item"><a href="components.html#accordions">Accordions</a></li>
+ <li class="menu-item"><a href="components.html#avatars">Avatars</a></li>
+ <li class="menu-item"><a href="components.html#badges">Badges</a></li>
+ <li class="menu-item"><a href="components.html#bars">Bars</a></li>
+ <li class="menu-item"><a href="components.html#breadcrumbs">Breadcrumbs</a></li>
+ <li class="menu-item"><a href="components.html#cards">Cards</a></li>
+ <li class="menu-item"><a href="components.html#chips">Chips</a></li>
+ <li class="menu-item"><a href="components.html#empty">Empty states</a></li>
+ <li class="menu-item"><a href="components.html#menu">Menu</a></li>
+ <li class="menu-item"><a href="components.html#modals">Modals</a></li>
+ <li class="menu-item"><a href="components.html#nav">Nav</a></li>
+ <li class="menu-item"><a href="components.html#pagination">Pagination</a></li>
+ <li class="menu-item"><a href="components.html#panels">Panels</a></li>
+ <li class="menu-item"><a href="components.html#popovers">Popovers</a></li>
+ <li class="menu-item"><a href="components.html#steps">Steps</a></li>
+ <li class="menu-item"><a href="components.html#tabs">Tabs</a></li>
+ <li class="menu-item"><a href="components.html#tiles">Tiles</a></li>
+ <li class="menu-item"><a href="components.html#toasts">Toasts</a></li>
+ <li class="menu-item"><a href="components.html#tooltips">Tooltips</a></li>
+ </ul>
+ </div>
</div>
- </div>
- <div class="accordion">
- <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden>
- <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 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>
-
- <div class="columns col-oneline">
- <div class="column col-8">
- <div class="bg-gray docs-block">col-8</div>
- </div>
- <div class="column col-8">
- <div class="bg-gray docs-block">col-8</div>
- </div>
- </div>
-
-<!-- layout -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;container&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;columns&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;column col-6&quot;</span>&gt;col-6&lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;column col-3&quot;</span>&gt;col-3&lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;column col-2&quot;</span>&gt;col-2&lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;column col-1&quot;</span>&gt;col-1&lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
-
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;columns col-gapless&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;column col-6&quot;</span>&gt;col-6&lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;column col-6&quot;</span>&gt;col-6&lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
-
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;columns col-oneline&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;column col-8&quot;</span>&gt;col-8&lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;column col-8&quot;</span>&gt;col-8&lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">/div</span>&gt;
+ </div><a class="off-canvas-overlay" href="#close"></a>
+ <div class="off-canvas-content">
+ <div class="docs-content" id="content">
+ <div class="container" id="grid">
+ <h3 class="s-title">Flexbox grid<a class="anchor" href="#grid" aria-hidden="true">#</a></h3>
+ <div class="docs-ad">
+ <div class="hide-md text-center">
+ <script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+ <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" 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 text-center">
+ <!-- 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>
+ <p>Layout includes flexbox based responsive grid system with 12 columns.</p>
+ <div class="docs-demo 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>
+ <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- flexbox grid example --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-6"</span>&gt;</span>col-6<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-3"</span>&gt;</span>col-3<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-2"</span>&gt;</span>col-2<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-1"</span>&gt;</span>col-1<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</code></pre>
-
- <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>
-
- <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>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;container&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;columns&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;column col-4 col-mr-auto&quot;</span>&gt;col-4 col-mr-auto&lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;column col-2&quot;</span>&gt;col-2&lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">/div</span>&gt;
+ <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 class="docs-demo 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>
+ <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- gapless columns --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns col-gapless"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-6"</span>&gt;</span>col-6<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-6"</span>&gt;</span>col-6<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</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>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 class="docs-demo columns col-oneline">
+ <div class="column col-8">
+ <div class="bg-gray docs-block">col-8</div>
+ </div>
+ <div class="column col-8">
+ <div class="bg-gray docs-block">col-8</div>
+ </div>
+ </div>
+ <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- one line columns --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns col-oneline"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-8"</span>&gt;</span>col-8<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-8"</span>&gt;</span>col-8<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+ <h4 class="s-subtitle" id="grid-offset">Grid offset<a class="anchor" href="#grid-offset" aria-hidden="true">#</a></h4>
+ <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 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>
+ <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- grid offset example --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-4 col-mr-auto"</span>&gt;</span>col-4 col-mr-auto<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-2"</span>&gt;</span>col-2<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+ <h4 class="s-subtitle" id="grid-nesting">Grid nesting<a class="anchor" href="#grid-nesting" aria-hidden="true">#</a></h4>
+ <p>To nest grids, add the new <code>columns</code> and <code>column</code> structure within an existing column.</p>
+ <div class="docs-demo columns">
<div class="column col-6">
- <div class="bg-primary docs-block">col-6</div>
+ <div class="bg-gray docs-block">col-6</div>
+ <div class="columns">
+ <div class="column col-6">
+ <div class="bg-primary docs-block">col-6</div>
+ </div>
+ <div class="column col-6">
+ <div class="bg-primary docs-block">col-6</div>
+ </div>
+ </div>
</div>
<div class="column col-6">
- <div class="bg-primary docs-block">col-6</div>
+ <div class="bg-gray docs-block">col-6</div>
</div>
</div>
+ <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- grid nesting example --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-6"</span>&gt;</span>col-6
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-6"</span>&gt;</span>col-6<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-6"</span>&gt;</span>col-6<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-6"</span>&gt;</span>col-6<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
</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>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;container&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;columns&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;column col-6&quot;</span>&gt;col-6
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;columns&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;column col-6&quot;</span>&gt;col-6&lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;column col-6&quot;</span>&gt;col-6&lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;column col-6&quot;</span>&gt;col-6&lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">/div</span>&gt;
-</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>
- </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>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;container&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;columns&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;column col-xs-6&quot;</span>&gt;col-xs-6&lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;column col-xs-3&quot;</span>&gt;col-xs-3&lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;column col-xs-3&quot;</span>&gt;col-xs-3&lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">/div</span>&gt;
+ <div class="container" id="responsive">
+ <h3 class="s-title">Responsive<a class="anchor" href="#responsive" aria-hidden="true">#</a></h3>
+ <div class="docs-ad docs-ad-sidebar text-center">
+ <script id="_carbonads_js" async="" type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
+ </div>
+ <p>Spectre provides a neat responsive layout grid system and responsive visibility utilities.</p>
+ <div class="docs-demo 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>
+ </div>
+ </div>
+ <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>
+ <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-xs-6"</span>&gt;</span>col-xs-6<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-xs-3"</span>&gt;</span>col-xs-3<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-xs-3"</span>&gt;</span>col-xs-3<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</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">&lt;!-- 100% width container with max-width set to grid-lg (960px) --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;container grid-lg&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;columns&quot;</span>&gt;
+ <h4 class="s-subtitle" id="responsive-container">Responsive container<a class="anchor" href="#responsive-container" aria-hidden="true">#</a></h4>
+ <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 the container for a fixed-width container with the specific max-width.
+ </p>
+ <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- 100% width container with max-width set to grid-lg (960px) --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container grid-lg"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>&gt;</span>
...
- &lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">/div</span>&gt;
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</code></pre>
-
- <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>
-
- <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>
-
- <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>
-
- <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>
+ <h4 class="s-subtitle" id="responsive-visibility">Responsive visibility<a class="anchor" href="#responsive-visibility" aria-hidden="true">#</a></h4>
+ <p>The responsive visibility utilities help show and hide elements on specific viewport sizes.</p>
+ <div class="docs-demo columns">
+ <div class="column col-12">
+ <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>
- <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>
+ </div>
+ <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 class="docs-demo columns">
+ <div class="column col-12">
+ <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>
</div>
</div>
+ <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 class="btn btn-primary" href="https://picturepan2.github.io/responsive-resizer/" target="_blank">Responsive Resizer</a></p>
</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>
-
-<!-- navbar -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">header</span> <span class="atn">class</span>=<span class="atv">&quot;navbar&quot;</span>&gt;
- &lt;<span class="tag">section</span> <span class="atn">class</span>=<span class="atv">&quot;navbar-section&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;navbar-brand mr-2&quot;</span>&gt;Spectre.css&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-link&quot;</span>&gt;Docs&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;https://github.com/picturepan2/spectre&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-link&quot;</span>&gt;GitHub&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/section</span>&gt;
- &lt;<span class="tag">section</span> <span class="atn">class</span>=<span class="atv">&quot;navbar-section&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;input-group input-inline&quot;</span>&gt;
- &lt;<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">&quot;form-input&quot;</span> <span class="atn">type</span>=<span class="atv">&quot;text&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;search&quot;</span>&gt;
- &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-primary input-group-btn&quot;</span>&gt;Search&lt;<span class="tag">/button</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">/section</span>&gt;
-&lt;<span class="tag">/header</span>&gt;
-</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>
- </div>
- <div class="navbar-center">
- <img src="img/spectre-logo.svg" alt="Spectre.css">
+ <div class="container" id="navbar">
+ <h3 class="s-title">Navbar<a class="anchor" href="#navbar" aria-hidden="true">#</a></h3>
+ <p>Navbar is a layout container that appears in the header of apps and websites.</p>
+ <div class="docs-demo columns">
+ <div class="column">
+ <div class="navbar">
+ <div class="navbar-section"><a class="navbar-brand mr-2" href="#navbar">Spectre.css</a><a class="btn btn-link" href="#navbar">Docs</a><a class="btn btn-link" href="https://github.com/picturepan2/spectre">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>
+ </div>
+ </div>
</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>
+ <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>
+ <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">header</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"navbar"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">section</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"navbar-section"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"..."</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"navbar-brand mr-2"</span>&gt;</span>Spectre.css<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"..."</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-link"</span>&gt;</span>Docs<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"..."</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-link"</span>&gt;</span>GitHub<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">section</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">section</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"navbar-section"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-group input-inline"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<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">placeholder</span>=<span class="hljs-string">"search"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary input-group-btn"</span>&gt;</span>Search<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">section</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">header</span>&gt;</span>
+</code></pre>
+ <p>You can use <code>navbar-center</code> class to have a centered section.</p>
+ <div class="docs-demo columns">
+ <div class="column col-12">
+ <div class="navbar">
+ <div class="navbar-section"><a class="btn btn-link" href="#navbar">Docs</a><a class="btn btn-link" href="#navbar">Examples</a></div>
+ <div class="navbar-center"><img src="img/spectre-logo.svg" alt="Spectre.css"></div>
+ <div class="navbar-section"><a class="btn btn-link" href="https://twitter.com/spectrecss">Twitter</a><a class="btn btn-link" href="https://github.com/picturepan2/spectre">GitHub</a></div>
+ </div>
</div>
</div>
+ <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">header</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"navbar"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">section</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"navbar-section"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-link"</span>&gt;</span>Docs<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-link"</span>&gt;</span>Examples<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">section</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">section</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"navbar-center"</span>&gt;</span>
+ <span class="hljs-comment">&lt;!-- centered logo or brand --&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">section</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">section</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"navbar-section"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-link"</span>&gt;</span>Twitter<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-link"</span>&gt;</span>GitHub<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">section</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">header</span>&gt;</span></code></pre>
+ </div>
+ <div class="docs-footer container grid-lg" id="copyright">
+ <p><a href="getting-started.html" target="_blank">Documents</a> · <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · Version <span class="version"></span></p>
+ <p>Designed and built with <span class="text-error">&hearts;</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>
</div>
</div>
-
-<!-- navbar -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">header</span> <span class="atn">class</span>=<span class="atv">&quot;navbar&quot;</span>&gt;
- &lt;<span class="tag">section</span> <span class="atn">class</span>=<span class="atv">&quot;navbar-section&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-link&quot;</span>&gt;Docs&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-link&quot;</span>&gt;Examples&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/section</span>&gt;
- &lt;<span class="tag">section</span> <span class="atn">class</span>=<span class="atv">&quot;navbar-center&quot;</span>&gt;
- <span class="com">&lt;!-- centered logo or brand --&gt;</span>
- &lt;<span class="tag">/section</span>&gt;
- &lt;<span class="tag">section</span> <span class="atn">class</span>=<span class="atv">&quot;navbar-section&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-link&quot;</span>&gt;Twitter&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-link&quot;</span>&gt;GitHub&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/section</span>&gt;
-&lt;<span class="tag">/header</span>&gt;
-</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