diff --git a/docs/doc-fragments/buttons.js b/docs/doc-fragments/buttons.js new file mode 100644 index 0000000..296acaa --- /dev/null +++ b/docs/doc-fragments/buttons.js @@ -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: `

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 (.button) or the button role.

`, + example: `Link`, + samples: [`
<button>Button</button>
+<input type="button" value="Button" />
+<input type="reset" value="Button" />
+<input type="submit" value="Button" />
+<a href="#" class="button">Link</a>
+<a href="#" role="button">Link</a>
+<label class="button">Label</label>
+<label role="button">Label</label>
`], + 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 --button-fore-color variable.`, + `Background color for buttons can be changed by changing the value of the --button-back-color variable.`, + `Border color for buttons can be changed by changing the value of the --button-border-color variable.`, + `Universal margin for elements can be changed globally by changing the value of the --universal-margin 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 --button-hover-back-color and --button-hover-border-color 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 --universal-padding variable.`, + `Universal border radius for elements can be changed globally by changing the value of the --universal-border-radius variable.` + ], + modifiers: [ + { + title : 'Color variants', + description: '

To make your buttons stand out, you can give them a primary (.primary), secondary (.secondary), tertiary (.tertiary) or inversed (.inverse) color palette.

', + example: ``, + samples: [`
<button class="primary">Primary</button>
+<button class="secondary">Secondary</button>
+<button class="tertiary">Tertiary</button>
+<button class="inverse">Inverse</button>
`] + }, + { + title : 'Size variants', + description: `

You can make buttons smaller (.small) or larger (.large), by applying the appropriate modifier.

`, + example: ``, + samples: [`
<button class="small">Small</button>
+<button class="large">Large</button>
`] + } + ], + 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: `
<input type="file" id="file-input" style="display:none" />
+<label for="file-input" class="button">Upload file</label>
` + }], + donts: [ + { + description: `Avoid applying multiple modifiers of the same type on the same button.`, + sample: `
<button class="primary inverse">Button</button>
+<button class="small large">Button</button>
` + } + ] +} diff --git a/docs/doc-fragments/cardSections.js b/docs/doc-fragments/cardSections.js index 499d7a8..aa27e37 100644 --- a/docs/doc-fragments/cardSections.js +++ b/docs/doc-fragments/cardSections.js @@ -21,6 +21,7 @@ module.exports = { `Text color for cards and card sections can be changed by changing the value of the --card-fore-color variable.`, `Background color for cards and card sections can be changed by changing the value of the --card-back-color variable.`, `Border color for cards and card sections can be changed by changing the value of the --card-border-color 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 --universal-padding variable.` ], modifiers: [ diff --git a/docs/doc-fragments/cards.js b/docs/doc-fragments/cards.js index 7e343fc..dfb26c7 100644 --- a/docs/doc-fragments/cards.js +++ b/docs/doc-fragments/cards.js @@ -17,6 +17,7 @@ module.exports = { `Text color for cards can be changed by changing the value of the --card-fore-color variable.`, `Background color for cards can be changed by changing the value of the --card-back-color variable.`, `Border color for cards can be changed by changing the value of the --card-border-color 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 --universal-margin 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 --universal-border-radius variable.` ], diff --git a/docs/doc-fragments/docFragments.js b/docs/doc-fragments/docFragments.js index a5e934e..bdf27ce 100644 --- a/docs/doc-fragments/docFragments.js +++ b/docs/doc-fragments/docFragments.js @@ -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 ] diff --git a/docs/doc-fragments/drawer.js b/docs/doc-fragments/drawer.js new file mode 100644 index 0000000..4552809 --- /dev/null +++ b/docs/doc-fragments/drawer.js @@ -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: '' + } +*/ diff --git a/docs/doc-fragments/footer.js b/docs/doc-fragments/footer.js new file mode 100644 index 0000000..1face63 --- /dev/null +++ b/docs/doc-fragments/footer.js @@ -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: '' + } +*/ diff --git a/docs/doc-fragments/header.js b/docs/doc-fragments/header.js new file mode 100644 index 0000000..3db0875 --- /dev/null +++ b/docs/doc-fragments/header.js @@ -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: '' + } +*/ diff --git a/docs/doc-fragments/inputGrouping.js b/docs/doc-fragments/inputGrouping.js new file mode 100644 index 0000000..3264dd4 --- /dev/null +++ b/docs/doc-fragments/inputGrouping.js @@ -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: `

You can ensure that input elements and labels display together on the same line, by grouping them together (.input-group). You can also group buttons together, using a different grouping class (.button-group).

`, + example: `
+
+ Grouped inputs +

+
+
+
+
`, + samples: [ +`
<div class="input-group">
+  <label for="username">Username</label>
+  <input type="text" id="Username" placeholder="Username"/>
+</div>
`, +`
<div class="button-group">
+  <button>Button</button>
+  <button>Button</button>
+  <button>Button</button>
+</div>
` + ], + 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: `

You can make your input groups fluid (.fluid) or vertical (.vertical), by applying the appropriate modifiers.

