Documented navigation
Still missing the drawer component.
This commit is contained in:
Angelos Chalaris
parent
610a66bcc9
commit
128cdae044
7 changed files with 167 additions and 92 deletions
|
|
@ -3,7 +3,7 @@ module.exports = {
|
|||
title: 'Buttons',
|
||||
keywords: [`button`, `input`, `reset`, `submit`, `link`, `a`, `label`, `primary`, `secondary`, `tertiary`, `aria`, `small`, `large`, `inverse`],
|
||||
description: `<p>Buttons and button-like input elements have been styled by default to be consistent across browsers. You can also style other elements, such as links or form labels, to look like buttons, using the appropriate class (<code>.button</code>) or the <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role" target="_blank">button</a> role.</p>`,
|
||||
example: `<button class="doc">Button</button><a href="#" class="button doc">Link</a><label class="button doc">Label</label><button disabled>Disabled</button>`,
|
||||
example: `<button class="doc">Button</button><a href="#" class="button doc">Link</a><label class="button doc">Label</label><button disabled class="doc">Disabled</button>`,
|
||||
samples: [`<pre><span class="code-line"><span class="highlight-a"><button></span>Button<span class="highlight-a"></button></span></span>
|
||||
<span class="code-line"><span class="highlight-a"><input</span> <span class="highlight-b">type</span>=<span class="highlight-c">"button"</span> <span class="highlight-b">value</span>=<span class="highlight-c">"Button"</span><span class="highlight-a"> /></span></span>
|
||||
<span class="code-line"><span class="highlight-a"><input</span> <span class="highlight-b">type</span>=<span class="highlight-c">"reset"</span> <span class="highlight-b">value</span>=<span class="highlight-c">"Button"</span><span class="highlight-a"> /></span></span>
|
||||
|
|
@ -19,9 +19,9 @@ module.exports = {
|
|||
`Text color for buttons can be changed by changing the value of the <code>--button-fore-color</code> variable.`,
|
||||
`Background color for buttons can be changed by changing the value of the <code>--button-back-color</code> variable.`,
|
||||
`Border color for buttons can be changed by changing the value of the <code>--button-border-color</code> variable.`,
|
||||
`Universal margin for elements can be changed globally by changing the value of the <code>--universal-margin</code> variable. As a rule of thumb, consider the universal margin to be the distance you want your paragraphs to have from the sides of the screen.`,
|
||||
`Background and border color for focused buttons can be changed by chaning the values of the <code>--button-hover-back-color</code> and <code>--button-hover-border-color</code> variables respectively.`,
|
||||
`Background and border color for focused buttons can be changed by changing the values of the <code>--button-hover-back-color</code> and <code>--button-hover-border-color</code> variables respectively.`,
|
||||
`You can customize the colors of different color variants by changing the values of the related variables in their respective definitions.`,
|
||||
`Universal margin for elements can be changed globally by changing the value of the <code>--universal-margin</code> variable. As a rule of thumb, consider the universal margin to be the distance you want your paragraphs to have from the sides of the screen.`,
|
||||
`Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable.`,
|
||||
`Universal border radius for elements can be changed globally by changing the value of the <code>--universal-border-radius</code> variable.`
|
||||
],
|
||||
|
|
|
|||
|
|
@ -1,28 +1,30 @@
|
|||
module.exports = {
|
||||
id: 'footer',
|
||||
title: 'Footer',
|
||||
keywords: [],
|
||||
description: '',
|
||||
example: '',
|
||||
samples: [],
|
||||
keywords: [`navigation`, `footer`, `sticky`, `link`],
|
||||
description: `<p>The footer element has been minimally styled, aiming to provide you with a clean base to create your web apps' footers.</p>`,
|
||||
example: `<footer> <p class="doc">© 2016-2017 Web Corporation | <a href="#" class="doc">About</a> | <a href="#" class="doc">Terms of use</a></p> </footer>`,
|
||||
samples: [`<pre><span class="code-line"><span class="highlight-a"><footer></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><p></span>Footer text<span class="highlight-a"></p></span></span>
|
||||
<span class="code-line"><span class="highlight-a"></footer></span></span></pre>`],
|
||||
notes: [],
|
||||
customization: [],
|
||||
modifiers: [],
|
||||
customization: [
|
||||
`Text color for the footer can be changed by changing the value of the <code>--footer-fore-color</code> variable.`,
|
||||
`Background color for the footer can be changed by changing the value of the <code>--footer-back-color</code> variable.`,
|
||||
`Border color for the footer can be changed by changing the value of the <code>--footer-border-color</code> variable.`,
|
||||
`Text color for links inside the footer can be changed by changing the value of the <code>--footer-link-color</code> variable.`,
|
||||
`Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable.`
|
||||
],
|
||||
modifiers: [
|
||||
{
|
||||
title : 'Sticky footer',
|
||||
description: `<p>You can make your web app's footer sticky (<code>.sticky</code>), by applying the appropriate modifier.</p>`,
|
||||
example: '',
|
||||
samples: [`<pre><span class="code-line"><span class="highlight-a"><footer</span> <span class="highlight-b">class</span>=<span class="highlight-c">"sticky"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><p></span>Footer text<span class="highlight-a"></p></span></span>
|
||||
<span class="code-line"><span class="highlight-a"></footer></span></span></pre>`]
|
||||
}
|
||||
],
|
||||
dos: [],
|
||||
donts: []
|
||||
}
|
||||
|
||||
/*
|
||||
Modifiers:
|
||||
{
|
||||
title : '',
|
||||
description: '',
|
||||
example: '',
|
||||
samples: []
|
||||
}
|
||||
Dos/Donts:
|
||||
{
|
||||
description: '',
|
||||
sample: ''
|
||||
}
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -1,28 +1,46 @@
|
|||
module.exports = {
|
||||
id: 'header',
|
||||
title: 'Header',
|
||||
keywords: [],
|
||||
description: '',
|
||||
example: '',
|
||||
samples: [],
|
||||
notes: [],
|
||||
customization: [],
|
||||
modifiers: [],
|
||||
keywords: [`navigation`, `header`, `sticky`, `button`, `logo`, `link`],
|
||||
description: `<p>The header element has been minimally styled, allowing you to create modern headers for your web apps. A header can include a logo element (<code>.logo</code>), as well as buttons, links and labels, styled as buttons (<code>.button</code>).</p>`,
|
||||
example: `<header>
|
||||
<a href="#" class="logo" class="doc">Logo</a> <button class="doc">Home</button>
|
||||
<a href="#" class="button doc">News</a>
|
||||
<button class="doc">About</button> <button class="doc">Contact</button>
|
||||
</header>`,
|
||||
samples: [`<pre><span class="code-line"><span class="highlight-a"><header></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><a</span> <span class="highlight-b">href</span>=<span class="highlight-c">"#"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"logo"</span><span class="highlight-a">></span>Logo<span class="highlight-a"></a></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><a</span> <span class="highlight-b">href</span>=<span class="highlight-c">"#"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"button"</span><span class="highlight-a">></span>Home<span class="highlight-a"></a></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><button></span>Download<span class="highlight-a"></button></span></span>
|
||||
<span class="code-line"><span class="highlight-a"></header></span></span></pre>`],
|
||||
notes: [`The header element is partially responsive on smaller screens, displaying a scrollbar indicating that there is more content off-screen.`,
|
||||
`The header element can be a row in a <a href="grid">grid system</a>, allowing you to create responsive headers.`],
|
||||
customization: [
|
||||
`Text color for the header can be changed by changing the value of the <code>--header-fore-color</code> variable.`,
|
||||
`Background color for the header can be changed by changing the value of the <code>--header-back-color</code> variable.`,
|
||||
`Border color for the header can be changed by changing the value of the <code>--header-border-color</code> variable.`,
|
||||
`Background color for focused buttons inside the header can be changed by changing the value of the <code>--header-hover-back-color</code> variable.`
|
||||
],
|
||||
modifiers: [
|
||||
{
|
||||
title : 'Sticky header',
|
||||
description: `<p>You can make your web app's header sticky (<code>.sticky</code>), by applying the appropriate modifier.</p>`,
|
||||
example: '',
|
||||
samples: [`<pre><span class="code-line"><span class="highlight-a"><header</span> <span class="highlight-b">class</span>=<span class="highlight-c">"sticky"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><a</span> <span class="highlight-b">href</span>=<span class="highlight-c">"#"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"logo"</span><span class="highlight-a">></span>Logo<span class="highlight-a"></a></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><a</span> <span class="highlight-b">href</span>=<span class="highlight-c">"#"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"button"</span><span class="highlight-a">></span>Home<span class="highlight-a"></a></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><button></span>Download<span class="highlight-a"></button></span></span>
|
||||
<span class="code-line"><span class="highlight-a"></header></span></span></pre>`]
|
||||
}
|
||||
],
|
||||
dos: [],
|
||||
donts: []
|
||||
donts: [
|
||||
{
|
||||
description: `You should not apply a <code>.button</code> class to the logo of your header, but you must make sure that all other elements inside the header are styled as buttons.`,
|
||||
sample: `<pre><span class="code-line"><span class="highlight-a"><header></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><a</span> <span class="highlight-b">href</span>=<span class="highlight-c">"#"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"button logo"</span><span class="highlight-a">></span>Logo<span class="highlight-a"></a></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><a</span> <span class="highlight-b">href</span>=<span class="highlight-c">"#"</span><span class="highlight-a">></span>Home<span class="highlight-a"></a></span></span>
|
||||
<span class="code-line"><span class="highlight-a"></header></span></span></pre>`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
/*
|
||||
Modifiers:
|
||||
{
|
||||
title : '',
|
||||
description: '',
|
||||
example: '',
|
||||
samples: []
|
||||
}
|
||||
Dos/Donts:
|
||||
{
|
||||
description: '',
|
||||
sample: ''
|
||||
}
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -5,12 +5,12 @@ module.exports = {
|
|||
description: `<p>You can ensure that input elements and labels display together on the same line, by grouping them together (<code>.input-group</code>). You can also group buttons together, using a different grouping class (<code>.button-group</code>).</p>`,
|
||||
example: `<form>
|
||||
<fieldset>
|
||||
<legend>Grouped inputs</legend>
|
||||
<div class="input-group"><label for="gi1-un">Username</label> <input type="email" value="" id="gi1-un" placeholder="Username"></div><br/>
|
||||
<div class="input-group"><label for="gi1-pwd">Password</label> <input type="password" value="" id="gi1-pwd" placeholder="Password"></div>
|
||||
<legend class="doc">Grouped inputs</legend>
|
||||
<div class="input-group"><label for="gi1-un" class="doc">Username</label> <input type="email" value="" id="gi1-un" placeholder="Username" class="doc"></div><br/>
|
||||
<div class="input-group"><label for="gi1-pwd" class="doc">Password</label> <input type="password" value="" id="gi1-pwd" placeholder="Password" class="doc"></div>
|
||||
</fieldset>
|
||||
</form>
|
||||
<div class="button-group"><button>Buttons</button><button>can be</button><button>grouped</button></div>`,
|
||||
<div class="button-group"><button class="doc">Buttons</button><button class="doc">can be</button><button class="doc">grouped</button></div>`,
|
||||
samples: [
|
||||
`<pre><span class="code-line"><span class="highlight-a"><div</span> <span class="highlight-b">class</span>=<span class="highlight-c">"input-group"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><label</span> <span class="highlight-b">for</span>=<span class="highlight-c">"username"</span><span class="highlight-a">></span>Username<span class="highlight-a"></label></span></span>
|
||||
|
|
@ -31,16 +31,16 @@ module.exports = {
|
|||
description: `<p>You can make your input groups fluid (<code>.fluid</code>) or vertical (<code>.vertical</code>), by applying the appropriate modifiers.</p>`,
|
||||
example: `<form>
|
||||
<fieldset>
|
||||
<legend>Fluid input groups</legend>
|
||||
<div class="input-group fluid"><label for="gi2-un">Username</label> <input type="email" value="" id="gi2-un" placeholder="Username"></div>
|
||||
<div class="input-group fluid"><label for="gi2-pwd">Password</label> <input type="password" value="" id="gi2-pwd" placeholder="Password"></div>
|
||||
<legend class="doc">Fluid input groups</legend>
|
||||
<div class="input-group fluid"><label for="gi2-un" class="doc">Username</label> <input type="email" value="" id="gi2-un" placeholder="Username" class="doc"></div>
|
||||
<div class="input-group fluid"><label for="gi2-pwd" class="doc">Password</label> <input type="password" value="" id="gi2-pwd" placeholder="Password" class="doc"></div>
|
||||
</fieldset>
|
||||
</form>
|
||||
<form>
|
||||
<fieldset>
|
||||
<legend>Vertical input groups</legend>
|
||||
<div class="input-group vertical"><label for="gi3-un">Username</label> <input type="email" value="" id="gi3-un" placeholder="Username"></div>
|
||||
<div class="input-group vertical"><label for="gi3-pwd">Password</label> <input type="password" value="" id="gi3-pwd" placeholder="Password"></div>
|
||||
<legend class="doc">Vertical input groups</legend>
|
||||
<div class="input-group vertical"><label for="gi3-un" class="doc">Username</label> <input type="email" value="" id="gi3-un" placeholder="Username" class="doc"></div>
|
||||
<div class="input-group vertical"><label for="gi3-pwd" class="doc">Password</label> <input type="password" value="" id="gi3-pwd" placeholder="Password" class="doc"></div>
|
||||
</fieldset>
|
||||
</form>`,
|
||||
samples: [`<pre><span class="code-line"><span class="highlight-a"><div</span> <span class="highlight-b">class</span>=<span class="highlight-c">"input-group fluid"</span><span class="highlight-a">></span></span>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,33 @@
|
|||
module.exports = {
|
||||
id: 'navigation-bar',
|
||||
title: 'Navigation bar',
|
||||
keywords: [],
|
||||
description: '',
|
||||
example: '',
|
||||
samples: [],
|
||||
notes: [],
|
||||
customization: [],
|
||||
keywords: [`navigation`, `bar`, `nav`, `link`],
|
||||
description: `<p>The navigation bar element has been minimally styled, allowing you to create simple vertical navigation menus for your web apps. Apart from styling from links, custom classes (<code>/sublink-1</code> and <code>/sublink-2</code>) are provided for creating navigation trees.</p>`,
|
||||
example: `<nav>
|
||||
<a href="#" class="doc">Home</a> <span class="doc">News</span>
|
||||
<a href="#" class="sublink-1 doc">New Courses</a> <a href="#" class="sublink-1 doc">Certifications</a>
|
||||
<span class="sublink-1 doc">Events</span> <a href="#" class="sublink-2 doc">Course Showcase - 12th, Dec</a>
|
||||
<a href="#" class="sublink-2 doc">Staff AMA - 16th, Dec</a> <a href="#" class="sublink-1 doc">Policy Update</a>
|
||||
<a href="#" class="doc">About</a> <a href="#" class="doc">Contact</a>
|
||||
</nav>`,
|
||||
samples: [`<pre><span class="code-line"><span class="highlight-a"><nav></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><a</span> <span class="highlight-b">href</span>=<span class="highlight-c">"#"</span><span class="highlight-a">></span>Category 1<span class="highlight-a"></a></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><span></span>Category 2<span class="highlight-a"></span></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><a</span> <span class="highlight-b">href</span>=<span class="highlight-c">"#"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"sublink-1"</span><span class="highlight-a">></span>Item 2.1<span class="highlight-a"></a></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><span</span> <span class="highlight-b">class</span>=<span class="highlight-c">"sublink-1"</span><span class="highlight-a">></span>Category 2.2<span class="highlight-a"></span></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><a</span> <span class="highlight-b">href</span>=<span class="highlight-c">"#"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"sublink-2"</span><span class="highlight-a">></span>Item 2.2.1<span class="highlight-a"></a></span></span>
|
||||
<span class="code-line"><span class="highlight-a"></nav></span></span></pre>`],
|
||||
notes: [`It is recommended that you combine the navigation bar element with the <a href="#grid">grid system</a> to create responsive navigation menus for your web apps.`],
|
||||
customization: [
|
||||
`Text color for navigation bars can be changed by changing the value of the <code>--nav-fore-color</code> variable.`,
|
||||
`Background color for navigation bars can be changed by changing the value of the <code>--nav-back-color</code> variable.`,
|
||||
`Border color for navigation bars can be changed by changing the value of the <code>--nav-border-color</code> variable.`,
|
||||
`Background color for focused buttons inside navigation bars can be changed by changing the value of the <code>--nav-hover-back-color</code> variable.`,
|
||||
`Text color for links inside navigation bars can be changed by changing the value of the <code>--nav-link-color</code> variable.`,
|
||||
`Universal margin for elements can be changed globally by changing the value of the <code>--universal-margin</code> variable. As a rule of thumb, consider the universal margin to be the distance you want your paragraphs to have from the sides of the screen.`,
|
||||
`Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable.`,
|
||||
`Universal border radius for elements can be changed globally by changing the value of the <code>--universal-border-radius</code> variable.`
|
||||
],
|
||||
modifiers: [],
|
||||
dos: [],
|
||||
donts: []
|
||||
|
|
|
|||
|
|
@ -178,3 +178,4 @@
|
|||
- Altered the `dark` section colors, didn't really like them.
|
||||
- Cleaned up certain parts of the docs just a little bit.
|
||||
- Documented `button` elements and input grouping.
|
||||
- Documented `header`, `footer` and `nav`.
|
||||
|
|
|
|||
|
|
@ -426,7 +426,7 @@
|
|||
</div><br/><div id="buttons" class="card fluid">
|
||||
<h2 class="section double-padded">Buttons</h2>
|
||||
<div class="section"><p>Buttons and button-like input elements have been styled by default to be consistent across browsers. You can also style other elements, such as links or form labels, to look like buttons, using the appropriate class (<code>.button</code>) or the <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role" target="_blank">button</a> role.</p></div>
|
||||
<div class="section"><h3>Example</h3><button class="doc">Button</button><a href="#" class="button doc">Link</a><label class="button doc">Label</label><button disabled>Disabled</button></div>
|
||||
<div class="section"><h3>Example</h3><button class="doc">Button</button><a href="#" class="button doc">Link</a><label class="button doc">Label</label><button disabled class="doc">Disabled</button></div>
|
||||
<div class="section double-padded"><h3>Sample code</h3><pre><span class="code-line"><span class="highlight-a"><button></span>Button<span class="highlight-a"></button></span></span>
|
||||
<span class="code-line"><span class="highlight-a"><input</span> <span class="highlight-b">type</span>=<span class="highlight-c">"button"</span> <span class="highlight-b">value</span>=<span class="highlight-c">"Button"</span><span class="highlight-a"> /></span></span>
|
||||
<span class="code-line"><span class="highlight-a"><input</span> <span class="highlight-b">type</span>=<span class="highlight-c">"reset"</span> <span class="highlight-b">value</span>=<span class="highlight-c">"Button"</span><span class="highlight-a"> /></span></span>
|
||||
|
|
@ -445,18 +445,18 @@
|
|||
<span class="code-line"><span class="highlight-a"><label</span> <span class="highlight-b">for</span>=<span class="highlight-c">"file-input"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"button"</span><span class="highlight-a">></span>Upload file<span class="highlight-a"></label></span></span></pre></div><div class="col-sm-12 col-md-6"><p><mark class="do">Do:</mark> File upload inputs are not styled by default, due to inconsistencies in how browsers handle them. If you want them to look like other buttons, you can hide them and use a linked label.</p></div></div><div class="row dodos"><div class="col-sm-12 col-md-6"><pre><span class="code-line"><span class="highlight-a"><button</span> <span class="highlight-b">class</span>=<span class="highlight-c">"primary inverse"</span><span class="highlight-a">></span>Button<span class="highlight-a"></button></span></span>
|
||||
<span class="code-line"><span class="highlight-a"><button</span> <span class="highlight-b">class</span>=<span class="highlight-c">"small large"</span><span class="highlight-a">></span>Button<span class="highlight-a"></button></span></span></pre></div><div class="col-sm-12 col-md-6"><p><mark class="dont">Don't:</mark> Avoid applying multiple modifiers of the same type on the same button.</p></div></div></div>
|
||||
<div class="section double-padded"><h3>Notes</h3><ul><li>It is recommended to use the button role instead of the provided class, if you want your custom buttons to be fully accessible.</li></ul></div>
|
||||
<div class="section double-padded"><h3>Customization</h3><ul><li>Text color for buttons can be changed by changing the value of the <code>--button-fore-color</code> variable.</li><li>Background color for buttons can be changed by changing the value of the <code>--button-back-color</code> variable.</li><li>Border color for buttons can be changed by changing the value of the <code>--button-border-color</code> variable.</li><li>Universal margin for elements can be changed globally by changing the value of the <code>--universal-margin</code> variable. As a rule of thumb, consider the universal margin to be the distance you want your paragraphs to have from the sides of the screen.</li><li>Background and border color for focused buttons can be changed by chaning the values of the <code>--button-hover-back-color</code> and <code>--button-hover-border-color</code> variables respectively.</li><li>You can customize the colors of different color variants by changing the values of the related variables in their respective definitions.</li><li>Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable.</li><li>Universal border radius for elements can be changed globally by changing the value of the <code>--universal-border-radius</code> variable.</li></ul></div>
|
||||
<div class="section double-padded"><h3>Customization</h3><ul><li>Text color for buttons can be changed by changing the value of the <code>--button-fore-color</code> variable.</li><li>Background color for buttons can be changed by changing the value of the <code>--button-back-color</code> variable.</li><li>Border color for buttons can be changed by changing the value of the <code>--button-border-color</code> variable.</li><li>Background and border color for focused buttons can be changed by changing the values of the <code>--button-hover-back-color</code> and <code>--button-hover-border-color</code> variables respectively.</li><li>You can customize the colors of different color variants by changing the values of the related variables in their respective definitions.</li><li>Universal margin for elements can be changed globally by changing the value of the <code>--universal-margin</code> variable. As a rule of thumb, consider the universal margin to be the distance you want your paragraphs to have from the sides of the screen.</li><li>Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable.</li><li>Universal border radius for elements can be changed globally by changing the value of the <code>--universal-border-radius</code> variable.</li></ul></div>
|
||||
</div><br/><div id="input-grouping" class="card fluid">
|
||||
<h2 class="section double-padded">Input grouping</h2>
|
||||
<div class="section"><p>You can ensure that input elements and labels display together on the same line, by grouping them together (<code>.input-group</code>). You can also group buttons together, using a different grouping class (<code>.button-group</code>).</p></div>
|
||||
<div class="section"><h3>Example</h3><form>
|
||||
<fieldset>
|
||||
<legend>Grouped inputs</legend>
|
||||
<div class="input-group"><label for="gi1-un">Username</label> <input type="email" value="" id="gi1-un" placeholder="Username"></div><br/>
|
||||
<div class="input-group"><label for="gi1-pwd">Password</label> <input type="password" value="" id="gi1-pwd" placeholder="Password"></div>
|
||||
<legend class="doc">Grouped inputs</legend>
|
||||
<div class="input-group"><label for="gi1-un" class="doc">Username</label> <input type="email" value="" id="gi1-un" placeholder="Username" class="doc"></div><br/>
|
||||
<div class="input-group"><label for="gi1-pwd" class="doc">Password</label> <input type="password" value="" id="gi1-pwd" placeholder="Password" class="doc"></div>
|
||||
</fieldset>
|
||||
</form>
|
||||
<div class="button-group"><button>Buttons</button><button>can be</button><button>grouped</button></div></div>
|
||||
<div class="button-group"><button class="doc">Buttons</button><button class="doc">can be</button><button class="doc">grouped</button></div></div>
|
||||
<div class="section double-padded"><h3>Sample code</h3><pre><span class="code-line"><span class="highlight-a"><div</span> <span class="highlight-b">class</span>=<span class="highlight-c">"input-group"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><label</span> <span class="highlight-b">for</span>=<span class="highlight-c">"username"</span><span class="highlight-a">></span>Username<span class="highlight-a"></label></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><input</span> <span class="highlight-b">type</span>=<span class="highlight-c">"text"</span> <span class="highlight-b">id</span>=<span class="highlight-c">"Username"</span> <span class="highlight-b">placeholder</span>=<span class="highlight-c">"Username"</span><span class="highlight-a">/></span></span>
|
||||
|
|
@ -468,16 +468,16 @@
|
|||
<div class="section double-padded"><h3>Modifiers</h3>
|
||||
<h4>Fluid & vertical grouping</h4><p>You can make your input groups fluid (<code>.fluid</code>) or vertical (<code>.vertical</code>), by applying the appropriate modifiers.</p><h5>Example</h5><form>
|
||||
<fieldset>
|
||||
<legend>Fluid input groups</legend>
|
||||
<div class="input-group fluid"><label for="gi2-un">Username</label> <input type="email" value="" id="gi2-un" placeholder="Username"></div>
|
||||
<div class="input-group fluid"><label for="gi2-pwd">Password</label> <input type="password" value="" id="gi2-pwd" placeholder="Password"></div>
|
||||
<legend class="doc">Fluid input groups</legend>
|
||||
<div class="input-group fluid"><label for="gi2-un" class="doc">Username</label> <input type="email" value="" id="gi2-un" placeholder="Username" class="doc"></div>
|
||||
<div class="input-group fluid"><label for="gi2-pwd" class="doc">Password</label> <input type="password" value="" id="gi2-pwd" placeholder="Password" class="doc"></div>
|
||||
</fieldset>
|
||||
</form>
|
||||
<form>
|
||||
<fieldset>
|
||||
<legend>Vertical input groups</legend>
|
||||
<div class="input-group vertical"><label for="gi3-un">Username</label> <input type="email" value="" id="gi3-un" placeholder="Username"></div>
|
||||
<div class="input-group vertical"><label for="gi3-pwd">Password</label> <input type="password" value="" id="gi3-pwd" placeholder="Password"></div>
|
||||
<legend class="doc">Vertical input groups</legend>
|
||||
<div class="input-group vertical"><label for="gi3-un" class="doc">Username</label> <input type="email" value="" id="gi3-un" placeholder="Username" class="doc"></div>
|
||||
<div class="input-group vertical"><label for="gi3-pwd" class="doc">Password</label> <input type="password" value="" id="gi3-pwd" placeholder="Password" class="doc"></div>
|
||||
</fieldset>
|
||||
</form><h5>Sample code</h5><pre><span class="code-line"><span class="highlight-a"><div</span> <span class="highlight-b">class</span>=<span class="highlight-c">"input-group fluid"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><label</span> <span class="highlight-b">for</span>=<span class="highlight-c">"username"</span><span class="highlight-a">></span>Username<span class="highlight-a"></label></span></span>
|
||||
|
|
@ -497,31 +497,64 @@
|
|||
|
||||
</div><br/><div id="header" class="card fluid">
|
||||
<h2 class="section double-padded">Header</h2>
|
||||
<div class="section"></div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="section"><p>The header element has been minimally styled, allowing you to create modern headers for your web apps. A header can include a logo element (<code>.logo</code>), as well as buttons, links and labels, styled as buttons (<code>.button</code>).</p></div>
|
||||
<div class="section"><h3>Example</h3><header>
|
||||
<a href="#" class="logo" class="doc">Logo</a> <button class="doc">Home</button>
|
||||
<a href="#" class="button doc">News</a>
|
||||
<button class="doc">About</button> <button class="doc">Contact</button>
|
||||
</header></div>
|
||||
<div class="section double-padded"><h3>Sample code</h3><pre><span class="code-line"><span class="highlight-a"><header></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><a</span> <span class="highlight-b">href</span>=<span class="highlight-c">"#"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"logo"</span><span class="highlight-a">></span>Logo<span class="highlight-a"></a></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><a</span> <span class="highlight-b">href</span>=<span class="highlight-c">"#"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"button"</span><span class="highlight-a">></span>Home<span class="highlight-a"></a></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><button></span>Download<span class="highlight-a"></button></span></span>
|
||||
<span class="code-line"><span class="highlight-a"></header></span></span></pre></div>
|
||||
<div class="section double-padded"><h3>Modifiers</h3>
|
||||
<h4>Sticky header</h4><p>You can make your web app's header sticky (<code>.sticky</code>), by applying the appropriate modifier.</p><h5>Sample code</h5><pre><span class="code-line"><span class="highlight-a"><header</span> <span class="highlight-b">class</span>=<span class="highlight-c">"sticky"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><a</span> <span class="highlight-b">href</span>=<span class="highlight-c">"#"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"logo"</span><span class="highlight-a">></span>Logo<span class="highlight-a"></a></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><a</span> <span class="highlight-b">href</span>=<span class="highlight-c">"#"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"button"</span><span class="highlight-a">></span>Home<span class="highlight-a"></a></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><button></span>Download<span class="highlight-a"></button></span></span>
|
||||
<span class="code-line"><span class="highlight-a"></header></span></span></pre></div>
|
||||
<div class="section double-padded"><h3>Best practices</h3><div class="row dodos"><div class="col-sm-12 col-md-6"><pre><span class="code-line"><span class="highlight-a"><header></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><a</span> <span class="highlight-b">href</span>=<span class="highlight-c">"#"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"button logo"</span><span class="highlight-a">></span>Logo<span class="highlight-a"></a></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><a</span> <span class="highlight-b">href</span>=<span class="highlight-c">"#"</span><span class="highlight-a">></span>Home<span class="highlight-a"></a></span></span>
|
||||
<span class="code-line"><span class="highlight-a"></header></span></span></pre></div><div class="col-sm-12 col-md-6"><p><mark class="dont">Don't:</mark> You should not apply a <code>.button</code> class to the logo of your header, but you must make sure that all other elements inside the header are styled as buttons.</p></div></div></div>
|
||||
<div class="section double-padded"><h3>Notes</h3><ul><li>The header element is partially responsive on smaller screens, displaying a scrollbar indicating that there is more content off-screen.</li><li>The header element can be a row in a <a href="grid">grid system</a>, allowing you to create responsive headers.</li></ul></div>
|
||||
<div class="section double-padded"><h3>Customization</h3><ul><li>Text color for the header can be changed by changing the value of the <code>--header-fore-color</code> variable.</li><li>Background color for the header can be changed by changing the value of the <code>--header-back-color</code> variable.</li><li>Border color for the header can be changed by changing the value of the <code>--header-border-color</code> variable.</li><li>Background color for focused buttons inside the header can be changed by changing the value of the <code>--header-hover-back-color</code> variable.</li></ul></div>
|
||||
</div><br/><div id="navigation-bar" class="card fluid">
|
||||
<h2 class="section double-padded">Navigation bar</h2>
|
||||
<div class="section"></div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="section"><p>The navigation bar element has been minimally styled, allowing you to create simple vertical navigation menus for your web apps. Apart from styling from links, custom classes (<code>/sublink-1</code> and <code>/sublink-2</code>) are provided for creating navigation trees.</p></div>
|
||||
<div class="section"><h3>Example</h3><nav>
|
||||
<a href="#" class="doc">Home</a> <span class="doc">News</span>
|
||||
<a href="#" class="sublink-1 doc">New Courses</a> <a href="#" class="sublink-1 doc">Certifications</a>
|
||||
<span class="sublink-1 doc">Events</span> <a href="#" class="sublink-2 doc">Course Showcase - 12th, Dec</a>
|
||||
<a href="#" class="sublink-2 doc">Staff AMA - 16th, Dec</a> <a href="#" class="sublink-1 doc">Policy Update</a>
|
||||
<a href="#" class="doc">About</a> <a href="#" class="doc">Contact</a>
|
||||
</nav></div>
|
||||
<div class="section double-padded"><h3>Sample code</h3><pre><span class="code-line"><span class="highlight-a"><nav></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><a</span> <span class="highlight-b">href</span>=<span class="highlight-c">"#"</span><span class="highlight-a">></span>Category 1<span class="highlight-a"></a></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><span></span>Category 2<span class="highlight-a"></span></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><a</span> <span class="highlight-b">href</span>=<span class="highlight-c">"#"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"sublink-1"</span><span class="highlight-a">></span>Item 2.1<span class="highlight-a"></a></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><span</span> <span class="highlight-b">class</span>=<span class="highlight-c">"sublink-1"</span><span class="highlight-a">></span>Category 2.2<span class="highlight-a"></span></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><a</span> <span class="highlight-b">href</span>=<span class="highlight-c">"#"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"sublink-2"</span><span class="highlight-a">></span>Item 2.2.1<span class="highlight-a"></a></span></span>
|
||||
<span class="code-line"><span class="highlight-a"></nav></span></span></pre></div>
|
||||
|
||||
|
||||
<div class="section double-padded"><h3>Notes</h3><ul><li>It is recommended that you combine the navigation bar element with the <a href="#grid">grid system</a> to create responsive navigation menus for your web apps.</li></ul></div>
|
||||
<div class="section double-padded"><h3>Customization</h3><ul><li>Text color for navigation bars can be changed by changing the value of the <code>--nav-fore-color</code> variable.</li><li>Background color for navigation bars can be changed by changing the value of the <code>--nav-back-color</code> variable.</li><li>Border color for navigation bars can be changed by changing the value of the <code>--nav-border-color</code> variable.</li><li>Background color for focused buttons inside navigation bars can be changed by changing the value of the <code>--nav-hover-back-color</code> variable.</li><li>Text color for links inside navigation bars can be changed by changing the value of the <code>--nav-link-color</code> variable.</li><li>Universal margin for elements can be changed globally by changing the value of the <code>--universal-margin</code> variable. As a rule of thumb, consider the universal margin to be the distance you want your paragraphs to have from the sides of the screen.</li><li>Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable.</li><li>Universal border radius for elements can be changed globally by changing the value of the <code>--universal-border-radius</code> variable.</li></ul></div>
|
||||
</div><br/><div id="footer" class="card fluid">
|
||||
<h2 class="section double-padded">Footer</h2>
|
||||
<div class="section"></div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="section"><p>The footer element has been minimally styled, aiming to provide you with a clean base to create your web apps' footers.</p></div>
|
||||
<div class="section"><h3>Example</h3><footer> <p class="doc">© 2016-2017 Web Corporation | <a href="#" class="doc">About</a> | <a href="#" class="doc">Terms of use</a></p> </footer></div>
|
||||
<div class="section double-padded"><h3>Sample code</h3><pre><span class="code-line"><span class="highlight-a"><footer></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><p></span>Footer text<span class="highlight-a"></p></span></span>
|
||||
<span class="code-line"><span class="highlight-a"></footer></span></span></pre></div>
|
||||
<div class="section double-padded"><h3>Modifiers</h3>
|
||||
<h4>Sticky footer</h4><p>You can make your web app's footer sticky (<code>.sticky</code>), by applying the appropriate modifier.</p><h5>Sample code</h5><pre><span class="code-line"><span class="highlight-a"><footer</span> <span class="highlight-b">class</span>=<span class="highlight-c">"sticky"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><p></span>Footer text<span class="highlight-a"></p></span></span>
|
||||
<span class="code-line"><span class="highlight-a"></footer></span></span></pre></div>
|
||||
|
||||
|
||||
<div class="section double-padded"><h3>Customization</h3><ul><li>Text color for the footer can be changed by changing the value of the <code>--footer-fore-color</code> variable.</li><li>Background color for the footer can be changed by changing the value of the <code>--footer-back-color</code> variable.</li><li>Border color for the footer can be changed by changing the value of the <code>--footer-border-color</code> variable.</li><li>Text color for links inside the footer can be changed by changing the value of the <code>--footer-link-color</code> variable.</li><li>Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable.</li></ul></div>
|
||||
</div><br/><div id="drawer" class="card fluid">
|
||||
<h2 class="section double-padded">Menu drawer</h2>
|
||||
<div class="section"></div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue