mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-08-16 19:03:58 +02:00
Buttons and input groups documented
This commit is contained in:
Angelos Chalaris
58
docs/doc-fragments/buttons.js
Normal file
58
docs/doc-fragments/buttons.js
Normal file
@@ -0,0 +1,58 @@
|
||||
module.exports = {
|
||||
id: 'buttons',
|
||||
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>`,
|
||||
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>
|
||||
<span class="code-line"><span class="highlight-a"><input</span> <span class="highlight-b">type</span>=<span class="highlight-c">"submit"</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"><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>Link<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">role</span>=<span class="highlight-c">"button"</span><span class="highlight-a">></span>Link<span class="highlight-a"></a></span></span>
|
||||
<span class="code-line"><span class="highlight-a"><label</span> <span class="highlight-b">class</span>=<span class="highlight-c">"button"</span><span class="highlight-a">></span>Label<span class="highlight-a"></label></span></span>
|
||||
<span class="code-line"><span class="highlight-a"><label</span> <span class="highlight-b">role</span>=<span class="highlight-c">"button"</span><span class="highlight-a">></span>Label<span class="highlight-a"></label></span></span></pre>`],
|
||||
notes: [
|
||||
`It is recommended to use the button role instead of the provided class, if you want your custom buttons to be fully accessible.`
|
||||
],
|
||||
customization: [
|
||||
`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.`,
|
||||
`You can customize the colors of different color variants by changing the values of the related variables in their respective definitions.`,
|
||||
`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: [
|
||||
{
|
||||
title : 'Color variants',
|
||||
description: '<p>To make your buttons stand out, you can give them a primary (<code>.primary</code>), secondary (<code>.secondary</code>), tertiary (<code>.tertiary</code>) or inversed (<code>.inverse</code>) color palette.</p>',
|
||||
example: `<button class="primary doc">Primary</button><button class="secondary doc">Secondary</button><button class="tertiary doc">Tertiary</button><button class="inverse doc">Inverse</button>`,
|
||||
samples: [`<pre><span class="code-line"><span class="highlight-a"><button</span> <span class="highlight-b">class</span>=<span class="highlight-c">"primary"</span><span class="highlight-a">></span>Primary<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">"secondary"</span><span class="highlight-a">></span>Secondary<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">"tertiary"</span><span class="highlight-a">></span>Tertiary<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">"inverse"</span><span class="highlight-a">></span>Inverse<span class="highlight-a"></button></span></span></pre>`]
|
||||
},
|
||||
{
|
||||
title : 'Size variants',
|
||||
description: `<p>You can make buttons smaller (<code>.small</code>) or larger (<code>.large</code>), by applying the appropriate modifier.</p>`,
|
||||
example: `<button class="small doc">Small</button><button class="large doc">Large</button>`,
|
||||
samples: [`<pre><span class="code-line"><span class="highlight-a"><button</span> <span class="highlight-b">class</span>=<span class="highlight-c">"small"</span><span class="highlight-a">></span>Small<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">"large"</span><span class="highlight-a">></span>Large<span class="highlight-a"></button></span></span></pre>`]
|
||||
}
|
||||
],
|
||||
dos: [{
|
||||
description: `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.`,
|
||||
sample: `<pre><span class="code-line"><span class="highlight-a"><input</span> <span class="highlight-b">type</span>=<span class="highlight-c">"file"</span> <span class="highlight-b">id</span>=<span class="highlight-c">"file-input"</span> <span class="highlight-b">style</span>=<span class="highlight-c">"display:none"</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">"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>`
|
||||
}],
|
||||
donts: [
|
||||
{
|
||||
description: `Avoid applying multiple modifiers of the same type on the same button.`,
|
||||
sample: `<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>`
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -21,6 +21,7 @@ module.exports = {
|
||||
`Text color for cards and card sections can be changed by changing the value of the <code>--card-fore-color</code> variable.`,
|
||||
`Background color for cards and card sections can be changed by changing the value of the <code>--card-back-color</code> variable.`,
|
||||
`Border color for cards and card sections can be changed by changing the value of the <code>--card-border-color</code> variable.`,
|
||||
`You can customize the colors of different color variants by changing the values of the related variables in their respective definitions.`,
|
||||
`Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable.`
|
||||
],
|
||||
modifiers: [
|
||||
|
||||
@@ -17,6 +17,7 @@ module.exports = {
|
||||
`Text color for cards can be changed by changing the value of the <code>--card-fore-color</code> variable.`,
|
||||
`Background color for cards can be changed by changing the value of the <code>--card-back-color</code> variable.`,
|
||||
`Border color for cards can be changed by changing the value of the <code>--card-border-color</code> variable.`,
|
||||
`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 border radius for elements can be changed globally by changing the value of the <code>--universal-border-radius</code> variable.`
|
||||
],
|
||||
|
||||
@@ -8,10 +8,17 @@ var grid = require('./grid');
|
||||
var cards = require('./cards');
|
||||
var cardSections = require('./cardSections');
|
||||
var formsAndInput = require('./formsAndInput');
|
||||
var buttons = require('./buttons');
|
||||
var inputGrouping = require('./inputGrouping');
|
||||
var header = require('./header');
|
||||
var navigationBar = require('./navigationBar');
|
||||
var footer = require('./footer');
|
||||
var drawer = require('./drawer');
|
||||
|
||||
module.exports = [
|
||||
gettingStarted,
|
||||
commonTextualElements, headings, images, lists, codeAndQuotations,
|
||||
grid, cards, cardSections,
|
||||
formsAndInput
|
||||
formsAndInput, buttons, inputGrouping,
|
||||
header, navigationBar, footer, drawer
|
||||
]
|
||||
|
||||
28
docs/doc-fragments/drawer.js
Normal file
28
docs/doc-fragments/drawer.js
Normal file
@@ -0,0 +1,28 @@
|
||||
module.exports = {
|
||||
id: 'drawer',
|
||||
title: 'Menu drawer',
|
||||
keywords: [],
|
||||
description: '',
|
||||
example: '',
|
||||
samples: [],
|
||||
notes: [],
|
||||
customization: [],
|
||||
modifiers: [],
|
||||
dos: [],
|
||||
donts: []
|
||||
}
|
||||
|
||||
/*
|
||||
Modifiers:
|
||||
{
|
||||
title : '',
|
||||
description: '',
|
||||
example: '',
|
||||
samples: []
|
||||
}
|
||||
Dos/Donts:
|
||||
{
|
||||
description: '',
|
||||
sample: ''
|
||||
}
|
||||
*/
|
||||
28
docs/doc-fragments/footer.js
Normal file
28
docs/doc-fragments/footer.js
Normal file
@@ -0,0 +1,28 @@
|
||||
module.exports = {
|
||||
id: 'footer',
|
||||
title: 'Footer',
|
||||
keywords: [],
|
||||
description: '',
|
||||
example: '',
|
||||
samples: [],
|
||||
notes: [],
|
||||
customization: [],
|
||||
modifiers: [],
|
||||
dos: [],
|
||||
donts: []
|
||||
}
|
||||
|
||||
/*
|
||||
Modifiers:
|
||||
{
|
||||
title : '',
|
||||
description: '',
|
||||
example: '',
|
||||
samples: []
|
||||
}
|
||||
Dos/Donts:
|
||||
{
|
||||
description: '',
|
||||
sample: ''
|
||||
}
|
||||
*/
|
||||
28
docs/doc-fragments/header.js
Normal file
28
docs/doc-fragments/header.js
Normal file
@@ -0,0 +1,28 @@
|
||||
module.exports = {
|
||||
id: 'header',
|
||||
title: 'Header',
|
||||
keywords: [],
|
||||
description: '',
|
||||
example: '',
|
||||
samples: [],
|
||||
notes: [],
|
||||
customization: [],
|
||||
modifiers: [],
|
||||
dos: [],
|
||||
donts: []
|
||||
}
|
||||
|
||||
/*
|
||||
Modifiers:
|
||||
{
|
||||
title : '',
|
||||
description: '',
|
||||
example: '',
|
||||
samples: []
|
||||
}
|
||||
Dos/Donts:
|
||||
{
|
||||
description: '',
|
||||
sample: ''
|
||||
}
|
||||
*/
|
||||
68
docs/doc-fragments/inputGrouping.js
Normal file
68
docs/doc-fragments/inputGrouping.js
Normal file
@@ -0,0 +1,68 @@
|
||||
module.exports = {
|
||||
id: 'input-grouping',
|
||||
title: 'Input grouping',
|
||||
keywords: [`input group`, `input-group`, `vertical`, `fluid`, `input`, `button`, `button group`, `button-group`],
|
||||
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>
|
||||
</fieldset>
|
||||
</form>
|
||||
<div class="button-group"><button>Buttons</button><button>can be</button><button>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>
|
||||
<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>
|
||||
<span class="code-line"><span class="highlight-a"></div></span></span></pre>`,
|
||||
`<pre><span class="code-line"><span class="highlight-a"><div</span> <span class="highlight-b">class</span>=<span class="highlight-c">"button-group"</span><span class="highlight-a">></span></span>
|
||||
<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"><button></span>Button<span class="highlight-a"></button></span></span>
|
||||
<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"></div></span></span></pre>`
|
||||
],
|
||||
notes: [`It is highly recommended that you do not place checkboxes or radio buttons inside fluid or vertical input groups.`,
|
||||
`Button groups will display horizontally on medium and large screens, but collapse into a vertical view on small screens.`],
|
||||
customization: [],
|
||||
modifiers: [
|
||||
{
|
||||
title : `Fluid & vertical grouping`,
|
||||
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>
|
||||
</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>
|
||||
</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>
|
||||
<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>
|
||||
<span class="code-line"><span class="highlight-a"></div></span></span>
|
||||
<span class="code-line"><span class="highlight-a"><div</span> <span class="highlight-b">class</span>=<span class="highlight-c">"input-group vertical"</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>
|
||||
<span class="code-line"><span class="highlight-a"></div></span></span></pre>`]
|
||||
}
|
||||
],
|
||||
dos: [],
|
||||
donts: [
|
||||
{
|
||||
description: `Avoid combining input groups with the <a href="#grid">grid system</a>, as there might be overlapping styles.`,
|
||||
sample: `<pre><span class="code-line"><span class="highlight-a"><div</span> <span class="highlight-b">class</span>=<span class="highlight-c">"input-group row"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><div</span> <span class="highlight-b">class</span>=<span class="highlight-c">"col-sm"</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>
|
||||
<span class="code-line"> <span class="highlight-a"></div></span></span>
|
||||
<span class="code-line"><span class="highlight-a"></div></span></span></pre>`
|
||||
}
|
||||
]
|
||||
}
|
||||
28
docs/doc-fragments/navigationBar.js
Normal file
28
docs/doc-fragments/navigationBar.js
Normal file
@@ -0,0 +1,28 @@
|
||||
module.exports = {
|
||||
id: 'navigation-bar',
|
||||
title: 'Navigation bar',
|
||||
keywords: [],
|
||||
description: '',
|
||||
example: '',
|
||||
samples: [],
|
||||
notes: [],
|
||||
customization: [],
|
||||
modifiers: [],
|
||||
dos: [],
|
||||
donts: []
|
||||
}
|
||||
|
||||
/*
|
||||
Modifiers:
|
||||
{
|
||||
title : '',
|
||||
description: '',
|
||||
example: '',
|
||||
samples: []
|
||||
}
|
||||
Dos/Donts:
|
||||
{
|
||||
description: '',
|
||||
sample: ''
|
||||
}
|
||||
*/
|
||||
Reference in New Issue
Block a user