`, + example: `
+
+ Fluid input groups +
+
+
+
+
+
+ Vertical input groups +
+
+
+
`, + samples: [`
<div class="input-group fluid">
+  <label for="username">Username</label>
+  <input type="text" id="Username" placeholder="Username"/>
+</div>
+<div class="input-group vertical">
+  <label for="username">Username</label>
+  <input type="text" id="Username" placeholder="Username"/>
+</div>
`] + } + ], + dos: [], + donts: [ + { + description: `Avoid combining input groups with the grid system, as there might be overlapping styles.`, + sample: `
<div class="input-group row">
+  <div class="col-sm">
+    <label for="username">Username</label>
+    <input type="text" id="Username" placeholder="Username"/>
+  </div>
+</div>
` + } + ] +} diff --git a/docs/doc-fragments/navigationBar.js b/docs/doc-fragments/navigationBar.js new file mode 100644 index 0000000..89d6c31 --- /dev/null +++ b/docs/doc-fragments/navigationBar.js @@ -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: '' + } +*/ diff --git a/docs/v3/DEVLOG.md b/docs/v3/DEVLOG.md index a7163a1..0b2f1f4 100644 --- a/docs/v3/DEVLOG.md +++ b/docs/v3/DEVLOG.md @@ -177,3 +177,4 @@ - Documented `card` and `card section` to complete the `layout` module's docs. - 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. diff --git a/docs/v3/docs.html b/docs/v3/docs.html index 49c3b23..903f94d 100644 --- a/docs/v3/docs.html +++ b/docs/v3/docs.html @@ -338,7 +338,7 @@ <div class="card fluid"></div> </div>

Don't: Try not to combine fixed-width and fluid cards. Instead, combine fixed-width cards with columns and place fluid cards inside them.


<div class="card warning error"></div>

Don't: Avoid applying two color modifiers on the same card.

Notes

-

Customization

+

Customization


Card sections

Card content is usually organized in smaller sections (.section) to be more easily digestible. A card section can be any valid HTML5 element with the appropriate class applied to it.

@@ -369,7 +369,7 @@ <p>This should have been a section!</p> </div>

Don't: Avoid mixing regular content with content in sections. Instead, wrap all of your card's contents in sections.

Notes

-

Customization

+

Customization


Forms & input

Forms, labels and common HTML5 input elements have been styled using clean, modern rules, improving the accessibility and usability of your web apps' forms.

@@ -423,5 +423,113 @@ </form>

Do: Form inputs are inline by defaut, however you can combine forms with the grid system to create aligned forms.

Notes

Customization

+
+

Buttons

+

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 (.button) or the button role.

+

Example

Link
+

Sample code

<button>Button</button>
+<input type="button" value="Button" />
+<input type="reset" value="Button" />
+<input type="submit" value="Button" />
+<a href="#" class="button">Link</a>
+<a href="#" role="button">Link</a>
+<label class="button">Label</label>
+<label role="button">Label</label>
+

Modifiers

+

Color variants

To make your buttons stand out, you can give them a primary (.primary), secondary (.secondary), tertiary (.tertiary) or inversed (.inverse) color palette.

Example
Sample code
<button class="primary">Primary</button>
+<button class="secondary">Secondary</button>
+<button class="tertiary">Tertiary</button>
+<button class="inverse">Inverse</button>

Size variants

You can make buttons smaller (.small) or larger (.large), by applying the appropriate modifier.

Example
Sample code
<button class="small">Small</button>
+<button class="large">Large</button>
+

Best practices

<input type="file" id="file-input" style="display:none" />
+<label for="file-input" class="button">Upload file</label>

Do: 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.

<button class="primary inverse">Button</button>
+<button class="small large">Button</button>

Don't: Avoid applying multiple modifiers of the same type on the same button.

+

Notes

+

Customization

+

+

Input grouping

+

You can ensure that input elements and labels display together on the same line, by grouping them together (.input-group). You can also group buttons together, using a different grouping class (.button-group).

+

Example

+
+ Grouped inputs +

+
+
+
+
+

Sample code

<div class="input-group">
+  <label for="username">Username</label>
+  <input type="text" id="Username" placeholder="Username"/>
+</div>
<div class="button-group">
+  <button>Button</button>
+  <button>Button</button>
+  <button>Button</button>
+</div>
+

Modifiers

+

Fluid & vertical grouping

You can make your input groups fluid (.fluid) or vertical (.vertical), by applying the appropriate modifiers.

Example
+
+ Fluid input groups +
+
+
+
+
+
+ Vertical input groups +
+
+
+
Sample code
<div class="input-group fluid">
+  <label for="username">Username</label>
+  <input type="text" id="Username" placeholder="Username"/>
+</div>
+<div class="input-group vertical">
+  <label for="username">Username</label>
+  <input type="text" id="Username" placeholder="Username"/>
+</div>
+

Best practices

<div class="input-group row">
+  <div class="col-sm">
+    <label for="username">Username</label>
+    <input type="text" id="Username" placeholder="Username"/>
+  </div>
+</div>

Don't: Avoid combining input groups with the grid system, as there might be overlapping styles.

+

Notes

+ +




+

Menu drawer

+
+ + + + + +
\ No newline at end of file diff --git a/src/mini/_input_control.scss b/src/mini/_input_control.scss index 20abc88..04635ba 100644 --- a/src/mini/_input_control.scss +++ b/src/mini/_input_control.scss @@ -37,7 +37,6 @@ $input-invalid-color-var: '--input-invalid-color' !default; $button-back-color-var: '--button-back-color' !default; $button-hover-back-color-var: '--button-hover-back-color' !default; $button-fore-color-var: '--button-fore-color' !default; -$button-hover-fore-color-var: '--button-hover-fore-color' !default; $button-border-color-var: '--button-border-color' !default; $button-hover-border-color-var: '--button-hover-border-color' !default; $button-group-border-color-var: '--button-group-border-color' !default;