diff options
Improve Docs homepage
1 files changed, 19 insertions, 19 deletions
| -rw-r--r-- | docs/layout.html | 38 |
diff --git a/docs/layout.html b/docs/layout.html index c713b03..e1d1a31 100644 --- a/docs/layout.html +++ b/docs/layout.html @@ -6,7 +6,7 @@ <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</title> + <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="css/docs.css" /> @@ -15,8 +15,8 @@ <div class="s-container container"> <div class="columns"> <div class="s-brand"> - <a href="index.html" class="s-logo tooltip tooltip-bottom" data-tooltip="Spectre.css" > - <img src="img/spectre-logo.svg" alt="Spectre.css"/> + <a href="index.html" class="s-logo tooltip tooltip-bottom" data-tooltip="Spectre.css CSS Framework"> + <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework" /> <h2>Spectre.css</h2> </a> <div class="menu-btn"> @@ -253,7 +253,7 @@ <div id="content" class="s-content"> <div id="grid" class="container"> <h3 class="s-title"><a href="#grid" class="anchor" aria-hidden="true">#</a>Flexbox grid</h3> - <div class="notes"> + <div class="docs-note"> <p>Layout includes flexbox based responsive grid system with 12 columns. </p> </div> <div class="columns"> @@ -316,7 +316,7 @@ </div> </div> - <div class="notes"> + <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 have gapless columns.</p> </div> @@ -330,7 +330,7 @@ </div> </div> - <div class="notes"> + <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> @@ -363,7 +363,7 @@ <div id="responsive" class="container"> <h3 class="s-title"><a href="#responsive" class="anchor" aria-hidden="true">#</a>Responsive grid</h3> - <div class="notes"> + <div class="docs-note"> <p>Spectre provides a neat responsive layout grid system and responsive visibility utilities. </p> </div> <div class="columns"> @@ -387,7 +387,7 @@ </div> </div> - <div class="notes"> + <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> @@ -409,7 +409,7 @@ </code></pre> <h4 class="s-subtitle">Responsive container</h4> - <div class="notes"> + <div class="docs-note"> <p>The responsive layout also provides fixed-width containers. Use <code>grid-480</code>, <code>grid-960</code> or <code>grid-1280</code> to <code>container</code> for a fixed-width container with the specific max-width.</p> </div> @@ -422,7 +422,7 @@ </code></pre> <h4 class="s-subtitle">Responsive visibility</h4> - <div class="notes"> + <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 text-center"> @@ -480,7 +480,7 @@ </tbody> </table> - <div class="notes"> + <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> @@ -546,7 +546,7 @@ </tbody> </table> - <div class="notes"> + <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> @@ -562,7 +562,7 @@ <div id="navbar" class="container"> <h3 class="s-title"><a href="#navbar" class="anchor" aria-hidden="true">#</a>Navbar</h3> - <div class="notes"> + <div class="docs-note"> <p>Navbar is a layout container that appears in the header of apps and websites. </p> </div> <div class="columns"> @@ -582,7 +582,7 @@ </div> </div> </div> - <div class="notes"> + <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> @@ -602,7 +602,7 @@ <<span class="tag">/header</span>> </code></pre> - <div class="notes"> + <div class="docs-note"> <p>You can use <code>navbar-center</code> class to have a centered section.</p> </div> @@ -644,7 +644,7 @@ <div id="panels" class="container"> <h3 class="s-title"><a href="#panels" class="anchor" aria-hidden="true">#</a>Panels</h3> - <div class="notes"> + <div class="docs-note"> <p>Panels are flexible view container layout with auto-expand content section.</p> </div> <div class="columns"> @@ -780,7 +780,7 @@ </div> </div> - <div class="notes"> + <div class="docs-note"> <p>Add a container element with the <code>panel</code> class. And add child elements with the <code>panel-header</code>, <code>panel-nav</code>, <code>panel-body</code> and/or <code>panel-footer</code> class. The <code>panel-body</code> can be auto expanded and vertically scrollable. </p> </div> @@ -805,7 +805,7 @@ <div id="empty" class="container"> <h3 class="s-title"><a href="#empty" class="anchor" aria-hidden="true">#</a>Empty states / blank slates</h3> - <div class="notes"> + <div class="docs-note"> <p>Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens.</p> </div> <div class="columns"> @@ -851,7 +851,7 @@ </div> </div> - <div class="notes"> + <div class="docs-note"> <p>An empty state component can include icons, messages (title and subtitle messages) and action buttons or any combination of those elements. Add <code>empty-icon</code>, <code>empty-title</code>, <code>empty-subtitle</code> or <code>empty-action</code> to the elements. HTML structure is exampled below. </p> </div> |