`
diff --git a/docs/v3/DEVLOG.md b/docs/v3/DEVLOG.md
index cc71da3..9624131 100644
--- a/docs/v3/DEVLOG.md
+++ b/docs/v3/DEVLOG.md
@@ -227,3 +227,5 @@
- **Hugging cat** was messing with the `DEVLOG`, good thing I noticed and fixed it.
- Moved component-specific variable definitions in `contextual` under the related conditionals.
- Documented `mark` elements.
+- Fixed a broken link in `index.html`.
+- Added the appropriate script for generating Codepen links dynamically. Oh, yeah!
diff --git a/docs/v3/docs.html b/docs/v3/docs.html
index 43dfa5c..3f6102f 100644
--- a/docs/v3/docs.html
+++ b/docs/v3/docs.html
@@ -56,7 +56,7 @@
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.
Sample code
<h1>Heading 1 <small>Subheading</small></h1>
+ Sample code
<h1>Heading 1 <small>Subheading</small></h1>
<h2>Heading 2 <small>Subheading</small></h2>
<h3>Heading 3 <small>Subheading</small></h3>
<h4>Heading 4 <small>Subheading</small></h4>
@@ -94,7 +94,7 @@
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 captionSample code
<img src="image.png" alt="Image description"/>
<figure>
+ Sample code
<img src="image.png" alt="Image description"/>
<figure>
<img src="image.png" alt="Image description"/>
<figcaption>Image caption</figcaption>
</figure>
List elements, both unordered and ordered, are minimally styled to match with the rest of the framework's aesthetics. Their margins and padding are reset to properly align with the rest of the common HTML5 elements, providing a stable foundation for all of your web app's lists.
Example
- Wake up
- Eat breakfast
- Go to work
Sample code
<ul>
+ Sample code
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Strawberry</li>
@@ -129,7 +129,7 @@
return num1 + num2;
}
This is some text quoted from elsewhere.
Sample code
<p>This is some text with some inline <code>source code</code> and some keyboard <kbd>input</kbd>.</p>
+ Sample code
<p>This is some text with some inline <code>source code</code> and some keyboard <kbd>input</kbd>.</p>
<pre>function sum(num1, num2){
return num1 + num2;
}</pre>
@@ -154,7 +154,7 @@
Sample code
+
Sample code
<div class="container">
<div class="row">
<div class="col-sm-1"></div> <div class="col-sm-11"></div>
@@ -190,7 +190,7 @@
<p>Media object content...</p>
</div>
</div>
-
Modifiers
+
Modifiers
Screen sizes and width
Each column class is defined by specifying a screen size (small - sm, medium - md or large - lg) and a column width (a value between 1 and 12 or you can omit it for a fluid column), separated by dashes (e.g. .col-sm-6 for a 6-wide column on a small screen). Using these you can apply different layouts for different screen sizes, by altering the width of columns, using multiple classes. Note that column widths are applied recursively, meaning that if you do not specify a width for a specific screen size the column will use the width applied for the previous largest screen size.
Example
@@ -310,11 +310,11 @@
Card 2
This is another card with some sample content.
Card 3
This is one more card with some sample content.
-
Sample code
<div class="row">
+ Sample code
<div class="row">
<div class="card"></div>
<div class="card"></div>
</div>
Modifiers
+
Modifiers
Alternative sizes
You can create small (.small, 240px wide) or large (.large, 480px wide) cards by applying the appropriate modifiers to a card. Apart from that, you can also create fluid (.fluid) cards, that take up as much space as is available, however you will have to place these cards inside a grid layout's columns, effectively adding one extra step for them to display properly.
Example
Small Card
Small cards are 240px wide.
Large Card
Large cards are 480px wide.
@@ -352,11 +352,11 @@
Example
Title section
This is a section with some textual content.
-
Sample code
<div class="card">
+ Sample code
<div class="card">
<div class="section"></div>
<div class="section"></div>
</div>
Modifiers
+
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.
Example
Card with image
@@ -403,7 +403,7 @@
-
Sample code
<form>
+ Sample code
<form>
<fieldset>
<legend>Simple form</legend>
<label for="username">Username</label>
@@ -434,7 +434,7 @@
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
LinkSample code
<button>Button</button>
+ Sample code
<button>Button</button>
<input type="button" value="Button" />
<input type="reset" value="Button" />
<input type="submit" value="Button" />
@@ -442,7 +442,7 @@
<a href="#" role="button">Link</a>
<label class="button">Label</label>
<label role="button">Label</label>
Modifiers
+
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>
@@ -464,7 +464,7 @@
-
Sample code
<div class="input-group">
+ Sample code
<div class="input-group">
<label for="username">Username</label>
<input type="text" id="Username" placeholder="Username"/>
</div>
<div class="button-group">
@@ -472,7 +472,7 @@
<button>Button</button>
<button>Button</button>
</div>
Modifiers
+
Modifiers
Fluid & vertical grouping
You can make your input groups fluid (.fluid) or vertical (.vertical), by applying the appropriate modifiers.
Example
-
Sample code
<header>
+ Sample code
<header>
<a href="#" class="logo">Logo</a>
<a href="#" class="button">Home</a>
<button>Download</button>
</header>
Modifiers
+
Modifiers
Sticky header
You can make your web app's header sticky (.sticky), by applying the appropriate modifier.
Sample code
<header class="sticky">
<a href="#" class="logo">Logo</a>
<a href="#" class="button">Home</a>
@@ -537,7 +537,7 @@
Staff AMA - 16th, Dec Policy Update
About Contact
-
Sample code
<nav>
+ Sample code
<nav>
<a href="#">Category 1</a>
<span>Category 2</span>
<a href="#" class="sublink-1">Item 2.1</a>
@@ -552,10 +552,10 @@
Footer
The footer element has been minimally styled, aiming to provide you with a clean base to create your web apps' footers.
Sample code
<footer>
+ Sample code
<footer>
<p>Footer text</p>
</footer>
Modifiers
+
Modifiers
Sticky footer
You can make your web app's footer sticky (.sticky), by applying the appropriate modifier.
Sample code
<footer class="sticky">
<p>Footer text</p>
</footer>
@@ -576,14 +576,14 @@
Home News
About Contact
Sample code
<label for="drawer-control" class="drawer-toggle"></label>
+ Sample code
<label for="drawer-control" class="drawer-toggle"></label>
<input type="checkbox" id="drawer-control" class="drawer">
<div>
<label for="drawer-control" class="drawer-close"></label>
<a href="#">Home</a>
</div>
Modifiers
+
Modifiers
Persistent drawer
If you want your drawer menus to not expand into normal containers on larger screens, simply add the appropriate modifier (.persistent) on the checkbox controlling the drawer and its toggle button.
Sample code
<label for="drawer-control" class="drawer-toggle persistent"></label>
<input type="checkbox" id="drawer-control" class="drawer persistent">
@@ -612,8 +612,8 @@
Text highlighting
The native HTML5 mark element has been minimally styled to allow for easy text highlighting.
Example
This is a paragraph with some highlighted text.
Sample code
<p>This is some <mark>highlighted text</mark>.</p>
Modifiers
+
Sample code
<p>This is some <mark>highlighted text</mark>.</p>
+
Modifiers
Color variants
You can change the color of highlighted text, based on context by applying the appropriate class (secondary - .secondary or tertiary - .tertiary).
Example
This is a secondary highlight and this is a tertiary highlight.
Sample code
<p>This is a <mark class="secondary">secondary highlight</mark> and this is a <mark class="tertiary">tertiary highlight</mark>.</p>
Style variants
You can make highlights look like tags (.tag) or display as inline blocks (.inline-block), by applying the appropriate class.
Example
This is a highlight styled as a tag.
This is some highlighted text that is displayed as an inline block.
Sample code
<p>This is a highlight styled as a <mark class="tag">tag</mark>.</p>
<p><mark class="inline-block">This is some highlighted text that is displayed as an inline block.</mark></p>
Best practices
<mark class="inline-block"><mark class="secondary">Secondary highlight</mark> inside a inline block.</mark>
Do: You can nest a highlight inside another one, if the outer one is displayed as an inline-block.
<mark class="primary inverse">Highlight</mark>
@@ -623,6 +623,7 @@