diff options
| author | Yan Zhu <picturepan2@hotmail.com> | 2017-10-18 10:01:36 +0300 |
|---|---|---|
| committer | Yan Zhu <picturepan2@hotmail.com> | 2017-10-18 10:01:36 +0300 |
| commit | 2d12f808e4b91e92cf4c28de7dca1c9f02dd0b8b (patch) | |
| tree | ccc0e464cd6a4fe6c35c698ac4a56170cbd4a94b /docs/layout.html | |
| parent | 7b7137c277fb38e67d39a11acd1342f6c2891dfd (diff) | |
Rewrite Off-canvas component and update the Docs
Diffstat (limited to 'docs/layout.html')
| -rw-r--r-- | docs/layout.html | 1194 |
1 files changed, 597 insertions, 597 deletions
diff --git a/docs/layout.html b/docs/layout.html index 7b4a801..898a57e 100644 --- a/docs/layout.html +++ b/docs/layout.html @@ -9,376 +9,377 @@ <title>Layout - Spectre.css CSS Framework</title> <link rel="stylesheet" href="dist/spectre.css"> <link rel="stylesheet" href="dist/spectre-icons.css"> + <link rel="stylesheet" href="dist/spectre-exp.css"> <link rel="stylesheet" href="css/docs.css"> </head> <body> - <div class="s-container container"> - <div class="columns"> - <div id="sidebar" class="s-sidebar"> - <div class="s-brand"> - <a href="index.html" class="s-logo"> - <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework"> - <h2>Spectre.css</h2> - </a> - </div> - <div class="s-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">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 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">Typography</a> - </li> - <li class="menu-item"> - <a href="elements.html#tables">Tables</a> - </li> - <li class="menu-item"> - <a href="elements.html#buttons">Buttons</a> - </li> - <li class="menu-item"> - <a href="elements.html#forms">Forms</a> - </li> - <li class="menu-item"> - <a href="elements.html#icons">Icons</a> - </li> - <li class="menu-item"> - <a href="elements.html#labels">Labels</a> - </li> - <li class="menu-item"> - <a href="elements.html#codes">Codes</a> - </li> - <li class="menu-item"> - <a href="elements.html#media">Media</a> - </li> - </ul> - </div> - </div> - <div class="accordion"> - <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#grid">Flexbox grid</a> - </li> - <li class="menu-item"> - <a href="layout.html#responsive">Responsive</a> - </li> - <li class="menu-item"> - <a href="layout.html#navbar">Navbar</a> - </li> - </ul> - </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">Accordions</a> - </li> - <li class="menu-item"> - <a href="components.html#autocomplete">Autocomplete</a> - </li> - <li class="menu-item"> - <a href="components.html#avatars">Avatars</a> - </li> - <li class="menu-item"> - <a href="components.html#badges">Badges</a> - </li> - <li class="menu-item"> - <a href="components.html#bars">Bars</a> - </li> - <li class="menu-item"> - <a href="components.html#breadcrumbs">Breadcrumbs</a> - </li> - <li class="menu-item"> - <a href="components.html#cards">Cards</a> - </li> - <li class="menu-item"> - <a href="components.html#chips">Chips</a> - </li> - <li class="menu-item"> - <a href="components.html#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 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">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 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#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 class="docs-container off-canvas"> + <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.css</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">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 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">Typography</a> + </li> + <li class="menu-item"> + <a href="elements.html#tables">Tables</a> + </li> + <li class="menu-item"> + <a href="elements.html#buttons">Buttons</a> + </li> + <li class="menu-item"> + <a href="elements.html#forms">Forms</a> + </li> + <li class="menu-item"> + <a href="elements.html#icons">Icons</a> + </li> + <li class="menu-item"> + <a href="elements.html#labels">Labels</a> + </li> + <li class="menu-item"> + <a href="elements.html#codes">Codes</a> + </li> + <li class="menu-item"> + <a href="elements.html#media">Media</a> + </li> + </ul> + </div> + </div> + <div class="accordion"> + <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#grid">Flexbox grid</a> + </li> + <li class="menu-item"> + <a href="layout.html#responsive">Responsive</a> + </li> + <li class="menu-item"> + <a href="layout.html#navbar">Navbar</a> + </li> + </ul> + </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">Accordions</a> + </li> + <li class="menu-item"> + <a href="components.html#autocomplete">Autocomplete</a> + </li> + <li class="menu-item"> + <a href="components.html#avatars">Avatars</a> + </li> + <li class="menu-item"> + <a href="components.html#badges">Badges</a> + </li> + <li class="menu-item"> + <a href="components.html#bars">Bars</a> + </li> + <li class="menu-item"> + <a href="components.html#breadcrumbs">Breadcrumbs</a> + </li> + <li class="menu-item"> + <a href="components.html#cards">Cards</a> + </li> + <li class="menu-item"> + <a href="components.html#chips">Chips</a> + </li> + <li class="menu-item"> + <a href="components.html#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 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">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 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#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> - <a href="#sidebar-close" id="sidebar-close" class="docs-nav-clear"></a> - <div class="s-navbar"> - <div class="menu-btn"> - <a href="#sidebar" class="btn btn-link btn-action"><i class="icon icon-menu"></i></a> - </div> - <div class="float-btn"> - <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a> + </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="content" class="s-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 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 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 class="column"> + <div class="bg-primary text-secondary docs-block"></div> </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 class="column"> + <div class="bg-primary text-secondary docs-block"></div> </div> - - <div class="columns"> - <div class="column col-12"> - <div class="bg-gray docs-block">col-12 (100%)</div> - </div> + <div class="column"> + <div class="bg-primary text-secondary docs-block"></div> </div> - <div class="columns"> - <div class="column col-9"> - <div class="bg-gray docs-block">col-9 (75%)</div> - </div> + <div class="column"> + <div class="bg-primary text-secondary docs-block"></div> </div> - <div class="columns"> - <div class="column col-6"> - <div class="bg-gray docs-block">col-6 (50%)</div> - </div> + <div class="column"> + <div class="bg-primary text-secondary docs-block"></div> </div> - <div class="columns"> - <div class="column col-3"> - <div class="bg-gray docs-block">col-3 (25%)</div> - </div> + <div class="column"> + <div class="bg-primary text-secondary docs-block"></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 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 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 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="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 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="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 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><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"container"</span>> @@ -401,56 +402,56 @@ <<span class="tag">/div</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> + <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 class="columns"> + <div class="column col-2"> + <div class="bg-gray docs-block">col-2</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 class="column col-4 col-mx-auto"> + <div class="bg-gray docs-block">col-4 col-mx-auto</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-2"> + <div class="bg-gray docs-block">col-2</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 class="column col-4 col-ml-auto"> + <div class="bg-gray docs-block">col-4 col-ml-auto</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-ml-auto"> + <div class="bg-gray docs-block">col-4 col-ml-auto</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-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>> @@ -461,33 +462,33 @@ <<span class="tag">/div</span>> </code></pre> - </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 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="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 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> + <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>> @@ -499,10 +500,10 @@ <<span class="tag">/div</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> + <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> @@ -513,170 +514,170 @@ <<span class="tag">/div</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> + <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> - <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> + <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> + </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="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> + <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><<span class="tag">header</span> <span class="atn">class</span>=<span class="atv">"navbar"</span>> @@ -694,27 +695,27 @@ <<span class="tag">/header</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="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> - <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> + <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> + <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> </div> </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>> @@ -732,14 +733,13 @@ <<span class="tag">/header</span>> </code></pre> - </div> + </div> - <footer class="s-footer"> - <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> | <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> | <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> | Version <span class="version"></span></p> - <p>Designed and built with ♥ by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p> - </footer> + <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 ♥ 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> </div> |