-*/
var fs = require('fs');
var docFragments = require('./doc-fragments/docFragments'); // Gets all document fragments as a list.
diff --git a/docs/doc-fragments/cardSections.js b/docs/doc-fragments/cardSections.js
index bbaea84..499d7a8 100644
--- a/docs/doc-fragments/cardSections.js
+++ b/docs/doc-fragments/cardSections.js
@@ -2,7 +2,7 @@ module.exports = {
id: 'card-sections',
title: 'Card sections',
keywords: [`card`, `row`, `section`, `container`, `col`, `column`, `media`, `double-padded`, `dark`],
- description: '
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 apropriate class applied to it.
',
+ description: '
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.
You can create sections for media (.media), such as images or videos (using an <img> or a <iframe> element respectively). These sections are styled appropriately for presentation of media content, meaning that the content will scale appropriately to fill up the available space.
mini.css provides you with cards (.card), general-purpose containers that help you organize the content of your web apps. Cards should be used in combination with the grid system, meaning that they need to be placed inside the grid's rows to work properly. Layouts created with cards are responsive, realigning according to the available size on the screen.
`,
+ description: `
mini.css provides you with cards (.card), general-purpose containers that help you organize the content of your web apps. Cards should be used in combination with the grid system, meaning that they need to be placed inside a grid's rows to work properly. Layouts created with cards are responsive, realigning according to the available size on the screen.
Code blocks and quotation elements are styled using custom rules that help make them stand out from the rest of the text, while inline code and keyboard input tags are styled in a similar manner, while aiming not to break the flow of regular text.
',
+ description: '
Code blocks and quotation elements are styled using custom rules that help make them stand out from the rest of the text, while inline code and keyboard input tags are minimally styled, aiming not to break the flow of regular text.
',
example: `
This is some text with some inline source code and some keyboard input.
mini.css utilizes the ruleset of Normalize.css v7.0.0 to reliably deal with inconsistencies between browsers, ensuring that your web apps will look beatiful no matter on what browser or device you're at. On top of these rules, we have applied some tasteful rules, such as using native font stack to figure out the best font for each device, slightly altering the background and foreground colors, as well as setting the size of the text to 16px and its line height to 1.5.
+ description: `
mini.css utilizes the ruleset of Normalize.css v7.0.0 to reliably deal with inconsistencies between browsers, while applying some tasteful defaults on top, such as using native font stack to figure out the best font for each device, setting the background and foreground colors, as well as the size of the text to 16px and its line height to 1.5.
All of the most common HTML5 elements, such as paragraphs, links, bold, small and slanted text, have been styled by default using clean, modern typography to make your pages look cool and stand out from the rest of the internet.
`,
example: `
This is a paragraph with some sample text. Did you know that the latest version of mini.css is codenamed Gluon? Well, now you do!
Remember that mini.css is totally free, no fine print involved!
Forms, labels and common HTML5 input elements have been styled using clean, modern rules, improving the accessibility and usability of your web apps' forms.
`],
+ notes: [
+ `Using the <fieldset> and <legend> elements is highly recommended, as it improves semantic markup and accessibility.`,
+ `Some input elements, such as date & time, color and range types, are not supported and, as a result, do not have a default style defined for them. You can define said styles manually if you need to use them in your web app.`
+ ],
+ customization: [
+ `Text color for forms and legend elements can be changed by changing the value of the --form-fore-color variable.`,
+ `Background color for forms can be changed by changing the value of the --form-back-color variable.`,
+ `Border color for forms and fieldset elements can be changed by changing the value of the --form-border-color variable.`,
+ `Text color for input elements can be changed by changing the value of the --input-fore-color variable.`,
+ `Background color for input elements can be changed by changing the value of the --input-back-color variable.`,
+ `Border color for input elements can be changed by changing the value of the --input-border-color variable.`,
+ `Border color for focused and invalid input elements can be changed by changing the value of the --input-focus-color and --input-invalid-color variables respectively.`,
+ `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 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: [],
+ dos: [
+ {
+ description: 'Form inputs are inline by defaut, however you can combine forms with the grid system to create aligned forms.',
+ sample: `
Image elements are responsive by default, without the need for any special classes or anything similar. They automatically scale down as necessary to display properly on smaller devices, while retaining their original aspect ratio, while they will never scale above their original size.
+ description: `
Image elements are responsive by default, automatically scaling down as necessary to display properly on smaller devices. Images retain their original aspect ratio and they will never scale above their original size.
If you want to add captions to images, you can use HTML5 figure elements, along with their related captions.
`,
example: 'Image caption',
samples: [`
<imgsrc="image.png"alt="Image description"/>
`,
diff --git a/docs/v3/DEVLOG.md b/docs/v3/DEVLOG.md
index d7c418a..a7163a1 100644
--- a/docs/v3/DEVLOG.md
+++ b/docs/v3/DEVLOG.md
@@ -176,3 +176,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.
diff --git a/docs/v3/docs.html b/docs/v3/docs.html
index 71266e7..49c3b23 100644
--- a/docs/v3/docs.html
+++ b/docs/v3/docs.html
@@ -46,7 +46,7 @@
Common textual elements
-
mini.css utilizes the ruleset of Normalize.css v7.0.0 to reliably deal with inconsistencies between browsers, ensuring that your web apps will look beatiful no matter on what browser or device you're at. On top of these rules, we have applied some tasteful rules, such as using native font stack to figure out the best font for each device, slightly altering the background and foreground colors, as well as setting the size of the text to 16px and its line height to 1.5.
+
mini.css utilizes the ruleset of Normalize.css v7.0.0 to reliably deal with inconsistencies between browsers, while applying some tasteful defaults on top, such as using native font stack to figure out the best font for each device, setting the background and foreground colors, as well as the size of the text to 16px and its line height to 1.5.
All of the most common HTML5 elements, such as paragraphs, links, bold, small and slanted text, have been styled by default using clean, modern typography to make your pages look cool and stand out from the rest of the internet.
Example
This is a paragraph with some sample text. Did you know that the latest version of mini.css is codenamed Gluon? Well, now you do!
Remember that mini.css is totally free, no fine print involved!
Sample code
<p>This is a paragraph. with some <strong>bold text</strong> and some <em>italics text</em>.</p>
@@ -84,7 +84,7 @@
Customization
Text color can be changed globally by changing the value of the --fore-color variable. This will affect the color of the headings' main text.
Secondary text color can be changed globally by changing the value of the --secondary-fore-color variable. This will affect the color of subheadings.
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.
You can change the ratio of headings' size by chaning the value of the --heading-ratio variable. Bear in mind that the value of this variable must be unitless to work properly.
Images & captions
-
Image elements are responsive by default, without the need for any special classes or anything similar. They automatically scale down as necessary to display properly on smaller devices, while retaining their original aspect ratio, while they will never scale above their original size.
+
Image elements are responsive by default, automatically scaling down as necessary to display properly on smaller devices. Images retain their original aspect ratio and they will never scale above their original size.
If you want to add captions to images, you can use HTML5 figure elements, along with their related captions.
Example
Image caption
Sample code
<imgsrc="image.png"alt="Image description"/>
<figure>
@@ -116,7 +116,7 @@
Customization
Text color can be changed globally by changing the value of the --fore-color variable.
Background color can be changed globally by changing the value of the --back-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.
Universal padding for elements can be changed globally by changing the value of the --universal-padding variable.
Code & quotations
-
Code blocks and quotation elements are styled using custom rules that help make them stand out from the rest of the text, while inline code and keyboard input tags are styled in a similar manner, while aiming not to break the flow of regular text.
+
Code blocks and quotation elements are styled using custom rules that help make them stand out from the rest of the text, while inline code and keyboard input tags are minimally styled, aiming not to break the flow of regular text.
Example
This is some text with some inline source code and some keyboard input.
Universal padding for elements can be changed globally by changing the value of the --universal-padding variable. This only affects the padding of the container.
Cards
-
mini.css provides you with cards (.card), general-purpose containers that help you organize the content of your web apps. Cards should be used in combination with the grid system, meaning that they need to be placed inside the grid's rows to work properly. Layouts created with cards are responsive, realigning according to the available size on the screen.
+
mini.css provides you with cards (.card), general-purpose containers that help you organize the content of your web apps. Cards should be used in combination with the grid system, meaning that they need to be placed inside a grid's rows to work properly. Layouts created with cards are responsive, realigning according to the available size on the screen.
Example
Card 1
This is a basic card with some sample content.
Card 2
This is another card with some sample content.
@@ -341,7 +341,7 @@
Customization
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.
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.
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 apropriate class applied to it.
+
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.
Example
Title section
This is a section with some textual content.
@@ -351,16 +351,16 @@
</div>
Modifiers
Media sections
You can create sections for media (.media), such as images or videos (using an <img> or a <iframe> element respectively). These sections are styled appropriately for presentation of media content, meaning that the content will scale appropriately to fill up the available space.
Depending on the source website, some embedded videos might not display properly as media sections.
Customization
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.
Universal padding for elements can be changed globally by changing the value of the --universal-padding variable.
+
+
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.
Do: Form inputs are inline by defaut, however you can combine forms with the grid system to create aligned forms.
+
Notes
Using the <fieldset> and <legend> elements is highly recommended, as it improves semantic markup and accessibility.
Some input elements, such as date & time, color and range types, are not supported and, as a result, do not have a default style defined for them. You can define said styles manually if you need to use them in your web app.
+
Customization
Text color for forms and legend elements can be changed by changing the value of the --form-fore-color variable.
Background color for forms can be changed by changing the value of the --form-back-color variable.
Border color for forms and fieldset elements can be changed by changing the value of the --form-border-color variable.
Text color for input elements can be changed by changing the value of the --input-fore-color variable.
Background color for input elements can be changed by changing the value of the --input-back-color variable.
Border color for input elements can be changed by changing the value of the --input-border-color variable.
Border color for focused and invalid input elements can be changed by changing the value of the --input-focus-color and --input-invalid-color variables respectively.
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 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.
-
+