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.
<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.
<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.
<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).
<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.
<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.
--card-fore-color variable.--card-back-color variable.--card-border-color variable.--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 variable.--card-fore-color variable.--card-back-color variable.--card-border-color variable.--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 variable.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.
Don't: Avoid mixing regular content with content in sections. Instead, wrap all of your card's contents in sections.
200px.object-fit, you might want to use a polyfill for better browser support (recommended: image polyfill, video polyfill).--card-fore-color variable.--card-back-color variable.--card-border-color variable.--universal-padding variable.--card-fore-color variable.--card-back-color variable.--card-border-color variable.--universal-padding variable.Forms, labels and common HTML5 input elements have been styled using clean, modern rules, improving the accessibility and usability of your web apps' forms.
Do: Form inputs are inline by defaut, however you can combine forms with the grid system to create aligned forms.
<fieldset> and <legend> elements is highly recommended, as it improves semantic markup and accessibility.--form-fore-color variable.--form-back-color variable.--form-border-color variable.--input-fore-color variable.--input-back-color variable.--input-border-color variable.--input-focus-color and --input-invalid-color variables respectively.--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-padding variable.--universal-border-radius variable.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).
<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>
You can make your input groups fluid (.fluid) or vertical (.vertical), by applying the appropriate modifiers.
<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>
<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.