mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-08-13 01:13:59 +02:00
Documented navigation
Still missing the drawer component.
This commit is contained in:
Angelos Chalaris
@@ -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: []
|
||||
|
||||
Reference in New Issue
Block a user