diff options
| author | Yan Zhu <picturepan2@hotmail.com> | 2018-11-06 13:52:37 +0300 |
|---|---|---|
| committer | Yan Zhu <picturepan2@hotmail.com> | 2018-11-06 13:52:37 +0300 |
| commit | 3ab3a9d09955772ec56ddadbba49954b4edd6a3e (patch) | |
| tree | 00686d5c0bcd66010f4f26768dde13e26a49b709 /docs/layout.html | |
| parent | 13b42d4c792f0a579d2d974492e13cd77d6f77f7 (diff) | |
Update the Docs completely
Diffstat (limited to 'docs/layout.html')
| -rw-r--r-- | docs/layout.html | 720 |
1 files changed, 108 insertions, 612 deletions
diff --git a/docs/layout.html b/docs/layout.html index 11f9ab6..d5f1322 100644 --- a/docs/layout.html +++ b/docs/layout.html @@ -23,7 +23,8 @@ </div> <div class="docs-sidebar off-canvas-sidebar" id="sidebar"> <div class="docs-brand"><a class="docs-logo" href="index.html"><img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework"> - <h2>SPECTRE</h2></a></div> + <h2>SPECTRE</h2></a> + </div> <div class="docs-nav"> <div class="accordion-container"> <div class="accordion"> @@ -31,11 +32,14 @@ <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label> <div class="accordion-body"> <ul class="menu menu-nav"> - <li class="menu-item"><a href="getting-started.html#introduction">Introduction</a></li> - <li class="menu-item"><a href="getting-started.html#installation">Installation</a></li> - <li class="menu-item"><a href="getting-started.html#custom">Custom version</a></li> - <li class="menu-item"><a href="getting-started.html#browsers">Browser support</a></li> - <li class="menu-item"><a href="getting-started.html#whatsnew">What's new</a></li> + <li class="menu-item"><a href="getting-started/installation.html">Installation</a> + </li> + <li class="menu-item"><a href="getting-started/custom.html">Custom version</a> + </li> + <li class="menu-item"><a href="getting-started/browsers.html">Browser support</a> + </li> + <li class="menu-item"><a href="getting-started/whatsnew.html">What's new</a> + </li> </ul> </div> </div> @@ -44,14 +48,22 @@ <label class="accordion-header c-hand" for="accordion-elements">Elements</label> <div class="accordion-body"> <ul class="menu menu-nav"> - <li class="menu-item"><a href="elements.html#typography">Typography</a></li> - <li class="menu-item"><a href="elements.html#tables">Tables</a></li> - <li class="menu-item"><a href="elements.html#buttons">Buttons</a></li> - <li class="menu-item"><a href="elements.html#forms">Forms</a></li> - <li class="menu-item"><a href="elements.html#icons">Icons</a></li> - <li class="menu-item"><a href="elements.html#labels">Labels</a></li> - <li class="menu-item"><a href="elements.html#code">Code</a></li> - <li class="menu-item"><a href="elements.html#media">Media</a></li> + <li class="menu-item"><a href="elements/typography.html">Typography</a> + </li> + <li class="menu-item"><a href="elements/tables.html">Tables</a> + </li> + <li class="menu-item"><a href="elements/buttons.html">Buttons</a> + </li> + <li class="menu-item"><a href="elements/forms.html">Forms</a> + </li> + <li class="menu-item"><a href="elements/icons.html">Icons</a> + </li> + <li class="menu-item"><a href="elements/labels.html">Labels</a> + </li> + <li class="menu-item"><a href="elements/code.html">Code</a> + </li> + <li class="menu-item"><a href="elements/media.html">Media</a> + </li> </ul> </div> </div> @@ -60,9 +72,12 @@ <label class="accordion-header c-hand" for="accordion-layout">Layout</label> <div class="accordion-body"> <ul class="menu menu-nav"> - <li class="menu-item"><a href="layout.html#grid">Flexbox grid</a></li> - <li class="menu-item"><a href="layout.html#responsive">Responsive</a></li> - <li class="menu-item"><a href="layout.html#navbar">Navbar</a></li> + <li class="menu-item"><a href="layout/grid.html">Flexbox grid</a> + </li> + <li class="menu-item"><a href="layout/responsive.html">Responsive</a> + </li> + <li class="menu-item"><a href="layout/navbar.html">Navbar</a> + </li> </ul> </div> </div> @@ -71,25 +86,44 @@ <label class="accordion-header c-hand" for="accordion-components">Components</label> <div class="accordion-body"> <ul class="menu menu-nav"> - <li class="menu-item"><a href="components.html#accordions">Accordions</a></li> - <li class="menu-item"><a href="components.html#avatars">Avatars</a></li> - <li class="menu-item"><a href="components.html#badges">Badges</a></li> - <li class="menu-item"><a href="components.html#bars">Bars</a></li> - <li class="menu-item"><a href="components.html#breadcrumbs">Breadcrumbs</a></li> - <li class="menu-item"><a href="components.html#cards">Cards</a></li> - <li class="menu-item"><a href="components.html#chips">Chips</a></li> - <li class="menu-item"><a href="components.html#empty">Empty states</a></li> - <li class="menu-item"><a href="components.html#menu">Menu</a></li> - <li class="menu-item"><a href="components.html#modals">Modals</a></li> - <li class="menu-item"><a href="components.html#nav">Nav</a></li> - <li class="menu-item"><a href="components.html#pagination">Pagination</a></li> - <li class="menu-item"><a href="components.html#panels">Panels</a></li> - <li class="menu-item"><a href="components.html#popovers">Popovers</a></li> - <li class="menu-item"><a href="components.html#steps">Steps</a></li> - <li class="menu-item"><a href="components.html#tabs">Tabs</a></li> - <li class="menu-item"><a href="components.html#tiles">Tiles</a></li> - <li class="menu-item"><a href="components.html#toasts">Toasts</a></li> - <li class="menu-item"><a href="components.html#tooltips">Tooltips</a></li> + <li class="menu-item"><a href="components/accordions.html">Accordions</a> + </li> + <li class="menu-item"><a href="components/avatars.html">Avatars</a> + </li> + <li class="menu-item"><a href="components/badges.html">Badges</a> + </li> + <li class="menu-item"><a href="components/bars.html">Bars</a> + </li> + <li class="menu-item"><a href="components/breadcrumbs.html">Breadcrumbs</a> + </li> + <li class="menu-item"><a href="components/cards.html">Cards</a> + </li> + <li class="menu-item"><a href="components/chips.html">Chips</a> + </li> + <li class="menu-item"><a href="components/empty.html">Empty states</a> + </li> + <li class="menu-item"><a href="components/menu.html">Menu</a> + </li> + <li class="menu-item"><a href="components/modals.html">Modals</a> + </li> + <li class="menu-item"><a href="components/nav.html">Nav</a> + </li> + <li class="menu-item"><a href="components/pagination.html">Pagination</a> + </li> + <li class="menu-item"><a href="components/panels.html">Panels</a> + </li> + <li class="menu-item"><a href="components/popovers.html">Popovers</a> + </li> + <li class="menu-item"><a href="components/steps.html">Steps</a> + </li> + <li class="menu-item"><a href="components/tabs.html">Tabs</a> + </li> + <li class="menu-item"><a href="components/tiles.html">Tiles</a> + </li> + <li class="menu-item"><a href="components/toasts.html">Toasts</a> + </li> + <li class="menu-item"><a href="components/tooltips.html">Tooltips</a> + </li> </ul> </div> </div> @@ -98,14 +132,22 @@ <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label> <div class="accordion-body"> <ul class="menu menu-nav"> - <li class="menu-item"><a href="utilities.html#colors">Colors</a></li> - <li class="menu-item"><a href="utilities.html#cursors">Cursors</a></li> - <li class="menu-item"><a href="utilities.html#display">Display</a></li> - <li class="menu-item"><a href="utilities.html#divider">Divider</a></li> - <li class="menu-item"><a href="utilities.html#loading">Loading</a></li> - <li class="menu-item"><a href="utilities.html#position">Position</a></li> - <li class="menu-item"><a href="utilities.html#shapes">Shapes</a></li> - <li class="menu-item"><a href="utilities.html#text">Text</a></li> + <li class="menu-item"><a href="utilities/colors.html">Colors</a> + </li> + <li class="menu-item"><a href="utilities/cursors.html">Cursors</a> + </li> + <li class="menu-item"><a href="utilities/display.html">Display</a> + </li> + <li class="menu-item"><a href="utilities/divider.html">Divider</a> + </li> + <li class="menu-item"><a href="utilities/loading.html">Loading</a> + </li> + <li class="menu-item"><a href="utilities/position.html">Position</a> + </li> + <li class="menu-item"><a href="utilities/shapes.html">Shapes</a> + </li> + <li class="menu-item"><a href="utilities/text.html">Text</a> + </li> </ul> </div> </div> @@ -114,17 +156,28 @@ <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label> <div class="accordion-body"> <ul class="menu menu-nav"> - <li class="menu-item"><a href="experimentals.html#autocomplete">Autocomplete</a></li> - <li class="menu-item"><a href="experimentals.html#calendars">Calendars</a></li> - <li class="menu-item"><a href="experimentals.html#carousels">Carousels</a></li> - <li class="menu-item"><a href="experimentals.html#comparison">Comparison sliders</a></li> - <li class="menu-item"><a href="experimentals.html#filters">Filters</a></li> - <li class="menu-item"><a href="experimentals.html#meters">Meters</a></li> - <li class="menu-item"><a href="experimentals.html#off-canvas">Off-canvas</a></li> - <li class="menu-item"><a href="experimentals.html#parallax">Parallax</a></li> - <li class="menu-item"><a href="experimentals.html#progress">Progress</a></li> - <li class="menu-item"><a href="experimentals.html#sliders">Sliders</a></li> - <li class="menu-item"><a href="experimentals.html#timelines">Timelines</a></li> + <li class="menu-item"><a href="experimentals/autocomplete.html">Autocomplete</a> + </li> + <li class="menu-item"><a href="experimentals/calendars.html">Calendars</a> + </li> + <li class="menu-item"><a href="experimentals/carousels.html">Carousels</a> + </li> + <li class="menu-item"><a href="experimentals/comparison.html">Comparison sliders</a> + </li> + <li class="menu-item"><a href="experimentals/filters.html">Filters</a> + </li> + <li class="menu-item"><a href="experimentals/meters.html">Meters</a> + </li> + <li class="menu-item"><a href="experimentals/off-canvas.html">Off-canvas</a> + </li> + <li class="menu-item"><a href="experimentals/parallax.html">Parallax</a> + </li> + <li class="menu-item"><a href="experimentals/progress.html">Progress</a> + </li> + <li class="menu-item"><a href="experimentals/sliders.html">Sliders</a> + </li> + <li class="menu-item"><a href="experimentals/timelines.html">Timelines</a> + </li> </ul> </div> </div> @@ -133,563 +186,6 @@ </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="https://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"><!-- flexbox grid example --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-6"</span>></span>col-6<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-3"</span>></span>col-3<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-2"</span>></span>col-2<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-1"</span>></span>col-1<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -</code></pre> - <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"><!-- gapless columns --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns col-gapless"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-6"</span>></span>col-6<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-6"</span>></span>col-6<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -</code></pre> - <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"><!-- one line columns --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns col-oneline"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-8"</span>></span>col-8<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-8"</span>></span>col-8<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">div</span>></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"><!-- grid offset example --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-4 col-mr-auto"</span>></span>col-4 col-mr-auto<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-2"</span>></span>col-2<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">div</span>></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-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-gray docs-block">col-6</div> - </div> - </div> - <pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- grid nesting example --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-6"</span>></span>col-6 - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-6"</span>></span>col-6<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-6"</span>></span>col-6<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-6"</span>></span>col-6<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre> - </div> - <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="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&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"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-xs-6"</span>></span>col-xs-6<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-xs-3"</span>></span>col-xs-3<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-xs-3"</span>></span>col-xs-3<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -</code></pre> - <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"><!-- 100% width container with max-width set to grid-lg (960px) --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container grid-lg"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>></span> - ... - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -</code></pre> - <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> - <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 class="container" id="navbar"> - <h3 class="s-title">Navbar<a class="anchor" href="#navbar" aria-hidden="true">#</a></h3> - <div class="docs-ad"> - <div class="hide-md text-center"> - <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> - <!-- 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>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> - <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"><<span class="hljs-name">header</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"navbar"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">section</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"navbar-section"</span>></span> - <span class="hljs-tag"><<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>></span>Spectre.css<span class="hljs-tag"></<span class="hljs-name">a</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"..."</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-link"</span>></span>Docs<span class="hljs-tag"></<span class="hljs-name">a</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"..."</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-link"</span>></span>GitHub<span class="hljs-tag"></<span class="hljs-name">a</span>></span> - <span class="hljs-tag"></<span class="hljs-name">section</span>></span> - <span class="hljs-tag"><<span class="hljs-name">section</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"navbar-section"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-group input-inline"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"search"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary input-group-btn"</span>></span>Search<span class="hljs-tag"></<span class="hljs-name">button</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">section</span>></span> -<span class="hljs-tag"></<span class="hljs-name">header</span>></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"><<span class="hljs-name">header</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"navbar"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">section</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"navbar-section"</span>></span> - <span class="hljs-tag"><<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>></span>Docs<span class="hljs-tag"></<span class="hljs-name">a</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-link"</span>></span>Examples<span class="hljs-tag"></<span class="hljs-name">a</span>></span> - <span class="hljs-tag"></<span class="hljs-name">section</span>></span> - <span class="hljs-tag"><<span class="hljs-name">section</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"navbar-center"</span>></span> - <span class="hljs-comment"><!-- centered logo or brand --></span> - <span class="hljs-tag"></<span class="hljs-name">section</span>></span> - <span class="hljs-tag"><<span class="hljs-name">section</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"navbar-section"</span>></span> - <span class="hljs-tag"><<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>></span>Twitter<span class="hljs-tag"></<span class="hljs-name">a</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-link"</span>></span>GitHub<span class="hljs-tag"></<span class="hljs-name">a</span>></span> - <span class="hljs-tag"></<span class="hljs-name">section</span>></span> -<span class="hljs-tag"></<span class="hljs-name">header</span>></span></code></pre> - </div> <div class="docs-footer container grid-lg" id="copyright"> <p><a href="getting-started.html" target="_blank">Documents</a> · <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · Version <span class="version"></span></p> <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> |