2.3.4

Fixed a bug in header, added some more specificity to select selectors and updated documentation to include more links and other things.

CHANGELOG.md

@@ -1,5 +1,27 @@
 # Changelog
 
+## v2.3.4
+
+- Fixed an edge-case that could cause trouble with `<header>` elements (#94).
+- Fixes some issues in the documentation (#92, #93).
+- Added some more specificity to the custom styling for `<select>` elements.
+
+## v2.3.3
+
+- Added a new `mini-pwa` flavor, targeting Android and mobile devices in general.
+
+## v2.3.2
+
+- Improved the styling of `select` to be a bit lighter in terms of size.
+- Added a condition allowing the `select` fix not to be applied.
+- Updated `mini-lite` to not include the `select` fix.
+
+## v2.3.1
+
+- Fixed an issue with `<select>` elements on certain devices (#80, #82).
+- Fixed an issue with `<input>` elements' padding on certain devices (#81, #83).
+- Updated codebase from tabs to spaces, should now look better on Github.
+
 ## v2.3.0
 
 - Added a new `.modal` component, which allows you to show modal dialogs (`contextual`).

CODE_OF_CONDUCT.md

@@ -0,0 +1,46 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at chalarangelo@gmail.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
+
+[homepage]: http://contributor-covenant.org
+[version]: http://contributor-covenant.org/version/1/4/

CONTRIBUTING.md

@@ -0,0 +1,11 @@
+## Contributing
+
+There are many ways you can contribute to the development of the **mini.css** framework:
+
+- If you encounter any **bugs**, please open an [issue](https://github.com/Chalarangelo/mini.css/issues/new). Try to include as much information possible, including but not limited to **detailed explanation, screenshots, operating system, browser and device**.
+- **Feature requests** are a bit more complicated to process, as we need to get some community feedback on what is worth adding to the framework, but feel free to open an [issue](https://github.com/Chalarangelo/mini.css/issues/new) and we'll have a nice discussion.
+- **Flavor files** are always welcome, even if they are just a simple palette change of the default flavor. Feel free to create a [pull request](https://github.com/Chalarangelo/mini.css/compare) if you are a flavor creator.
+- **New features** developed can also be submitted as a [pull request](https://github.com/Chalarangelo/mini.css/compare) and, after we receive some community feedback and there's some productive discussion, they might get added to the framework.
+- For **third-party-libraries** and other features (such as new modules, components or Javascript libraries) developed for **mini.css**, please feel free to email me (chalarangelo@gmail.com) and we'll take it from there.
+- If you create **content that uses or showcases the framework** (Codepens, tutorials, videos or even a cool website or app), email me (chalarangelo@gmail.com) a link to your content, so that I can help you share it with the world.
+- For anything **not included in this list**, either open an [issue](https://github.com/Chalarangelo/mini.css/issues/new) or send me an email (chalarangelo@gmail.com).

README.md

@@ -18,7 +18,7 @@ You have 4 options when it comes to setting up **mini.css**:
 3. [Use Rawgit](#method-3-use-rawgit)
 4. [Use cdnjs](#method-4-use-cdnjs-preferred-for-older-releases) (preferred for older releases)
 
-For instructions on how to use, best practices, templates and other usage information, please visit the framework's [documentation](https://chalarangelo.github.io/mini.css/modules.html).
+For instructions on how to use, best practices, templates and other usage information, please visit the framework's [documentation](http://minicss.org/modules).
 
 #### Method 1: Use a package manager (recommended)
 
@@ -81,6 +81,7 @@ Special thanks to these fine folks for helping in the development of **mini.css*
 - [Per Harald Borgen](https://scrimba.com/perborgen) - Introductory video creator
 - Rory Primrose ([@roryprimrose](https://github.com/roryprimrose)) - Code restructure
 - Sandro Magi ([@naasking](https://github.com/naasking)) - [Multiple](https://github.com/Chalarangelo/mini.css/issues?q=is%3Aissue+author%3Anaasking) suggestions, ideas, bug reports
+- Wade Garrett ([@wad3g](https://github.com/wad3g)) - [Multiple](https://github.com/Chalarangelo/mini.css/pulls?q=is%3Apr+author%3Awad3g) fixes for issues and bugs
 
 ## License
 

dist/mini-dark.css

@@ -1,12 +1,12 @@
 @charset "UTF-8";
 /*
-	Flavor name: Dark (mini-dark)
-	Author: Angelos Chalaris (chalarangelo@gmail.com)
-	Maintainers: Angelos Chalaris
-	mini.css version: v2.3.0
+  Flavor name: Dark (mini-dark)
+  Author: Angelos Chalaris (chalarangelo@gmail.com)
+  Maintainers: Angelos Chalaris
+  mini.css version: v2.3.4
 */
 /*
-	Browsers resets and base typography.
+  Browsers resets and base typography.
 */
 html {
   font-size: 16px;
@@ -206,7 +206,7 @@ figcaption {
 }
 
 /*
-	Definitions for the grid system.
+  Definitions for the grid system.
 */
 .container {
   margin: 0 auto;
@@ -679,7 +679,7 @@ figcaption {
 }
 
 /*
-	Definitions for forms and input elements.
+  Definitions for forms and input elements.
 */
 form {
   background: #1c2529;
@@ -731,8 +731,8 @@ label {
   max-width: 100%;
   -webkit-flex-grow: 1;
   flex-grow: 1;
-  -webkit-flex-basis: 0;
-  flex-basis: 0;
+  -webkit-flex-basis: 0px;
+  flex-basis: 0px;
 }
 
 @media screen and (max-width: 767px) {
@@ -764,8 +764,8 @@ label {
   max-width: 100%;
   -webkit-flex-grow: 1;
   flex-grow: 1;
-  -webkit-flex-basis: 0;
-  flex-basis: 0;
+  -webkit-flex-basis: 0px;
+  flex-basis: 0px;
 }
 
 [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
@@ -812,6 +812,19 @@ input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly], t
   border-color: #20292e;
 }
 
+select:not([multiple]) {
+  padding-right: 1.5rem;
+  background: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1.5"><path fill="%23d0d0d0" d="M.25.75h.5L.5 1"/></svg>') no-repeat right;
+  background-color: #39444a;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+select:not([multiple])[readonly] {
+  background-color: #263238;
+}
+
 ::-webkit-input-placeholder {
   opacity: 1;
   color: #757575;
@@ -1029,7 +1042,7 @@ input[type="file"] {
 }
 
 /*
-	Custom elements for forms and input elements.
+  Custom elements for forms and input elements.
 */
 button.primary, [type="button"].primary, [type="submit"].primary,
 [type="reset"].primary, .button.primary, [role="button"].primary {
@@ -1092,7 +1105,7 @@ button.large, [type="button"].large, [type="submit"].large,
 }
 
 /*
-	Definitions for navigation elements.
+  Definitions for navigation elements.
 */
 header {
   display: block;
@@ -1279,7 +1292,7 @@ footer.sticky {
 }
 
 /*
-	Definitions for the responsive table component.
+  Definitions for the responsive table component.
 */
 table {
   border-collapse: separate;
@@ -1599,7 +1612,7 @@ table.striped tr:nth-of-type(2n) > td {
 }
 
 /*
-	Definitions for cards and containers.
+  Definitions for cards and containers.
 */
 .card {
   display: -webkit-box;
@@ -1649,7 +1662,7 @@ table.striped tr:nth-of-type(2n) > td {
 }
 
 /*
-	Custom elements for cards and containers.
+  Custom elements for cards and containers.
 */
 @media screen and (min-width: 480px) {
   .card.large {
@@ -1709,7 +1722,7 @@ table.striped tr:nth-of-type(2n) > td {
 }
 
 /*
-	Definitions for tabs/horizontal accordions.
+  Definitions for tabs/horizontal accordions.
 */
 .tabs {
   width: 100%;
@@ -1853,7 +1866,7 @@ table.striped tr:nth-of-type(2n) > td {
   }
 }
 
-/*
+/*
   Definitions for contextual background elements, toasts and tooltips.
 */
 mark {
@@ -1984,7 +1997,7 @@ mark.inline-block {
   z-index: 1211;
 }
 
-/*
+/*
   Custom contextual background elements and alerts.
 */
 mark.secondary {
@@ -2016,7 +2029,7 @@ mark.inline-block {
   padding: 1.125rem 2.25rem;
 }
 
-/*
+/*
   Definitions for progress elements and spinners.
 */
 progress {
@@ -2024,7 +2037,7 @@ progress {
   vertical-align: baseline;
   -webkit-appearance: none;
   -moz-appearance: none;
-  appearance: none;
+  appearance: none;
   height: 0.625rem;
   width: 90%;
   width: calc(100% - 1rem);
@@ -2088,7 +2101,7 @@ progress[value="1000"]::-moz-progress-bar {
   animation: spinner-donut-anim 1.2s linear infinite;
 }
 
-/*
+/*
   Custom elements for progress elements and spinners.
 */
 progress.inline {
@@ -2137,7 +2150,7 @@ progress.tertiary::-moz-progress-bar {
   height: 2rem;
 }
 
-/*
+/*
   Definitions for utilities and helper classes.
 */
 .hidden {
@@ -2238,7 +2251,7 @@ ul.breadcrumbs li:last-child:after {
   text-align: center;
 }
 
-/*
+/*
   Custom elements for utilities and helper classes.
 */
 .bordered {

dist/mini-default.css

@@ -1,12 +1,12 @@
 @charset "UTF-8";
 /*
-	Flavor name: Default (mini-default)
-	Author: Angelos Chalaris (chalarangelo@gmail.com)
-	Maintainers: Angelos Chalaris
-	mini.css version: v2.3.0
+  Flavor name: Default (mini-default)
+  Author: Angelos Chalaris (chalarangelo@gmail.com)
+  Maintainers: Angelos Chalaris
+  mini.css version: v2.3.4
 */
 /*
-	Browsers resets and base typography.
+  Browsers resets and base typography.
 */
 html {
   font-size: 16px;
@@ -207,7 +207,7 @@ figcaption {
 }
 
 /*
-	Definitions for the grid system.
+  Definitions for the grid system.
 */
 .container {
   margin: 0 auto;
@@ -680,7 +680,7 @@ figcaption {
 }
 
 /*
-	Definitions for forms and input elements.
+  Definitions for forms and input elements.
 */
 form {
   background: #eeeeee;
@@ -730,8 +730,8 @@ label {
   max-width: 100%;
   -webkit-flex-grow: 1;
   flex-grow: 1;
-  -webkit-flex-basis: 0;
-  flex-basis: 0;
+  -webkit-flex-basis: 0px;
+  flex-basis: 0px;
 }
 
 @media screen and (max-width: 767px) {
@@ -763,8 +763,8 @@ label {
   max-width: 100%;
   -webkit-flex-grow: 1;
   flex-grow: 1;
-  -webkit-flex-basis: 0;
-  flex-basis: 0;
+  -webkit-flex-basis: 0px;
+  flex-basis: 0px;
 }
 
 [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
@@ -811,6 +811,19 @@ input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly], t
   border-color: #c9c9c9;
 }
 
+select:not([multiple]) {
+  padding-right: 1.5rem;
+  background: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1.5"><path fill="%23212121" d="M.25.75h.5L.5 1"/></svg>') no-repeat right;
+  background-color: #fafafa;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+select:not([multiple])[readonly] {
+  background-color: #e5e5e5;
+}
+
 ::-webkit-input-placeholder {
   opacity: 1;
   color: #616161;
@@ -1028,7 +1041,7 @@ input[type="file"] {
 }
 
 /*
-	Custom elements for forms and input elements.
+  Custom elements for forms and input elements.
 */
 button.primary, [type="button"].primary, [type="submit"].primary,
 [type="reset"].primary, .button.primary, [role="button"].primary {
@@ -1091,7 +1104,7 @@ button.large, [type="button"].large, [type="submit"].large,
 }
 
 /*
-	Definitions for navigation elements.
+  Definitions for navigation elements.
 */
 header {
   display: block;
@@ -1278,7 +1291,7 @@ footer.sticky {
 }
 
 /*
-	Definitions for the responsive table component.
+  Definitions for the responsive table component.
 */
 table {
   border-collapse: separate;
@@ -1599,7 +1612,7 @@ table.striped tr:nth-of-type(2n) > td {
 }
 
 /*
-	Definitions for cards and containers.
+  Definitions for cards and containers.
 */
 .card {
   display: -webkit-box;
@@ -1650,7 +1663,7 @@ table.striped tr:nth-of-type(2n) > td {
 }
 
 /*
-	Custom elements for cards and containers.
+  Custom elements for cards and containers.
 */
 @media screen and (min-width: 480px) {
   .card.large {
@@ -1709,7 +1722,7 @@ table.striped tr:nth-of-type(2n) > td {
 }
 
 /*
-	Definitions for tabs/horizontal accordions.
+  Definitions for tabs/horizontal accordions.
 */
 .tabs {
   width: 100%;
@@ -1854,7 +1867,7 @@ table.striped tr:nth-of-type(2n) > td {
   }
 }
 
-/*
+/*
   Definitions for contextual background elements, toasts and tooltips.
 */
 mark {
@@ -1985,7 +1998,7 @@ mark.inline-block {
   z-index: 1211;
 }
 
-/*
+/*
   Custom contextual background elements and alerts.
 */
 mark.secondary {
@@ -2017,7 +2030,7 @@ mark.inline-block {
   padding: 1.125rem 2.25rem;
 }
 
-/*
+/*
   Definitions for progress elements and spinners.
 */
 progress {
@@ -2089,7 +2102,7 @@ progress[value="1000"]::-moz-progress-bar {
   animation: spinner-donut-anim 1.2s linear infinite;
 }
 
-/*
+/*
   Custom elements for progress elements and spinners.
 */
 progress.inline {
@@ -2138,7 +2151,7 @@ progress.tertiary::-moz-progress-bar {
   height: 2rem;
 }
 
-/*
+/*
   Definitions for utilities and helper classes.
 */
 .hidden {
@@ -2239,7 +2252,7 @@ ul.breadcrumbs li:last-child:after {
   text-align: center;
 }
 
-/*
+/*
   Custom elements for utilities and helper classes.
 */
 .bordered {

dist/mini-lite.css

@@ -1,12 +1,12 @@
 @charset "UTF-8";
 /*
-	Flavor name: Lite (mini-lite)
-	Author: Angelos Chalaris (chalarangelo@gmail.com)
-	Maintainers: Angelos Chalaris
-	mini.css version: v2.3.0
+  Flavor name: Lite (mini-lite)
+  Author: Angelos Chalaris (chalarangelo@gmail.com)
+  Maintainers: Angelos Chalaris
+  mini.css version: v2.3.4
 */
 /*
-	Browsers resets and base typography.
+  Browsers resets and base typography.
 */
 html {
   font-size: 16px;
@@ -205,7 +205,7 @@ figcaption {
 }
 
 /*
-	Definitions for the grid system.
+  Definitions for the grid system.
 */
 .container {
   margin: 0 auto;
@@ -678,7 +678,7 @@ figcaption {
 }
 
 /*
-	Definitions for forms and input elements.
+  Definitions for forms and input elements.
 */
 form {
   background: #eeeeee;
@@ -899,7 +899,7 @@ input[type="file"] {
 }
 
 /*
-	Custom elements for forms and input elements.
+  Custom elements for forms and input elements.
 */
 button.primary, [type="button"].primary, [type="submit"].primary,
 [type="reset"].primary, .button.primary, [role="button"].primary {
@@ -950,7 +950,7 @@ button.large, [type="button"].large, [type="submit"].large,
 }
 
 /*
-	Definitions for navigation elements.
+  Definitions for navigation elements.
 */
 header {
   display: block;
@@ -1024,7 +1024,7 @@ footer.sticky {
 }
 
 /*
-	Definitions for the responsive table component.
+  Definitions for the responsive table component.
 */
 table {
   border-collapse: separate;
@@ -1105,7 +1105,7 @@ table th:first-child, table td:first-child {
 }
 
 /*
-	Definitions for cards and containers.
+  Definitions for cards and containers.
 */
 .card {
   display: -webkit-box;
@@ -1156,7 +1156,7 @@ table th:first-child, table td:first-child {
 }
 
 /*
-	Custom elements for cards and containers.
+  Custom elements for cards and containers.
 */
 .card.fluid {
   max-width: 100%;
@@ -1172,7 +1172,7 @@ table th:first-child, table td:first-child {
 }
 
 /*
-	Definitions for contextual background elements, toasts and tooltips.
+  Definitions for contextual background elements, toasts and tooltips.
 */
 mark {
   background: #0277bd;
@@ -1188,7 +1188,7 @@ mark.inline-block {
 }
 
 /*
-	Custom contextual background elements and alerts.
+  Custom contextual background elements and alerts.
 */
 mark.secondary {
   background: #e53935;
@@ -1210,7 +1210,7 @@ mark.inline-block {
 }
 
 /*
-	Definitions for progress elements and spinners.
+  Definitions for progress elements and spinners.
 */
 progress {
   display: block;
@@ -1253,7 +1253,7 @@ progress[value="1000"]::-moz-progress-bar {
 }
 
 /*
-	Custom elements for progress elements and spinners.
+  Custom elements for progress elements and spinners.
 */
 progress.inline {
   display: inline-block;
@@ -1286,7 +1286,7 @@ progress.tertiary::-moz-progress-bar {
 }
 
 /*
-	Definitions for utilities and helper classes.
+  Definitions for utilities and helper classes.
 */
 .hidden {
   display: none !important;
@@ -1306,7 +1306,7 @@ progress.tertiary::-moz-progress-bar {
 }
 
 /*
-	Custom elements for utilities and helper classes.
+  Custom elements for utilities and helper classes.
 */
 .bordered {
   border: 1px solid rgba(0, 0, 0, 0.25) !important;

dist/mini-nord.css

@@ -1,12 +1,12 @@
 @charset "UTF-8";
 /*
-	Flavor name: Nord (mini-nord)
-	Author: tphecca (https://github.com/tphecca)
-	Maintainers: tphecca
-	mini.css version: v2.3.0
+  Flavor name: Nord (mini-nord)
+  Author: tphecca (https://github.com/tphecca)
+  Maintainers: tphecca
+  mini.css version: v2.3.4
 */
 /*
-	Browsers resets and base typography.
+  Browsers resets and base typography.
 */
 html {
   font-size: 16px;
@@ -211,7 +211,7 @@ figcaption {
 }
 
 /*
-	Definitions for the grid system.
+  Definitions for the grid system.
 */
 .container {
   margin: 0 auto;
@@ -684,7 +684,7 @@ figcaption {
 }
 
 /*
-	Definitions for forms and input elements.
+  Definitions for forms and input elements.
 */
 form {
   border: 1px solid #D8DEE9;
@@ -734,8 +734,8 @@ label {
   max-width: 100%;
   -webkit-flex-grow: 1;
   flex-grow: 1;
-  -webkit-flex-basis: 0;
-  flex-basis: 0;
+  -webkit-flex-basis: 0px;
+  flex-basis: 0px;
 }
 
 @media screen and (max-width: 767px) {
@@ -767,8 +767,8 @@ label {
   max-width: 100%;
   -webkit-flex-grow: 1;
   flex-grow: 1;
-  -webkit-flex-basis: 0;
-  flex-basis: 0;
+  -webkit-flex-basis: 0px;
+  flex-basis: 0px;
 }
 
 [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
@@ -820,6 +820,19 @@ input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly], t
   border-color: #bdbdbd;
 }
 
+select:not([multiple]) {
+  padding-right: 20px;
+  background: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1.5"><path fill="%232E3440" d="M.25.75h.5L.5 1"/></svg>') no-repeat right;
+  background-color: #E5E9F0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+select:not([multiple])[readonly] {
+  background-color: #e0e0e0;
+}
+
 ::-webkit-input-placeholder {
   opacity: 1;
   color: #616161;
@@ -1043,7 +1056,7 @@ input[type="file"] {
 }
 
 /*
-	Custom elements for forms and input elements.
+  Custom elements for forms and input elements.
 */
 button.primary, [type="button"].primary, [type="submit"].primary,
 [type="reset"].primary, .button.primary, [role="button"].primary {
@@ -1108,7 +1121,7 @@ button.large, [type="button"].large, [type="submit"].large,
 }
 
 /*
-	Definitions for navigation elements.
+  Definitions for navigation elements.
 */
 header {
   display: block;
@@ -1298,7 +1311,7 @@ footer.sticky {
 }
 
 /*
-	Definitions for the responsive table component.
+  Definitions for the responsive table component.
 */
 table {
   border-collapse: separate;
@@ -1621,7 +1634,7 @@ table.striped tr:nth-of-type(2n) > td {
 }
 
 /*
-	Definitions for cards and containers.
+  Definitions for cards and containers.
 */
 .card {
   display: -webkit-box;
@@ -1672,7 +1685,7 @@ table.striped tr:nth-of-type(2n) > td {
 }
 
 /*
-	Custom elements for cards and containers.
+  Custom elements for cards and containers.
 */
 @media screen and (min-width: 480px) {
   .card.large {
@@ -1727,7 +1740,7 @@ table.striped tr:nth-of-type(2n) > td {
 }
 
 /*
-	Definitions for tabs/horizontal accordions.
+  Definitions for tabs/horizontal accordions.
 */
 .tabs {
   width: 100%;
@@ -1873,7 +1886,7 @@ table.striped tr:nth-of-type(2n) > td {
   }
 }
 
-/*
+/*
   Definitions for contextual background elements, toasts and tooltips.
 */
 mark {
@@ -2006,7 +2019,7 @@ mark.inline-block {
   z-index: 1211;
 }
 
-/*
+/*
   Custom contextual background elements and alerts.
 */
 mark.secondary {
@@ -2038,7 +2051,7 @@ mark.inline-block {
   padding: 18px 36px;
 }
 
-/*
+/*
   Definitions for progress elements and spinners.
 */
 progress {
@@ -2111,7 +2124,7 @@ progress[value="1000"]::-moz-progress-bar {
   animation: spinner-donut-anim 1.2s linear infinite;
 }
 
-/*
+/*
   Custom elements for progress elements and spinners.
 */
 progress.inline {
@@ -2160,7 +2173,7 @@ progress.tertiary::-moz-progress-bar {
   height: 32px;
 }
 
-/*
+/*
   Definitions for utilities and helper classes.
 */
 .hidden {
@@ -2263,7 +2276,7 @@ ul.breadcrumbs li:last-child:after {
   text-align: center;
 }
 
-/*
+/*
   Custom elements for utilities and helper classes.
 */
 .bordered {

dist/mini-sucroa.css

@@ -1,13 +1,13 @@
 @charset "UTF-8";
 /*
-	Flavor name: Sucroa (mini-sucroa)
-	Author: Angeliki Daskalakis
-	Maintainers: Angeliki Daskalakis, Angelos Chalaris (chalarangelo@gmail.com)
-	mini.css version: v2.3.0
+  Flavor name: Sucroa (mini-sucroa)
+  Author: Angeliki Daskalakis
+  Maintainers: Angeliki Daskalakis, Angelos Chalaris (chalarangelo@gmail.com)
+  mini.css version: v2.3.4
 */
 @import url("https://fonts.googleapis.com/css?family=Cousine:400,400i,700|Libre+Baskerville:400,400i,700&subset=latin-ext");
 /*
-	Browsers resets and base typography.
+  Browsers resets and base typography.
 */
 html {
   font-size: 16px;
@@ -213,7 +213,7 @@ figcaption {
 }
 
 /*
-	Definitions for the grid system.
+  Definitions for the grid system.
 */
 .container {
   margin: 0 auto;
@@ -686,7 +686,7 @@ figcaption {
 }
 
 /*
-	Definitions for forms and input elements.
+  Definitions for forms and input elements.
 */
 form {
   background: #e8deff;
@@ -738,8 +738,8 @@ label {
   max-width: 100%;
   -webkit-flex-grow: 1;
   flex-grow: 1;
-  -webkit-flex-basis: 0;
-  flex-basis: 0;
+  -webkit-flex-basis: 0px;
+  flex-basis: 0px;
 }
 
 @media screen and (max-width: 767px) {
@@ -771,8 +771,8 @@ label {
   max-width: 100%;
   -webkit-flex-grow: 1;
   flex-grow: 1;
-  -webkit-flex-basis: 0;
-  flex-basis: 0;
+  -webkit-flex-basis: 0px;
+  flex-basis: 0px;
 }
 
 [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
@@ -824,6 +824,19 @@ input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly], t
   border-color: #a9a2ba;
 }
 
+select:not([multiple]) {
+  padding-right: 20px;
+  background: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1.5"><path fill="%23211423" d="M.25.75h.5L.5 1"/></svg>') no-repeat right;
+  background-color: #f2edff;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+select:not([multiple])[readonly] {
+  background-color: #eae1ff;
+}
+
 ::-webkit-input-placeholder {
   opacity: 1;
   color: #493e4b;
@@ -1012,7 +1025,7 @@ input[type="file"] {
 }
 
 /*
-	Custom elements for forms and input elements.
+  Custom elements for forms and input elements.
 */
 button.primary, [type="button"].primary, [type="submit"].primary,
 [type="reset"].primary, .button.primary, [role="button"].primary {
@@ -1079,7 +1092,7 @@ button.large, [type="button"].large, [type="submit"].large,
 }
 
 /*
-	Definitions for navigation elements.
+  Definitions for navigation elements.
 */
 header {
   display: block;
@@ -1253,7 +1266,7 @@ footer.sticky {
 }
 
 /*
-	Definitions for the responsive table component.
+  Definitions for the responsive table component.
 */
 table {
   border-collapse: separate;
@@ -1349,7 +1362,7 @@ table.striped tr:nth-of-type(2n) > td {
 }
 
 /*
-	Definitions for cards and containers.
+  Definitions for cards and containers.
 */
 .card {
   display: -webkit-box;
@@ -1402,7 +1415,7 @@ table.striped tr:nth-of-type(2n) > td {
 }
 
 /*
-	Custom elements for cards and containers.
+  Custom elements for cards and containers.
 */
 @media screen and (min-width: 480px) {
   .card.large {
@@ -1461,7 +1474,7 @@ table.striped tr:nth-of-type(2n) > td {
 }
 
 /*
-	Definitions for tabs/horizontal accordions.
+  Definitions for tabs/horizontal accordions.
 */
 .tabs {
   width: 100%;
@@ -1650,7 +1663,7 @@ table.striped tr:nth-of-type(2n) > td {
   }
 }
 
-/*
+/*
   Definitions for contextual background elements, toasts and tooltips.
 */
 mark {
@@ -1746,7 +1759,7 @@ mark.inline-block {
   margin-top: 16px;
 }
 
-/*
+/*
   Custom contextual background elements and alerts.
 */
 mark.secondary {
@@ -1778,7 +1791,7 @@ mark.inline-block {
   padding: 18px 36px;
 }
 
-/*
+/*
   Definitions for progress elements and spinners.
 */
 progress {
@@ -1851,7 +1864,7 @@ progress[value="1000"]::-moz-progress-bar {
   animation: spinner-donut-anim 1.2s linear infinite;
 }
 
-/*
+/*
   Custom elements for progress elements and spinners.
 */
 progress.inline {
@@ -1900,7 +1913,7 @@ progress.tertiary::-moz-progress-bar {
   height: 32px;
 }
 
-/*
+/*
   Definitions for utilities and helper classes.
 */
 .hidden {
@@ -2004,7 +2017,7 @@ ul.breadcrumbs li:last-child:after {
   text-align: center;
 }
 
-/*
+/*
   Custom elements for utilities and helper classes.
 */
 .bordered {

docs/card.html

@@ -28,54 +28,54 @@
   </head>
   <body>
 		<header class="sticky">
-			<a href="index.html" class="logo"><span id="header-logo">m</span></a>
+			<a href="index" class="logo"><span id="header-logo">m</span></a>
 				<label class="drawer-toggle button" for="navigation-toggle"></label>
-			<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
-			<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
-			<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">Quick Reference</a>
+			<a href="index" class="button hidden-sm">Introduction</a> <a href="modules" class="button hidden-sm">Modules</a>
+			<a href="flavors" class="button hidden-sm">Flavors</a> <a href="templates" class="button hidden-sm">Templates</a>
+			<a href="customization" class="button hidden-sm">Customization</a> <a href="quick_reference" class="button hidden-sm">Quick Reference</a>
 			<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
 		</header>
 		<div class="container" style="padding-left: 0.25rem;">
 			<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
 				<label class="close" for="navigation-toggle"></label>
-				<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
-				<h4 style="margin-left: 0;">Modules</h4> <a href="core.html#core-title">Core</a>
-				<a href="core.html#typography" class="sublink-1">Typography</a> <a href="core.html#headings" class="sublink-1">Headings</a>
-				<a href="core.html#common-textual-elements" class="sublink-1">Common textual elements</a>
-				<a href="core.html#lists" class="sublink-1">Lists</a> <a href="core.html#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
-				<br/> <a href="grid.html#grid-title">Grid</a>
-				<a href="grid.html#basic-layout" class="sublink-1">Basic layout</a> <a href="grid.html#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
-				<a href="grid.html#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid.html#column-offset" class="sublink-1">Column offsets</a>
-				<a href="grid.html#column-reorder" class="sublink-1">Column reordering</a> <a href="grid.html#media-object" class="sublink-1">Media object pattern</a>
-				<br/> <a href="input_control.html#input-control-title">Input Control</a>
-				<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control.html#switches" class="sublink-1">Switches</a>
-				<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#file-upload" class="sublink-1">File upload buttons</a>
-				<br/> <a href="navigation.html#navigation-title">Navigation</a>
-				<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation.html#drawer" class="sublink-1">Drawer</a>
-				<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers &amp; footers</a>
-				<br/> <a href="table.html#table-title">Table</a>
-				<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a> <a href="table.html#scrollable-tables" class="sublink-1">Scrollable tables</a>
-				<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
-				<br/> <a href="card.html#card-title">Card</a>
-				<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections &amp; media</a>
-				<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a> <a href="card.html#color-variants" class="sublink-1">Card color variants</a>
-				<br/> <a href="tab.html#tab-title">Tab</a>
-				<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
-				<br/> <a href="contextual.html#contextual-title">Contextual</a>
-				<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
-				<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
-				<br/> <a href="progress.html#progress-title">Progress</a>
-				<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
-				<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
-				<br/> <a href="utility.html#utility-title">Utility</a>
-				<a href="utility.html#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility.html#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
-				<a href="utility.html#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
-				<a href="utility.html#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
-				<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
-				<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
-				<a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
-				<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a>
-				<a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
+				<a href="index"><h4 style="margin-left: 0;">Introduction</h4></a>
+				<h4 style="margin-left: 0;">Modules</h4> <a href="core#core-title">Core</a>
+				<a href="core#typography" class="sublink-1">Typography</a> <a href="core#headings" class="sublink-1">Headings</a>
+				<a href="core#common-textual-elements" class="sublink-1">Common textual elements</a>
+				<a href="core#lists" class="sublink-1">Lists</a> <a href="core#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
+				<br/> <a href="grid#grid-title">Grid</a>
+				<a href="grid#basic-layout" class="sublink-1">Basic layout</a> <a href="grid#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
+				<a href="grid#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid#column-offset" class="sublink-1">Column offsets</a>
+				<a href="grid#column-reorder" class="sublink-1">Column reordering</a> <a href="grid#media-object" class="sublink-1">Media object pattern</a>
+				<br/> <a href="input_control#input-control-title">Input Control</a>
+				<a href="input_control#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control#switches" class="sublink-1">Switches</a>
+				<a href="input_control#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control#file-upload" class="sublink-1">File upload buttons</a>
+				<br/> <a href="navigation#navigation-title">Navigation</a>
+				<a href="navigation#header" class="sublink-1">Header</a> <a href="navigation#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation#drawer" class="sublink-1">Drawer</a>
+				<a href="navigation#footer" class="sublink-1">Footer</a> <a href="navigation#sticky" class="sublink-1">Sticky headers &amp; footers</a>
+				<br/> <a href="table#table-title">Table</a>
+				<a href="table#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a> <a href="table#scrollable-tables" class="sublink-1">Scrollable tables</a>
+				<a href="table#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
+				<br/> <a href="card#card-title">Card</a>
+				<a href="card#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card#sections-media" class="sublink-1">Sections &amp; media</a>
+				<a href="card#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a> <a href="card#color-variants" class="sublink-1">Card color variants</a>
+				<br/> <a href="tab#tab-title">Tab</a>
+				<a href="tab#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab#stacked-tabs" class="sublink-1">Stacked tabs</a>
+				<br/> <a href="contextual#contextual-title">Contextual</a>
+				<a href="contextual#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual#toasts" class="sublink-1">Toasts</a>
+				<a href="contextual#tooltips" class="sublink-1">Tooltips</a> <a href="contextual#modals" class="sublink-1">Modals</a>
+				<br/> <a href="progress#progress-title">Progress</a>
+				<a href="progress#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress#progress-variants" class="sublink-1">Progress bar variants</a>
+				<a href="progress#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress#spinner-variants" class="sublink-1">Donut spinner variants</a>
+				<br/> <a href="utility#utility-title">Utility</a>
+				<a href="utility#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
+				<a href="utility#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
+				<a href="utility#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility#breadcrumbs" class="sublink-1">Breadcrumbs</a>
+				<a href="utility#close-icon" class="sublink-1">Close icon</a>
+				<a href="flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
+				<a href="templates"><h4 style="margin-left: 0;">Templates</h4></a>
+				<a href="customization"><h4 style="margin-left: 0;">Customization</h4></a>
+				<a href="quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
 			</nav>
 				<div class="col-sm-12 col-md-8 col-lg-10" id="col"><main>
       <div class="row" style="padding-top: 40px;" id="card-title">
@@ -90,11 +90,11 @@
           <div class="card fluid">
             <div class="section">
               <h2>Quick overview</h2>
-              <p style="text-align: justify;">The main content of a website or web app needs to be easy to access and well organized no matter the nature of the content itself. The <strong>card</strong> module seeks to help deal with this problem, by utilizing the <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">Flexbox Layout</a> in order to provide general-purpose containers that help you present the information you want in the best possible way. Cards are designed in a very modern way, self-aligning and structuring their content based on your needs, while also being fully responsive to changes and compatible with the versatile <a href="grid.html"><strong>grid</strong></a> module to deliver the best experience on any device.</p><br>
+              <p style="text-align: justify;">The main content of a website or web app needs to be easy to access and well organized no matter the nature of the content itself. The <strong>card</strong> module seeks to help deal with this problem, by utilizing the <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">Flexbox Layout</a> in order to provide general-purpose containers that help you present the information you want in the best possible way. Cards are designed in a very modern way, self-aligning and structuring their content based on your needs, while also being fully responsive to changes and compatible with the versatile <a href="grid"><strong>grid</strong></a> module to deliver the best experience on any device.</p><br>
             </div>
             <div class="section">
               <h2>Quick start</h2>
-              <p style="text-align: justify;">To use the <strong>card</strong> module, simply include the link to the flavor you are using and start writing your HTML page as usual. Remember that the <strong>card</strong> module is heavily dependent on the <a href="grid.html"><strong>grid</strong></a> module, so you might want to first familiarize with its basic layout. One suggestion we will make is to add the following line inside your HTML page's <code>&lt;head&gt;</code> to utilize the viewport meta tag:</p>
+              <p style="text-align: justify;">To use the <strong>card</strong> module, simply include the link to the flavor you are using and start writing your HTML page as usual. Remember that the <strong>card</strong> module is heavily dependent on the <a href="grid"><strong>grid</strong></a> module, so you might want to first familiarize with its basic layout. One suggestion we will make is to add the following line inside your HTML page's <code>&lt;head&gt;</code> to utilize the viewport meta tag:</p>
               <pre>&lt;<span class="fore-tertiary">meta</span> <span class="fore-secondary">name</span>=<span class="fore-primary">&quot;viewport&quot;</span> <span class="fore-secondary">content</span>=<span class="fore-primary">&quot;width=device-width, initial-scale=1&quot;</span>&gt;</pre><br>
             </div>
           </div>
@@ -117,7 +117,7 @@
                 </div>
               </div>
               <div class="col-sm-12 col-sm-first col-md-12 col-md-normal">
-                <p style="text-align: justify;">To start using cards in your layout, you need to be somewhat familiar with the <a href="grid.html"><strong>grid</strong></a> module, so if you aren't, take a minute to read how its basic layout works. The basic syntax for cards is composed of three components, presented below in the order they should be added to the DOM tree:</p>
+                <p style="text-align: justify;">To start using cards in your layout, you need to be somewhat familiar with the <a href="grid"><strong>grid</strong></a> module, so if you aren't, take a minute to read how its basic layout works. The basic syntax for cards is composed of three components, presented below in the order they should be added to the DOM tree:</p>
                 <ol style="text-align: justify;">
                   <li>At the outermost level of the card layout syntax is a <code>.row</code>, which serves as a wrapper for all the cards inside it.</li>
                   <li>Inside the <code>.row</code>, cards are defined as <code>&lt;div&gt;</code> elements of the <code>.card</code> class.</li>
@@ -248,7 +248,7 @@
                 <li>The <code>.media</code> class might not be well supported in older browsers, especially legacy versions of Internet Explorer.</li>
                 <li>Due to the <code>.media</code> class using <a href="http://caniuse.com/#feat=object-fit"><code>object-fit</code></a>, you might want to use a polyfill for better browser support, especially if you are targeting Microsoft browsers. We recommend <a href="https://github.com/bfred-it/object-fit-images">this one</a> for images and <a href="https://github.com/jonathantneal/fitie">this one</a> for videos.</li>
                 <li>Depending on the source website, some embedded videos might not display properly inside a <code>.media</code> section.</li>
-                <li>The <code>.media</code> class has a preset size of <code>height: 200px</code>. If you want to customize this, you should check the <a href="customization.html">customization page</a> for instructions.</li>
+                <li>The <code>.media</code> class has a preset size of <code>height: 200px</code>. If you want to customize this, you should check the <a href="customization">customization page</a> for instructions.</li>
               </ul>
             </div>
           </div>
@@ -363,7 +363,7 @@
             <div class="section">
             <h3>Notes</h3>
               <ul style="text-align: justify;">
-                <li>If you want more color variants for your cards, check out the <a href="customization.html">customization</a> page.</li>
+                <li>If you want more color variants for your cards, check out the <a href="customization">customization</a> page.</li>
               </ul><hr>
               <div class="row">
                 <div class="col-sm-12"><pre>&lt;div class=&quot;card warning errors&quot;&gt;
@@ -380,7 +380,7 @@
       </div>
       <div class="row" style="padding-bottom: 20px; padding-top:20px;">
         <div class="col-sm-12">
-          <p style="text-align: justify;">If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules.html">modules page</a> and choose another module to see its documentation.</p>
+          <p style="text-align: justify;">If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules">modules page</a> and choose another module to see its documentation.</p>
         </div>
       </div>
     </main></div></div></div>

docs/contextual.html

@@ -31,54 +31,54 @@
   </head>
   <body>
 		<header class="sticky">
-			<a href="index.html" class="logo"><span id="header-logo">m</span></a>
+			<a href="index" class="logo"><span id="header-logo">m</span></a>
 				<label class="drawer-toggle button" for="navigation-toggle"></label>
-			<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
-			<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
-			<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">Quick Reference</a>
+			<a href="index" class="button hidden-sm">Introduction</a> <a href="modules" class="button hidden-sm">Modules</a>
+			<a href="flavors" class="button hidden-sm">Flavors</a> <a href="templates" class="button hidden-sm">Templates</a>
+			<a href="customization" class="button hidden-sm">Customization</a> <a href="quick_reference" class="button hidden-sm">Quick Reference</a>
 			<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
 		</header>
 		<div class="container" style="padding-left: 0.25rem;">
 			<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
 				<label class="close" for="navigation-toggle"></label>
-				<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
-				<h4 style="margin-left: 0;">Modules</h4> <a href="core.html#core-title">Core</a>
-				<a href="core.html#typography" class="sublink-1">Typography</a> <a href="core.html#headings" class="sublink-1">Headings</a>
-				<a href="core.html#common-textual-elements" class="sublink-1">Common textual elements</a>
-				<a href="core.html#lists" class="sublink-1">Lists</a> <a href="core.html#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
-				<br/> <a href="grid.html#grid-title">Grid</a>
-				<a href="grid.html#basic-layout" class="sublink-1">Basic layout</a> <a href="grid.html#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
-				<a href="grid.html#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid.html#column-offset" class="sublink-1">Column offsets</a>
-				<a href="grid.html#column-reorder" class="sublink-1">Column reordering</a> <a href="grid.html#media-object" class="sublink-1">Media object pattern</a>
-				<br/> <a href="input_control.html#input-control-title">Input Control</a>
-				<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control.html#switches" class="sublink-1">Switches</a>
-				<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#file-upload" class="sublink-1">File upload buttons</a>
-				<br/> <a href="navigation.html#navigation-title">Navigation</a>
-				<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation.html#drawer" class="sublink-1">Drawer</a>
-				<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers &amp; footers</a>
-				<br/> <a href="table.html#table-title">Table</a>
-				<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a> <a href="table.html#scrollable-tables" class="sublink-1">Scrollable tables</a>
-				<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
-				<br/> <a href="card.html#card-title">Card</a>
-				<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections &amp; media</a>
-				<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a> <a href="card.html#color-variants" class="sublink-1">Card color variants</a>
-				<br/> <a href="tab.html#tab-title">Tab</a>
-				<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
-				<br/> <a href="contextual.html#contextual-title">Contextual</a>
-				<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
-				<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
-				<br/> <a href="progress.html#progress-title">Progress</a>
-				<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
-				<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
-				<br/> <a href="utility.html#utility-title">Utility</a>
-				<a href="utility.html#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility.html#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
-				<a href="utility.html#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
-				<a href="utility.html#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
-				<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
-				<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
-				<a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
-				<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a>
-				<a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
+				<a href="index"><h4 style="margin-left: 0;">Introduction</h4></a>
+				<h4 style="margin-left: 0;">Modules</h4> <a href="core#core-title">Core</a>
+				<a href="core#typography" class="sublink-1">Typography</a> <a href="core#headings" class="sublink-1">Headings</a>
+				<a href="core#common-textual-elements" class="sublink-1">Common textual elements</a>
+				<a href="core#lists" class="sublink-1">Lists</a> <a href="core#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
+				<br/> <a href="grid#grid-title">Grid</a>
+				<a href="grid#basic-layout" class="sublink-1">Basic layout</a> <a href="grid#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
+				<a href="grid#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid#column-offset" class="sublink-1">Column offsets</a>
+				<a href="grid#column-reorder" class="sublink-1">Column reordering</a> <a href="grid#media-object" class="sublink-1">Media object pattern</a>
+				<br/> <a href="input_control#input-control-title">Input Control</a>
+				<a href="input_control#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control#switches" class="sublink-1">Switches</a>
+				<a href="input_control#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control#file-upload" class="sublink-1">File upload buttons</a>
+				<br/> <a href="navigation#navigation-title">Navigation</a>
+				<a href="navigation#header" class="sublink-1">Header</a> <a href="navigation#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation#drawer" class="sublink-1">Drawer</a>
+				<a href="navigation#footer" class="sublink-1">Footer</a> <a href="navigation#sticky" class="sublink-1">Sticky headers &amp; footers</a>
+				<br/> <a href="table#table-title">Table</a>
+				<a href="table#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a> <a href="table#scrollable-tables" class="sublink-1">Scrollable tables</a>
+				<a href="table#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
+				<br/> <a href="card#card-title">Card</a>
+				<a href="card#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card#sections-media" class="sublink-1">Sections &amp; media</a>
+				<a href="card#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a> <a href="card#color-variants" class="sublink-1">Card color variants</a>
+				<br/> <a href="tab#tab-title">Tab</a>
+				<a href="tab#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab#stacked-tabs" class="sublink-1">Stacked tabs</a>
+				<br/> <a href="contextual#contextual-title">Contextual</a>
+				<a href="contextual#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual#toasts" class="sublink-1">Toasts</a>
+				<a href="contextual#tooltips" class="sublink-1">Tooltips</a> <a href="contextual#modals" class="sublink-1">Modals</a>
+				<br/> <a href="progress#progress-title">Progress</a>
+				<a href="progress#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress#progress-variants" class="sublink-1">Progress bar variants</a>
+				<a href="progress#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress#spinner-variants" class="sublink-1">Donut spinner variants</a>
+				<br/> <a href="utility#utility-title">Utility</a>
+				<a href="utility#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
+				<a href="utility#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
+				<a href="utility#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility#breadcrumbs" class="sublink-1">Breadcrumbs</a>
+				<a href="utility#close-icon" class="sublink-1">Close icon</a>
+				<a href="flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
+				<a href="templates"><h4 style="margin-left: 0;">Templates</h4></a>
+				<a href="customization"><h4 style="margin-left: 0;">Customization</h4></a>
+				<a href="quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
 			</nav>
 				<div class="col-sm-12 col-md-8 col-lg-10"><main>
       <div class="row" style="padding-top: 40px;" id="contextual-title">
@@ -186,7 +186,7 @@
             <h3>Notes</h3>
               <ul>
                 <li>Toast elements do not have any pre-defined behavior. You should use your own Javascript code and interactive HTML elements to deal with showing and hiding them as necessary.</li>
-				<li>If you want to create your own color or size variants for toast messages, check out the <a href="customization.html">customization</a> page.</li>
+				<li>If you want to create your own color or size variants for toast messages, check out the <a href="customization">customization</a> page.</li>
               </ul><hr>
               <div class="row">
                 <div class="col-sm-12">
@@ -220,7 +220,7 @@
 			<h3>Notes</h3>
 			  <ul style="text-align:justify">
 				<li>Tooltips are built to be accessible and should display properly on screenreaders.</li>
-				<li>If you are not satisfied with the default tooltip colors, please check out the <a href="customization.html">customization page</a> for instuctions on how to create your own tooltip variants.</li>
+				<li>If you are not satisfied with the default tooltip colors, please check out the <a href="customization">customization page</a> for instuctions on how to create your own tooltip variants.</li>
 				<li>Remember to always add the <code><span class="fore-secondary">aria-label</span></code> attribute, otherwise your tooltip will not have any text to show.</li>
 			  </ul>
 			</div>
@@ -266,7 +266,7 @@
 					<div class="section">
 					<h3>Notes</h3>
 						<ul style="text-align: justify;">
-							<li>You can use any styles you want from the <strong><a href="card.html">card</a></strong> module to create different dialogs based on context (e.g. alerts, warnings etc.).</li>
+							<li>You can use any styles you want from the <strong><a href="card">card</a></strong> module to create different dialogs based on context (e.g. alerts, warnings etc.).</li>
 							<li>Remember to add a <code>&lt;label&gt;</code> linked to your modal dialog's <code>&lt;input <span class="fore-secondary">type</span>="<span class="fore-primary">checkbox</span>"&gt;</code> or use Javascript to alter its state, otherwise users will not be able to close the dialog.</li>
 							<li>You can place your modal dialog anywhere on your page, as long as the structure is not altered. You can also toggle it from anywhere on a page.</li>
 						</ul><hr>
@@ -300,7 +300,7 @@
 		</div>
       <div class="row" style="padding-bottom: 20px; padding-top:20px;">
         <div class="col-sm-12">
-          <p style="text-align:justify">If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules.html">modules page</a> and choose another module to see its documentation.</p>
+          <p style="text-align:justify">If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules">modules page</a> and choose another module to see its documentation.</p>
         </div>
       </div>
     </main></div></div></div>

docs/core.html

@@ -28,54 +28,54 @@
   </head>
   <body>
 		<header class="sticky">
-			<a href="index.html" class="logo"><span id="header-logo">m</span></a>
+			<a href="index" class="logo"><span id="header-logo">m</span></a>
 				<label class="drawer-toggle button" for="navigation-toggle"></label>
-			<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
-			<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
-			<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">Quick Reference</a>
+			<a href="index" class="button hidden-sm">Introduction</a> <a href="modules" class="button hidden-sm">Modules</a>
+			<a href="flavors" class="button hidden-sm">Flavors</a> <a href="templates" class="button hidden-sm">Templates</a>
+			<a href="customization" class="button hidden-sm">Customization</a> <a href="quick_reference" class="button hidden-sm">Quick Reference</a>
 			<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
 		</header>
 		<div class="container" style="padding-left: 0.25rem;">
 			<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
 				<label class="close" for="navigation-toggle"></label>
-				<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
-				<h4 style="margin-left: 0;">Modules</h4> <a href="core.html#core-title">Core</a>
-				<a href="core.html#typography" class="sublink-1">Typography</a> <a href="core.html#headings" class="sublink-1">Headings</a>
-				<a href="core.html#common-textual-elements" class="sublink-1">Common textual elements</a>
-				<a href="core.html#lists" class="sublink-1">Lists</a> <a href="core.html#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
-				<br/> <a href="grid.html#grid-title">Grid</a>
-				<a href="grid.html#basic-layout" class="sublink-1">Basic layout</a> <a href="grid.html#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
-				<a href="grid.html#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid.html#column-offset" class="sublink-1">Column offsets</a>
-				<a href="grid.html#column-reorder" class="sublink-1">Column reordering</a> <a href="grid.html#media-object" class="sublink-1">Media object pattern</a>
-				<br/> <a href="input_control.html#input-control-title">Input Control</a>
-				<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control.html#switches" class="sublink-1">Switches</a>
-				<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#file-upload" class="sublink-1">File upload buttons</a>
-				<br/> <a href="navigation.html#navigation-title">Navigation</a>
-				<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation.html#drawer" class="sublink-1">Drawer</a>
-				<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers &amp; footers</a>
-				<br/> <a href="table.html#table-title">Table</a>
-				<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a> <a href="table.html#scrollable-tables" class="sublink-1">Scrollable tables</a>
-				<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
-				<br/> <a href="card.html#card-title">Card</a>
-				<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections &amp; media</a>
-				<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a> <a href="card.html#color-variants" class="sublink-1">Card color variants</a>
-				<br/> <a href="tab.html#tab-title">Tab</a>
-				<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
-				<br/> <a href="contextual.html#contextual-title">Contextual</a>
-				<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
-				<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
-				<br/> <a href="progress.html#progress-title">Progress</a>
-				<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
-				<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
-				<br/> <a href="utility.html#utility-title">Utility</a>
-				<a href="utility.html#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility.html#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
-				<a href="utility.html#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
-				<a href="utility.html#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
-				<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
-				<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
-				<a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
-				<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a>
-				<a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
+				<a href="index"><h4 style="margin-left: 0;">Introduction</h4></a>
+				<h4 style="margin-left: 0;">Modules</h4> <a href="core#core-title">Core</a>
+				<a href="core#typography" class="sublink-1">Typography</a> <a href="core#headings" class="sublink-1">Headings</a>
+				<a href="core#common-textual-elements" class="sublink-1">Common textual elements</a>
+				<a href="core#lists" class="sublink-1">Lists</a> <a href="core#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
+				<br/> <a href="grid#grid-title">Grid</a>
+				<a href="grid#basic-layout" class="sublink-1">Basic layout</a> <a href="grid#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
+				<a href="grid#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid#column-offset" class="sublink-1">Column offsets</a>
+				<a href="grid#column-reorder" class="sublink-1">Column reordering</a> <a href="grid#media-object" class="sublink-1">Media object pattern</a>
+				<br/> <a href="input_control#input-control-title">Input Control</a>
+				<a href="input_control#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control#switches" class="sublink-1">Switches</a>
+				<a href="input_control#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control#file-upload" class="sublink-1">File upload buttons</a>
+				<br/> <a href="navigation#navigation-title">Navigation</a>
+				<a href="navigation#header" class="sublink-1">Header</a> <a href="navigation#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation#drawer" class="sublink-1">Drawer</a>
+				<a href="navigation#footer" class="sublink-1">Footer</a> <a href="navigation#sticky" class="sublink-1">Sticky headers &amp; footers</a>
+				<br/> <a href="table#table-title">Table</a>
+				<a href="table#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a> <a href="table#scrollable-tables" class="sublink-1">Scrollable tables</a>
+				<a href="table#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
+				<br/> <a href="card#card-title">Card</a>
+				<a href="card#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card#sections-media" class="sublink-1">Sections &amp; media</a>
+				<a href="card#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a> <a href="card#color-variants" class="sublink-1">Card color variants</a>
+				<br/> <a href="tab#tab-title">Tab</a>
+				<a href="tab#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab#stacked-tabs" class="sublink-1">Stacked tabs</a>
+				<br/> <a href="contextual#contextual-title">Contextual</a>
+				<a href="contextual#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual#toasts" class="sublink-1">Toasts</a>
+				<a href="contextual#tooltips" class="sublink-1">Tooltips</a> <a href="contextual#modals" class="sublink-1">Modals</a>
+				<br/> <a href="progress#progress-title">Progress</a>
+				<a href="progress#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress#progress-variants" class="sublink-1">Progress bar variants</a>
+				<a href="progress#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress#spinner-variants" class="sublink-1">Donut spinner variants</a>
+				<br/> <a href="utility#utility-title">Utility</a>
+				<a href="utility#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
+				<a href="utility#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
+				<a href="utility#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility#breadcrumbs" class="sublink-1">Breadcrumbs</a>
+				<a href="utility#close-icon" class="sublink-1">Close icon</a>
+				<a href="flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
+				<a href="templates"><h4 style="margin-left: 0;">Templates</h4></a>
+				<a href="customization"><h4 style="margin-left: 0;">Customization</h4></a>
+				<a href="quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
 			</nav>
 				<div class="col-sm-12 col-md-8 col-lg-10"><main>
 		      <div class="row" style="padding-top: 40px;" id="core-title">
@@ -119,7 +119,7 @@
 								<div class="section">
 		            <h3>Notes</h3>
 		              <ul style="text-align:justify">
-		                <li>Fluid typography is also included, but not enabled by default. If you want to try it out, check out the out the <a href="customization.html">customization</a> page.</li>
+		                <li>Fluid typography is also included, but not enabled by default. If you want to try it out, check out the out the <a href="customization">customization</a> page.</li>
 									</ul>
 								</div>
 		          </div>
@@ -246,7 +246,7 @@
 		      </div>
 		      <div class="row" style="padding-bottom: 20px; padding-top:20px;">
 		        <div class="col-sm-12">
-		          <p style="text-align: justify;">If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules.html">modules page</a> and choose another module to see its documentation.</p>
+		          <p style="text-align: justify;">If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules">modules page</a> and choose another module to see its documentation.</p>
 		        </div>
 		      </div>
     		</main></div></div></div>

docs/customization/card.html

@@ -30,52 +30,52 @@
   </head>
   <body>
 		<header class="sticky">
-			<a href="../index.html" class="logo"><span id="header-logo">m</span></a>
+			<a href="../index" class="logo"><span id="header-logo">m</span></a>
 				<label class="drawer-toggle button" for="navigation-toggle"></label>
-			<a href="../index.html" class="button hidden-sm">Introduction</a> <a href="../modules.html" class="button hidden-sm">Modules</a>
-			<a href="../flavors.html" class="button hidden-sm">Flavors</a> <a href="../templates.html" class="button hidden-sm">Templates</a>
-			<a href="index.html" class="button hidden-sm">Customization</a> <a href="../quick_reference.html" class="button hidden-sm">Quick Reference</a>
+			<a href="../index" class="button hidden-sm">Introduction</a> <a href="../modules" class="button hidden-sm">Modules</a>
+			<a href="../flavors" class="button hidden-sm">Flavors</a> <a href="../templates" class="button hidden-sm">Templates</a>
+			<a href="../customization" class="button hidden-sm">Customization</a> <a href="../quick_reference" class="button hidden-sm">Quick Reference</a>
 			<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
 		</header>
 		<div class="container" style="padding-left: 0.25rem;">
 			<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
 				<label class="close" for="navigation-toggle"></label>
-				<a href="../index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
-				<a href="../modules.html"><h4 style="margin-left: 0;">Modules</h4></a>
-				<a href="../flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
-				<a href="../templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
-				<h4 style="margin-left: 0;">Customization</h4> <a href="core.html#core-title">Core</a>
-				<a href="core.html#typography-headings" class="sublink-1">Typography &amp; headings</a>
-				<a href="core.html#common-elements" class="sublink-1">Common elements &amp; fixes</a>
-				<br/> <a href="grid.html#grid-title">Grid</a>
-				<a href="grid.html#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
-				<br/> <a href="input_control.html#input-control-title">Input Control</a>
-				<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control.html#switch" class="sublink-1">Switches</a>
-				<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control.html#switch-mixins" class="sublink-1">Switch mixins</a>
-				<br/> <a href="navigation.html#navigation-title">Navigation</a>
-				<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
-				<a href="navigation.html#drawer" class="sublink-1">Drawer</a> <a href="navigation.html#footer" class="sublink-1">Footer</a>
-				<br/> <a href="table.html#table-title">Table</a>
-				<a href="table.html#table-styling" class="sublink-1">Table styling</a>
-				<br/> <a href="card.html#card-title">Card</a>
-				<a href="card.html#cards-sections" class="sublink-1">Cards and sections</a> <a href="card.html#card-mixins" class="sublink-1">Card mixins</a>
-				<br/> <a href="tab.html#tab-title">Tab</a>
-				<a href="tab.html#tab-styling" class="sublink-1">Tab styling</a>
-				<br/> <a href="contextual.html#contextual-title">Contextual</a>
-				<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
-				<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
-				<a href="contextual.html#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
-				<a href="contextual.html#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual.html#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
-				<br/> <a href="progress.html#progress-title">Progress</a>
-				<a href="progress.html#progress-bar" class="sublink-1">Progress bar</a> <a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a>
-				<a href="progress.html#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress.html#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
-				<br/> <a href="utility.html#utility-title">Utility</a>
-				<a href="utility.html#visibility-legacy" class="sublink-1">Visibility helpers &amp; legacy features</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
-				<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
-				<a href="utility.html#borders-shadows-mixins" class="sublink-1">Generic border &amp; shadow mixins</a>
-				<a href="utility.html#responsive-sizing-mixins" class="sublink-1">Responsive sizing &amp; spacing mixins</a>
-				<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
-				<a href="../quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
+				<a href="../index"><h4 style="margin-left: 0;">Introduction</h4></a>
+				<a href="../modules"><h4 style="margin-left: 0;">Modules</h4></a>
+				<a href="../flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
+				<a href="../templates"><h4 style="margin-left: 0;">Templates</h4></a>
+				<h4 style="margin-left: 0;">Customization</h4> <a href="core#core-title">Core</a>
+				<a href="core#typography-headings" class="sublink-1">Typography &amp; headings</a>
+				<a href="core#common-elements" class="sublink-1">Common elements &amp; fixes</a>
+				<br/> <a href="grid#grid-title">Grid</a>
+				<a href="grid#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
+				<br/> <a href="input_control#input-control-title">Input Control</a>
+				<a href="input_control#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control#switch" class="sublink-1">Switches</a>
+				<a href="input_control#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control#switch-mixins" class="sublink-1">Switch mixins</a>
+				<br/> <a href="navigation#navigation-title">Navigation</a>
+				<a href="navigation#header" class="sublink-1">Header</a> <a href="navigation#navigation-bar" class="sublink-1">Navigation bar</a>
+				<a href="navigation#drawer" class="sublink-1">Drawer</a> <a href="navigation#footer" class="sublink-1">Footer</a>
+				<br/> <a href="table#table-title">Table</a>
+				<a href="table#table-styling" class="sublink-1">Table styling</a>
+				<br/> <a href="card#card-title">Card</a>
+				<a href="card#cards-sections" class="sublink-1">Cards and sections</a> <a href="card#card-mixins" class="sublink-1">Card mixins</a>
+				<br/> <a href="tab#tab-title">Tab</a>
+				<a href="tab#tab-styling" class="sublink-1">Tab styling</a>
+				<br/> <a href="contextual#contextual-title">Contextual</a>
+				<a href="contextual#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual#toasts" class="sublink-1">Toasts</a>
+				<a href="contextual#tooltips" class="sublink-1">Tooltips</a> <a href="contextual#modals" class="sublink-1">Modals</a>
+				<a href="contextual#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
+				<a href="contextual#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
+				<br/> <a href="progress#progress-title">Progress</a>
+				<a href="progress#progress-bar" class="sublink-1">Progress bar</a> <a href="progress#donut-spinner" class="sublink-1">Donut spinner</a>
+				<a href="progress#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
+				<br/> <a href="utility#utility-title">Utility</a>
+				<a href="utility#visibility-legacy" class="sublink-1">Visibility helpers &amp; legacy features</a> <a href="utility#breadcrumbs" class="sublink-1">Breadcrumbs</a>
+				<a href="utility#close-icon" class="sublink-1">Close icon</a>
+				<a href="utility#borders-shadows-mixins" class="sublink-1">Generic border &amp; shadow mixins</a>
+				<a href="utility#responsive-sizing-mixins" class="sublink-1">Responsive sizing &amp; spacing mixins</a>
+				<a href="utility#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
+				<a href="../quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
 			</nav>
 				<div class="col-sm-12 col-md-8 col-lg-10"><main>
       <div class="row" style="padding-top: 40px;" id="card-title">
@@ -89,7 +89,7 @@
           <div class="card fluid">
             <div class="section">
               <h2>Quick overview</h2>
-              <p style="text-align:justify">The main content of a website or web app needs to be easy to access and well organized no matter the nature of the content itself. The <strong>card</strong> module seeks to help deal with this problem, by utilizing the <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">Flexbox Layout</a> in order to provide general-purpose containers that help you present the information you want in the best possible way. Cards are designed in a very modern way, self-aligning and structuring their content based on your needs, while also being fully responsive to changes and compatible with the versatile <a href="grid.html"><strong>grid</strong></a> module to deliver the best experience on any device.</p><br>
+              <p style="text-align:justify">The main content of a website or web app needs to be easy to access and well organized no matter the nature of the content itself. The <strong>card</strong> module seeks to help deal with this problem, by utilizing the <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">Flexbox Layout</a> in order to provide general-purpose containers that help you present the information you want in the best possible way. Cards are designed in a very modern way, self-aligning and structuring their content based on your needs, while also being fully responsive to changes and compatible with the versatile <a href="grid"><strong>grid</strong></a> module to deliver the best experience on any device.</p><br>
             </div>
             <div class="section">
 							<h2>Quick start</h2>
@@ -315,7 +315,7 @@
 
 			<div class="row" style="padding-bottom: 20px; padding-top:20px;">
         <div class="col-sm-12">
-          <p style="text-align:justify">If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="index.html">customization page</a> or choose a module from the top menu to see its documentation.</p>
+          <p style="text-align:justify">If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="../customization">customization page</a> or choose a module from the top menu to see its documentation.</p>
         </div>
       </div>
     </main></div></div></div>

docs/customization/contextual.html

@@ -29,52 +29,52 @@
   </head>
   <body>
 		<header class="sticky">
-			<a href="../index.html" class="logo"><span id="header-logo">m</span></a>
+			<a href="../index" class="logo"><span id="header-logo">m</span></a>
 				<label class="drawer-toggle button" for="navigation-toggle"></label>
-			<a href="../index.html" class="button hidden-sm">Introduction</a> <a href="../modules.html" class="button hidden-sm">Modules</a>
-			<a href="../flavors.html" class="button hidden-sm">Flavors</a> <a href="../templates.html" class="button hidden-sm">Templates</a>
-			<a href="index.html" class="button hidden-sm">Customization</a> <a href="../quick_reference.html" class="button hidden-sm">Quick Reference</a>
+			<a href="../index" class="button hidden-sm">Introduction</a> <a href="../modules" class="button hidden-sm">Modules</a>
+			<a href="../flavors" class="button hidden-sm">Flavors</a> <a href="../templates" class="button hidden-sm">Templates</a>
+			<a href="../customization" class="button hidden-sm">Customization</a> <a href="../quick_reference" class="button hidden-sm">Quick Reference</a>
 			<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
 		</header>
 		<div class="container" style="padding-left: 0.25rem;">
 			<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
 				<label class="close" for="navigation-toggle"></label>
-				<a href="../index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
-				<a href="../modules.html"><h4 style="margin-left: 0;">Modules</h4></a>
-				<a href="../flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
-				<a href="../templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
-				<h4 style="margin-left: 0;">Customization</h4> <a href="core.html#core-title">Core</a>
-				<a href="core.html#typography-headings" class="sublink-1">Typography &amp; headings</a>
-				<a href="core.html#common-elements" class="sublink-1">Common elements &amp; fixes</a>
-				<br/> <a href="grid.html#grid-title">Grid</a>
-				<a href="grid.html#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
-				<br/> <a href="input_control.html#input-control-title">Input Control</a>
-				<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control.html#switch" class="sublink-1">Switches</a>
-				<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control.html#switch-mixins" class="sublink-1">Switch mixins</a>
-				<br/> <a href="navigation.html#navigation-title">Navigation</a>
-				<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
-				<a href="navigation.html#drawer" class="sublink-1">Drawer</a> <a href="navigation.html#footer" class="sublink-1">Footer</a>
-				<br/> <a href="table.html#table-title">Table</a>
-				<a href="table.html#table-styling" class="sublink-1">Table styling</a>
-				<br/> <a href="card.html#card-title">Card</a>
-				<a href="card.html#cards-sections" class="sublink-1">Cards and sections</a> <a href="card.html#card-mixins" class="sublink-1">Card mixins</a>
-				<br/> <a href="tab.html#tab-title">Tab</a>
-				<a href="tab.html#tab-styling" class="sublink-1">Tab styling</a>
-				<br/> <a href="contextual.html#contextual-title">Contextual</a>
-				<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
-				<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
-				<a href="contextual.html#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
-				<a href="contextual.html#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual.html#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
-				<br/> <a href="progress.html#progress-title">Progress</a>
-				<a href="progress.html#progress-bar" class="sublink-1">Progress bar</a> <a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a>
-				<a href="progress.html#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress.html#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
-				<br/> <a href="utility.html#utility-title">Utility</a>
-				<a href="utility.html#visibility-legacy" class="sublink-1">Visibility helpers &amp; legacy features</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
-				<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
-				<a href="utility.html#borders-shadows-mixins" class="sublink-1">Generic border &amp; shadow mixins</a>
-				<a href="utility.html#responsive-sizing-mixins" class="sublink-1">Responsive sizing &amp; spacing mixins</a>
-				<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
-				<a href="../quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
+				<a href="../index"><h4 style="margin-left: 0;">Introduction</h4></a>
+				<a href="../modules"><h4 style="margin-left: 0;">Modules</h4></a>
+				<a href="../flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
+				<a href="../templates"><h4 style="margin-left: 0;">Templates</h4></a>
+				<h4 style="margin-left: 0;">Customization</h4> <a href="core#core-title">Core</a>
+				<a href="core#typography-headings" class="sublink-1">Typography &amp; headings</a>
+				<a href="core#common-elements" class="sublink-1">Common elements &amp; fixes</a>
+				<br/> <a href="grid#grid-title">Grid</a>
+				<a href="grid#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
+				<br/> <a href="input_control#input-control-title">Input Control</a>
+				<a href="input_control#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control#switch" class="sublink-1">Switches</a>
+				<a href="input_control#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control#switch-mixins" class="sublink-1">Switch mixins</a>
+				<br/> <a href="navigation#navigation-title">Navigation</a>
+				<a href="navigation#header" class="sublink-1">Header</a> <a href="navigation#navigation-bar" class="sublink-1">Navigation bar</a>
+				<a href="navigation#drawer" class="sublink-1">Drawer</a> <a href="navigation#footer" class="sublink-1">Footer</a>
+				<br/> <a href="table#table-title">Table</a>
+				<a href="table#table-styling" class="sublink-1">Table styling</a>
+				<br/> <a href="card#card-title">Card</a>
+				<a href="card#cards-sections" class="sublink-1">Cards and sections</a> <a href="card#card-mixins" class="sublink-1">Card mixins</a>
+				<br/> <a href="tab#tab-title">Tab</a>
+				<a href="tab#tab-styling" class="sublink-1">Tab styling</a>
+				<br/> <a href="contextual#contextual-title">Contextual</a>
+				<a href="contextual#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual#toasts" class="sublink-1">Toasts</a>
+				<a href="contextual#tooltips" class="sublink-1">Tooltips</a> <a href="contextual#modals" class="sublink-1">Modals</a>
+				<a href="contextual#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
+				<a href="contextual#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
+				<br/> <a href="progress#progress-title">Progress</a>
+				<a href="progress#progress-bar" class="sublink-1">Progress bar</a> <a href="progress#donut-spinner" class="sublink-1">Donut spinner</a>
+				<a href="progress#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
+				<br/> <a href="utility#utility-title">Utility</a>
+				<a href="utility#visibility-legacy" class="sublink-1">Visibility helpers &amp; legacy features</a> <a href="utility#breadcrumbs" class="sublink-1">Breadcrumbs</a>
+				<a href="utility#close-icon" class="sublink-1">Close icon</a>
+				<a href="utility#borders-shadows-mixins" class="sublink-1">Generic border &amp; shadow mixins</a>
+				<a href="utility#responsive-sizing-mixins" class="sublink-1">Responsive sizing &amp; spacing mixins</a>
+				<a href="utility#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
+				<a href="../quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
 			</nav>
 				<div class="col-sm-12 col-md-8 col-lg-10"><main>
       <div class="row" style="padding-top: 40px;" id="contextual-title">
@@ -575,7 +575,7 @@
 
 			<div class="row" style="padding-bottom: 20px; padding-top:20px;">
 				<div class="col-sm-12">
-					<p style="text-align:justify">If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="index.html">customization page</a> or choose a module from the top menu to see its documentation.</p>
+					<p style="text-align:justify">If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="../customization">customization page</a> or choose a module from the top menu to see its documentation.</p>
 				</div>
 			</div>
     </main></div></div></div>

docs/customization/core.html

@@ -29,52 +29,52 @@
   </head>
   <body>
 		<header class="sticky">
-			<a href="../index.html" class="logo"><span id="header-logo">m</span></a>
+			<a href="../index" class="logo"><span id="header-logo">m</span></a>
 				<label class="drawer-toggle button" for="navigation-toggle"></label>
-			<a href="../index.html" class="button hidden-sm">Introduction</a> <a href="../modules.html" class="button hidden-sm">Modules</a>
-			<a href="../flavors.html" class="button hidden-sm">Flavors</a> <a href="../templates.html" class="button hidden-sm">Templates</a>
-			<a href="index.html" class="button hidden-sm">Customization</a> <a href="../quick_reference.html" class="button hidden-sm">Quick Reference</a>
+			<a href="../index" class="button hidden-sm">Introduction</a> <a href="../modules" class="button hidden-sm">Modules</a>
+			<a href="../flavors" class="button hidden-sm">Flavors</a> <a href="../templates" class="button hidden-sm">Templates</a>
+			<a href="../customization" class="button hidden-sm">Customization</a> <a href="../quick_reference" class="button hidden-sm">Quick Reference</a>
 			<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
 		</header>
 		<div class="container" style="padding-left: 0.25rem;">
 			<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
 				<label class="close" for="navigation-toggle"></label>
-				<a href="../index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
-				<a href="../modules.html"><h4 style="margin-left: 0;">Modules</h4></a>
-				<a href="../flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
-				<a href="../templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
-				<h4 style="margin-left: 0;">Customization</h4> <a href="core.html#core-title">Core</a>
-				<a href="core.html#typography-headings" class="sublink-1">Typography &amp; headings</a>
-				<a href="core.html#common-elements" class="sublink-1">Common elements &amp; fixes</a>
-				<br/> <a href="grid.html#grid-title">Grid</a>
-				<a href="grid.html#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
-				<br/> <a href="input_control.html#input-control-title">Input Control</a>
-				<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control.html#switch" class="sublink-1">Switches</a>
-				<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control.html#switch-mixins" class="sublink-1">Switch mixins</a>
-				<br/> <a href="navigation.html#navigation-title">Navigation</a>
-				<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
-				<a href="navigation.html#drawer" class="sublink-1">Drawer</a> <a href="navigation.html#footer" class="sublink-1">Footer</a>
-				<br/> <a href="table.html#table-title">Table</a>
-				<a href="table.html#table-styling" class="sublink-1">Table styling</a>
-				<br/> <a href="card.html#card-title">Card</a>
-				<a href="card.html#cards-sections" class="sublink-1">Cards and sections</a> <a href="card.html#card-mixins" class="sublink-1">Card mixins</a>
-				<br/> <a href="tab.html#tab-title">Tab</a>
-				<a href="tab.html#tab-styling" class="sublink-1">Tab styling</a>
-				<br/> <a href="contextual.html#contextual-title">Contextual</a>
-				<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
-				<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
-				<a href="contextual.html#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
-				<a href="contextual.html#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual.html#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
-				<br/> <a href="progress.html#progress-title">Progress</a>
-				<a href="progress.html#progress-bar" class="sublink-1">Progress bar</a> <a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a>
-				<a href="progress.html#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress.html#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
-				<br/> <a href="utility.html#utility-title">Utility</a>
-				<a href="utility.html#visibility-legacy" class="sublink-1">Visibility helpers &amp; legacy features</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
-				<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
-				<a href="utility.html#borders-shadows-mixins" class="sublink-1">Generic border &amp; shadow mixins</a>
-				<a href="utility.html#responsive-sizing-mixins" class="sublink-1">Responsive sizing &amp; spacing mixins</a>
-				<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
-				<a href="../quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
+				<a href="../index"><h4 style="margin-left: 0;">Introduction</h4></a>
+				<a href="../modules"><h4 style="margin-left: 0;">Modules</h4></a>
+				<a href="../flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
+				<a href="../templates"><h4 style="margin-left: 0;">Templates</h4></a>
+				<h4 style="margin-left: 0;">Customization</h4> <a href="core#core-title">Core</a>
+				<a href="core#typography-headings" class="sublink-1">Typography &amp; headings</a>
+				<a href="core#common-elements" class="sublink-1">Common elements &amp; fixes</a>
+				<br/> <a href="grid#grid-title">Grid</a>
+				<a href="grid#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
+				<br/> <a href="input_control#input-control-title">Input Control</a>
+				<a href="input_control#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control#switch" class="sublink-1">Switches</a>
+				<a href="input_control#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control#switch-mixins" class="sublink-1">Switch mixins</a>
+				<br/> <a href="navigation#navigation-title">Navigation</a>
+				<a href="navigation#header" class="sublink-1">Header</a> <a href="navigation#navigation-bar" class="sublink-1">Navigation bar</a>
+				<a href="navigation#drawer" class="sublink-1">Drawer</a> <a href="navigation#footer" class="sublink-1">Footer</a>
+				<br/> <a href="table#table-title">Table</a>
+				<a href="table#table-styling" class="sublink-1">Table styling</a>
+				<br/> <a href="card#card-title">Card</a>
+				<a href="card#cards-sections" class="sublink-1">Cards and sections</a> <a href="card#card-mixins" class="sublink-1">Card mixins</a>
+				<br/> <a href="tab#tab-title">Tab</a>
+				<a href="tab#tab-styling" class="sublink-1">Tab styling</a>
+				<br/> <a href="contextual#contextual-title">Contextual</a>
+				<a href="contextual#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual#toasts" class="sublink-1">Toasts</a>
+				<a href="contextual#tooltips" class="sublink-1">Tooltips</a> <a href="contextual#modals" class="sublink-1">Modals</a>
+				<a href="contextual#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
+				<a href="contextual#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
+				<br/> <a href="progress#progress-title">Progress</a>
+				<a href="progress#progress-bar" class="sublink-1">Progress bar</a> <a href="progress#donut-spinner" class="sublink-1">Donut spinner</a>
+				<a href="progress#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
+				<br/> <a href="utility#utility-title">Utility</a>
+				<a href="utility#visibility-legacy" class="sublink-1">Visibility helpers &amp; legacy features</a> <a href="utility#breadcrumbs" class="sublink-1">Breadcrumbs</a>
+				<a href="utility#close-icon" class="sublink-1">Close icon</a>
+				<a href="utility#borders-shadows-mixins" class="sublink-1">Generic border &amp; shadow mixins</a>
+				<a href="utility#responsive-sizing-mixins" class="sublink-1">Responsive sizing &amp; spacing mixins</a>
+				<a href="utility#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
+				<a href="../quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
 			</nav>
 				<div class="col-sm-12 col-md-8 col-lg-10"><main>
       <div class="row" style="padding-top: 40px;" id="core-title">
@@ -517,7 +517,7 @@
 
       <div class="row" style="padding-bottom: 20px; padding-top:20px;">
         <div class="col-sm-12">
-          <p style="text-align:justify">If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="index.html">customization page</a> or choose a module from the top menu to see its documentation.</p>
+          <p style="text-align:justify">If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="../customization">customization page</a> or choose a module from the top menu to see its documentation.</p>
         </div>
       </div>
     </main></div></div></div>

docs/customization/grid.html

@@ -31,52 +31,52 @@
   </head>
   <body>
 		<header class="sticky">
-			<a href="../index.html" class="logo"><span id="header-logo">m</span></a>
+			<a href="../index" class="logo"><span id="header-logo">m</span></a>
 				<label class="drawer-toggle button" for="navigation-toggle"></label>
-			<a href="../index.html" class="button hidden-sm">Introduction</a> <a href="../modules.html" class="button hidden-sm">Modules</a>
-			<a href="../flavors.html" class="button hidden-sm">Flavors</a> <a href="../templates.html" class="button hidden-sm">Templates</a>
-			<a href="index.html" class="button hidden-sm">Customization</a> <a href="../quick_reference.html" class="button hidden-sm">Quick Reference</a>
+			<a href="../index" class="button hidden-sm">Introduction</a> <a href="../modules" class="button hidden-sm">Modules</a>
+			<a href="../flavors" class="button hidden-sm">Flavors</a> <a href="../templates" class="button hidden-sm">Templates</a>
+			<a href="../customization" class="button hidden-sm">Customization</a> <a href="../quick_reference" class="button hidden-sm">Quick Reference</a>
 			<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
 		</header>
 		<div class="container" style="padding-left: 0.25rem;">
 			<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
 				<label class="close" for="navigation-toggle"></label>
-				<a href="../index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
-				<a href="../modules.html"><h4 style="margin-left: 0;">Modules</h4></a>
-				<a href="../flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
-				<a href="../templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
-				<h4 style="margin-left: 0;">Customization</h4> <a href="core.html#core-title">Core</a>
-				<a href="core.html#typography-headings" class="sublink-1">Typography &amp; headings</a>
-				<a href="core.html#common-elements" class="sublink-1">Common elements &amp; fixes</a>
-				<br/> <a href="grid.html#grid-title">Grid</a>
-				<a href="grid.html#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
-				<br/> <a href="input_control.html#input-control-title">Input Control</a>
-				<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control.html#switch" class="sublink-1">Switches</a>
-				<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control.html#switch-mixins" class="sublink-1">Switch mixins</a>
-				<br/> <a href="navigation.html#navigation-title">Navigation</a>
-				<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
-				<a href="navigation.html#drawer" class="sublink-1">Drawer</a> <a href="navigation.html#footer" class="sublink-1">Footer</a>
-				<br/> <a href="table.html#table-title">Table</a>
-				<a href="table.html#table-styling" class="sublink-1">Table styling</a>
-				<br/> <a href="card.html#card-title">Card</a>
-				<a href="card.html#cards-sections" class="sublink-1">Cards and sections</a> <a href="card.html#card-mixins" class="sublink-1">Card mixins</a>
-				<br/> <a href="tab.html#tab-title">Tab</a>
-				<a href="tab.html#tab-styling" class="sublink-1">Tab styling</a>
-				<br/> <a href="contextual.html#contextual-title">Contextual</a>
-				<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
-				<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
-				<a href="contextual.html#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
-				<a href="contextual.html#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual.html#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
-				<br/> <a href="progress.html#progress-title">Progress</a>
-				<a href="progress.html#progress-bar" class="sublink-1">Progress bar</a> <a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a>
-				<a href="progress.html#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress.html#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
-				<br/> <a href="utility.html#utility-title">Utility</a>
-				<a href="utility.html#visibility-legacy" class="sublink-1">Visibility helpers &amp; legacy features</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
-				<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
-				<a href="utility.html#borders-shadows-mixins" class="sublink-1">Generic border &amp; shadow mixins</a>
-				<a href="utility.html#responsive-sizing-mixins" class="sublink-1">Responsive sizing &amp; spacing mixins</a>
-				<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
-				<a href="../quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
+				<a href="../index"><h4 style="margin-left: 0;">Introduction</h4></a>
+				<a href="../modules"><h4 style="margin-left: 0;">Modules</h4></a>
+				<a href="../flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
+				<a href="../templates"><h4 style="margin-left: 0;">Templates</h4></a>
+				<h4 style="margin-left: 0;">Customization</h4> <a href="core#core-title">Core</a>
+				<a href="core#typography-headings" class="sublink-1">Typography &amp; headings</a>
+				<a href="core#common-elements" class="sublink-1">Common elements &amp; fixes</a>
+				<br/> <a href="grid#grid-title">Grid</a>
+				<a href="grid#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
+				<br/> <a href="input_control#input-control-title">Input Control</a>
+				<a href="input_control#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control#switch" class="sublink-1">Switches</a>
+				<a href="input_control#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control#switch-mixins" class="sublink-1">Switch mixins</a>
+				<br/> <a href="navigation#navigation-title">Navigation</a>
+				<a href="navigation#header" class="sublink-1">Header</a> <a href="navigation#navigation-bar" class="sublink-1">Navigation bar</a>
+				<a href="navigation#drawer" class="sublink-1">Drawer</a> <a href="navigation#footer" class="sublink-1">Footer</a>
+				<br/> <a href="table#table-title">Table</a>
+				<a href="table#table-styling" class="sublink-1">Table styling</a>
+				<br/> <a href="card#card-title">Card</a>
+				<a href="card#cards-sections" class="sublink-1">Cards and sections</a> <a href="card#card-mixins" class="sublink-1">Card mixins</a>
+				<br/> <a href="tab#tab-title">Tab</a>
+				<a href="tab#tab-styling" class="sublink-1">Tab styling</a>
+				<br/> <a href="contextual#contextual-title">Contextual</a>
+				<a href="contextual#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual#toasts" class="sublink-1">Toasts</a>
+				<a href="contextual#tooltips" class="sublink-1">Tooltips</a> <a href="contextual#modals" class="sublink-1">Modals</a>
+				<a href="contextual#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
+				<a href="contextual#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
+				<br/> <a href="progress#progress-title">Progress</a>
+				<a href="progress#progress-bar" class="sublink-1">Progress bar</a> <a href="progress#donut-spinner" class="sublink-1">Donut spinner</a>
+				<a href="progress#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
+				<br/> <a href="utility#utility-title">Utility</a>
+				<a href="utility#visibility-legacy" class="sublink-1">Visibility helpers &amp; legacy features</a> <a href="utility#breadcrumbs" class="sublink-1">Breadcrumbs</a>
+				<a href="utility#close-icon" class="sublink-1">Close icon</a>
+				<a href="utility#borders-shadows-mixins" class="sublink-1">Generic border &amp; shadow mixins</a>
+				<a href="utility#responsive-sizing-mixins" class="sublink-1">Responsive sizing &amp; spacing mixins</a>
+				<a href="utility#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
+				<a href="../quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
 			</nav>
 				<div class="col-sm-12 col-md-8 col-lg-10"><main>
       <div class="row" style="padding-top: 40px;" id="grid-title">
@@ -208,7 +208,7 @@
 
 			<div class="row" style="padding-bottom: 20px; padding-top:20px;">
 				<div class="col-sm-12">
-					<p style="text-align:justify">If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="index.html">customization page</a> or choose a module from the top menu to see its documentation.</p>
+					<p style="text-align:justify">If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="../customization">customization page</a> or choose a module from the top menu to see its documentation.</p>
 				</div>
 			</div>
     </main></div></div></div>

docs/customization/index.html

@@ -28,58 +28,58 @@
   </head>
   <body>
 		<header class="sticky">
-			<a href="../index.html" class="logo"><span id="header-logo">m</span></a>
+			<a href="../index" class="logo"><span id="header-logo">m</span></a>
 				<label class="drawer-toggle button" for="navigation-toggle"></label>
-			<a href="../index.html" class="button hidden-sm">Introduction</a> <a href="../modules.html" class="button hidden-sm">Modules</a>
-			<a href="../flavors.html" class="button hidden-sm">Flavors</a> <a href="../templates.html" class="button hidden-sm">Templates</a>
-			<a href="index.html" class="button hidden-sm">Customization</a> <a href="../quick_reference.html" class="button hidden-sm">Quick Reference</a>
+			<a href="../index" class="button hidden-sm">Introduction</a> <a href="../modules" class="button hidden-sm">Modules</a>
+			<a href="../flavors" class="button hidden-sm">Flavors</a> <a href="../templates" class="button hidden-sm">Templates</a>
+			<a href="../customization" class="button hidden-sm">Customization</a> <a href="../quick_reference" class="button hidden-sm">Quick Reference</a>
 			<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
 		</header>
 		<div class="container" style="padding-left: 0.25rem;">
 			<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
 				<label class="close" for="navigation-toggle"></label>
-				<a href="../index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
-				<a href="../modules.html"><h4 style="margin-left: 0;">Modules</h4></a>
-				<a href="../flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
-				<a href="../templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
-				<h4 style="margin-left: 0;">Customization</h4> <a href="core.html#core-title">Core</a>
-				<a href="core.html#typography-headings" class="sublink-1">Typography &amp; headings</a>
-				<a href="core.html#common-elements" class="sublink-1">Common elements &amp; fixes</a>
-				<br/> <a href="grid.html#grid-title">Grid</a>
-				<a href="grid.html#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
-				<br/> <a href="input_control.html#input-control-title">Input Control</a>
-				<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control.html#switch" class="sublink-1">Switches</a>
-				<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control.html#switch-mixins" class="sublink-1">Switch mixins</a>
-				<br/> <a href="navigation.html#navigation-title">Navigation</a>
-				<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
-				<a href="navigation.html#drawer" class="sublink-1">Drawer</a> <a href="navigation.html#footer" class="sublink-1">Footer</a>
-				<br/> <a href="table.html#table-title">Table</a>
-				<a href="table.html#table-styling" class="sublink-1">Table styling</a>
-				<br/> <a href="card.html#card-title">Card</a>
-				<a href="card.html#cards-sections" class="sublink-1">Cards and sections</a> <a href="card.html#card-mixins" class="sublink-1">Card mixins</a>
-				<br/> <a href="tab.html#tab-title">Tab</a>
-				<a href="tab.html#tab-styling" class="sublink-1">Tab styling</a>
-				<br/> <a href="contextual.html#contextual-title">Contextual</a>
-				<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
-				<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
-				<a href="contextual.html#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
-				<a href="contextual.html#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual.html#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
-				<br/> <a href="progress.html#progress-title">Progress</a>
-				<a href="progress.html#progress-bar" class="sublink-1">Progress bar</a> <a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a>
-				<a href="progress.html#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress.html#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
-				<br/> <a href="utility.html#utility-title">Utility</a>
-				<a href="utility.html#visibility-legacy" class="sublink-1">Visibility helpers &amp; legacy features</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
-				<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
-				<a href="utility.html#borders-shadows-mixins" class="sublink-1">Generic border &amp; shadow mixins</a>
-				<a href="utility.html#responsive-sizing-mixins" class="sublink-1">Responsive sizing &amp; spacing mixins</a>
-				<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
-				<a href="../quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
+				<a href="../index"><h4 style="margin-left: 0;">Introduction</h4></a>
+				<a href="../modules"><h4 style="margin-left: 0;">Modules</h4></a>
+				<a href="../flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
+				<a href="../templates"><h4 style="margin-left: 0;">Templates</h4></a>
+				<h4 style="margin-left: 0;">Customization</h4> <a href="core#core-title">Core</a>
+				<a href="core#typography-headings" class="sublink-1">Typography &amp; headings</a>
+				<a href="core#common-elements" class="sublink-1">Common elements &amp; fixes</a>
+				<br/> <a href="grid#grid-title">Grid</a>
+				<a href="grid#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
+				<br/> <a href="input_control#input-control-title">Input Control</a>
+				<a href="input_control#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control#switch" class="sublink-1">Switches</a>
+				<a href="input_control#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control#switch-mixins" class="sublink-1">Switch mixins</a>
+				<br/> <a href="navigation#navigation-title">Navigation</a>
+				<a href="navigation#header" class="sublink-1">Header</a> <a href="navigation#navigation-bar" class="sublink-1">Navigation bar</a>
+				<a href="navigation#drawer" class="sublink-1">Drawer</a> <a href="navigation#footer" class="sublink-1">Footer</a>
+				<br/> <a href="table#table-title">Table</a>
+				<a href="table#table-styling" class="sublink-1">Table styling</a>
+				<br/> <a href="card#card-title">Card</a>
+				<a href="card#cards-sections" class="sublink-1">Cards and sections</a> <a href="card#card-mixins" class="sublink-1">Card mixins</a>
+				<br/> <a href="tab#tab-title">Tab</a>
+				<a href="tab#tab-styling" class="sublink-1">Tab styling</a>
+				<br/> <a href="contextual#contextual-title">Contextual</a>
+				<a href="contextual#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual#toasts" class="sublink-1">Toasts</a>
+				<a href="contextual#tooltips" class="sublink-1">Tooltips</a> <a href="contextual#modals" class="sublink-1">Modals</a>
+				<a href="contextual#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
+				<a href="contextual#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
+				<br/> <a href="progress#progress-title">Progress</a>
+				<a href="progress#progress-bar" class="sublink-1">Progress bar</a> <a href="progress#donut-spinner" class="sublink-1">Donut spinner</a>
+				<a href="progress#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
+				<br/> <a href="utility#utility-title">Utility</a>
+				<a href="utility#visibility-legacy" class="sublink-1">Visibility helpers &amp; legacy features</a> <a href="utility#breadcrumbs" class="sublink-1">Breadcrumbs</a>
+				<a href="utility#close-icon" class="sublink-1">Close icon</a>
+				<a href="utility#borders-shadows-mixins" class="sublink-1">Generic border &amp; shadow mixins</a>
+				<a href="utility#responsive-sizing-mixins" class="sublink-1">Responsive sizing &amp; spacing mixins</a>
+				<a href="utility#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
+				<a href="../quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
 			</nav>
 				<div class="col-sm-12 col-md-8 col-lg-10"><main>
 			<div class="row" style="padding-top: 40px;">
         <div class="col-sm-12">
           <h1>Customization</h1>
-					<p  style="text-align:justify"><strong>mini.css</strong> is built in such a way that customization is really simple. You could try out one of the <a href="../flavors.html">pre-defined flavors</a>, if you want, in order to get used to the framework and build something quickly and easily. However, many projects require custom styles and color palettes, which is when you need to get your hands dirty and start creating your own flavor by customizing an existing one and using mixins and variables to create your own, unique style for your brand or product. This page, along with the rest of the <strong>Customization</strong> section is aimed at developers who want to tweak the code provided with <strong>mini.css</strong> to create their own flavors for their projects, as well as active maintainers of the framework and people who just want to understand the inner workings of the codebase.</p>
+					<p  style="text-align:justify"><strong>mini.css</strong> is built in such a way that customization is really simple. You could try out one of the <a href="../flavors">pre-defined flavors</a>, if you want, in order to get used to the framework and build something quickly and easily. However, many projects require custom styles and color palettes, which is when you need to get your hands dirty and start creating your own flavor by customizing an existing one and using mixins and variables to create your own, unique style for your brand or product. This page, along with the rest of the <strong>Customization</strong> section is aimed at developers who want to tweak the code provided with <strong>mini.css</strong> to create their own flavors for their projects, as well as active maintainers of the framework and people who just want to understand the inner workings of the codebase.</p>
 					<p  style="text-align:justify">Use the menu to quickly jump to the documentation of any module that you want to check out. We strongly recommend, however, that you read the general information provided in this page before you start exploring the modules' code, especially if you are not familiar with the way <strong>mini.css</strong> is structured.</p><br>
 				</div>
 				<div class="col-sm-12">

docs/customization/input_control.html

@@ -30,52 +30,52 @@
   </head>
   <body>
 		<header class="sticky">
-			<a href="../index.html" class="logo"><span id="header-logo">m</span></a>
+			<a href="../index" class="logo"><span id="header-logo">m</span></a>
 				<label class="drawer-toggle button" for="navigation-toggle"></label>
-			<a href="../index.html" class="button hidden-sm">Introduction</a> <a href="../modules.html" class="button hidden-sm">Modules</a>
-			<a href="../flavors.html" class="button hidden-sm">Flavors</a> <a href="../templates.html" class="button hidden-sm">Templates</a>
-			<a href="index.html" class="button hidden-sm">Customization</a> <a href="../quick_reference.html" class="button hidden-sm">Quick Reference</a>
+			<a href="../index" class="button hidden-sm">Introduction</a> <a href="../modules" class="button hidden-sm">Modules</a>
+			<a href="../flavors" class="button hidden-sm">Flavors</a> <a href="../templates" class="button hidden-sm">Templates</a>
+			<a href="../customization" class="button hidden-sm">Customization</a> <a href="../quick_reference" class="button hidden-sm">Quick Reference</a>
 			<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
 		</header>
 		<div class="container" style="padding-left: 0.25rem;">
 			<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
 				<label class="close" for="navigation-toggle"></label>
-				<a href="../index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
-				<a href="../modules.html"><h4 style="margin-left: 0;">Modules</h4></a>
-				<a href="../flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
-				<a href="../templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
-				<h4 style="margin-left: 0;">Customization</h4> <a href="core.html#core-title">Core</a>
-				<a href="core.html#typography-headings" class="sublink-1">Typography &amp; headings</a>
-				<a href="core.html#common-elements" class="sublink-1">Common elements &amp; fixes</a>
-				<br/> <a href="grid.html#grid-title">Grid</a>
-				<a href="grid.html#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
-				<br/> <a href="input_control.html#input-control-title">Input Control</a>
-				<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control.html#switch" class="sublink-1">Switches</a>
-				<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control.html#switch-mixins" class="sublink-1">Switch mixins</a>
-				<br/> <a href="navigation.html#navigation-title">Navigation</a>
-				<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
-				<a href="navigation.html#drawer" class="sublink-1">Drawer</a> <a href="navigation.html#footer" class="sublink-1">Footer</a>
-				<br/> <a href="table.html#table-title">Table</a>
-				<a href="table.html#table-styling" class="sublink-1">Table styling</a>
-				<br/> <a href="card.html#card-title">Card</a>
-				<a href="card.html#cards-sections" class="sublink-1">Cards and sections</a> <a href="card.html#card-mixins" class="sublink-1">Card mixins</a>
-				<br/> <a href="tab.html#tab-title">Tab</a>
-				<a href="tab.html#tab-styling" class="sublink-1">Tab styling</a>
-				<br/> <a href="contextual.html#contextual-title">Contextual</a>
-				<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
-				<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
-				<a href="contextual.html#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
-				<a href="contextual.html#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual.html#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
-				<br/> <a href="progress.html#progress-title">Progress</a>
-				<a href="progress.html#progress-bar" class="sublink-1">Progress bar</a> <a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a>
-				<a href="progress.html#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress.html#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
-				<br/> <a href="utility.html#utility-title">Utility</a>
-				<a href="utility.html#visibility-legacy" class="sublink-1">Visibility helpers &amp; legacy features</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
-				<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
-				<a href="utility.html#borders-shadows-mixins" class="sublink-1">Generic border &amp; shadow mixins</a>
-				<a href="utility.html#responsive-sizing-mixins" class="sublink-1">Responsive sizing &amp; spacing mixins</a>
-				<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
-				<a href="../quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
+				<a href="../index"><h4 style="margin-left: 0;">Introduction</h4></a>
+				<a href="../modules"><h4 style="margin-left: 0;">Modules</h4></a>
+				<a href="../flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
+				<a href="../templates"><h4 style="margin-left: 0;">Templates</h4></a>
+				<h4 style="margin-left: 0;">Customization</h4> <a href="core#core-title">Core</a>
+				<a href="core#typography-headings" class="sublink-1">Typography &amp; headings</a>
+				<a href="core#common-elements" class="sublink-1">Common elements &amp; fixes</a>
+				<br/> <a href="grid#grid-title">Grid</a>
+				<a href="grid#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
+				<br/> <a href="input_control#input-control-title">Input Control</a>
+				<a href="input_control#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control#switch" class="sublink-1">Switches</a>
+				<a href="input_control#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control#switch-mixins" class="sublink-1">Switch mixins</a>
+				<br/> <a href="navigation#navigation-title">Navigation</a>
+				<a href="navigation#header" class="sublink-1">Header</a> <a href="navigation#navigation-bar" class="sublink-1">Navigation bar</a>
+				<a href="navigation#drawer" class="sublink-1">Drawer</a> <a href="navigation#footer" class="sublink-1">Footer</a>
+				<br/> <a href="table#table-title">Table</a>
+				<a href="table#table-styling" class="sublink-1">Table styling</a>
+				<br/> <a href="card#card-title">Card</a>
+				<a href="card#cards-sections" class="sublink-1">Cards and sections</a> <a href="card#card-mixins" class="sublink-1">Card mixins</a>
+				<br/> <a href="tab#tab-title">Tab</a>
+				<a href="tab#tab-styling" class="sublink-1">Tab styling</a>
+				<br/> <a href="contextual#contextual-title">Contextual</a>
+				<a href="contextual#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual#toasts" class="sublink-1">Toasts</a>
+				<a href="contextual#tooltips" class="sublink-1">Tooltips</a> <a href="contextual#modals" class="sublink-1">Modals</a>
+				<a href="contextual#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
+				<a href="contextual#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
+				<br/> <a href="progress#progress-title">Progress</a>
+				<a href="progress#progress-bar" class="sublink-1">Progress bar</a> <a href="progress#donut-spinner" class="sublink-1">Donut spinner</a>
+				<a href="progress#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
+				<br/> <a href="utility#utility-title">Utility</a>
+				<a href="utility#visibility-legacy" class="sublink-1">Visibility helpers &amp; legacy features</a> <a href="utility#breadcrumbs" class="sublink-1">Breadcrumbs</a>
+				<a href="utility#close-icon" class="sublink-1">Close icon</a>
+				<a href="utility#borders-shadows-mixins" class="sublink-1">Generic border &amp; shadow mixins</a>
+				<a href="utility#responsive-sizing-mixins" class="sublink-1">Responsive sizing &amp; spacing mixins</a>
+				<a href="utility#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
+				<a href="../quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
 			</nav>
 				<div class="col-sm-12 col-md-8 col-lg-10"><main>
       <div class="row" style="padding-top: 40px;" id="input-control-title">
@@ -227,6 +227,10 @@
 										<td data-label="Variable">$input-disabled-opacity</td><td data-label="Type">Opacity</td>
 										<td data-label="Description">Opacity of <code>&lt;input&gt;</code> elements (disabled)</td><td data-label="Sample value">0.75</td>
 									</tr>
+									<tr>
+										<td data-label="Variable">$select-padding-right</td><td data-label="Type">Padding right</td>
+										<td data-label="Description">Right padding of <code>&lt;select&gt;</code> elements</td><td data-label="Sample value">20px</td>
+									</tr>
 									<tr>
 										<td data-label="Variable">$input-group-name</td><td data-label="Type">String</td>
 										<td data-label="Description">Class name for input groups</td><td data-label="Sample value">'input-group'</td>
@@ -655,7 +659,7 @@
 
 			<div class="row" style="padding-bottom: 20px; padding-top:20px;">
         <div class="col-sm-12">
-          <p style="text-align:justify">If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="index.html">customization page</a> or choose a module from the top menu to see its documentation.</p>
+          <p style="text-align:justify">If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="../customization">customization page</a> or choose a module from the top menu to see its documentation.</p>
         </div>
       </div>
     </main></div></div></div>

docs/customization/navigation.html

@@ -29,52 +29,52 @@
   </head>
   <body>
 		<header class="sticky">
-			<a href="../index.html" class="logo"><span id="header-logo">m</span></a>
+			<a href="../index" class="logo"><span id="header-logo">m</span></a>
 				<label class="drawer-toggle button" for="navigation-toggle"></label>
-			<a href="../index.html" class="button hidden-sm">Introduction</a> <a href="../modules.html" class="button hidden-sm">Modules</a>
-			<a href="../flavors.html" class="button hidden-sm">Flavors</a> <a href="../templates.html" class="button hidden-sm">Templates</a>
-			<a href="index.html" class="button hidden-sm">Customization</a> <a href="../quick_reference.html" class="button hidden-sm">Quick Reference</a>
+			<a href="../index" class="button hidden-sm">Introduction</a> <a href="../modules" class="button hidden-sm">Modules</a>
+			<a href="../flavors" class="button hidden-sm">Flavors</a> <a href="../templates" class="button hidden-sm">Templates</a>
+			<a href="../customization" class="button hidden-sm">Customization</a> <a href="../quick_reference" class="button hidden-sm">Quick Reference</a>
 			<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
 		</header>
 		<div class="container" style="padding-left: 0.25rem;">
 			<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
 				<label class="close" for="navigation-toggle"></label>
-				<a href="../index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
-				<a href="../modules.html"><h4 style="margin-left: 0;">Modules</h4></a>
-				<a href="../flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
-				<a href="../templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
-				<h4 style="margin-left: 0;">Customization</h4> <a href="core.html#core-title">Core</a>
-				<a href="core.html#typography-headings" class="sublink-1">Typography &amp; headings</a>
-				<a href="core.html#common-elements" class="sublink-1">Common elements &amp; fixes</a>
-				<br/> <a href="grid.html#grid-title">Grid</a>
-				<a href="grid.html#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
-				<br/> <a href="input_control.html#input-control-title">Input Control</a>
-				<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control.html#switch" class="sublink-1">Switches</a>
-				<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control.html#switch-mixins" class="sublink-1">Switch mixins</a>
-				<br/> <a href="navigation.html#navigation-title">Navigation</a>
-				<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
-				<a href="navigation.html#drawer" class="sublink-1">Drawer</a> <a href="navigation.html#footer" class="sublink-1">Footer</a>
-				<br/> <a href="table.html#table-title">Table</a>
-				<a href="table.html#table-styling" class="sublink-1">Table styling</a>
-				<br/> <a href="card.html#card-title">Card</a>
-				<a href="card.html#cards-sections" class="sublink-1">Cards and sections</a> <a href="card.html#card-mixins" class="sublink-1">Card mixins</a>
-				<br/> <a href="tab.html#tab-title">Tab</a>
-				<a href="tab.html#tab-styling" class="sublink-1">Tab styling</a>
-				<br/> <a href="contextual.html#contextual-title">Contextual</a>
-				<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
-				<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
-				<a href="contextual.html#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
-				<a href="contextual.html#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual.html#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
-				<br/> <a href="progress.html#progress-title">Progress</a>
-				<a href="progress.html#progress-bar" class="sublink-1">Progress bar</a> <a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a>
-				<a href="progress.html#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress.html#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
-				<br/> <a href="utility.html#utility-title">Utility</a>
-				<a href="utility.html#visibility-legacy" class="sublink-1">Visibility helpers &amp; legacy features</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
-				<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
-				<a href="utility.html#borders-shadows-mixins" class="sublink-1">Generic border &amp; shadow mixins</a>
-				<a href="utility.html#responsive-sizing-mixins" class="sublink-1">Responsive sizing &amp; spacing mixins</a>
-				<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
-				<a href="../quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
+				<a href="../index"><h4 style="margin-left: 0;">Introduction</h4></a>
+				<a href="../modules"><h4 style="margin-left: 0;">Modules</h4></a>
+				<a href="../flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
+				<a href="../templates"><h4 style="margin-left: 0;">Templates</h4></a>
+				<h4 style="margin-left: 0;">Customization</h4> <a href="core#core-title">Core</a>
+				<a href="core#typography-headings" class="sublink-1">Typography &amp; headings</a>
+				<a href="core#common-elements" class="sublink-1">Common elements &amp; fixes</a>
+				<br/> <a href="grid#grid-title">Grid</a>
+				<a href="grid#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
+				<br/> <a href="input_control#input-control-title">Input Control</a>
+				<a href="input_control#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control#switch" class="sublink-1">Switches</a>
+				<a href="input_control#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control#switch-mixins" class="sublink-1">Switch mixins</a>
+				<br/> <a href="navigation#navigation-title">Navigation</a>
+				<a href="navigation#header" class="sublink-1">Header</a> <a href="navigation#navigation-bar" class="sublink-1">Navigation bar</a>
+				<a href="navigation#drawer" class="sublink-1">Drawer</a> <a href="navigation#footer" class="sublink-1">Footer</a>
+				<br/> <a href="table#table-title">Table</a>
+				<a href="table#table-styling" class="sublink-1">Table styling</a>
+				<br/> <a href="card#card-title">Card</a>
+				<a href="card#cards-sections" class="sublink-1">Cards and sections</a> <a href="card#card-mixins" class="sublink-1">Card mixins</a>
+				<br/> <a href="tab#tab-title">Tab</a>
+				<a href="tab#tab-styling" class="sublink-1">Tab styling</a>
+				<br/> <a href="contextual#contextual-title">Contextual</a>
+				<a href="contextual#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual#toasts" class="sublink-1">Toasts</a>
+				<a href="contextual#tooltips" class="sublink-1">Tooltips</a> <a href="contextual#modals" class="sublink-1">Modals</a>
+				<a href="contextual#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
+				<a href="contextual#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
+				<br/> <a href="progress#progress-title">Progress</a>
+				<a href="progress#progress-bar" class="sublink-1">Progress bar</a> <a href="progress#donut-spinner" class="sublink-1">Donut spinner</a>
+				<a href="progress#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
+				<br/> <a href="utility#utility-title">Utility</a>
+				<a href="utility#visibility-legacy" class="sublink-1">Visibility helpers &amp; legacy features</a> <a href="utility#breadcrumbs" class="sublink-1">Breadcrumbs</a>
+				<a href="utility#close-icon" class="sublink-1">Close icon</a>
+				<a href="utility#borders-shadows-mixins" class="sublink-1">Generic border &amp; shadow mixins</a>
+				<a href="utility#responsive-sizing-mixins" class="sublink-1">Responsive sizing &amp; spacing mixins</a>
+				<a href="utility#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
+				<a href="../quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
 			</nav>
 				<div class="col-sm-12 col-md-8 col-lg-10"><main>
       <div class="row" style="padding-top: 40px;" id="navigation-title">
@@ -436,7 +436,7 @@
 
 			<div class="row" style="padding-bottom: 20px; padding-top:20px;">
         <div class="col-sm-12">
-          <p style="text-align:justify">If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="index.html">customization page</a> or choose a module from the top menu to see its documentation.</p>
+          <p style="text-align:justify">If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="../customization">customization page</a> or choose a module from the top menu to see its documentation.</p>
         </div>
       </div>
     </main></div></div></div>

docs/customization/progress.html

@@ -31,52 +31,52 @@
   </head>
   <body>
 		<header class="sticky">
-			<a href="../index.html" class="logo"><span id="header-logo">m</span></a>
+			<a href="../index" class="logo"><span id="header-logo">m</span></a>
 				<label class="drawer-toggle button" for="navigation-toggle"></label>
-			<a href="../index.html" class="button hidden-sm">Introduction</a> <a href="../modules.html" class="button hidden-sm">Modules</a>
-			<a href="../flavors.html" class="button hidden-sm">Flavors</a> <a href="../templates.html" class="button hidden-sm">Templates</a>
-			<a href="index.html" class="button hidden-sm">Customization</a> <a href="../quick_reference.html" class="button hidden-sm">Quick Reference</a>
+			<a href="../index" class="button hidden-sm">Introduction</a> <a href="../modules" class="button hidden-sm">Modules</a>
+			<a href="../flavors" class="button hidden-sm">Flavors</a> <a href="../templates" class="button hidden-sm">Templates</a>
+			<a href="../customization" class="button hidden-sm">Customization</a> <a href="../quick_reference" class="button hidden-sm">Quick Reference</a>
 			<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
 		</header>
 		<div class="container" style="padding-left: 0.25rem;">
 			<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
 				<label class="close" for="navigation-toggle"></label>
-				<a href="../index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
-				<a href="../modules.html"><h4 style="margin-left: 0;">Modules</h4></a>
-				<a href="../flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
-				<a href="../templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
-				<h4 style="margin-left: 0;">Customization</h4> <a href="core.html#core-title">Core</a>
-				<a href="core.html#typography-headings" class="sublink-1">Typography &amp; headings</a>
-				<a href="core.html#common-elements" class="sublink-1">Common elements &amp; fixes</a>
-				<br/> <a href="grid.html#grid-title">Grid</a>
-				<a href="grid.html#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
-				<br/> <a href="input_control.html#input-control-title">Input Control</a>
-				<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control.html#switch" class="sublink-1">Switches</a>
-				<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control.html#switch-mixins" class="sublink-1">Switch mixins</a>
-				<br/> <a href="navigation.html#navigation-title">Navigation</a>
-				<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
-				<a href="navigation.html#drawer" class="sublink-1">Drawer</a> <a href="navigation.html#footer" class="sublink-1">Footer</a>
-				<br/> <a href="table.html#table-title">Table</a>
-				<a href="table.html#table-styling" class="sublink-1">Table styling</a>
-				<br/> <a href="card.html#card-title">Card</a>
-				<a href="card.html#cards-sections" class="sublink-1">Cards and sections</a> <a href="card.html#card-mixins" class="sublink-1">Card mixins</a>
-				<br/> <a href="tab.html#tab-title">Tab</a>
-				<a href="tab.html#tab-styling" class="sublink-1">Tab styling</a>
-				<br/> <a href="contextual.html#contextual-title">Contextual</a>
-				<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
-				<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
-				<a href="contextual.html#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
-				<a href="contextual.html#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual.html#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
-				<br/> <a href="progress.html#progress-title">Progress</a>
-				<a href="progress.html#progress-bar" class="sublink-1">Progress bar</a> <a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a>
-				<a href="progress.html#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress.html#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
-				<br/> <a href="utility.html#utility-title">Utility</a>
-				<a href="utility.html#visibility-legacy" class="sublink-1">Visibility helpers &amp; legacy features</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
-				<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
-				<a href="utility.html#borders-shadows-mixins" class="sublink-1">Generic border &amp; shadow mixins</a>
-				<a href="utility.html#responsive-sizing-mixins" class="sublink-1">Responsive sizing &amp; spacing mixins</a>
-				<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
-				<a href="../quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
+				<a href="../index"><h4 style="margin-left: 0;">Introduction</h4></a>
+				<a href="../modules"><h4 style="margin-left: 0;">Modules</h4></a>
+				<a href="../flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
+				<a href="../templates"><h4 style="margin-left: 0;">Templates</h4></a>
+				<h4 style="margin-left: 0;">Customization</h4> <a href="core#core-title">Core</a>
+				<a href="core#typography-headings" class="sublink-1">Typography &amp; headings</a>
+				<a href="core#common-elements" class="sublink-1">Common elements &amp; fixes</a>
+				<br/> <a href="grid#grid-title">Grid</a>
+				<a href="grid#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
+				<br/> <a href="input_control#input-control-title">Input Control</a>
+				<a href="input_control#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control#switch" class="sublink-1">Switches</a>
+				<a href="input_control#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control#switch-mixins" class="sublink-1">Switch mixins</a>
+				<br/> <a href="navigation#navigation-title">Navigation</a>
+				<a href="navigation#header" class="sublink-1">Header</a> <a href="navigation#navigation-bar" class="sublink-1">Navigation bar</a>
+				<a href="navigation#drawer" class="sublink-1">Drawer</a> <a href="navigation#footer" class="sublink-1">Footer</a>
+				<br/> <a href="table#table-title">Table</a>
+				<a href="table#table-styling" class="sublink-1">Table styling</a>
+				<br/> <a href="card#card-title">Card</a>
+				<a href="card#cards-sections" class="sublink-1">Cards and sections</a> <a href="card#card-mixins" class="sublink-1">Card mixins</a>
+				<br/> <a href="tab#tab-title">Tab</a>
+				<a href="tab#tab-styling" class="sublink-1">Tab styling</a>
+				<br/> <a href="contextual#contextual-title">Contextual</a>
+				<a href="contextual#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual#toasts" class="sublink-1">Toasts</a>
+				<a href="contextual#tooltips" class="sublink-1">Tooltips</a> <a href="contextual#modals" class="sublink-1">Modals</a>
+				<a href="contextual#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
+				<a href="contextual#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
+				<br/> <a href="progress#progress-title">Progress</a>
+				<a href="progress#progress-bar" class="sublink-1">Progress bar</a> <a href="progress#donut-spinner" class="sublink-1">Donut spinner</a>
+				<a href="progress#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
+				<br/> <a href="utility#utility-title">Utility</a>
+				<a href="utility#visibility-legacy" class="sublink-1">Visibility helpers &amp; legacy features</a> <a href="utility#breadcrumbs" class="sublink-1">Breadcrumbs</a>
+				<a href="utility#close-icon" class="sublink-1">Close icon</a>
+				<a href="utility#borders-shadows-mixins" class="sublink-1">Generic border &amp; shadow mixins</a>
+				<a href="utility#responsive-sizing-mixins" class="sublink-1">Responsive sizing &amp; spacing mixins</a>
+				<a href="utility#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
+				<a href="../quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
 			</nav>
 				<div class="col-sm-12 col-md-8 col-lg-10"><main>
       <div class="row" style="padding-top: 40px;" id="progress-title">
@@ -381,7 +381,7 @@
 
 			<div class="row" style="padding-bottom: 20px; padding-top:20px;">
         <div class="col-sm-12">
-          <p style="text-align:justify">If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="index.html">customization page</a> or choose a module from the top menu to see its documentation.</p>
+          <p style="text-align:justify">If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="../customization">customization page</a> or choose a module from the top menu to see its documentation.</p>
         </div>
       </div>
     </main></div></div></div>

docs/customization/tab.html

@@ -29,52 +29,52 @@
   </head>
   <body>
 		<header class="sticky">
-			<a href="../index.html" class="logo"><span id="header-logo">m</span></a>
+			<a href="../index" class="logo"><span id="header-logo">m</span></a>
 				<label class="drawer-toggle button" for="navigation-toggle"></label>
-			<a href="../index.html" class="button hidden-sm">Introduction</a> <a href="../modules.html" class="button hidden-sm">Modules</a>
-			<a href="../flavors.html" class="button hidden-sm">Flavors</a> <a href="../templates.html" class="button hidden-sm">Templates</a>
-			<a href="index.html" class="button hidden-sm">Customization</a> <a href="../quick_reference.html" class="button hidden-sm">Quick Reference</a>
+			<a href="../index" class="button hidden-sm">Introduction</a> <a href="../modules" class="button hidden-sm">Modules</a>
+			<a href="../flavors" class="button hidden-sm">Flavors</a> <a href="../templates" class="button hidden-sm">Templates</a>
+			<a href="../customization" class="button hidden-sm">Customization</a> <a href="../quick_reference" class="button hidden-sm">Quick Reference</a>
 			<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
 		</header>
 		<div class="container" style="padding-left: 0.25rem;">
 			<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
 				<label class="close" for="navigation-toggle"></label>
-				<a href="../index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
-				<a href="../modules.html"><h4 style="margin-left: 0;">Modules</h4></a>
-				<a href="../flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
-				<a href="../templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
-				<h4 style="margin-left: 0;">Customization</h4> <a href="core.html#core-title">Core</a>
-				<a href="core.html#typography-headings" class="sublink-1">Typography &amp; headings</a>
-				<a href="core.html#common-elements" class="sublink-1">Common elements &amp; fixes</a>
-				<br/> <a href="grid.html#grid-title">Grid</a>
-				<a href="grid.html#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
-				<br/> <a href="input_control.html#input-control-title">Input Control</a>
-				<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control.html#switch" class="sublink-1">Switches</a>
-				<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control.html#switch-mixins" class="sublink-1">Switch mixins</a>
-				<br/> <a href="navigation.html#navigation-title">Navigation</a>
-				<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
-				<a href="navigation.html#drawer" class="sublink-1">Drawer</a> <a href="navigation.html#footer" class="sublink-1">Footer</a>
-				<br/> <a href="table.html#table-title">Table</a>
-				<a href="table.html#table-styling" class="sublink-1">Table styling</a>
-				<br/> <a href="card.html#card-title">Card</a>
-				<a href="card.html#cards-sections" class="sublink-1">Cards and sections</a> <a href="card.html#card-mixins" class="sublink-1">Card mixins</a>
-				<br/> <a href="tab.html#tab-title">Tab</a>
-				<a href="tab.html#tab-styling" class="sublink-1">Tab styling</a>
-				<br/> <a href="contextual.html#contextual-title">Contextual</a>
-				<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
-				<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
-				<a href="contextual.html#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
-				<a href="contextual.html#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual.html#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
-				<br/> <a href="progress.html#progress-title">Progress</a>
-				<a href="progress.html#progress-bar" class="sublink-1">Progress bar</a> <a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a>
-				<a href="progress.html#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress.html#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
-				<br/> <a href="utility.html#utility-title">Utility</a>
-				<a href="utility.html#visibility-legacy" class="sublink-1">Visibility helpers &amp; legacy features</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
-				<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
-				<a href="utility.html#borders-shadows-mixins" class="sublink-1">Generic border &amp; shadow mixins</a>
-				<a href="utility.html#responsive-sizing-mixins" class="sublink-1">Responsive sizing &amp; spacing mixins</a>
-				<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
-				<a href="../quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
+				<a href="../index"><h4 style="margin-left: 0;">Introduction</h4></a>
+				<a href="../modules"><h4 style="margin-left: 0;">Modules</h4></a>
+				<a href="../flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
+				<a href="../templates"><h4 style="margin-left: 0;">Templates</h4></a>
+				<h4 style="margin-left: 0;">Customization</h4> <a href="core#core-title">Core</a>
+				<a href="core#typography-headings" class="sublink-1">Typography &amp; headings</a>
+				<a href="core#common-elements" class="sublink-1">Common elements &amp; fixes</a>
+				<br/> <a href="grid#grid-title">Grid</a>
+				<a href="grid#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
+				<br/> <a href="input_control#input-control-title">Input Control</a>
+				<a href="input_control#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control#switch" class="sublink-1">Switches</a>
+				<a href="input_control#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control#switch-mixins" class="sublink-1">Switch mixins</a>
+				<br/> <a href="navigation#navigation-title">Navigation</a>
+				<a href="navigation#header" class="sublink-1">Header</a> <a href="navigation#navigation-bar" class="sublink-1">Navigation bar</a>
+				<a href="navigation#drawer" class="sublink-1">Drawer</a> <a href="navigation#footer" class="sublink-1">Footer</a>
+				<br/> <a href="table#table-title">Table</a>
+				<a href="table#table-styling" class="sublink-1">Table styling</a>
+				<br/> <a href="card#card-title">Card</a>
+				<a href="card#cards-sections" class="sublink-1">Cards and sections</a> <a href="card#card-mixins" class="sublink-1">Card mixins</a>
+				<br/> <a href="tab#tab-title">Tab</a>
+				<a href="tab#tab-styling" class="sublink-1">Tab styling</a>
+				<br/> <a href="contextual#contextual-title">Contextual</a>
+				<a href="contextual#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual#toasts" class="sublink-1">Toasts</a>
+				<a href="contextual#tooltips" class="sublink-1">Tooltips</a> <a href="contextual#modals" class="sublink-1">Modals</a>
+				<a href="contextual#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
+				<a href="contextual#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
+				<br/> <a href="progress#progress-title">Progress</a>
+				<a href="progress#progress-bar" class="sublink-1">Progress bar</a> <a href="progress#donut-spinner" class="sublink-1">Donut spinner</a>
+				<a href="progress#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
+				<br/> <a href="utility#utility-title">Utility</a>
+				<a href="utility#visibility-legacy" class="sublink-1">Visibility helpers &amp; legacy features</a> <a href="utility#breadcrumbs" class="sublink-1">Breadcrumbs</a>
+				<a href="utility#close-icon" class="sublink-1">Close icon</a>
+				<a href="utility#borders-shadows-mixins" class="sublink-1">Generic border &amp; shadow mixins</a>
+				<a href="utility#responsive-sizing-mixins" class="sublink-1">Responsive sizing &amp; spacing mixins</a>
+				<a href="utility#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
+				<a href="../quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
 			</nav>
 				<div class="col-sm-12 col-md-8 col-lg-10"><main>
       <div class="row" style="padding-top: 40px;" id="tab-title">
@@ -191,7 +191,7 @@
 
 			<div class="row" style="padding-bottom: 20px; padding-top:20px;">
         <div class="col-sm-12">
-          <p style="text-align:justify">If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="index.html">customization page</a> or choose a module from the top menu to see its documentation.</p>
+          <p style="text-align:justify">If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="../customization">customization page</a> or choose a module from the top menu to see its documentation.</p>
         </div>
       </div>
     </main></div></div></div>

docs/customization/table.html

@@ -29,52 +29,52 @@
   </head>
   <body>
 		<header class="sticky">
-			<a href="../index.html" class="logo"><span id="header-logo">m</span></a>
+			<a href="../index" class="logo"><span id="header-logo">m</span></a>
 				<label class="drawer-toggle button" for="navigation-toggle"></label>
-			<a href="../index.html" class="button hidden-sm">Introduction</a> <a href="../modules.html" class="button hidden-sm">Modules</a>
-			<a href="../flavors.html" class="button hidden-sm">Flavors</a> <a href="../templates.html" class="button hidden-sm">Templates</a>
-			<a href="index.html" class="button hidden-sm">Customization</a> <a href="../quick_reference.html" class="button hidden-sm">Quick Reference</a>
+			<a href="../index" class="button hidden-sm">Introduction</a> <a href="../modules" class="button hidden-sm">Modules</a>
+			<a href="../flavors" class="button hidden-sm">Flavors</a> <a href="../templates" class="button hidden-sm">Templates</a>
+			<a href="../customization" class="button hidden-sm">Customization</a> <a href="../quick_reference" class="button hidden-sm">Quick Reference</a>
 			<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
 		</header>
 		<div class="container" style="padding-left: 0.25rem;">
 			<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
 				<label class="close" for="navigation-toggle"></label>
-				<a href="../index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
-				<a href="../modules.html"><h4 style="margin-left: 0;">Modules</h4></a>
-				<a href="../flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
-				<a href="../templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
-				<h4 style="margin-left: 0;">Customization</h4> <a href="core.html#core-title">Core</a>
-				<a href="core.html#typography-headings" class="sublink-1">Typography &amp; headings</a>
-				<a href="core.html#common-elements" class="sublink-1">Common elements &amp; fixes</a>
-				<br/> <a href="grid.html#grid-title">Grid</a>
-				<a href="grid.html#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
-				<br/> <a href="input_control.html#input-control-title">Input Control</a>
-				<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control.html#switch" class="sublink-1">Switches</a>
-				<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control.html#switch-mixins" class="sublink-1">Switch mixins</a>
-				<br/> <a href="navigation.html#navigation-title">Navigation</a>
-				<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
-				<a href="navigation.html#drawer" class="sublink-1">Drawer</a> <a href="navigation.html#footer" class="sublink-1">Footer</a>
-				<br/> <a href="table.html#table-title">Table</a>
-				<a href="table.html#table-styling" class="sublink-1">Table styling</a>
-				<br/> <a href="card.html#card-title">Card</a>
-				<a href="card.html#cards-sections" class="sublink-1">Cards and sections</a> <a href="card.html#card-mixins" class="sublink-1">Card mixins</a>
-				<br/> <a href="tab.html#tab-title">Tab</a>
-				<a href="tab.html#tab-styling" class="sublink-1">Tab styling</a>
-				<br/> <a href="contextual.html#contextual-title">Contextual</a>
-				<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
-				<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
-				<a href="contextual.html#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
-				<a href="contextual.html#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual.html#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
-				<br/> <a href="progress.html#progress-title">Progress</a>
-				<a href="progress.html#progress-bar" class="sublink-1">Progress bar</a> <a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a>
-				<a href="progress.html#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress.html#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
-				<br/> <a href="utility.html#utility-title">Utility</a>
-				<a href="utility.html#visibility-legacy" class="sublink-1">Visibility helpers &amp; legacy features</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
-				<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
-				<a href="utility.html#borders-shadows-mixins" class="sublink-1">Generic border &amp; shadow mixins</a>
-				<a href="utility.html#responsive-sizing-mixins" class="sublink-1">Responsive sizing &amp; spacing mixins</a>
-				<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
-				<a href="../quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
+				<a href="../index"><h4 style="margin-left: 0;">Introduction</h4></a>
+				<a href="../modules"><h4 style="margin-left: 0;">Modules</h4></a>
+				<a href="../flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
+				<a href="../templates"><h4 style="margin-left: 0;">Templates</h4></a>
+				<h4 style="margin-left: 0;">Customization</h4> <a href="core#core-title">Core</a>
+				<a href="core#typography-headings" class="sublink-1">Typography &amp; headings</a>
+				<a href="core#common-elements" class="sublink-1">Common elements &amp; fixes</a>
+				<br/> <a href="grid#grid-title">Grid</a>
+				<a href="grid#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
+				<br/> <a href="input_control#input-control-title">Input Control</a>
+				<a href="input_control#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control#switch" class="sublink-1">Switches</a>
+				<a href="input_control#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control#switch-mixins" class="sublink-1">Switch mixins</a>
+				<br/> <a href="navigation#navigation-title">Navigation</a>
+				<a href="navigation#header" class="sublink-1">Header</a> <a href="navigation#navigation-bar" class="sublink-1">Navigation bar</a>
+				<a href="navigation#drawer" class="sublink-1">Drawer</a> <a href="navigation#footer" class="sublink-1">Footer</a>
+				<br/> <a href="table#table-title">Table</a>
+				<a href="table#table-styling" class="sublink-1">Table styling</a>
+				<br/> <a href="card#card-title">Card</a>
+				<a href="card#cards-sections" class="sublink-1">Cards and sections</a> <a href="card#card-mixins" class="sublink-1">Card mixins</a>
+				<br/> <a href="tab#tab-title">Tab</a>
+				<a href="tab#tab-styling" class="sublink-1">Tab styling</a>
+				<br/> <a href="contextual#contextual-title">Contextual</a>
+				<a href="contextual#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual#toasts" class="sublink-1">Toasts</a>
+				<a href="contextual#tooltips" class="sublink-1">Tooltips</a> <a href="contextual#modals" class="sublink-1">Modals</a>
+				<a href="contextual#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
+				<a href="contextual#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
+				<br/> <a href="progress#progress-title">Progress</a>
+				<a href="progress#progress-bar" class="sublink-1">Progress bar</a> <a href="progress#donut-spinner" class="sublink-1">Donut spinner</a>
+				<a href="progress#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
+				<br/> <a href="utility#utility-title">Utility</a>
+				<a href="utility#visibility-legacy" class="sublink-1">Visibility helpers &amp; legacy features</a> <a href="utility#breadcrumbs" class="sublink-1">Breadcrumbs</a>
+				<a href="utility#close-icon" class="sublink-1">Close icon</a>
+				<a href="utility#borders-shadows-mixins" class="sublink-1">Generic border &amp; shadow mixins</a>
+				<a href="utility#responsive-sizing-mixins" class="sublink-1">Responsive sizing &amp; spacing mixins</a>
+				<a href="utility#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
+				<a href="../quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
 			</nav>
 				<div class="col-sm-12 col-md-8 col-lg-10"><main>
       <div class="row" style="padding-top: 40px;" id="table-title">
@@ -222,7 +222,7 @@
 
 			<div class="row" style="padding-bottom: 20px; padding-top:20px;">
         <div class="col-sm-12">
-          <p style="text-align:justify">If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="index.html">customization page</a> or choose a module from the top menu to see its documentation.</p>
+          <p style="text-align:justify">If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="../customization">customization page</a> or choose a module from the top menu to see its documentation.</p>
         </div>
       </div>
     </main></div></div></div>

docs/customization/utility.html

@@ -29,52 +29,52 @@
   </head>
   <body>
 		<header class="sticky">
-			<a href="../index.html" class="logo"><span id="header-logo">m</span></a>
+			<a href="../index" class="logo"><span id="header-logo">m</span></a>
 				<label class="drawer-toggle button" for="navigation-toggle"></label>
-			<a href="../index.html" class="button hidden-sm">Introduction</a> <a href="../modules.html" class="button hidden-sm">Modules</a>
-			<a href="../flavors.html" class="button hidden-sm">Flavors</a> <a href="../templates.html" class="button hidden-sm">Templates</a>
-			<a href="index.html" class="button hidden-sm">Customization</a> <a href="../quick_reference.html" class="button hidden-sm">Quick Reference</a>
+			<a href="../index" class="button hidden-sm">Introduction</a> <a href="../modules" class="button hidden-sm">Modules</a>
+			<a href="../flavors" class="button hidden-sm">Flavors</a> <a href="../templates" class="button hidden-sm">Templates</a>
+			<a href="../customization" class="button hidden-sm">Customization</a> <a href="../quick_reference" class="button hidden-sm">Quick Reference</a>
 			<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
 		</header>
 		<div class="container" style="padding-left: 0.25rem;">
 			<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
 				<label class="close" for="navigation-toggle"></label>
-				<a href="../index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
-				<a href="../modules.html"><h4 style="margin-left: 0;">Modules</h4></a>
-				<a href="../flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
-				<a href="../templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
-				<h4 style="margin-left: 0;">Customization</h4> <a href="core.html#core-title">Core</a>
-				<a href="core.html#typography-headings" class="sublink-1">Typography &amp; headings</a>
-				<a href="core.html#common-elements" class="sublink-1">Common elements &amp; fixes</a>
-				<br/> <a href="grid.html#grid-title">Grid</a>
-				<a href="grid.html#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
-				<br/> <a href="input_control.html#input-control-title">Input Control</a>
-				<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control.html#switch" class="sublink-1">Switches</a>
-				<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control.html#switch-mixins" class="sublink-1">Switch mixins</a>
-				<br/> <a href="navigation.html#navigation-title">Navigation</a>
-				<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
-				<a href="navigation.html#drawer" class="sublink-1">Drawer</a> <a href="navigation.html#footer" class="sublink-1">Footer</a>
-				<br/> <a href="table.html#table-title">Table</a>
-				<a href="table.html#table-styling" class="sublink-1">Table styling</a>
-				<br/> <a href="card.html#card-title">Card</a>
-				<a href="card.html#cards-sections" class="sublink-1">Cards and sections</a> <a href="card.html#card-mixins" class="sublink-1">Card mixins</a>
-				<br/> <a href="tab.html#tab-title">Tab</a>
-				<a href="tab.html#tab-styling" class="sublink-1">Tab styling</a>
-				<br/> <a href="contextual.html#contextual-title">Contextual</a>
-				<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
-				<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
-				<a href="contextual.html#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
-				<a href="contextual.html#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual.html#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
-				<br/> <a href="progress.html#progress-title">Progress</a>
-				<a href="progress.html#progress-bar" class="sublink-1">Progress bar</a> <a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a>
-				<a href="progress.html#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress.html#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
-				<br/> <a href="utility.html#utility-title">Utility</a>
-				<a href="utility.html#visibility-legacy" class="sublink-1">Visibility helpers &amp; legacy features</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
-				<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
-				<a href="utility.html#borders-shadows-mixins" class="sublink-1">Generic border &amp; shadow mixins</a>
-				<a href="utility.html#responsive-sizing-mixins" class="sublink-1">Responsive sizing &amp; spacing mixins</a>
-				<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
-				<a href="../quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
+				<a href="../index"><h4 style="margin-left: 0;">Introduction</h4></a>
+				<a href="../modules"><h4 style="margin-left: 0;">Modules</h4></a>
+				<a href="../flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
+				<a href="../templates"><h4 style="margin-left: 0;">Templates</h4></a>
+				<h4 style="margin-left: 0;">Customization</h4> <a href="core#core-title">Core</a>
+				<a href="core#typography-headings" class="sublink-1">Typography &amp; headings</a>
+				<a href="core#common-elements" class="sublink-1">Common elements &amp; fixes</a>
+				<br/> <a href="grid#grid-title">Grid</a>
+				<a href="grid#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
+				<br/> <a href="input_control#input-control-title">Input Control</a>
+				<a href="input_control#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control#switch" class="sublink-1">Switches</a>
+				<a href="input_control#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control#switch-mixins" class="sublink-1">Switch mixins</a>
+				<br/> <a href="navigation#navigation-title">Navigation</a>
+				<a href="navigation#header" class="sublink-1">Header</a> <a href="navigation#navigation-bar" class="sublink-1">Navigation bar</a>
+				<a href="navigation#drawer" class="sublink-1">Drawer</a> <a href="navigation#footer" class="sublink-1">Footer</a>
+				<br/> <a href="table#table-title">Table</a>
+				<a href="table#table-styling" class="sublink-1">Table styling</a>
+				<br/> <a href="card#card-title">Card</a>
+				<a href="card#cards-sections" class="sublink-1">Cards and sections</a> <a href="card#card-mixins" class="sublink-1">Card mixins</a>
+				<br/> <a href="tab#tab-title">Tab</a>
+				<a href="tab#tab-styling" class="sublink-1">Tab styling</a>
+				<br/> <a href="contextual#contextual-title">Contextual</a>
+				<a href="contextual#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual#toasts" class="sublink-1">Toasts</a>
+				<a href="contextual#tooltips" class="sublink-1">Tooltips</a> <a href="contextual#modals" class="sublink-1">Modals</a>
+				<a href="contextual#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
+				<a href="contextual#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
+				<br/> <a href="progress#progress-title">Progress</a>
+				<a href="progress#progress-bar" class="sublink-1">Progress bar</a> <a href="progress#donut-spinner" class="sublink-1">Donut spinner</a>
+				<a href="progress#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
+				<br/> <a href="utility#utility-title">Utility</a>
+				<a href="utility#visibility-legacy" class="sublink-1">Visibility helpers &amp; legacy features</a> <a href="utility#breadcrumbs" class="sublink-1">Breadcrumbs</a>
+				<a href="utility#close-icon" class="sublink-1">Close icon</a>
+				<a href="utility#borders-shadows-mixins" class="sublink-1">Generic border &amp; shadow mixins</a>
+				<a href="utility#responsive-sizing-mixins" class="sublink-1">Responsive sizing &amp; spacing mixins</a>
+				<a href="utility#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
+				<a href="../quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
 			</nav>
 				<div class="col-sm-12 col-md-8 col-lg-10"><main>
       <div class="row" style="padding-top: 40px;" id="utility-title">
@@ -571,7 +571,7 @@
 
 			<div class="row" style="padding-bottom: 20px; padding-top:20px;">
         <div class="col-sm-12">
-          <p style="text-align:justify">If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="index.html">customization page</a> or choose a module from the top menu to see its documentation.</p>
+          <p style="text-align:justify">If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="../customization">customization page</a> or choose a module from the top menu to see its documentation.</p>
         </div>
       </div>
     </main></div></div></div>

docs/flavors.html

@@ -25,17 +25,17 @@
   </head>
   <body>
 		<header class="sticky">
-			<a href="index.html" class="logo"><span id="header-logo">m</span></a> <label class="drawer-toggle button" for="navigation-toggle"></label>
-			<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
-			<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
-			<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">Quick Reference</a>
+			<a href="index" class="logo"><span id="header-logo">m</span></a> <label class="drawer-toggle button" for="navigation-toggle"></label>
+			<a href="index" class="button hidden-sm">Introduction</a> <a href="modules" class="button hidden-sm">Modules</a>
+			<a href="flavors" class="button hidden-sm">Flavors</a> <a href="templates" class="button hidden-sm">Templates</a>
+			<a href="customization" class="button hidden-sm">Customization</a> <a href="quick_reference" class="button hidden-sm">Quick Reference</a>
 			<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
 		</header>
 		<input type="checkbox" id="navigation-toggle"> <nav class="drawer hidden-md hidden-lg">
 			<label class="close" for="navigation-toggle"></label>
-			<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a> <a href="modules.html"><h4 style="margin-left: 0;">Modules</h4></a>
-			<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a> <a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
-			<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a> <a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
+			<a href="index"><h4 style="margin-left: 0;">Introduction</h4></a> <a href="modules"><h4 style="margin-left: 0;">Modules</h4></a>
+			<a href="flavors"><h4 style="margin-left: 0;">Flavors</h4></a> <a href="templates"><h4 style="margin-left: 0;">Templates</h4></a>
+			<a href="customization"><h4 style="margin-left: 0;">Customization</h4></a> <a href="quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
 		</nav>
     <!-- Insert your page content here-->
     <main><div class="container">
@@ -44,13 +44,13 @@
           <h1>Flavors</h1>
           <p style="text-align:justify">One of the core ideas behind <strong>mini.css</strong> is its flavor system. A flavor is the final compiled stylesheet a website or web app uses. When you start using <strong>mini.css</strong>, you usually try out the default flavor, using one of the following references inside your HTML page's <code>&lt;head&gt;</code> tag:</p>
 					<pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-default.min.css&quot;</span>&gt;</pre>
-        <pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/v2.3.0/dist/mini-default.min.css&quot;</span>&gt;</pre><br>
+        <pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/v2.3.4/dist/mini-default.min.css&quot;</span>&gt;</pre><br>
         <p style="text-align:justify">There are, however a handful of other flavors included with <strong>mini.css</strong>. Below, you can see a full list of them:</p><br>
         <ul style="margin-left:0px; padding-left: 4px">
           <li class="card fluid">
             <h2 class="section double-padded">Default <small>mini-default</small></h2>
             <pre class="section double-padded" style="border-left:0; box-shadow: none;">&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-default.min.css&quot;</span>&gt;</pre>
-            <p class="section double-padded" style="text-align:justify">The default flavor for <strong>mini.css</strong> uses a light gray background and gray-black foreground color. Certain containers, such as cards and tabs use white-gray backgrounds. The grid system has 12 columns and most of the components and modules use sharp corners and light border colors. All of the colors used in this flavor are loosely based on <a href="https://material.google.com/style/color.html">Google's Material design color palette</a>.</p>
+            <p class="section double-padded" style="text-align:justify">The default flavor for <strong>mini.css</strong> uses a light gray background and gray-black foreground color. Certain containers, such as cards and tabs use white-gray backgrounds. The grid system has 12 columns and most of the components and modules use sharp corners and light border colors. All of the colors used in this flavor are loosely based on <a href="https://material.google.com/style/color">Google's Material design color palette</a>.</p>
             <div class="section double-padded">
               <p><strong>Author:</strong> <a href="https://github.com/Chalarangelo">Chalarangelo</a></p>
               <p><strong>Size:</strong> 7 KB</p>
@@ -59,7 +59,7 @@
 					<li class="card fluid">
 						<h2 class="section double-padded">Dark <a href="http://codepen.io/chalarangelo/pen/mmWrZz" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a><small>mini-dark</small></h2>
 						<pre class="section double-padded" style="border-left:0; box-shadow: none;">&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-dark.min.css&quot;</span>&gt;</pre>
-						<p class="section double-padded" style="text-align:justify">The dark version of the default flavor, Dark uses a dark gray background with light gray foreground color. All modules are the same as in the default flavor, but with a dark palette, loosely based on <a href="https://material.google.com/style/color.html">Google's Material design color palette</a>.</p>
+						<p class="section double-padded" style="text-align:justify">The dark version of the default flavor, Dark uses a dark gray background with light gray foreground color. All modules are the same as in the default flavor, but with a dark palette, loosely based on <a href="https://material.google.com/style/color">Google's Material design color palette</a>.</p>
 						<div class="section double-padded">
 							<p><strong>Author:</strong> <a href="https://github.com/Chalarangelo">Chalarangelo</a></p>
 							<p><strong>Size:</strong> 7 KB</p>
@@ -92,8 +92,17 @@
               <p><strong>Size:</strong> 7 KB</p>
             </div>
           </li>
+          <li class="card fluid">
+            <h2 class="section double-padded">Progressive Web App <a href="http://codepen.io/chalarangelo/pen/KqEOjy" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a><small>mini-pwa</small></h2>
+            <pre class="section double-padded" style="border-left:0; box-shadow: none;">&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-pwa.min.css&quot;</span>&gt;</pre>
+            <p class="section double-padded" style="text-align:justify">The Progressive Web App flavor follows the <a href="https://material.io/">Google Material Design Guidelines</a> and targets mobile devices and especially those based on the Android operating system. It uses mostly the default naming conventions (<code>.primary</code> etc.). The grid system has 12 columns and most components use rounded corners with soft shadows. To make the flavor lighter, button groups, horizontal and vertical tables, certain card styles, the entirety of the progress and tab modules, along with tooltips, navigation bars, modals and most style variants are not included. Finally, the card module's <code>.dark</code> class has been replaced by the <code>.accent</code> class.</p>
+            <div class="section double-padded">
+              <p><strong>Author:</strong> <a href="https://github.com/Chalarangelo">Chalarangelo</a></p>
+              <p><strong>Size:</strong> 5 KB</p>
+            </div>
+          </li>
         </ul>
-        <p style="text-align:justify">If you would rather modify one of the pre-defined flavors or create your own, check out our <a href="customization.html">customization</a> page for instructions.</p>
+        <p style="text-align:justify">If you would rather modify one of the pre-defined flavors or create your own, check out our <a href="customization">customization</a> page for instructions.</p>
         </div>
       </div>
     </div></main>

docs/grid.html

@@ -30,54 +30,54 @@
   </head>
   <body>
 		<header class="sticky">
-			<a href="index.html" class="logo"><span id="header-logo">m</span></a>
+			<a href="index" class="logo"><span id="header-logo">m</span></a>
 				<label class="drawer-toggle button" for="navigation-toggle"></label>
-			<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
-			<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
-			<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">Quick Reference</a>
+			<a href="index" class="button hidden-sm">Introduction</a> <a href="modules" class="button hidden-sm">Modules</a>
+			<a href="flavors" class="button hidden-sm">Flavors</a> <a href="templates" class="button hidden-sm">Templates</a>
+			<a href="customization" class="button hidden-sm">Customization</a> <a href="quick_reference" class="button hidden-sm">Quick Reference</a>
 			<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
 		</header>
 		<div class="container" style="padding-left: 0.25rem;">
 			<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
 				<label class="close" for="navigation-toggle"></label>
-				<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
-				<h4 style="margin-left: 0;">Modules</h4> <a href="core.html#core-title">Core</a>
-				<a href="core.html#typography" class="sublink-1">Typography</a> <a href="core.html#headings" class="sublink-1">Headings</a>
-				<a href="core.html#common-textual-elements" class="sublink-1">Common textual elements</a>
-				<a href="core.html#lists" class="sublink-1">Lists</a> <a href="core.html#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
-				<br/> <a href="grid.html#grid-title">Grid</a>
-				<a href="grid.html#basic-layout" class="sublink-1">Basic layout</a> <a href="grid.html#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
-				<a href="grid.html#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid.html#column-offset" class="sublink-1">Column offsets</a>
-				<a href="grid.html#column-reorder" class="sublink-1">Column reordering</a> <a href="grid.html#media-object" class="sublink-1">Media object pattern</a>
-				<br/> <a href="input_control.html#input-control-title">Input Control</a>
-				<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control.html#switches" class="sublink-1">Switches</a>
-				<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#file-upload" class="sublink-1">File upload buttons</a>
-				<br/> <a href="navigation.html#navigation-title">Navigation</a>
-				<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation.html#drawer" class="sublink-1">Drawer</a>
-				<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers &amp; footers</a>
-				<br/> <a href="table.html#table-title">Table</a>
-				<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a> <a href="table.html#scrollable-tables" class="sublink-1">Scrollable tables</a>
-				<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
-				<br/> <a href="card.html#card-title">Card</a>
-				<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections &amp; media</a>
-				<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a> <a href="card.html#color-variants" class="sublink-1">Card color variants</a>
-				<br/> <a href="tab.html#tab-title">Tab</a>
-				<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
-				<br/> <a href="contextual.html#contextual-title">Contextual</a>
-				<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
-				<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
-				<br/> <a href="progress.html#progress-title">Progress</a>
-				<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
-				<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
-				<br/> <a href="utility.html#utility-title">Utility</a>
-				<a href="utility.html#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility.html#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
-				<a href="utility.html#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
-				<a href="utility.html#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
-				<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
-				<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
-				<a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
-				<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a>
-				<a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
+				<a href="index"><h4 style="margin-left: 0;">Introduction</h4></a>
+				<h4 style="margin-left: 0;">Modules</h4> <a href="core#core-title">Core</a>
+				<a href="core#typography" class="sublink-1">Typography</a> <a href="core#headings" class="sublink-1">Headings</a>
+				<a href="core#common-textual-elements" class="sublink-1">Common textual elements</a>
+				<a href="core#lists" class="sublink-1">Lists</a> <a href="core#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
+				<br/> <a href="grid#grid-title">Grid</a>
+				<a href="grid#basic-layout" class="sublink-1">Basic layout</a> <a href="grid#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
+				<a href="grid#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid#column-offset" class="sublink-1">Column offsets</a>
+				<a href="grid#column-reorder" class="sublink-1">Column reordering</a> <a href="grid#media-object" class="sublink-1">Media object pattern</a>
+				<br/> <a href="input_control#input-control-title">Input Control</a>
+				<a href="input_control#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control#switches" class="sublink-1">Switches</a>
+				<a href="input_control#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control#file-upload" class="sublink-1">File upload buttons</a>
+				<br/> <a href="navigation#navigation-title">Navigation</a>
+				<a href="navigation#header" class="sublink-1">Header</a> <a href="navigation#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation#drawer" class="sublink-1">Drawer</a>
+				<a href="navigation#footer" class="sublink-1">Footer</a> <a href="navigation#sticky" class="sublink-1">Sticky headers &amp; footers</a>
+				<br/> <a href="table#table-title">Table</a>
+				<a href="table#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a> <a href="table#scrollable-tables" class="sublink-1">Scrollable tables</a>
+				<a href="table#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
+				<br/> <a href="card#card-title">Card</a>
+				<a href="card#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card#sections-media" class="sublink-1">Sections &amp; media</a>
+				<a href="card#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a> <a href="card#color-variants" class="sublink-1">Card color variants</a>
+				<br/> <a href="tab#tab-title">Tab</a>
+				<a href="tab#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab#stacked-tabs" class="sublink-1">Stacked tabs</a>
+				<br/> <a href="contextual#contextual-title">Contextual</a>
+				<a href="contextual#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual#toasts" class="sublink-1">Toasts</a>
+				<a href="contextual#tooltips" class="sublink-1">Tooltips</a> <a href="contextual#modals" class="sublink-1">Modals</a>
+				<br/> <a href="progress#progress-title">Progress</a>
+				<a href="progress#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress#progress-variants" class="sublink-1">Progress bar variants</a>
+				<a href="progress#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress#spinner-variants" class="sublink-1">Donut spinner variants</a>
+				<br/> <a href="utility#utility-title">Utility</a>
+				<a href="utility#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
+				<a href="utility#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
+				<a href="utility#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility#breadcrumbs" class="sublink-1">Breadcrumbs</a>
+				<a href="utility#close-icon" class="sublink-1">Close icon</a>
+				<a href="flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
+				<a href="templates"><h4 style="margin-left: 0;">Templates</h4></a>
+				<a href="customization"><h4 style="margin-left: 0;">Customization</h4></a>
+				<a href="quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
 			</nav>
 			<div class="col-sm-12 col-md-8 col-lg-10" id="col"><main>
       <div class="row" style="padding-top: 40px;" id="grid-title">
@@ -683,7 +683,7 @@
 	  </div>
       <div class="row" style="padding-bottom: 20px; padding-top:20px;">
         <div class="col-sm-12">
-          <p style="text-align: justify;">If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules.html">modules page</a> and choose another module to see its documentation.</p>
+          <p style="text-align: justify;">If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules">modules page</a> and choose another module to see its documentation.</p>
         </div>
       </div>
   	</main></div></div></div>

docs/index.html

@@ -62,17 +62,17 @@
   		<small id="codename">Fermion</small>
 		</div>
 	<header class="sticky">
-		<a href="index.html" class="logo"><span id="header-logo">m</span></a> <label class="drawer-toggle button" for="navigation-toggle"></label>
-		<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
-		<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
-		<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">Quick Reference</a>
+		<a href="index" class="logo"><span id="header-logo">m</span></a> <label class="drawer-toggle button" for="navigation-toggle"></label>
+		<a href="index" class="button hidden-sm">Introduction</a> <a href="modules" class="button hidden-sm">Modules</a>
+		<a href="flavors" class="button hidden-sm">Flavors</a> <a href="templates" class="button hidden-sm">Templates</a>
+		<a href="customization" class="button hidden-sm">Customization</a> <a href="quick_reference" class="button hidden-sm">Quick Reference</a>
 		<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
 	</header>
 	<input type="checkbox" id="navigation-toggle"> <nav class="drawer hidden-md hidden-lg">
 		<label class="close" for="navigation-toggle"></label>
-		<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a> <a href="modules.html"><h4 style="margin-left: 0;">Modules</h4></a>
-		<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a> <a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
-		<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a> <a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
+		<a href="index"><h4 style="margin-left: 0;">Introduction</h4></a> <a href="modules"><h4 style="margin-left: 0;">Modules</h4></a>
+		<a href="flavors"><h4 style="margin-left: 0;">Flavors</h4></a> <a href="templates"><h4 style="margin-left: 0;">Templates</h4></a>
+		<a href="customization"><h4 style="margin-left: 0;">Customization</h4></a> <a href="quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
 	</nav>
     <!-- Insert your page content here-->
     <main><div class="container responsive-padding">
@@ -116,11 +116,11 @@
 					<div class="col-sm-12 col-md-6 col-lg-4"><pre><span class="fore-tertiary">yarn add</span> <span class="fore-primary">mini.css</span></pre></div>
 					<div class="col-sm-12 col-md-6 col-lg-4"><pre><span class="fore-tertiary">bower install</span> <span class="fore-primary">mini.css</span></pre></div>
 				</div>
-				<p>After downloading <strong>mini.css</strong>, pick a <a href="flavors.html">Flavor</a> and use it for your project.</p>
+				<p>After downloading <strong>mini.css</strong>, pick a <a href="flavors">Flavor</a> and use it for your project.</p>
 				<br/>
 				<p style="text-align:justify">Alternatively, you can use either <strong>GitCDN</strong> or <strong>RawGit</strong> to import the default flavor of <strong>mini.css</strong>. Simply add one of the following references inside your HTML page's <code>&lt;head&gt;</code> tag:</p>
 				<pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-default.min.css&quot;</span>&gt;</pre>
-				<pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/v2.3.0/dist/mini-default.min.css&quot;</span>&gt;</pre><br/>
+				<pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/v2.3.4/dist/mini-default.min.css&quot;</span>&gt;</pre><br/>
 				<p style="text-align:justify">Finally, you can find <strong>mini.css</strong> on <a href="https://cdnjs.com/libraries/mini.css">cdnjs</a>, which you can use to include it in your projects.</p><br/>
 				<hr>
         </div>
@@ -143,32 +143,35 @@
         <div class="col-sm-12 col-lg-10 col-lg-offset-1">
           <h2>Quick overview</h2>
 					<p>Take a couple of minutes to explore what makes <strong>mini.css</strong> different from all those other CSS frameworks and UI toolkits.</p>
-					<figure style="margin: 0;" class="hidden-sm"><div style="position: relative; padding: 0.5rem; padding-bottom: 42%; margin-bottom: 0.25rem; margin-right: 1rem;"><iframe style="display: none; border: 0; position: absolute; width: 100%; height: 100%;" onload="this.style.display='block';" src="https://scrimba.com/cast/cast-1949.embed"></iframe></div><figcaption style="padding: 0.5rem;">Intro to mini.css by <a href="https://scrimba.com/casts/cast-1949" style="font-size: 0.8125rem; text-decoration: none;">Per Harald Borgen</a></figcaption></figure><br/>
+          <br/>
 					<h3>Why should I use mini.css?</h3>
 					<p style="text-align: justify;"><strong>mini.css</strong> is a lot lighter than a lot of other full-featured CSS frameworks (e.g. Bootstrap, Semantic UI), but it is not a micro framework (e.g. Milligram, Pure.CSS). Instead, <strong>mini.css</strong> blurs the line between full-featured and micro frameworks by providing lots of modules and components in a very small file. All the things you expect to find in a CSS framework, such as grids, styling for common elements and typography, along with some more complex components such as tabs or cards are all present in <strong>mini.css</strong>.</p>
+          <p>Not convinced yet? Maybe you should read these <a href="https://hackernoon.com/5-reasons-to-try-out-mini-css-62ddb47b9370">5 reasons</a> to try out <strong>mini.css</strong>.</p>
 					<br/>
 					<h3>What exactly does mini.css provide?</h3>
-					<p style="text-align: justify;">Many CSS frameworks utilize modules to deliver more components and features, without making it necessary for all developers to include them. <strong>mini.css</strong> provides a handful of very powerful <a href="modules.html">modules</a> that can do many different things. This way, developers only have to learn a few different HTML structures and patterns, while having the ability to build a lot of interesting things with them. You can see an overview of the modules below:</p>
+					<p style="text-align: justify;">Many CSS frameworks utilize modules to deliver more components and features, without making it necessary for all developers to include them. <strong>mini.css</strong> provides a handful of very powerful <a href="modules">modules</a> that can do many different things. This way, developers only have to learn a few different HTML structures and patterns, while having the ability to build a lot of interesting things with them. You can see an overview of the modules below:</p>
 					<ul>
-						<li><a href="core.html">Core</a> - Basic reset and fix rules, based on <a href="http://necolas.github.io/normalize.css/">Normalize.css</a> v5.0.0, typography and common textual element styling</li>
-						<li><a href="grid.html">Grid</a> - Powerful, responsive grid system based on the Flexible Layout Module (commonly known as <em>flexbox</em>)</li>
-						<li><a href="navigation.html">Navigation</a> - Common navigational elements such as headers, footers and navigation bars</li>
-						<li><a href="input_control.html">Input Control</a> - Form, input element, checkbox, radio button and button styling</li>
-						<li><a href="table.html">Table</a> - Modern table styling, horizontal and preset tables, table responsiveness for mobile devices</li>
-						<li><a href="card.html">Card</a> - Sleek, modern general-purpose content containers, media embedding</li>
-						<li><a href="tab.html">Tab</a> - Modern, responsive tabs, accordions and collapses</li>
-						<li><a href="contextual.html">Contextual</a> - Content highlight element styling, elegant alerts and accessible tooltips</li>
-						<li><a href="progress.html">Progress</a> - Modern progress bar styling and spinning progress indicators</li>
-						<li><a href="utility.html">Utility</a> - Utilities, visibility helper classes, responsive sizing and breadcrumbs</li>
-					</ul><br/>
+						<li><a href="core">Core</a> - Basic reset and fix rules, based on <a href="http://necolas.github.io/normalize.css/">Normalize.css</a> v5.0.0, typography and common textual element styling</li>
+						<li><a href="grid">Grid</a> - Powerful, responsive grid system based on the Flexible Layout Module (commonly known as <em>flexbox</em>)</li>
+						<li><a href="navigation">Navigation</a> - Common navigational elements such as headers, footers and navigation bars</li>
+						<li><a href="input_control">Input Control</a> - Form, input element, checkbox, radio button and button styling</li>
+						<li><a href="table">Table</a> - Modern table styling, horizontal and preset tables, table responsiveness for mobile devices</li>
+						<li><a href="card">Card</a> - Sleek, modern general-purpose content containers, media embedding</li>
+						<li><a href="tab">Tab</a> - Modern, responsive tabs, accordions and collapses</li>
+						<li><a href="contextual">Contextual</a> - Content highlight element styling, elegant alerts and accessible tooltips</li>
+						<li><a href="progress">Progress</a> - Modern progress bar styling and spinning progress indicators</li>
+						<li><a href="utility">Utility</a> - Utilities, visibility helper classes, responsive sizing and breadcrumbs</li>
+					</ul>
+					<p style="text-align: justify;">While not strictly part of the framework, we have also created component libraries for React and Preact, which will make your development faster and easier, especially if you are developing progressive web apps. You can get started with one of our Javascript libraries <a href="https://chalarangelo.github.io/react-mini.css/">here</a>!</p>
+					<br/>
 					<h3>How do I customize mini.css?</h3>
-					<p style="text-align: justify;"><strong>mini.css</strong> allows you to easily customize your designs, using <a href="flavors.html">Flavors</a>, pre-built color and style variants of the framework. The functionality is the same, but many things like color palettes, spacing and fonts can be easily changed by the community. Apart from that, you can easily build your own flavor by tweaking variables and using mixins, as explained in depth in the <a href="customization/index.html">customization</a> section.</p><br/>
+					<p style="text-align: justify;"><strong>mini.css</strong> allows you to easily customize your designs, using <a href="flavors">Flavors</a>, pre-built color and style variants of the framework. The functionality is the same, but many things like color palettes, spacing and fonts can be easily changed by the community. Apart from that, you can easily build your own flavor by tweaking variables and using mixins, as explained in depth in the <a href="customization">customization</a> section.</p><br/>
 				</div>
 				<div class="col-sm col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3 row">
 					<div class="card fluid" style=" width: 100%;">
 						<h3 class="section double-padded" style="text-align: center;">Support mini.css!</h3>
 						<p class="section double-padded" style="text-align: center;">If you like <strong>mini.css</strong>, remember that you can show your support by starring it on Github.<br/> It means a lot to us and it only takes a couple of seconds!</p>
-						<a href="https://github.com/Chalarangelo/mini.css" target="_blank" class="section button primary large" style="text-align: center;">Star mini.css</a>
+						<a href="https://github.com/Chalarangelo/mini.css" target="_blank" class="section button primary large" style="text-align: center;"><i class="fa fa-star-o fa-fw" aria-hidden="true"></i>&nbsp;Star mini.css</a>
 					</div>
 				</div>
       </div>
@@ -177,11 +180,19 @@
           <h2>Getting started</h2>
           <p>If you are still here after reading this far, we will assume you are interested or at least curious. Based on that assumption, here are a few links to help get you started:</p>
             <ul>
-            <li>For a quick guide on getting started, you might wanna take a look at the available <a href="modules.html">modules</a> list and the tutorials provided for each one!</li>
-						<li>To get you started even faster, we have created a handful of <a href="templates.html">templates</a> that might fit your needs!</li>
-            <li>If you are familiar with <strong>mini.css</strong> and want a cheat sheet or quick reference guide, check the <a href="quick_reference.html">quick reference</a> page!</li>
-            <li><strong>mini.css</strong> comes with a few nice pre-built customizable <a href="flavors.html">flavors</a>. See which one of them better suits your needs!</li>
-            <li>If you are more experienced or demanding, you can always take a look at the <a href="customization.html">customization</a> section to cook up a flavor of your own custom-tailored to your needs!</li>
+            <li>For a quick guide on getting started, you might want to take a look at the available <a href="modules">modules</a> list and the tutorials provided for each one!</li>
+						<li>To get you started even faster, we have created a handful of <a href="templates">templates</a> that might fit your needs!</li>
+            <li>If you want a step-by-step guide on how to utilize the most commonly used modules, be sure to check out these articles on Medium:
+              <ol>
+                <li><a href="https://hackernoon.com/designing-a-simple-web-page-with-mini-css-f455e9f6403b">Designing a simple web page with <strong>mini.css</strong></a></li>
+                <li><a href="https://hackernoon.com/using-the-mini-css-card-module-and-media-object-3c5b5829d19c">Using the <strong>mini.css</strong> card module and media object</a></li>
+                <li><a href="https://hackernoon.com/creating-a-mobile-friendly-navigation-using-mini-css-8cea580c51ed">Creating a mobile-friendly navigation using <strong>mini.css</strong></a></li>
+              </ol>
+            </li>
+            <li>If you are familiar with <strong>mini.css</strong> and want a cheat sheet or quick reference guide, check the <a href="quick_reference">quick reference</a> page!</li>
+						<li>If you want to develop a progressive web app or just utilize a virtual DOM, you should check out our <a href="https://github.com/Chalarangelo/react-mini.css">React &amp; Preact Libraries</a>, which will help you get started creating all kinds of custom components based on <strong>mini.css</strong>.
+            <li><strong>mini.css</strong> comes with a few nice pre-built customizable <a href="flavors">flavors</a>. See which one of them better suits your needs!</li>
+            <li>If you are more experienced or demanding, you can always take a look at the <a href="customization">customization</a> section to cook up a flavor of your own custom-tailored to your needs!</li>
 						<li>Finally, if you want to contribute to the framework's development in any way or have an interest in what happens behind the scenes, visit the <a href="https://github.com/Chalarangelo/mini.css">Github repository</a> to find out more.</li>
             </ul>
         </div>

docs/input_control.html

@@ -30,54 +30,54 @@
   </head>
   <body>
 		<header class="sticky">
-			<a href="index.html" class="logo"><span id="header-logo">m</span></a>
+			<a href="index" class="logo"><span id="header-logo">m</span></a>
 				<label class="drawer-toggle button" for="navigation-toggle"></label>
-			<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
-			<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
-			<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">Quick Reference</a>
+			<a href="index" class="button hidden-sm">Introduction</a> <a href="modules" class="button hidden-sm">Modules</a>
+			<a href="flavors" class="button hidden-sm">Flavors</a> <a href="templates" class="button hidden-sm">Templates</a>
+			<a href="customization" class="button hidden-sm">Customization</a> <a href="quick_reference" class="button hidden-sm">Quick Reference</a>
 			<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
 		</header>
 		<div class="container" style="padding-left: 0.25rem;">
 			<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
 				<label class="close" for="navigation-toggle"></label>
-				<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
-				<h4 style="margin-left: 0;">Modules</h4> <a href="core.html#core-title">Core</a>
-				<a href="core.html#typography" class="sublink-1">Typography</a> <a href="core.html#headings" class="sublink-1">Headings</a>
-				<a href="core.html#common-textual-elements" class="sublink-1">Common textual elements</a>
-				<a href="core.html#lists" class="sublink-1">Lists</a> <a href="core.html#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
-				<br/> <a href="grid.html#grid-title">Grid</a>
-				<a href="grid.html#basic-layout" class="sublink-1">Basic layout</a> <a href="grid.html#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
-				<a href="grid.html#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid.html#column-offset" class="sublink-1">Column offsets</a>
-				<a href="grid.html#column-reorder" class="sublink-1">Column reordering</a> <a href="grid.html#media-object" class="sublink-1">Media object pattern</a>
-				<br/> <a href="input_control.html#input-control-title">Input Control</a>
-				<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control.html#switches" class="sublink-1">Switches</a>
-				<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#file-upload" class="sublink-1">File upload buttons</a>
-				<br/> <a href="navigation.html#navigation-title">Navigation</a>
-				<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation.html#drawer" class="sublink-1">Drawer</a>
-				<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers &amp; footers</a>
-				<br/> <a href="table.html#table-title">Table</a>
-				<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a> <a href="table.html#scrollable-tables" class="sublink-1">Scrollable tables</a>
-				<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
-				<br/> <a href="card.html#card-title">Card</a>
-				<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections &amp; media</a>
-				<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a> <a href="card.html#color-variants" class="sublink-1">Card color variants</a>
-				<br/> <a href="tab.html#tab-title">Tab</a>
-				<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
-				<br/> <a href="contextual.html#contextual-title">Contextual</a>
-				<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
-				<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
-				<br/> <a href="progress.html#progress-title">Progress</a>
-				<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
-				<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
-				<br/> <a href="utility.html#utility-title">Utility</a>
-				<a href="utility.html#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility.html#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
-				<a href="utility.html#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
-				<a href="utility.html#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
-				<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
-				<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
-				<a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
-				<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a>
-				<a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
+				<a href="index"><h4 style="margin-left: 0;">Introduction</h4></a>
+				<h4 style="margin-left: 0;">Modules</h4> <a href="core#core-title">Core</a>
+				<a href="core#typography" class="sublink-1">Typography</a> <a href="core#headings" class="sublink-1">Headings</a>
+				<a href="core#common-textual-elements" class="sublink-1">Common textual elements</a>
+				<a href="core#lists" class="sublink-1">Lists</a> <a href="core#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
+				<br/> <a href="grid#grid-title">Grid</a>
+				<a href="grid#basic-layout" class="sublink-1">Basic layout</a> <a href="grid#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
+				<a href="grid#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid#column-offset" class="sublink-1">Column offsets</a>
+				<a href="grid#column-reorder" class="sublink-1">Column reordering</a> <a href="grid#media-object" class="sublink-1">Media object pattern</a>
+				<br/> <a href="input_control#input-control-title">Input Control</a>
+				<a href="input_control#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control#switches" class="sublink-1">Switches</a>
+				<a href="input_control#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control#file-upload" class="sublink-1">File upload buttons</a>
+				<br/> <a href="navigation#navigation-title">Navigation</a>
+				<a href="navigation#header" class="sublink-1">Header</a> <a href="navigation#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation#drawer" class="sublink-1">Drawer</a>
+				<a href="navigation#footer" class="sublink-1">Footer</a> <a href="navigation#sticky" class="sublink-1">Sticky headers &amp; footers</a>
+				<br/> <a href="table#table-title">Table</a>
+				<a href="table#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a> <a href="table#scrollable-tables" class="sublink-1">Scrollable tables</a>
+				<a href="table#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
+				<br/> <a href="card#card-title">Card</a>
+				<a href="card#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card#sections-media" class="sublink-1">Sections &amp; media</a>
+				<a href="card#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a> <a href="card#color-variants" class="sublink-1">Card color variants</a>
+				<br/> <a href="tab#tab-title">Tab</a>
+				<a href="tab#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab#stacked-tabs" class="sublink-1">Stacked tabs</a>
+				<br/> <a href="contextual#contextual-title">Contextual</a>
+				<a href="contextual#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual#toasts" class="sublink-1">Toasts</a>
+				<a href="contextual#tooltips" class="sublink-1">Tooltips</a> <a href="contextual#modals" class="sublink-1">Modals</a>
+				<br/> <a href="progress#progress-title">Progress</a>
+				<a href="progress#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress#progress-variants" class="sublink-1">Progress bar variants</a>
+				<a href="progress#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress#spinner-variants" class="sublink-1">Donut spinner variants</a>
+				<br/> <a href="utility#utility-title">Utility</a>
+				<a href="utility#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
+				<a href="utility#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
+				<a href="utility#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility#breadcrumbs" class="sublink-1">Breadcrumbs</a>
+				<a href="utility#close-icon" class="sublink-1">Close icon</a>
+				<a href="flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
+				<a href="templates"><h4 style="margin-left: 0;">Templates</h4></a>
+				<a href="customization"><h4 style="margin-left: 0;">Customization</h4></a>
+				<a href="quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
 			</nav>
 				<div class="col-sm-12 col-md-8 col-lg-10"><main>
       <div class="row" style="padding-top: 40px;" id="input-control-title">
@@ -107,7 +107,7 @@
           <div class="card fluid">
             <div class="section"><h2>Forms &amp; input</h2></div>
             <div class="section row">
-              <div class="col-sm-12 col-sm-last col-lg-4 col-md-normal">
+              <div class="col-sm-12 col-sm-last col-md-normal col-lg-8 col-lg-offset-2">
               <form>
               <fieldset>
                 <legend>Inline form (default style)</legend>
@@ -137,9 +137,18 @@
                     <label for="number">Number</label>
                   </div>
                   <div class="col-sm-12 col-md">
-                    <input type="number" value="4" id="number" style="width:85%;">
+                    <input type="number" value="42" id="number" style="width:85%;">
                   </div>
                 </div>
+                <div class="row responsive-label">
+                  <div class="col-sm-12 col-md-3">
+                    <label for="invalid">Invalid</label>
+                  </div>
+                  <div class="col-sm-12 col-md">
+                    <input value="invalid" id="invalid" style="width:85%;">
+                  </div>
+                  <script>document.getElementById("invalid").setCustomValidity("This field is invalid");</script>
+                </div>
                 <div class="row responsive-label">
                   <div class="col-sm-12 col-md-3">
                     <label for="disabled">Disabled</label>
@@ -167,9 +176,9 @@
               </fieldset>
               </form>
               </div>
-              <div class="col-sm-12 col-sm-first col-lg-8 col-md-normal">
+              <div class="col-sm-12 col-sm-first col-md-normal">
                 <p style="text-align: justify;">Forms are structured the same way you would structure a normal form in HTML5. Simply create a root <code>&lt;form&gt;</code> element and add your <code>&lt;input&gt;</code> elements inside. Link them to <code>&lt;label&gt;</code> elements for ease of access and you are pretty much set. We highly recommend using the <code>&lt;fieldset&gt;</code> and <code>&lt;legend&gt;</code> elements to annotate your forms as well, but you can skip them if you wish.</p>
-                <p style="text-align: justify;">Forms are inline by default. Use the <code>.input-group</code> class on a <code>&lt;div&gt;</code> wrapping inside it an <code>&lt;input&gt;</code> and <code>&lt;label&gt;</code> pair to make sure they always display together in one line. You can make your <code>.input-group</code>s respond to viewport changes, by adding the <code>.fluid</code> class to them or you can align them vertically by adding the <code>.vertical</code> class. Finally, if you want to create aligned forms with a preset layout, you can utilize the <a href="grid.html"><strong>grid</strong></a> module's rows and columns.</p>
+                <p style="text-align: justify;">Forms are inline by default. Use the <code>.input-group</code> class on a <code>&lt;div&gt;</code> wrapping inside it an <code>&lt;input&gt;</code> and <code>&lt;label&gt;</code> pair to make sure they always display together in one line. You can make your <code>.input-group</code>s respond to viewport changes, by adding the <code>.fluid</code> class to them or you can align them vertically by adding the <code>.vertical</code> class. Finally, if you want to create aligned forms with a preset layout, you can utilize the <a href="grid"><strong>grid</strong></a> module's rows and columns.</p>
                 <h3>Sample code</h3>
                 <pre>&lt;form&gt;
   &lt;fieldset&gt;
@@ -406,7 +415,7 @@
 						<div class="section">
 						<h3>Notes</h3>
 							<ul style="text-align: justify;">
-								<li>You can create your own color variants for the <code>.switch</code> component. For more information, check out the <a href="customization.html">customization page</a>.</li>
+								<li>You can create your own color variants for the <code>.switch</code> component. For more information, check out the <a href="customization">customization page</a>.</li>
 							</ul><hr>
 							<div class="row">
 								<div class="col-sm-12">
@@ -467,7 +476,7 @@
             <div class="section">
             <h3>Notes</h3>
               <ul style="text-align: justify;">
-                <li>If you want more color or size variants for your buttons, check out the <a href="customization.html">customization</a> page.</li>
+                <li>If you want more color or size variants for your buttons, check out the <a href="customization">customization</a> page.</li>
                 <li>The <code>.button-group</code> component is compatible with modern browsers, but might not display properly in older browsers.</li>
                 <li><code>.button-group</code>s will display as a horizontal container with all their buttons in one row on medium-sized and larger displays, however they will collapse into a column view for smaller displays.</li>
               </ul><hr>
@@ -545,7 +554,7 @@
       </div>
       <div class="row" style="padding-bottom: 20px; padding-top:20px;">
         <div class="col-sm-12">
-          <p style="text-align: justify;">If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules.html">modules page</a> and choose another module to see its documentation.</p>
+          <p style="text-align: justify;">If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules">modules page</a> and choose another module to see its documentation.</p>
         </div>
       </div>
     </main></div></div></div>

docs/mini-logo.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="401px" height="520px" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="239 62 131 170" preserveAspectRatio="xMidYMid meet" ><rect id="svgEditorBackground" x="0" y="0" width="1160" height="520" style="fill: none; stroke: none;"/><g id="e605_group" transform="matrix(1.2583, 0, 0, 1.2583, -50.238, -27.3693)"><circle id="e401_circle" cx="300.899" cy="92.3735" style="stroke-width: 6px;" stroke="white" r="10.0499" fill="white" transform="matrix(0.837071, 0, 0, 0.837071, 46.4308, 12.3787)"/><path d="M281.412,149.35 c-13.5,23.5 23,37 21.5,-22.5" style="fill: none; stroke-width: 3px; stroke-linecap: round; stroke-linejoin: round;" stroke="white" id="e402_arc3" transform="matrix(1.38342, 0, 0, 1.38342, -117.247, -48.1062)"/></g><g id="e630_group" transform="matrix(1.2583, 0, 0, 1.2583, -50.238, -27.3693)"><path d="M299,90 c-65,-12 -87,55 2.5,37.5" style="fill: none; stroke-width: 3px; stroke-linecap: round; stroke-linejoin: miter;" stroke="white" id="e631_arc3"/></g></svg>

docs/modules.html

@@ -23,54 +23,54 @@
   </head>
   <body>
 		<header class="sticky">
-			<a href="index.html" class="logo"><span id="header-logo">m</span></a>
+			<a href="index" class="logo"><span id="header-logo">m</span></a>
 				<label class="drawer-toggle button" for="navigation-toggle"></label>
-			<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
-			<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
-			<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">Quick Reference</a>
+			<a href="index" class="button hidden-sm">Introduction</a> <a href="modules" class="button hidden-sm">Modules</a>
+			<a href="flavors" class="button hidden-sm">Flavors</a> <a href="templates" class="button hidden-sm">Templates</a>
+			<a href="customization" class="button hidden-sm">Customization</a> <a href="quick_reference" class="button hidden-sm">Quick Reference</a>
 			<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
 		</header>
 		<div class="container" style="padding-left: 0.25rem;">
 			<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
 				<label class="close" for="navigation-toggle"></label>
-				<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
-				<h4 style="margin-left: 0;">Modules</h4> <a href="core.html#core-title">Core</a>
-				<a href="core.html#typography" class="sublink-1">Typography</a> <a href="core.html#headings" class="sublink-1">Headings</a>
-				<a href="core.html#common-textual-elements" class="sublink-1">Common textual elements</a>
-				<a href="core.html#lists" class="sublink-1">Lists</a> <a href="core.html#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
-				<br/> <a href="grid.html#grid-title">Grid</a>
-				<a href="grid.html#basic-layout" class="sublink-1">Basic layout</a> <a href="grid.html#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
-				<a href="grid.html#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid.html#column-offset" class="sublink-1">Column offsets</a>
-				<a href="grid.html#column-reorder" class="sublink-1">Column reordering</a> <a href="grid.html#media-object" class="sublink-1">Media object pattern</a>
-				<br/> <a href="input_control.html#input-control-title">Input Control</a>
-				<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control.html#switches" class="sublink-1">Switches</a>
-				<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#file-upload" class="sublink-1">File upload buttons</a>
-				<br/> <a href="navigation.html#navigation-title">Navigation</a>
-				<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation.html#drawer" class="sublink-1">Drawer</a>
-				<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers &amp; footers</a>
-				<br/> <a href="table.html#table-title">Table</a>
-				<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a> <a href="table.html#scrollable-tables" class="sublink-1">Scrollable tables</a>
-				<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
-				<br/> <a href="card.html#card-title">Card</a>
-				<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections &amp; media</a>
-				<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a> <a href="card.html#color-variants" class="sublink-1">Card color variants</a>
-				<br/> <a href="tab.html#tab-title">Tab</a>
-				<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
-				<br/> <a href="contextual.html#contextual-title">Contextual</a>
-				<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
-				<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
-				<br/> <a href="progress.html#progress-title">Progress</a>
-				<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
-				<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
-				<br/> <a href="utility.html#utility-title">Utility</a>
-				<a href="utility.html#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility.html#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
-				<a href="utility.html#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
-				<a href="utility.html#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
-				<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
-				<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
-				<a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
-				<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a>
-				<a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
+				<a href="index"><h4 style="margin-left: 0;">Introduction</h4></a>
+				<h4 style="margin-left: 0;">Modules</h4> <a href="core#core-title">Core</a>
+				<a href="core#typography" class="sublink-1">Typography</a> <a href="core#headings" class="sublink-1">Headings</a>
+				<a href="core#common-textual-elements" class="sublink-1">Common textual elements</a>
+				<a href="core#lists" class="sublink-1">Lists</a> <a href="core#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
+				<br/> <a href="grid#grid-title">Grid</a>
+				<a href="grid#basic-layout" class="sublink-1">Basic layout</a> <a href="grid#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
+				<a href="grid#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid#column-offset" class="sublink-1">Column offsets</a>
+				<a href="grid#column-reorder" class="sublink-1">Column reordering</a> <a href="grid#media-object" class="sublink-1">Media object pattern</a>
+				<br/> <a href="input_control#input-control-title">Input Control</a>
+				<a href="input_control#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control#switches" class="sublink-1">Switches</a>
+				<a href="input_control#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control#file-upload" class="sublink-1">File upload buttons</a>
+				<br/> <a href="navigation#navigation-title">Navigation</a>
+				<a href="navigation#header" class="sublink-1">Header</a> <a href="navigation#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation#drawer" class="sublink-1">Drawer</a>
+				<a href="navigation#footer" class="sublink-1">Footer</a> <a href="navigation#sticky" class="sublink-1">Sticky headers &amp; footers</a>
+				<br/> <a href="table#table-title">Table</a>
+				<a href="table#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a> <a href="table#scrollable-tables" class="sublink-1">Scrollable tables</a>
+				<a href="table#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
+				<br/> <a href="card#card-title">Card</a>
+				<a href="card#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card#sections-media" class="sublink-1">Sections &amp; media</a>
+				<a href="card#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a> <a href="card#color-variants" class="sublink-1">Card color variants</a>
+				<br/> <a href="tab#tab-title">Tab</a>
+				<a href="tab#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab#stacked-tabs" class="sublink-1">Stacked tabs</a>
+				<br/> <a href="contextual#contextual-title">Contextual</a>
+				<a href="contextual#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual#toasts" class="sublink-1">Toasts</a>
+				<a href="contextual#tooltips" class="sublink-1">Tooltips</a> <a href="contextual#modals" class="sublink-1">Modals</a>
+				<br/> <a href="progress#progress-title">Progress</a>
+				<a href="progress#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress#progress-variants" class="sublink-1">Progress bar variants</a>
+				<a href="progress#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress#spinner-variants" class="sublink-1">Donut spinner variants</a>
+				<br/> <a href="utility#utility-title">Utility</a>
+				<a href="utility#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
+				<a href="utility#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
+				<a href="utility#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility#breadcrumbs" class="sublink-1">Breadcrumbs</a>
+				<a href="utility#close-icon" class="sublink-1">Close icon</a>
+				<a href="flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
+				<a href="templates"><h4 style="margin-left: 0;">Templates</h4></a>
+				<a href="customization"><h4 style="margin-left: 0;">Customization</h4></a>
+				<a href="quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
 			</nav>
 				<div class="col-sm-12 col-md-8 col-lg-10"><main>
       <div class="row" style="padding-top: 40px;">
@@ -84,25 +84,25 @@
           <div class="card fluid">
             <h2 class="section"><mark class="primary"><i class="fa fa-font fa-fw" aria-hidden="true"></i></mark>&nbsp;Core</h2>
             <div class="section box-left"><p style="text-align: justify;">The <strong>core</strong> module contains basic reset and fix rules, based on <a href="http://necolas.github.io/normalize.css/">Normalize.css</a> v5.0.0, along with lots of custom typography rules. Most textual HTML5 elements are styled by this module, so you can start writing your pages immediately without worrying about font families, weights, sizes, line heights, paddings and the like. More specifically, the <strong>core</strong> module contains:</p><ul>
-							<li><a href="core.html#typography" class="sublink-1">General typography rules</a></li>
-							<li><a href="core.html#headings" class="sublink-1">Styling for headings</a></li>
-							<li><a href="core.html#common-textual-elements" class="sublink-1">Styling for common textual elements</a></li>
-							<li><a href="core.html#lists" class="sublink-1">Styling for lists</a></li>
-							<li><a href="core.html#images-captions" class="sublink-1">Rules for image responsiveness and captions</a></li>
-						</ul></div><a href="core.html" class="button section">See more</a>
+							<li><a href="core#typography" class="sublink-1">General typography rules</a></li>
+							<li><a href="core#headings" class="sublink-1">Styling for headings</a></li>
+							<li><a href="core#common-textual-elements" class="sublink-1">Styling for common textual elements</a></li>
+							<li><a href="core#lists" class="sublink-1">Styling for lists</a></li>
+							<li><a href="core#images-captions" class="sublink-1">Rules for image responsiveness and captions</a></li>
+						</ul></div><a href="core" class="button section">See more</a>
           </div>
         </div>
         <div class="col-sm-12 col-lg-6 row">
           <div class="card fluid">
             <h2 class="section"><mark class="secondary"><i class="fa fa-th-large fa-fw" aria-hidden="true"></i></mark>&nbsp;Grid</h2>
             <div class="section box-left"><p style="text-align: justify;">The <strong>grid</strong> module provides you with a modern, responsive grid system based on the Flexible Layout Module (commonly known as <em>flexbox</em>). The structure of the grid is simple and logical, allowing you to quickly build your pages from scratch. Setting the layout for a page is easy and will behave the way you want them to on mobile devices and smaller screens. More specifically, the <strong>grid</strong> module contains:</p><ul>
-							<li><a href="grid.html#basic-layout" class="sublink-1">Containers, rows and columns for layout</a></li>
-							<li><a href="grid.html#screen-specific-layout" class="sublink-1">Classes for defining screen-specific layouts</a></li>
-							<li><a href="grid.html#predefined-layout" class="sublink-1">Classes for predefined layouts</a></li>
-							<li><a href="grid.html#column-offset" class="sublink-1">Classes for content offsetting</a></li>
-							<li><a href="grid.html#column-reorder" class="sublink-1">Classes for content reordering</a></li>
-							<li><a href="grid.html#media-object" class="sublink-1">Layout examples for implementing the media object pattern</a></li>
-						</ul></div><a href="grid.html" class="button section">See more</a>
+							<li><a href="grid#basic-layout" class="sublink-1">Containers, rows and columns for layout</a></li>
+							<li><a href="grid#screen-specific-layout" class="sublink-1">Classes for defining screen-specific layouts</a></li>
+							<li><a href="grid#predefined-layout" class="sublink-1">Classes for predefined layouts</a></li>
+							<li><a href="grid#column-offset" class="sublink-1">Classes for content offsetting</a></li>
+							<li><a href="grid#column-reorder" class="sublink-1">Classes for content reordering</a></li>
+							<li><a href="grid#media-object" class="sublink-1">Layout examples for implementing the media object pattern</a></li>
+						</ul></div><a href="grid" class="button section">See more</a>
           </div>
         </div>
       </div>
@@ -111,24 +111,24 @@
           <div class="card fluid">
             <h2 class="section"><mark class="tertiary"><i class="fa fa-keyboard-o fa-fw" aria-hidden="true"></i></mark>&nbsp;Input Control</h2>
             <div class="section box-left"><p style="text-align: justify;">The <strong>input_control</strong> module contains rules that affect forms, input elements, buttons, checkboxes and radio buttons. All of these elements's styles are predefined, allowing you to create modern, responsive forms quickly. Layout alternatives are also provided if you want your forms to look a certain way. More specifically, the <strong>input_control</strong> module contains:</p><ul>
-							<li><a href="input_control.html#forms-input" class="sublink-1">Styling for forms and input elements</a></li>
-							<li><a href="input_control.html#checkbox-radio" class="sublink-1">Styling for checkboxes and radio buttons</a></li>
-							<li><a href="input_control.html#buttons" class="sublink-1">Styling and grouping classes for buttons</a></li>
-							<li><a href="input_control.html#switches" class="sublink-1">Classes for creating switches</a></li>
-							<li><a href="input_control.html#file-upload" class="sublink-1">Workarounds for styling file upload buttons</a></li>
-						</ul></div><a href="input_control.html" class="button section">See more</a>
+							<li><a href="input_control#forms-input" class="sublink-1">Styling for forms and input elements</a></li>
+							<li><a href="input_control#checkbox-radio" class="sublink-1">Styling for checkboxes and radio buttons</a></li>
+							<li><a href="input_control#buttons" class="sublink-1">Styling and grouping classes for buttons</a></li>
+							<li><a href="input_control#switches" class="sublink-1">Classes for creating switches</a></li>
+							<li><a href="input_control#file-upload" class="sublink-1">Workarounds for styling file upload buttons</a></li>
+						</ul></div><a href="input_control" class="button section">See more</a>
           </div>
         </div>
         <div class="col-sm-12 col-lg-6 row">
           <div class="card fluid">
             <h2 class="section"><mark class="primary"><i class="fa fa-compass fa-fw" aria-hidden="true"></i></mark>&nbsp;Navigation</h2>
             <div class="section box-left"><p style="text-align: justify;">The <strong>navigation</strong> module seeks to remedy the problems of vertical and horizontal navigation design paradigms, by combining the two for a better presentational effect. HTML5 navigational elements are at the heart of the module, allowing you to quickly build your navigation menus. More specifically, the <strong>navigation</strong> module contains:</p><ul>
-							<li><a href="navigation.html#header" class="sublink-1">Styling for headers, logos and header links</a></li>
-							<li><a href="navigation.html#navigation-bar" class="sublink-1">Styling for navigation bars</a></li>
-							<li><a href="navigation.html#drawer" class="sublink-1">Classes for creating responsive drawers</a></li>
-							<li><a href="navigation.html#footer" class="sublink-1">Styling for footers</a></li>
-							<li><a href="navigation.html#sticky" class="sublink-1">Classes for making headers and footers sticky</a></li>
-						</ul></div><a href="navigation.html" class="button section">See more</a>
+							<li><a href="navigation#header" class="sublink-1">Styling for headers, logos and header links</a></li>
+							<li><a href="navigation#navigation-bar" class="sublink-1">Styling for navigation bars</a></li>
+							<li><a href="navigation#drawer" class="sublink-1">Classes for creating responsive drawers</a></li>
+							<li><a href="navigation#footer" class="sublink-1">Styling for footers</a></li>
+							<li><a href="navigation#sticky" class="sublink-1">Classes for making headers and footers sticky</a></li>
+						</ul></div><a href="navigation" class="button section">See more</a>
           </div>
         </div>
       </div>
@@ -137,22 +137,22 @@
           <div class="card fluid">
             <h2 class="section"><mark class="primary"><i class="fa fa-table fa-fw" aria-hidden="true"></i></mark>&nbsp;Table</h2>
             <div class="section box-left"><p style="text-align: justify;">The <strong>table</strong> module provides styling and responsiveness for tables. Simple rules and accessible design paradigms have been used to make creating tables quick and easy. Large tables will collapse to cards when on smaller devices or, if you don't want that, they can be locked into their default, desktop view. More specifically, the <strong>table</strong> module contains:</p><ul>
-							<li><a href="table.html#syntax-responsiveness" class="sublink-1">Styling for tables and built-in responsiveness</a></li>
-							<li><a href="table.html#scrollable-tables" class="sublink-1">Classes for creating scrollable tables</a></li>
-							<li><a href="table.html#horizontal-tables" class="sublink-1">Classes for creating horizontal tables</a></li>
-							<li><a href="table.html#variants-matrices" class="sublink-1">Classes for creating table variants and matrices</a></li>
-						</ul></div><a href="table.html" class="button section">See more</a>
+							<li><a href="table#syntax-responsiveness" class="sublink-1">Styling for tables and built-in responsiveness</a></li>
+							<li><a href="table#scrollable-tables" class="sublink-1">Classes for creating scrollable tables</a></li>
+							<li><a href="table#horizontal-tables" class="sublink-1">Classes for creating horizontal tables</a></li>
+							<li><a href="table#variants-matrices" class="sublink-1">Classes for creating table variants and matrices</a></li>
+						</ul></div><a href="table" class="button section">See more</a>
           </div>
         </div>
         <div class="col-sm-12 col-lg-6 row">
           <div class="card fluid">
             <h2 class="section"><mark class="secondary"><i class="fa fa-id-card-o fa-fw" aria-hidden="true"></i></mark>&nbsp;Card</h2>
             <div class="section box-left"><p style="text-align: justify;">The <strong>card</strong> module provides you with modern, responsive, general-purpose containers for your page's contents. They are very easy to use and their structure is really simple and versatile. Layouts will respond to smaller screens, realigning the cards in a manner that makes your page mobile-friendly. More specifically, the <strong>card</strong> module contains:</p><ul>
-							<li><a href="card.html#basic-syntax" class="sublink-1">Classes for creating card-based layouts</a></li>
-							<li><a href="card.html#sections-media" class="sublink-1">Classes for creating card sections and adding media</a></li>
-							<li><a href="card.html#sizing-fluidity" class="sublink-1">Classes for creating card variants and making cards fluid</a></li>
-							<li><a href="card.html#color-variants" class="sublink-1">Classes for creating card color variants</a></li>
-						</ul></div><a href="card.html" class="button section">See more</a>
+							<li><a href="card#basic-syntax" class="sublink-1">Classes for creating card-based layouts</a></li>
+							<li><a href="card#sections-media" class="sublink-1">Classes for creating card sections and adding media</a></li>
+							<li><a href="card#sizing-fluidity" class="sublink-1">Classes for creating card variants and making cards fluid</a></li>
+							<li><a href="card#color-variants" class="sublink-1">Classes for creating card color variants</a></li>
+						</ul></div><a href="card" class="button section">See more</a>
           </div>
         </div>
       </div>
@@ -161,20 +161,20 @@
           <div class="card fluid">
             <h2 class="section"><mark class="secondary"><i class="fa fa-files-o fa-fw" aria-hidden="true"></i></mark>&nbsp;Tab</h2>
             <div class="section box-left"><p style="text-align: justify;">The <strong>tab</strong> module aims to combine multiple components and design paradigms, like collapses, accordions, carousels and tabs, into one general-purpose component. Tabs are very simple in structure, responsive on mobile and they allow for layout customization so that you can turn them into accordions or collapses whenever you want. More specifically, the <strong>tab</strong> module contains:</p><ul>
-							<li><a href="tab.html#basic-syntax" class="sublink-1">Classes for creating tab-based layouts</a></li>
-							<li><a href="tab.html#stacked-tabs" class="sublink-1">Classes for creating stacked tabs, accordions and collapses</a></li>
-						</ul></div><a href="tab.html" class="button section">See more</a>
+							<li><a href="tab#basic-syntax" class="sublink-1">Classes for creating tab-based layouts</a></li>
+							<li><a href="tab#stacked-tabs" class="sublink-1">Classes for creating stacked tabs, accordions and collapses</a></li>
+						</ul></div><a href="tab" class="button section">See more</a>
           </div>
         </div>
         <div class="col-sm-12 col-lg-6 row">
           <div class="card fluid">
             <h2 class="section"><mark class="secondary"><i class="fa fa-tags fa-fw" aria-hidden="true"></i></mark>&nbsp;Contextual</h2>
             <div class="section box-left"><p style="text-align: justify;">The <strong>contextual</strong> module provides you with simple tags, marks and highlights for your pages, allowing you to easily emphasize parts of your text. Contextual toasts, tooltips and modals are also provided, aiming to help deliver important information to users. HTML5 elements and simple rules are used in order to make important messages and pieces of content stand out easily. More specifically, the <strong>contextual</strong> module contains:</p><ul>
-							<li><a href="contextual.html#text-highlighting" class="sublink-1">Styling for highlighted text</a></li>
-							<li><a href="contextual.html#toasts" class="sublink-1">Classes for creating toast messages</a></li>
-							<li><a href="contextual.html#tooltips" class="sublink-1">Classes for creating hover-over tooltips</a></li>
-							<li><a href="contextual.html#modals" class="sublink-1">Classes for creating modal dialogs</a></li>
-						</ul></div><a href="contextual.html" class="button section">See more</a>
+							<li><a href="contextual#text-highlighting" class="sublink-1">Styling for highlighted text</a></li>
+							<li><a href="contextual#toasts" class="sublink-1">Classes for creating toast messages</a></li>
+							<li><a href="contextual#tooltips" class="sublink-1">Classes for creating hover-over tooltips</a></li>
+							<li><a href="contextual#modals" class="sublink-1">Classes for creating modal dialogs</a></li>
+						</ul></div><a href="contextual" class="button section">See more</a>
           </div>
         </div>
       </div>
@@ -183,24 +183,24 @@
           <div class="card fluid">
             <h2 class="section"><mark class="tertiary"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i></mark>&nbsp;Progress</h2>
             <div class="section box-left"><p style="text-align: justify;">The <strong>progress</strong> module gives you full control over the presentation of progress and loading on your pages. Apart from progress bars and color variants for them, spinner elements are provided to help communicate that something is loading. More specifically, the <strong>progress</strong> module contains:</p><ul>
-							<li><a href="progress.html#basic-progress-bar" class="sublink-1">Styling for progress bars</a></li>
-							<li><a href="progress.html#progress-variants" class="sublink-1">Classes for creating progress bar variants</a></li>
-							<li><a href="progress.html#donut-spinner" class="sublink-1">Classes for creating donut spinners</a></li>
-							<li><a href="progress.html#spinner-variants" class="sublink-1">Classes for creating donut spinner variants</a></li>
-						</ul></div><a href="progress.html" class="button section">See more</a>
+							<li><a href="progress#basic-progress-bar" class="sublink-1">Styling for progress bars</a></li>
+							<li><a href="progress#progress-variants" class="sublink-1">Classes for creating progress bar variants</a></li>
+							<li><a href="progress#donut-spinner" class="sublink-1">Classes for creating donut spinners</a></li>
+							<li><a href="progress#spinner-variants" class="sublink-1">Classes for creating donut spinner variants</a></li>
+						</ul></div><a href="progress" class="button section">See more</a>
           </div>
         </div>
         <div class="col-sm-12 col-lg-6 row">
           <div class="card fluid">
             <h2 class="section"><mark class="tertiary"><i class="fa fa-wrench fa-fw" aria-hidden="true"></i></mark>&nbsp;Utility</h2>
             <div class="section box-left"><p style="text-align: justify;">The <strong>utility</strong> module contains all the utilities and helper classes that you might want when designing a website or application. They solve common design problems efficiently and provide you with generic rules you can easily apply everywhere. More specifically, the <strong>utility</strong> module contains:</p><ul>
-							<li><a href="utility.html#visibility-helpers" class="sublink-1">Visibility helpers for hiding elements</a></li>
-							<li><a href="utility.html#borders-shadows" class="sublink-1">Classes for creating generic borders and shadows</a></li>
-							<li><a href="utility.html#responsive-sizing" class="sublink-1">Classes for responsive sizing and spacing</a></li>
-							<li><a href="utility.html#responsive-visibility" class="sublink-1">Responsive visibility helpers for hiding elements</a></li>
-							<li><a href="utility.html#breadcrumbs" class="sublink-1">Classes for creating breadcrumbs</a></li>
-							<li><a href="utility.html#close-icon" class="sublink-1">Classes for creating close icons</a></li>
-						</ul></div><a href="utility.html" class="button section">See more</a>
+							<li><a href="utility#visibility-helpers" class="sublink-1">Visibility helpers for hiding elements</a></li>
+							<li><a href="utility#borders-shadows" class="sublink-1">Classes for creating generic borders and shadows</a></li>
+							<li><a href="utility#responsive-sizing" class="sublink-1">Classes for responsive sizing and spacing</a></li>
+							<li><a href="utility#responsive-visibility" class="sublink-1">Responsive visibility helpers for hiding elements</a></li>
+							<li><a href="utility#breadcrumbs" class="sublink-1">Classes for creating breadcrumbs</a></li>
+							<li><a href="utility#close-icon" class="sublink-1">Classes for creating close icons</a></li>
+						</ul></div><a href="utility" class="button section">See more</a>
           </div>
         </div>
       </div>

docs/navigation.html

@@ -32,54 +32,54 @@
   </head>
   <body>
 		<header class="sticky">
-			<a href="index.html" class="logo"><span id="header-logo">m</span></a>
+			<a href="index" class="logo"><span id="header-logo">m</span></a>
 				<label class="drawer-toggle button" for="navigation-toggle"></label>
-			<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
-			<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
-			<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">Quick Reference</a>
+			<a href="index" class="button hidden-sm">Introduction</a> <a href="modules" class="button hidden-sm">Modules</a>
+			<a href="flavors" class="button hidden-sm">Flavors</a> <a href="templates" class="button hidden-sm">Templates</a>
+			<a href="customization" class="button hidden-sm">Customization</a> <a href="quick_reference" class="button hidden-sm">Quick Reference</a>
 			<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
 		</header>
 		<div class="container" style="padding-left: 0.25rem;">
 			<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2" id="real-drawer">
 				<label class="close" for="navigation-toggle"></label>
-				<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
-				<h4 style="margin-left: 0;">Modules</h4> <a href="core.html#core-title">Core</a>
-				<a href="core.html#typography" class="sublink-1">Typography</a> <a href="core.html#headings" class="sublink-1">Headings</a>
-				<a href="core.html#common-textual-elements" class="sublink-1">Common textual elements</a>
-				<a href="core.html#lists" class="sublink-1">Lists</a> <a href="core.html#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
-				<br/> <a href="grid.html#grid-title">Grid</a>
-				<a href="grid.html#basic-layout" class="sublink-1">Basic layout</a> <a href="grid.html#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
-				<a href="grid.html#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid.html#column-offset" class="sublink-1">Column offsets</a>
-				<a href="grid.html#column-reorder" class="sublink-1">Column reordering</a> <a href="grid.html#media-object" class="sublink-1">Media object pattern</a>
-				<br/> <a href="input_control.html#input-control-title">Input Control</a>
-				<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control.html#switches" class="sublink-1">Switches</a>
-				<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#file-upload" class="sublink-1">File upload buttons</a>
-				<br/> <a href="navigation.html#navigation-title">Navigation</a>
-				<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation.html#drawer" class="sublink-1">Drawer</a>
-				<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers &amp; footers</a>
-				<br/> <a href="table.html#table-title">Table</a>
-				<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a> <a href="table.html#scrollable-tables" class="sublink-1">Scrollable tables</a>
-				<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
-				<br/> <a href="card.html#card-title">Card</a>
-				<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections &amp; media</a>
-				<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a> <a href="card.html#color-variants" class="sublink-1">Card color variants</a>
-				<br/> <a href="tab.html#tab-title">Tab</a>
-				<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
-				<br/> <a href="contextual.html#contextual-title">Contextual</a>
-				<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
-				<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
-				<br/> <a href="progress.html#progress-title">Progress</a>
-				<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
-				<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
-				<br/> <a href="utility.html#utility-title">Utility</a>
-				<a href="utility.html#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility.html#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
-				<a href="utility.html#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
-				<a href="utility.html#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
-				<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
-				<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
-				<a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
-				<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a>
-				<a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
+				<a href="index"><h4 style="margin-left: 0;">Introduction</h4></a>
+				<h4 style="margin-left: 0;">Modules</h4> <a href="core#core-title">Core</a>
+				<a href="core#typography" class="sublink-1">Typography</a> <a href="core#headings" class="sublink-1">Headings</a>
+				<a href="core#common-textual-elements" class="sublink-1">Common textual elements</a>
+				<a href="core#lists" class="sublink-1">Lists</a> <a href="core#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
+				<br/> <a href="grid#grid-title">Grid</a>
+				<a href="grid#basic-layout" class="sublink-1">Basic layout</a> <a href="grid#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
+				<a href="grid#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid#column-offset" class="sublink-1">Column offsets</a>
+				<a href="grid#column-reorder" class="sublink-1">Column reordering</a> <a href="grid#media-object" class="sublink-1">Media object pattern</a>
+				<br/> <a href="input_control#input-control-title">Input Control</a>
+				<a href="input_control#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control#switches" class="sublink-1">Switches</a>
+				<a href="input_control#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control#file-upload" class="sublink-1">File upload buttons</a>
+				<br/> <a href="navigation#navigation-title">Navigation</a>
+				<a href="navigation#header" class="sublink-1">Header</a> <a href="navigation#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation#drawer" class="sublink-1">Drawer</a>
+				<a href="navigation#footer" class="sublink-1">Footer</a> <a href="navigation#sticky" class="sublink-1">Sticky headers &amp; footers</a>
+				<br/> <a href="table#table-title">Table</a>
+				<a href="table#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a> <a href="table#scrollable-tables" class="sublink-1">Scrollable tables</a>
+				<a href="table#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
+				<br/> <a href="card#card-title">Card</a>
+				<a href="card#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card#sections-media" class="sublink-1">Sections &amp; media</a>
+				<a href="card#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a> <a href="card#color-variants" class="sublink-1">Card color variants</a>
+				<br/> <a href="tab#tab-title">Tab</a>
+				<a href="tab#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab#stacked-tabs" class="sublink-1">Stacked tabs</a>
+				<br/> <a href="contextual#contextual-title">Contextual</a>
+				<a href="contextual#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual#toasts" class="sublink-1">Toasts</a>
+				<a href="contextual#tooltips" class="sublink-1">Tooltips</a> <a href="contextual#modals" class="sublink-1">Modals</a>
+				<br/> <a href="progress#progress-title">Progress</a>
+				<a href="progress#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress#progress-variants" class="sublink-1">Progress bar variants</a>
+				<a href="progress#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress#spinner-variants" class="sublink-1">Donut spinner variants</a>
+				<br/> <a href="utility#utility-title">Utility</a>
+				<a href="utility#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
+				<a href="utility#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
+				<a href="utility#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility#breadcrumbs" class="sublink-1">Breadcrumbs</a>
+				<a href="utility#close-icon" class="sublink-1">Close icon</a>
+				<a href="flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
+				<a href="templates"><h4 style="margin-left: 0;">Templates</h4></a>
+				<a href="customization"><h4 style="margin-left: 0;">Customization</h4></a>
+				<a href="quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
 			</nav>
 				<div class="col-sm-12 col-md-8 col-lg-10"><main>
       <div class="row" style="padding-top: 40px;" id="navigation-title">
@@ -199,7 +199,7 @@
             <div class="section">
             <h3>Notes</h3>
               <ul style="text-align: justify;">
-                <li>Subcategories and their links support a depth of 2 by default. If, however, you need more than that, we recommend you check the <a href="customization.html">customization page</a> for instructions on how to add more depth to the vertical navigation.</li>
+                <li>Subcategories and their links support a depth of 2 by default. If, however, you need more than that, we recommend you check the <a href="customization">customization page</a> for instructions on how to add more depth to the vertical navigation.</li>
                 <li>We strongly suggest you do not add irrelevant things inside your <code>&lt;nav&gt;</code> element, like images or text that are not part of the navigation menu.</li>
               </ul><hr>
               <div class="row">
@@ -209,7 +209,7 @@
     <span class="fore-tertiary">&lt;!-- navigation content --&gt;</span>
   &lt;/nav&gt;
 &lt;/div&gt;</pre>
-                  <p class="do" style="text-align: justify;"><mark class="tertiary">Do:</mark>&nbsp;We strongly recommend using the <code>&lt;nav&gt;</code> element in combination with the <a href="grid.html"><strong>grid</strong></a> module to make your layouts more responsive. For example, you could make your sidebar appear on the left side of your content in medium-sized and larger screens, but move to the very bottom of your content on smaller screens.</p>
+                  <p class="do" style="text-align: justify;"><mark class="tertiary">Do:</mark>&nbsp;We strongly recommend using the <code>&lt;nav&gt;</code> element in combination with the <a href="grid"><strong>grid</strong></a> module to make your layouts more responsive. For example, you could make your sidebar appear on the left side of your content in medium-sized and larger screens, but move to the very bottom of your content on smaller screens.</p>
                 </div>
               </div>
             </div>
@@ -258,7 +258,7 @@
             <div class="section">
             <h3>Notes</h3>
               <ul style="text-align: justify;">
-                <li>The <code>.drawer</code> component can be easily and effectively combined with the <a href="grid.html"><strong>grid</strong></a> module's system and classes, as well as the <a href="utility.html"><strong>utility</strong></a> module's responsive visibility helper classes to create fully responsive navigation menus.</li>
+                <li>The <code>.drawer</code> component can be easily and effectively combined with the <a href="grid"><strong>grid</strong></a> module's system and classes, as well as the <a href="utility"><strong>utility</strong></a> module's responsive visibility helper classes to create fully responsive navigation menus.</li>
                 <li>It's best to use the <code>.drawer</code> component in combination with a <code>&lt;header&gt;</code> element that has the <code>.sticky</code> class (check the last section of this page).</li>
               </ul><hr>
 							<div class="row">
@@ -359,7 +359,7 @@
       </div>
       <div class="row" style="padding-bottom: 20px; padding-top:20px;">
         <div class="col-sm-12">
-          <p style="text-align: justify;">If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules.html">modules page</a> and choose another module to see its documentation.</p>
+          <p style="text-align: justify;">If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules">modules page</a> and choose another module to see its documentation.</p>
         </div>
       </div>
     </main></div></div></div>

docs/progress.html

@@ -28,54 +28,54 @@
   </head>
   <body>
 		<header class="sticky">
-			<a href="index.html" class="logo"><span id="header-logo">m</span></a>
+			<a href="index" class="logo"><span id="header-logo">m</span></a>
 				<label class="drawer-toggle button" for="navigation-toggle"></label>
-			<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
-			<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
-			<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">Quick Reference</a>
+			<a href="index" class="button hidden-sm">Introduction</a> <a href="modules" class="button hidden-sm">Modules</a>
+			<a href="flavors" class="button hidden-sm">Flavors</a> <a href="templates" class="button hidden-sm">Templates</a>
+			<a href="customization" class="button hidden-sm">Customization</a> <a href="quick_reference" class="button hidden-sm">Quick Reference</a>
 			<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
 		</header>
 		<div class="container" style="padding-left: 0.25rem;">
 			<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
 				<label class="close" for="navigation-toggle"></label>
-				<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
-				<h4 style="margin-left: 0;">Modules</h4> <a href="core.html#core-title">Core</a>
-				<a href="core.html#typography" class="sublink-1">Typography</a> <a href="core.html#headings" class="sublink-1">Headings</a>
-				<a href="core.html#common-textual-elements" class="sublink-1">Common textual elements</a>
-				<a href="core.html#lists" class="sublink-1">Lists</a> <a href="core.html#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
-				<br/> <a href="grid.html#grid-title">Grid</a>
-				<a href="grid.html#basic-layout" class="sublink-1">Basic layout</a> <a href="grid.html#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
-				<a href="grid.html#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid.html#column-offset" class="sublink-1">Column offsets</a>
-				<a href="grid.html#column-reorder" class="sublink-1">Column reordering</a> <a href="grid.html#media-object" class="sublink-1">Media object pattern</a>
-				<br/> <a href="input_control.html#input-control-title">Input Control</a>
-				<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control.html#switches" class="sublink-1">Switches</a>
-				<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#file-upload" class="sublink-1">File upload buttons</a>
-				<br/> <a href="navigation.html#navigation-title">Navigation</a>
-				<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation.html#drawer" class="sublink-1">Drawer</a>
-				<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers &amp; footers</a>
-				<br/> <a href="table.html#table-title">Table</a>
-				<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a> <a href="table.html#scrollable-tables" class="sublink-1">Scrollable tables</a>
-				<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
-				<br/> <a href="card.html#card-title">Card</a>
-				<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections &amp; media</a>
-				<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a> <a href="card.html#color-variants" class="sublink-1">Card color variants</a>
-				<br/> <a href="tab.html#tab-title">Tab</a>
-				<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
-				<br/> <a href="contextual.html#contextual-title">Contextual</a>
-				<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
-				<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
-				<br/> <a href="progress.html#progress-title">Progress</a>
-				<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
-				<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
-				<br/> <a href="utility.html#utility-title">Utility</a>
-				<a href="utility.html#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility.html#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
-				<a href="utility.html#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
-				<a href="utility.html#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
-				<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
-				<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
-				<a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
-				<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a>
-				<a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
+				<a href="index"><h4 style="margin-left: 0;">Introduction</h4></a>
+				<h4 style="margin-left: 0;">Modules</h4> <a href="core#core-title">Core</a>
+				<a href="core#typography" class="sublink-1">Typography</a> <a href="core#headings" class="sublink-1">Headings</a>
+				<a href="core#common-textual-elements" class="sublink-1">Common textual elements</a>
+				<a href="core#lists" class="sublink-1">Lists</a> <a href="core#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
+				<br/> <a href="grid#grid-title">Grid</a>
+				<a href="grid#basic-layout" class="sublink-1">Basic layout</a> <a href="grid#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
+				<a href="grid#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid#column-offset" class="sublink-1">Column offsets</a>
+				<a href="grid#column-reorder" class="sublink-1">Column reordering</a> <a href="grid#media-object" class="sublink-1">Media object pattern</a>
+				<br/> <a href="input_control#input-control-title">Input Control</a>
+				<a href="input_control#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control#switches" class="sublink-1">Switches</a>
+				<a href="input_control#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control#file-upload" class="sublink-1">File upload buttons</a>
+				<br/> <a href="navigation#navigation-title">Navigation</a>
+				<a href="navigation#header" class="sublink-1">Header</a> <a href="navigation#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation#drawer" class="sublink-1">Drawer</a>
+				<a href="navigation#footer" class="sublink-1">Footer</a> <a href="navigation#sticky" class="sublink-1">Sticky headers &amp; footers</a>
+				<br/> <a href="table#table-title">Table</a>
+				<a href="table#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a> <a href="table#scrollable-tables" class="sublink-1">Scrollable tables</a>
+				<a href="table#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
+				<br/> <a href="card#card-title">Card</a>
+				<a href="card#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card#sections-media" class="sublink-1">Sections &amp; media</a>
+				<a href="card#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a> <a href="card#color-variants" class="sublink-1">Card color variants</a>
+				<br/> <a href="tab#tab-title">Tab</a>
+				<a href="tab#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab#stacked-tabs" class="sublink-1">Stacked tabs</a>
+				<br/> <a href="contextual#contextual-title">Contextual</a>
+				<a href="contextual#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual#toasts" class="sublink-1">Toasts</a>
+				<a href="contextual#tooltips" class="sublink-1">Tooltips</a> <a href="contextual#modals" class="sublink-1">Modals</a>
+				<br/> <a href="progress#progress-title">Progress</a>
+				<a href="progress#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress#progress-variants" class="sublink-1">Progress bar variants</a>
+				<a href="progress#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress#spinner-variants" class="sublink-1">Donut spinner variants</a>
+				<br/> <a href="utility#utility-title">Utility</a>
+				<a href="utility#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
+				<a href="utility#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
+				<a href="utility#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility#breadcrumbs" class="sublink-1">Breadcrumbs</a>
+				<a href="utility#close-icon" class="sublink-1">Close icon</a>
+				<a href="flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
+				<a href="templates"><h4 style="margin-left: 0;">Templates</h4></a>
+				<a href="customization"><h4 style="margin-left: 0;">Customization</h4></a>
+				<a href="quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
 			</nav>
 				<div class="col-sm-12 col-md-8 col-lg-10"><main>
       <div class="row" style="padding-top: 40px;" id="progress-title">
@@ -101,7 +101,7 @@
         </div>
       </div>
       <div class="row" id="basic-progress-bar">
-        <div class="col-sm-121">
+        <div class="col-sm-12">
           <div class="card fluid">
             <div class="section"><h2>Basic progress bar</h2></div>
             <div class="section row">
@@ -122,7 +122,7 @@
             <h3>Notes</h3>
               <ul style="text-align:justify">
                 <li>We made sure that the <code>&lt;progress&gt;</code> element displays properly on all modern browsers, using browser-specific rules. However, there might be some irregularities with older browsers, especially legacy versions of Internet Explorer.</li>
-                <li>If the preset <code>max="1000"</code> does not suit your needs, you should check the <a href="customization.html">customization page</a> for instructions on how to set your own maximum value for the <code>&lt;progress&gt;</code> element.</li>
+                <li>If the preset <code>max="1000"</code> does not suit your needs, you should check the <a href="customization">customization page</a> for instructions on how to set your own maximum value for the <code>&lt;progress&gt;</code> element.</li>
               </ul><hr>
               <div class="row">
                 <div class="col-sm-12 col-md-6">
@@ -159,7 +159,7 @@
             <div class="section">
             <h3>Notes</h3>
               <ul style="text-align:justify">
-                <li>If you want to add your own custom size classes for <code>&lt;progress&gt;</code> elements, check the <a href="customization.html">customization page</a> for instructions.</li>
+                <li>If you want to add your own custom size classes for <code>&lt;progress&gt;</code> elements, check the <a href="customization">customization page</a> for instructions.</li>
               </ul><hr>
               <div class="row">
                 <div class="col-sm-12 col-md-6">
@@ -242,7 +242,7 @@
       </div>
       <div class="row" style="padding-bottom: 20px; padding-top:20px;">
         <div class="col-sm-12">
-          <p style="text-align:justify">If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules.html">modules page</a> and choose another module to see its documentation.</p>
+          <p style="text-align:justify">If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules">modules page</a> and choose another module to see its documentation.</p>
         </div>
       </div>
     </main></div></div></div>

docs/quick_reference.html

@@ -26,22 +26,22 @@
   </head>
   <body>
 		<header class="sticky">
-			<a href="index.html" class="logo"><span id="header-logo">m</span></a>
+			<a href="index" class="logo"><span id="header-logo">m</span></a>
 				<label class="drawer-toggle button" for="navigation-toggle"></label>
-			<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
-			<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
-			<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">Quick Reference</a>
+			<a href="index" class="button hidden-sm">Introduction</a> <a href="modules" class="button hidden-sm">Modules</a>
+			<a href="flavors" class="button hidden-sm">Flavors</a> <a href="templates" class="button hidden-sm">Templates</a>
+			<a href="customization" class="button hidden-sm">Customization</a> <a href="quick_reference" class="button hidden-sm">Quick Reference</a>
 			<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
 		</header>
 		<div class="container" style="padding-left: 0.25rem;">
 			<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
 				<label class="close" for="navigation-toggle"></label>
-				<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
-				<a href="index.html"><h4 style="margin-left: 0;">Modules</h4></a>
-				<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
-				<a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
-				<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a>
-				<a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
+				<a href="index"><h4 style="margin-left: 0;">Introduction</h4></a>
+				<a href="modules"><h4 style="margin-left: 0;">Modules</h4></a>
+				<a href="flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
+				<a href="templates"><h4 style="margin-left: 0;">Templates</h4></a>
+				<a href="customization"><h4 style="margin-left: 0;">Customization</h4></a>
+				<a href="quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
 				<a href="#core">Core</a> <a href="#grid">Grid</a> <a href="#input_control">Input Control</a> <a href="#navigation">Navigation</a> <a href="#table">Table</a>
 				<a href="#card">Card</a> <a href="#tab">Tab</a> <a href="#contextual">Contextual</a> <a href="#progress">Progress</a> <a href="#utility">Utility</a> <br/>
 			</nav>
@@ -50,7 +50,7 @@
       <div class="row" style="padding-top: 40px;">
         <div class="col-sm-12">
           <h1>Quick Reference</h1>
-          <p style="text-align:justify">If you are familiar with <strong>mini.css</strong> and want a cheat sheet, you've come to the right place. Below you will find a quick overview of the framework and examples to help you brush up on your website-building skills. For more detailed instructions on modules, check out the <a href="modules.html">modules</a> page.</p>
+          <p style="text-align:justify">If you are familiar with <strong>mini.css</strong> and want a cheat sheet, you've come to the right place. Below you will find a quick overview of the framework and examples to help you brush up on your website-building skills. For more detailed instructions on modules, check out the <a href="modules">modules</a> page.</p>
           <p style="text-align:justify"><small>All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.</small></p><br>
         </div>
       </div>
@@ -67,7 +67,7 @@
               </div><br>
               <p style="text-align:justify">You can import the default flavor of <strong>mini.css</strong> in your webpage by simply adding one of the following references inside your HTML page's <code>&lt;head&gt;</code> tag:</p>
 							<pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-default.min.css&quot;</span>&gt;</pre>
-              <pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/v2.3.0/dist/mini-default.min.css&quot;</span>&gt;</pre><br>
+              <pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/v2.3.4/dist/mini-default.min.css&quot;</span>&gt;</pre><br>
 							<p style="text-align:justify">You can also find <strong>mini.css</strong> on <a href="https://cdnjs.com/libraries/mini.css">cdnjs</a>, which you can use to include it in your projects.</p><br/>
               <p style="text-align:justify">We strongly suggest you add the following line inside your HTML page's <code>&lt;head&gt;</code> to utilize the viewport meta tag:</p>
               <pre>&lt;<span class="fore-tertiary">meta</span> <span class="fore-secondary">name</span>=<span class="fore-primary">&quot;viewport&quot;</span> <span class="fore-secondary">content</span>=<span class="fore-primary">&quot;width=device-width, initial-scale=1&quot;</span>&gt;</pre>
@@ -78,7 +78,7 @@
       <div class="row" id="core">
         <div class="col-sm-12">
           <div class="card fluid">
-            <div class="section"><h2><a href="core.html" target="_blank" class="button primary small"><i class="fa fa-font fa-fw" aria-hidden="true"></i></a>&nbsp;Core</h2></div>
+            <div class="section"><h2><a href="core" target="_blank" class="button primary small"><i class="fa fa-font fa-fw" aria-hidden="true"></i></a>&nbsp;Core</h2></div>
             <div class="section row">
               <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
                 <h3>Headings <a href="https://codepen.io/chalarangelo/pen/ZBVGMq" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
@@ -146,7 +146,7 @@
       <div class="row" id="grid">
         <div class="col-sm-12">
           <div class="card fluid">
-            <div class="section"><h2><a href="grid.html" target="_blank" class="button secondary small"><i class="fa fa-th-large fa-fw" aria-hidden="true"></i></a>&nbsp;Grid</h2></div>
+            <div class="section"><h2><a href="grid" target="_blank" class="button secondary small"><i class="fa fa-th-large fa-fw" aria-hidden="true"></i></a>&nbsp;Grid</h2></div>
             <div class="section row">
               <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
                 <h3>Basic layout <a href="https://codepen.io/chalarangelo/pen/pNqNJw" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
@@ -377,7 +377,7 @@
         <div class="col-sm-12">
           <div class="card fluid">
             <div class="section">
-              <h2><a href="input_control.html" target="_blank" class="button tertiary small"><i class="fa fa-keyboard-o fa-fw" aria-hidden="true"></i></a>&nbsp;Input Control</h2>
+              <h2><a href="input_control" target="_blank" class="button tertiary small"><i class="fa fa-keyboard-o fa-fw" aria-hidden="true"></i></a>&nbsp;Input Control</h2>
             </div>
             <div class="section row">
               <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
@@ -519,7 +519,7 @@
       <div class="row" id="navigation">
         <div class="col-sm-12">
           <div class="card fluid">
-            <div class="section"><h2><a href="navigation.html" target="_blank" class="button primary small"><i class="fa fa-compass fa-fw" aria-hidden="true"></i></a>&nbsp;Navigation</h2></div>
+            <div class="section"><h2><a href="navigation" target="_blank" class="button primary small"><i class="fa fa-compass fa-fw" aria-hidden="true"></i></a>&nbsp;Navigation</h2></div>
             <div class="section row">
               <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
                 <h3>Header <a href="https://codepen.io/chalarangelo/pen/NbewvB" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
@@ -637,7 +637,7 @@
       <div class="row" id="table">
         <div class="col-sm-12">
           <div class="card fluid">
-            <div class="section"><h2><a href="table.html" target="_blank" class="button primary small"><i class="fa fa-table fa-fw" aria-hidden="true"></i></a>&nbsp;Table</h2></div>
+            <div class="section"><h2><a href="table" target="_blank" class="button primary small"><i class="fa fa-table fa-fw" aria-hidden="true"></i></a>&nbsp;Table</h2></div>
             <div class="section row">
               <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
                 <h3>Basic syntax &amp; responsiveness <a href="https://codepen.io/chalarangelo/pen/XNOzBv" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
@@ -827,7 +827,7 @@
       <div class="row" id="card">
         <div class="col-sm-12">
           <div class="card fluid">
-            <div class="section"><h2><a href="card.html" target="_blank" class="button secondary small"><i class="fa fa-id-card-o fa-fw" aria-hidden="true"></i></a>&nbsp;Card</h2></div>
+            <div class="section"><h2><a href="card" target="_blank" class="button secondary small"><i class="fa fa-id-card-o fa-fw" aria-hidden="true"></i></a>&nbsp;Card</h2></div>
             <div class="section row">
               <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
                 <h3>Basic syntax <a href="https://codepen.io/chalarangelo/pen/NbowEB" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
@@ -949,7 +949,7 @@
       <div class="row" id="tab">
         <div class="col-sm-12">
           <div class="card fluid">
-            <div class="section"><h2><a href="tab.html" target="_blank" class="button secondary small"><i class="fa fa-files-o fa-fw" aria-hidden="true"></i></a>&nbsp;Tab</h2></div>
+            <div class="section"><h2><a href="tab" target="_blank" class="button secondary small"><i class="fa fa-files-o fa-fw" aria-hidden="true"></i></a>&nbsp;Tab</h2></div>
             <div class="section row">
               <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
                 <h3>Basic syntax <a href="https://codepen.io/chalarangelo/pen/QGYOzZ" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
@@ -1038,7 +1038,7 @@
       <div class="row" id="contextual">
         <div class="col-sm-12">
           <div class="card fluid">
-            <div class="section"><h2><a href="contextual.html" target="_blank" class="button secondary small"><i class="fa fa-tags fa-fw" aria-hidden="true"></i></a>&nbsp;Contextual</h2></div>
+            <div class="section"><h2><a href="contextual" target="_blank" class="button secondary small"><i class="fa fa-tags fa-fw" aria-hidden="true"></i></a>&nbsp;Contextual</h2></div>
             <div class="section row">
               <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
                 <h3>Text highlighting <a href="https://codepen.io/chalarangelo/pen/gLqXqo" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
@@ -1123,7 +1123,7 @@
       <div class="row" id="progress">
         <div class="col-sm-12">
           <div class="card fluid">
-            <div class="section"><h2><a href="progress.html" target="_blank" class="button tertiary small"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i></a>&nbsp;Progress</h2></div>
+            <div class="section"><h2><a href="progress" target="_blank" class="button tertiary small"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i></a>&nbsp;Progress</h2></div>
             <div class="section row">
               <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
                 <h3>Basic progress bar <a href="https://codepen.io/chalarangelo/pen/BQMMyX" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
@@ -1194,7 +1194,7 @@
       <div class="row" id="utility">
         <div class="col-sm-12">
           <div class="card fluid">
-            <div class="section"><h2><a href="utility.html" target="_blank" class="button tertiary small"><i class="fa fa-wrench fa-fw" aria-hidden="true"></i></a>&nbsp;Utility</h2></div>
+            <div class="section"><h2><a href="utility" target="_blank" class="button tertiary small"><i class="fa fa-wrench fa-fw" aria-hidden="true"></i></a>&nbsp;Utility</h2></div>
             <div class="section row">
               <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
                 <h3>Visibility helpers <a href="https://codepen.io/chalarangelo/pen/ObddVK" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>

docs/react.html

@@ -1,16 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-	<link rel="stylesheet" href="mini-default.min.css">
-	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
-	<title>mini.css - Customization</title>
+	<title>mini.css - React and Preact Libraries</title>
 	<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
 	<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
-	<meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, customization, flavor ">
+	<meta name="keywords" content="mini, mini.css, CSS, framework, react, preact ">
 	<meta name="author" content="Angelos Chalaris (chalarangelo)">
 	<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
 	<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
 	<meta property="og:type" content="website"/><meta property="og:image" content="page_thumb.png">
-	<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="favicon.png">
-	<meta http-equiv="refresh" content="0; url=https://chalarangelo.github.io/mini.css/customization/index.html">
+	<meta property="og:url" content="https://chalarangelo.github.io/react-mini.css/"><link rel="icon" type="image/png" href="favicon.png">
+	<meta http-equiv="refresh" content="0; url=https://chalarangelo.github.io/react-mini.css/">
   </head>

docs/tab.html

@@ -28,54 +28,54 @@
   </head>
   <body>
 		<header class="sticky">
-			<a href="index.html" class="logo"><span id="header-logo">m</span></a>
+			<a href="index" class="logo"><span id="header-logo">m</span></a>
 				<label class="drawer-toggle button" for="navigation-toggle"></label>
-			<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
-			<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
-			<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">Quick Reference</a>
+			<a href="index" class="button hidden-sm">Introduction</a> <a href="modules" class="button hidden-sm">Modules</a>
+			<a href="flavors" class="button hidden-sm">Flavors</a> <a href="templates" class="button hidden-sm">Templates</a>
+			<a href="customization" class="button hidden-sm">Customization</a> <a href="quick_reference" class="button hidden-sm">Quick Reference</a>
 			<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
 		</header>
 		<div class="container" style="padding-left: 0.25rem;">
 			<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
 				<label class="close" for="navigation-toggle"></label>
-				<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
-				<h4 style="margin-left: 0;">Modules</h4> <a href="core.html#core-title">Core</a>
-				<a href="core.html#typography" class="sublink-1">Typography</a> <a href="core.html#headings" class="sublink-1">Headings</a>
-				<a href="core.html#common-textual-elements" class="sublink-1">Common textual elements</a>
-				<a href="core.html#lists" class="sublink-1">Lists</a> <a href="core.html#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
-				<br/> <a href="grid.html#grid-title">Grid</a>
-				<a href="grid.html#basic-layout" class="sublink-1">Basic layout</a> <a href="grid.html#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
-				<a href="grid.html#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid.html#column-offset" class="sublink-1">Column offsets</a>
-				<a href="grid.html#column-reorder" class="sublink-1">Column reordering</a> <a href="grid.html#media-object" class="sublink-1">Media object pattern</a>
-				<br/> <a href="input_control.html#input-control-title">Input Control</a>
-				<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control.html#switches" class="sublink-1">Switches</a>
-				<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#file-upload" class="sublink-1">File upload buttons</a>
-				<br/> <a href="navigation.html#navigation-title">Navigation</a>
-				<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation.html#drawer" class="sublink-1">Drawer</a>
-				<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers &amp; footers</a>
-				<br/> <a href="table.html#table-title">Table</a>
-				<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a> <a href="table.html#scrollable-tables" class="sublink-1">Scrollable tables</a>
-				<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
-				<br/> <a href="card.html#card-title">Card</a>
-				<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections &amp; media</a>
-				<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a> <a href="card.html#color-variants" class="sublink-1">Card color variants</a>
-				<br/> <a href="tab.html#tab-title">Tab</a>
-				<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
-				<br/> <a href="contextual.html#contextual-title">Contextual</a>
-				<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
-				<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
-				<br/> <a href="progress.html#progress-title">Progress</a>
-				<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
-				<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
-				<br/> <a href="utility.html#utility-title">Utility</a>
-				<a href="utility.html#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility.html#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
-				<a href="utility.html#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
-				<a href="utility.html#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
-				<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
-				<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
-				<a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
-				<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a>
-				<a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
+				<a href="index"><h4 style="margin-left: 0;">Introduction</h4></a>
+				<h4 style="margin-left: 0;">Modules</h4> <a href="core#core-title">Core</a>
+				<a href="core#typography" class="sublink-1">Typography</a> <a href="core#headings" class="sublink-1">Headings</a>
+				<a href="core#common-textual-elements" class="sublink-1">Common textual elements</a>
+				<a href="core#lists" class="sublink-1">Lists</a> <a href="core#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
+				<br/> <a href="grid#grid-title">Grid</a>
+				<a href="grid#basic-layout" class="sublink-1">Basic layout</a> <a href="grid#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
+				<a href="grid#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid#column-offset" class="sublink-1">Column offsets</a>
+				<a href="grid#column-reorder" class="sublink-1">Column reordering</a> <a href="grid#media-object" class="sublink-1">Media object pattern</a>
+				<br/> <a href="input_control#input-control-title">Input Control</a>
+				<a href="input_control#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control#switches" class="sublink-1">Switches</a>
+				<a href="input_control#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control#file-upload" class="sublink-1">File upload buttons</a>
+				<br/> <a href="navigation#navigation-title">Navigation</a>
+				<a href="navigation#header" class="sublink-1">Header</a> <a href="navigation#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation#drawer" class="sublink-1">Drawer</a>
+				<a href="navigation#footer" class="sublink-1">Footer</a> <a href="navigation#sticky" class="sublink-1">Sticky headers &amp; footers</a>
+				<br/> <a href="table#table-title">Table</a>
+				<a href="table#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a> <a href="table#scrollable-tables" class="sublink-1">Scrollable tables</a>
+				<a href="table#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
+				<br/> <a href="card#card-title">Card</a>
+				<a href="card#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card#sections-media" class="sublink-1">Sections &amp; media</a>
+				<a href="card#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a> <a href="card#color-variants" class="sublink-1">Card color variants</a>
+				<br/> <a href="tab#tab-title">Tab</a>
+				<a href="tab#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab#stacked-tabs" class="sublink-1">Stacked tabs</a>
+				<br/> <a href="contextual#contextual-title">Contextual</a>
+				<a href="contextual#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual#toasts" class="sublink-1">Toasts</a>
+				<a href="contextual#tooltips" class="sublink-1">Tooltips</a> <a href="contextual#modals" class="sublink-1">Modals</a>
+				<br/> <a href="progress#progress-title">Progress</a>
+				<a href="progress#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress#progress-variants" class="sublink-1">Progress bar variants</a>
+				<a href="progress#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress#spinner-variants" class="sublink-1">Donut spinner variants</a>
+				<br/> <a href="utility#utility-title">Utility</a>
+				<a href="utility#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
+				<a href="utility#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
+				<a href="utility#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility#breadcrumbs" class="sublink-1">Breadcrumbs</a>
+				<a href="utility#close-icon" class="sublink-1">Close icon</a>
+				<a href="flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
+				<a href="templates"><h4 style="margin-left: 0;">Templates</h4></a>
+				<a href="customization"><h4 style="margin-left: 0;">Customization</h4></a>
+				<a href="quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
 			</nav>
 				<div class="col-sm-12 col-md-8 col-lg-10"><main>
       <div class="row" style="padding-top: 40px;" id="tab-title">
@@ -162,7 +162,7 @@
               <ul style="text-align:justify">
                 <li>Tabs are compatible with modern browsers, but might not display properly in older browsers.</li>
                 <li>Remember to add the <code><span class="fore-secondary">checked</span></code> attribute to one of your <code>&lt;input&gt;</code>s if you want that tab to be the one displayed by default. If none is specified, the first one will be displayed.</li>
-                <li>The <code>height</code> of the tab container's panel area is <code>400px</code>. If you want to change this default size, please check out the <a href="customization.html">customization</a> page.</li>
+                <li>The <code>height</code> of the tab container's panel area is <code>400px</code>. If you want to change this default size, please check out the <a href="customization">customization</a> page.</li>
 				<li>Using the method described above for making tabs accessible, screen readers will ignore tab controls and only read the content of tabs.</li>
               </ul><hr>
               <div class="row">
@@ -305,7 +305,7 @@
       </div>
       <div class="row" style="padding-bottom: 20px; padding-top:20px;">
         <div class="col-sm-12">
-          <p style="text-align:justify">If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules.html">modules page</a> and choose another module to see its documentation.</p>
+          <p style="text-align:justify">If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules">modules page</a> and choose another module to see its documentation.</p>
         </div>
       </div>
     </main></div></div></div>

docs/table.html

@@ -34,54 +34,54 @@
   </head>
   <body>
 		<header class="sticky">
-			<a href="index.html" class="logo"><span id="header-logo">m</span></a>
+			<a href="index" class="logo"><span id="header-logo">m</span></a>
 				<label class="drawer-toggle button" for="navigation-toggle"></label>
-			<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
-			<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
-			<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">Quick Reference</a>
+			<a href="index" class="button hidden-sm">Introduction</a> <a href="modules" class="button hidden-sm">Modules</a>
+			<a href="flavors" class="button hidden-sm">Flavors</a> <a href="templates" class="button hidden-sm">Templates</a>
+			<a href="customization" class="button hidden-sm">Customization</a> <a href="quick_reference" class="button hidden-sm">Quick Reference</a>
 			<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
 		</header>
 		<div class="container" style="padding-left: 0.25rem;">
 			<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
 				<label class="close" for="navigation-toggle"></label>
-				<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
-				<h4 style="margin-left: 0;">Modules</h4> <a href="core.html#core-title">Core</a>
-				<a href="core.html#typography" class="sublink-1">Typography</a> <a href="core.html#headings" class="sublink-1">Headings</a>
-				<a href="core.html#common-textual-elements" class="sublink-1">Common textual elements</a>
-				<a href="core.html#lists" class="sublink-1">Lists</a> <a href="core.html#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
-				<br/> <a href="grid.html#grid-title">Grid</a>
-				<a href="grid.html#basic-layout" class="sublink-1">Basic layout</a> <a href="grid.html#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
-				<a href="grid.html#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid.html#column-offset" class="sublink-1">Column offsets</a>
-				<a href="grid.html#column-reorder" class="sublink-1">Column reordering</a> <a href="grid.html#media-object" class="sublink-1">Media object pattern</a>
-				<br/> <a href="input_control.html#input-control-title">Input Control</a>
-				<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control.html#switches" class="sublink-1">Switches</a>
-				<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#file-upload" class="sublink-1">File upload buttons</a>
-				<br/> <a href="navigation.html#navigation-title">Navigation</a>
-				<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation.html#drawer" class="sublink-1">Drawer</a>
-				<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers &amp; footers</a>
-				<br/> <a href="table.html#table-title">Table</a>
-				<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a> <a href="table.html#scrollable-tables" class="sublink-1">Scrollable tables</a>
-				<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
-				<br/> <a href="card.html#card-title">Card</a>
-				<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections &amp; media</a>
-				<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a> <a href="card.html#color-variants" class="sublink-1">Card color variants</a>
-				<br/> <a href="tab.html#tab-title">Tab</a>
-				<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
-				<br/> <a href="contextual.html#contextual-title">Contextual</a>
-				<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
-				<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
-				<br/> <a href="progress.html#progress-title">Progress</a>
-				<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
-				<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
-				<br/> <a href="utility.html#utility-title">Utility</a>
-				<a href="utility.html#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility.html#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
-				<a href="utility.html#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
-				<a href="utility.html#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
-				<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
-				<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
-				<a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
-				<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a>
-				<a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
+				<a href="index"><h4 style="margin-left: 0;">Introduction</h4></a>
+				<h4 style="margin-left: 0;">Modules</h4> <a href="core#core-title">Core</a>
+				<a href="core#typography" class="sublink-1">Typography</a> <a href="core#headings" class="sublink-1">Headings</a>
+				<a href="core#common-textual-elements" class="sublink-1">Common textual elements</a>
+				<a href="core#lists" class="sublink-1">Lists</a> <a href="core#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
+				<br/> <a href="grid#grid-title">Grid</a>
+				<a href="grid#basic-layout" class="sublink-1">Basic layout</a> <a href="grid#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
+				<a href="grid#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid#column-offset" class="sublink-1">Column offsets</a>
+				<a href="grid#column-reorder" class="sublink-1">Column reordering</a> <a href="grid#media-object" class="sublink-1">Media object pattern</a>
+				<br/> <a href="input_control#input-control-title">Input Control</a>
+				<a href="input_control#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control#switches" class="sublink-1">Switches</a>
+				<a href="input_control#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control#file-upload" class="sublink-1">File upload buttons</a>
+				<br/> <a href="navigation#navigation-title">Navigation</a>
+				<a href="navigation#header" class="sublink-1">Header</a> <a href="navigation#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation#drawer" class="sublink-1">Drawer</a>
+				<a href="navigation#footer" class="sublink-1">Footer</a> <a href="navigation#sticky" class="sublink-1">Sticky headers &amp; footers</a>
+				<br/> <a href="table#table-title">Table</a>
+				<a href="table#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a> <a href="table#scrollable-tables" class="sublink-1">Scrollable tables</a>
+				<a href="table#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
+				<br/> <a href="card#card-title">Card</a>
+				<a href="card#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card#sections-media" class="sublink-1">Sections &amp; media</a>
+				<a href="card#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a> <a href="card#color-variants" class="sublink-1">Card color variants</a>
+				<br/> <a href="tab#tab-title">Tab</a>
+				<a href="tab#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab#stacked-tabs" class="sublink-1">Stacked tabs</a>
+				<br/> <a href="contextual#contextual-title">Contextual</a>
+				<a href="contextual#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual#toasts" class="sublink-1">Toasts</a>
+				<a href="contextual#tooltips" class="sublink-1">Tooltips</a> <a href="contextual#modals" class="sublink-1">Modals</a>
+				<br/> <a href="progress#progress-title">Progress</a>
+				<a href="progress#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress#progress-variants" class="sublink-1">Progress bar variants</a>
+				<a href="progress#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress#spinner-variants" class="sublink-1">Donut spinner variants</a>
+				<br/> <a href="utility#utility-title">Utility</a>
+				<a href="utility#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
+				<a href="utility#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
+				<a href="utility#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility#breadcrumbs" class="sublink-1">Breadcrumbs</a>
+				<a href="utility#close-icon" class="sublink-1">Close icon</a>
+				<a href="flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
+				<a href="templates"><h4 style="margin-left: 0;">Templates</h4></a>
+				<a href="customization"><h4 style="margin-left: 0;">Customization</h4></a>
+				<a href="quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
 			</nav>
 				<div class="col-sm-12 col-md-8 col-lg-10"><main>
       <div class="row" style="padding-top: 40px;" id="table-title">
@@ -298,7 +298,7 @@
               <ul style="text-align: justify;">
                 <li>Due to <code>.scrollable</code> tables utilizing the <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">Flexbox Layout</a>, some older browsers may not properly display these tables. This is especially true with legacy versions of Internet Explorer.</li>
                 <li>Mixing the Flexible Layout Module with <code>&lt;table&gt;</code> elements seems to upset some browsers. We noticed this on an older mobile version of Firefox, where our implementation should work in theory, given the fact that both features are properly supported. If you notice any problems with <code>.scrollable</code> tables, feel free to <a href="https://github.com/Chalarangelo/mini.css/issues/new">submit a new issue on Github</a>.</li>
-								<li><code>.scrollable</code> tables have a default maximum height of <code>400px</code>. If you want to change this, you should check out the <a href="customization.html">customization</a> page.</li>
+								<li><code>.scrollable</code> tables have a default maximum height of <code>400px</code>. If you want to change this, you should check out the <a href="customization">customization</a> page.</li>
               </ul>
               <hr>
               <div class="row">
@@ -513,7 +513,7 @@
       </div>
       <div class="row" style="padding-bottom: 20px; padding-top:20px;">
         <div class="col-sm-12">
-          <p style="text-align: justify;">If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules.html">modules page</a> and choose another module to see its documentation.</p>
+          <p style="text-align: justify;">If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules">modules page</a> and choose another module to see its documentation.</p>
         </div>
       </div>
     </main></div></div></div>

docs/templates.html

@@ -25,17 +25,17 @@
   </head>
   <body>
 		<header class="sticky">
-			<a href="index.html" class="logo"><span id="header-logo">m</span></a> <label class="drawer-toggle button" for="navigation-toggle"></label>
-			<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
-			<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
-			<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">Quick Reference</a>
+			<a href="index" class="logo"><span id="header-logo">m</span></a> <label class="drawer-toggle button" for="navigation-toggle"></label>
+			<a href="index" class="button hidden-sm">Introduction</a> <a href="modules" class="button hidden-sm">Modules</a>
+			<a href="flavors" class="button hidden-sm">Flavors</a> <a href="templates" class="button hidden-sm">Templates</a>
+			<a href="customization" class="button hidden-sm">Customization</a> <a href="quick_reference" class="button hidden-sm">Quick Reference</a>
 			<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
 		</header>
 		<input type="checkbox" id="navigation-toggle"> <nav class="drawer hidden-md hidden-lg">
 			<label class="close" for="navigation-toggle"></label>
-			<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a> <a href="modules.html"><h4 style="margin-left: 0;">Modules</h4></a>
-			<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a> <a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
-			<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a> <a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
+			<a href="index"><h4 style="margin-left: 0;">Introduction</h4></a> <a href="modules"><h4 style="margin-left: 0;">Modules</h4></a>
+			<a href="flavors"><h4 style="margin-left: 0;">Flavors</h4></a> <a href="templates"><h4 style="margin-left: 0;">Templates</h4></a>
+			<a href="customization"><h4 style="margin-left: 0;">Customization</h4></a> <a href="quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
 		</nav>
     <!-- Insert your page content here-->
     <main><div class="container">
@@ -47,7 +47,7 @@
 					<li class="card fluid" style="margin-bottom: 3rem;">
 						<a href="https://codepen.io/chalarangelo/project/editor/DzvxKa/" class="section media" style="height:480px; -o-object-fit: scale-down; object-fit:scale-down; text-align: center;"><img  src="project_thumbnail.png" style="height:480px; -o-object-fit: scale-down; object-fit:scale-down;"></a>
 						<h2 class="section double-padded">Full website template</h2>
-						<p class="section double-padded" style="text-align: justify;">A complete sample website created using the grid system of <strong>mini.css</strong>, cards, navigational elements and input contrls. The website consists of three pages, each showcasing different modules and patterns. The homepage and blog post showcase the typography styling and emphasize the importance of the grid system and the card module, while the contact form showcases the forms, buttons and other input controls. The sample website is fully responsive, changing layout based on screen size, while all of the code is carefully documented, implementing certain patterns and tricks that can be very useful when designing a website.</p>
+						<p class="section double-padded" style="text-align: justify;">A complete sample website created using the grid system of <strong>mini.css</strong>, cards, navigational elements and input controls. The website consists of three pages, each showcasing different modules and patterns. The homepage and blog post showcase the typography styling and emphasize the importance of the grid system and the card module, while the contact form showcases the forms, buttons and other input controls. The sample website is fully responsive, changing layout based on screen size, while all of the code is carefully documented, implementing certain patterns and tricks that can be very useful when designing a website.</p>
           </li>
           <li class="card fluid" style="margin-bottom: 3rem;">
 						<p data-height="480" data-theme-id="0" data-slug-hash="WpPqaj" data-default-tab="result" data-user="chalarangelo" data-embed-version="2" data-pen-title="Single Column Template (mini.css)" data-preview="true" class="codepen section">See the Pen <a href="http://codepen.io/chalarangelo/pen/WpPqaj/">Single Column Template (mini.css)</a> by Angelos Chalaris (<a href="http://codepen.io/chalarangelo">@chalarangelo</a>) on <a href="http://codepen.io">CodePen</a>.</p>
@@ -70,7 +70,7 @@
 						<p class="section double-padded" style="text-align: justify;">Card-based website layout templates are another common need, as many websites utilize a tile system to display lots of smaller pieces of content. Using the card and grid modules of <strong>mini.css</strong>, along with a couple of navigational elements, it's really easy to create a responsive website with lots of cards containing small pieces of content, such as a showcase for a website, a photo album or an article browser.</p>
           </li>
 					<li class="card fluid" style="margin-bottom: 3rem;">
-						<p data-height="480" data-theme-id="0" data-slug-hash="GmWrVv" data-default-tab="result" data-user="chalarangelo" data-embed-version="2" data-pen-title="Login Form Template (mini.css)" data-preview="true" class="codepen section">See the Pen <a href="http://codepen.io/chalarangelo/pen/xGmWrVv/">Login Form Template (mini.css)</a> by Angelos Chalaris (<a href="http://codepen.io/chalarangelo">@chalarangelo</a>) on <a href="http://codepen.io">CodePen</a>.</p>
+						<p data-height="480" data-theme-id="0" data-slug-hash="GmWrVv" data-default-tab="result" data-user="chalarangelo" data-embed-version="2" data-pen-title="Login Form Template (mini.css)" data-preview="true" class="codepen section">See the Pen <a href="http://codepen.io/chalarangelo/pen/GmWrVv/">Login Form Template (mini.css)</a> by Angelos Chalaris (<a href="http://codepen.io/chalarangelo">@chalarangelo</a>) on <a href="http://codepen.io">CodePen</a>.</p>
 						<h2 class="section double-padded">Login form template</h2>
 						<p class="section double-padded" style="text-align: justify;">Login forms are one of the most commonly used elements in any website design. Using the input_control and grid modules of <strong>mini.css</strong>, along with a couple of navigational elements and a couple of optional tricks, it's really easy to create a responsive login form with the required fields and buttons.</p>
           </li>

docs/utility.html

@@ -29,54 +29,54 @@
   </head>
   <body>
 		<header class="sticky">
-			<a href="index.html" class="logo"><span id="header-logo">m</span></a>
+			<a href="index" class="logo"><span id="header-logo">m</span></a>
 				<label class="drawer-toggle button" for="navigation-toggle"></label>
-			<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
-			<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
-			<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">Quick Reference</a>
+			<a href="index" class="button hidden-sm">Introduction</a> <a href="modules" class="button hidden-sm">Modules</a>
+			<a href="flavors" class="button hidden-sm">Flavors</a> <a href="templates" class="button hidden-sm">Templates</a>
+			<a href="customization" class="button hidden-sm">Customization</a> <a href="quick_reference" class="button hidden-sm">Quick Reference</a>
 			<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
 		</header>
 		<div class="container" style="padding-left: 0.25rem;">
 			<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
 				<label class="close" for="navigation-toggle"></label>
-				<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
-				<h4 style="margin-left: 0;">Modules</h4> <a href="core.html#core-title">Core</a>
-				<a href="core.html#typography" class="sublink-1">Typography</a> <a href="core.html#headings" class="sublink-1">Headings</a>
-				<a href="core.html#common-textual-elements" class="sublink-1">Common textual elements</a>
-				<a href="core.html#lists" class="sublink-1">Lists</a> <a href="core.html#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
-				<br/> <a href="grid.html#grid-title">Grid</a>
-				<a href="grid.html#basic-layout" class="sublink-1">Basic layout</a> <a href="grid.html#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
-				<a href="grid.html#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid.html#column-offset" class="sublink-1">Column offsets</a>
-				<a href="grid.html#column-reorder" class="sublink-1">Column reordering</a> <a href="grid.html#media-object" class="sublink-1">Media object pattern</a>
-				<br/> <a href="input_control.html#input-control-title">Input Control</a>
-				<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control.html#switches" class="sublink-1">Switches</a>
-				<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#file-upload" class="sublink-1">File upload buttons</a>
-				<br/> <a href="navigation.html#navigation-title">Navigation</a>
-				<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation.html#drawer" class="sublink-1">Drawer</a>
-				<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers &amp; footers</a>
-				<br/> <a href="table.html#table-title">Table</a>
-				<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a> <a href="table.html#scrollable-tables" class="sublink-1">Scrollable tables</a>
-				<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
-				<br/> <a href="card.html#card-title">Card</a>
-				<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections &amp; media</a>
-				<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a> <a href="card.html#color-variants" class="sublink-1">Card color variants</a>
-				<br/> <a href="tab.html#tab-title">Tab</a>
-				<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
-				<br/> <a href="contextual.html#contextual-title">Contextual</a>
-				<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
-				<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
-				<br/> <a href="progress.html#progress-title">Progress</a>
-				<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
-				<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
-				<br/> <a href="utility.html#utility-title">Utility</a>
-				<a href="utility.html#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility.html#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
-				<a href="utility.html#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
-				<a href="utility.html#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
-				<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
-				<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
-				<a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
-				<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a>
-				<a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
+				<a href="index"><h4 style="margin-left: 0;">Introduction</h4></a>
+				<h4 style="margin-left: 0;">Modules</h4> <a href="core#core-title">Core</a>
+				<a href="core#typography" class="sublink-1">Typography</a> <a href="core#headings" class="sublink-1">Headings</a>
+				<a href="core#common-textual-elements" class="sublink-1">Common textual elements</a>
+				<a href="core#lists" class="sublink-1">Lists</a> <a href="core#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
+				<br/> <a href="grid#grid-title">Grid</a>
+				<a href="grid#basic-layout" class="sublink-1">Basic layout</a> <a href="grid#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
+				<a href="grid#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid#column-offset" class="sublink-1">Column offsets</a>
+				<a href="grid#column-reorder" class="sublink-1">Column reordering</a> <a href="grid#media-object" class="sublink-1">Media object pattern</a>
+				<br/> <a href="input_control#input-control-title">Input Control</a>
+				<a href="input_control#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control#switches" class="sublink-1">Switches</a>
+				<a href="input_control#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control#file-upload" class="sublink-1">File upload buttons</a>
+				<br/> <a href="navigation#navigation-title">Navigation</a>
+				<a href="navigation#header" class="sublink-1">Header</a> <a href="navigation#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation#drawer" class="sublink-1">Drawer</a>
+				<a href="navigation#footer" class="sublink-1">Footer</a> <a href="navigation#sticky" class="sublink-1">Sticky headers &amp; footers</a>
+				<br/> <a href="table#table-title">Table</a>
+				<a href="table#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a> <a href="table#scrollable-tables" class="sublink-1">Scrollable tables</a>
+				<a href="table#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
+				<br/> <a href="card#card-title">Card</a>
+				<a href="card#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card#sections-media" class="sublink-1">Sections &amp; media</a>
+				<a href="card#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a> <a href="card#color-variants" class="sublink-1">Card color variants</a>
+				<br/> <a href="tab#tab-title">Tab</a>
+				<a href="tab#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab#stacked-tabs" class="sublink-1">Stacked tabs</a>
+				<br/> <a href="contextual#contextual-title">Contextual</a>
+				<a href="contextual#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual#toasts" class="sublink-1">Toasts</a>
+				<a href="contextual#tooltips" class="sublink-1">Tooltips</a> <a href="contextual#modals" class="sublink-1">Modals</a>
+				<br/> <a href="progress#progress-title">Progress</a>
+				<a href="progress#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress#progress-variants" class="sublink-1">Progress bar variants</a>
+				<a href="progress#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress#spinner-variants" class="sublink-1">Donut spinner variants</a>
+				<br/> <a href="utility#utility-title">Utility</a>
+				<a href="utility#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
+				<a href="utility#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
+				<a href="utility#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility#breadcrumbs" class="sublink-1">Breadcrumbs</a>
+				<a href="utility#close-icon" class="sublink-1">Close icon</a>
+				<a href="flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
+				<a href="templates"><h4 style="margin-left: 0;">Templates</h4></a>
+				<a href="customization"><h4 style="margin-left: 0;">Customization</h4></a>
+				<a href="quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
 			</nav>
  			 <div class="col-sm-12 col-md-8 col-lg-10"><main>
       <div class="row" style="padding-top: 40px;" id="utility-title">
@@ -189,7 +189,7 @@
             <div class="section">
             <h3>Notes</h3>
               <ul style="text-align:justify">
-                <li>If the default values of these classes are not suited to your needs, check out the <a href="customization.html">customization</a> page.</li>
+                <li>If the default values of these classes are not suited to your needs, check out the <a href="customization">customization</a> page.</li>
                 <li>Both classes utilize <code><span class="fore-secondary">!important</span></code> declarations, so be careful when and how to use them.</li>
               </ul><hr>
               <div class="row">
@@ -341,7 +341,7 @@
       </div>
       <div class="row" style="padding-bottom: 20px; padding-top:20px;">
         <div class="col-sm-12">
-          <p style="text-align:justify">If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules.html">modules page</a> and choose another module to see its documentation.</p>
+          <p style="text-align:justify">If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules">modules page</a> and choose another module to see its documentation.</p>
         </div>
       </div>
     </main></div></div></div>

docs/v2/DEVLOG.md

@@ -1255,3 +1255,41 @@
 - Altered `$label-padding` from `0.25rem` to `0.25rem 0.5rem` to make it align properly with everything else.
 - Added code for `.vertical` `.input-group`, documented it, updated flavors. Everything is ready, size is `6.70KB`, which is pretty good I might add.
 - Updated `CHANGELOG` and doc pages (new tag etc.), released **v2.3.0**.
+
+
+# v2.3.1 Development Log
+
+## 20170619
+
+- Merged two PRs resolving two issues that have been reported.
+- Added a lot of code in `input_control` module, some exotic functions included. Also added `$select-padding-right` to help solve an issue and update changes.
+- Used `svg` tricks to resolve the `select` issue, file size is now `6.90KB` gzipped, which is just below the maximum limit of the framework.
+- Updated flavor files and source code to use spaces instead of tabs. Should now look better on Github.
+- Released update to deal with bugs.
+
+# v2.3.2 Development Log
+
+## 20170629
+
+- Added `$apply-select-fix` to the `input_control` module, disabled the fix for `mini-lite` to make the flavor lighter.
+- Updated `select` styles to utilize some smart tricks, reducing size by a sliver (about `0.03KB` less when gzipped).
+- Released the **v2.3.2** hotfix.
+
+# v2.3.3 Development Log
+
+## 20170715
+
+- Worked on the `mini-pwa` flavor. Updated everything and released `v2.3.3`.
+
+# v2.3.4 Development Log
+
+## 20170816
+
+- Resolved issue #94 by applying the suggested changes to the `navigation` module.
+- Resolved issue #93 by fixing the link, obviously.
+- Applied a new layout to the `Forms & input` card of `input_control`, should resolve a long-standing problem with layout on certain screens.
+- Added `:not([multiple])` to the custom `select` style, fixing a problem with multi-value `select` elements.
+- Added example for `:invalid` `input` in `input_control` as requested in #92.
+- Updated all flavors to the latest version.
+- Removed Scrimba screencast from `index.html`, now it's only in its respective module. Should make loading somewhat faster.
+- Released update.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mini.css",
-  "version": "2.3.0",
+  "version": "2.3.4",
   "description": "A minimal, responsive, style-agnostic CSS framework.",
   "main": "dist/mini-default.min.css",
   "directories": {

src/flavors/mini-lite.scss

@@ -1,459 +1,460 @@
-// 	This is a flavor file. Duplicate it and edit it to create your own flavor. Read instructions carefully.
-// 	Single-line comments, starting with '//' will not be included in your final CSS file. Multiline comments,
-//	structured like the flavor description below, will be included in your final CSS file.
-//	Note: This flavor is not a full flavor, we strongly recommend you duplicate the mini-default flavor instead
-//	of this file, unless you know what you are doing.
+//  This is a flavor file. Duplicate it and edit it to create your own flavor. Read instructions carefully.
+//  Single-line comments, starting with '//' will not be included in your final CSS file. Multiline comments,
+//  structured like the flavor description below, will be included in your final CSS file.
+//  Note: This flavor is not a full flavor, we strongly recommend you duplicate the mini-default flavor instead
+//  of this file, unless you know what you are doing.
 /*
-	Flavor name: Lite (mini-lite)
-	Author: Angelos Chalaris (chalarangelo@gmail.com)
-	Maintainers: Angelos Chalaris
-	mini.css version: v2.3.0
+  Flavor name: Lite (mini-lite)
+  Author: Angelos Chalaris (chalarangelo@gmail.com)
+  Maintainers: Angelos Chalaris
+  mini.css version: v2.3.4
 */
-//	Basic rules for body and typography
-$fore-color:						#212121;									// Text and general foreground color
-$back-color:						#f8f8f8;									// Body background color
-$base-font-family:																// Default font stack for all elements:
-	'-apple-system, BlinkMacSystemFont,\"Segoe UI\",\"Roboto\", \"Droid Sans\",\"Helvetica Neue\", Helvetica, Arial, sans-serif';
+//  Basic rules for body and typography
+$fore-color:            #212121;                  // Text and general foreground color
+$back-color:            #f8f8f8;                  // Body background color
+$base-font-family:                                // Default font stack for all elements:
+  '-apple-system, BlinkMacSystemFont,\"Segoe UI\",\"Roboto\", \"Droid Sans\",\"Helvetica Neue\", Helvetica, Arial, sans-serif';
 // OS X and iOS system fonts (San Francisco) -> Windows system fonts -> Android system fonts (newer and older) -> Fallback fonts
-$base-root-font-size:		16px;											// Root font sizing for all elements [1]
-$_1px:	(1px/$base-root-font-size) * 1rem;				// Calculated rem value of 1px [1]
-$base-font-size:				1rem;											// Default font sizing for all elements [2]
-$base-line-height:			1.5;											// Default line height for all elements.
-$use-fluid-typography:	false;										// Should fluid typography be used at the root element? (`true`/`false`)
-$body-margin:						0;												// Margin for the body
-$apply-defaults-to-all:	true;											// Should default values be applied to all elements? (`true` or `false`) [3]
-$h1-font-size:					2rem;											// Font size of h1
-$h2-font-size:					1.6875rem;								// Font size for h2
-$h3-font-size:					1.4375rem;								// Font size for h3
-$h4-font-size:					1.1875rem;								// Font size for h4
-$h5-font-size:					1rem;											// Font size for h5
-$h6-font-size:					0.8125rem;								// Font size for h6
-$heading-line-height:		1.2em;										// Line height for all headings
-$heading-margin:				0.75rem 0.5rem;						// Margin for all headings
-$heading-font-weight:		500;											// Font weight for all headings
-$heading-smalltext-fore-color:	#424242;					// <small> color in headings
-$make-heading-smalltext-block:	true;							// Should <small> elements in headings be displayed as blocks (`true`/`false`) [4]
-$heading-smalltext-b-font-size:	0.75em;						// Font size of block <small> elements in headings
-$heading-smalltext-b-top-margin:-0.25rem;					// Top margin of block <small> elements in headings
-$paragraph-margin:			0.5rem;										// Margin for <p> elements
-$list-margin:						0.5rem;										// Margin for <ol> and <ul> elements
-$list-left-padding:			1rem;											// Left padding for <ol> and <ul> elements
-$bold-font-weight:			700;											// Font weight for <b> and <strong>
-$horizontal-rule-line-height:	1.25em;							// <hr> line height
-$horizontal-rule-margin:	0.5rem;									// <hr> margin
-$horizontal-rule-border-style:	$_1px solid #8c8c8c;// Border style for horizontal rules (used in the <hr> element's border-top)
-$horizontal-rule-fancy-style:	false;							// Should a fancy styling be applied for the <hr> element (`true`/`false`) [5]
-$blockquote-back-color:			#eeeeee;							// Background color for <blockquote>
-$blockquote-fore-color:			$fore-color;					// Text color for <blockquote>
-$blockquote-margin:					0.5rem;								// Margin for <blockquote>
-$blockquote-padding:				0.5rem 0.5rem 1.5rem;	// Padding for <blockquote>
-$blockquote-sidebar-style:	0;										// Style for the sidebar of <blockquote>
-$blockquote-cite-font-size:	0.875rem;							// Font size for citation of <blockquote>
-$blockquote-cite-fore-color:			#505050;				// Text color for citation of <blockquote>
-$blockquote-cite-left-position:		0.625rem;				// Left padding for citation of <blockquote>
-$blockquote-cite-bottom-position:	0;							// Bottom padding for citation of <blockquote>
-$blockquote-border-style:					0;							// Border style for <blockquote>
-$blockquote-border-radius:				0 2px 2px 0;		// Border radius for <blockquote>
-$blockquote-box-shadow:						none;						// Box shadow for <blockquote>
-$use-default-code-fonts:			true;									// Should default font choice (monospace) be used for code elements? (`true`/`false`) [6]
-$code-element-padding:				0.125rem 0.25rem;			// Padding for <code>
-$code-element-fore-color:			$fore-color;					// Text color for <code>
-$code-element-back-color:			#e6e6e6;							// Background color for <code>
-$code-element-border-style:		0;										// Border style for <code>
-$code-element-border-radius:	2*$_1px;							// Border radius for <code>
-$code-element-box-shadow:			none;									// Box shadow for <code>
-$pre-element-padding:					0.75rem;							// Padding for <pre>
-$pre-element-fore-color:	$code-element-fore-color;	// Text color for <pre>
-$pre-element-back-color:	$code-element-back-color;	// Background color for <pre>
-$pre-element-border-style:		0;										// Border style for <pre>
-$pre-element-border-radius:		0 2*$_1px 2*$_1px 0;	// Border radius for <pre>
-$pre-element-margin:					0.5rem;								// Margin for <pre>
-$pre-element-box-shadow:			none;									// Box shadow for <pre>
-$add-pre-element-sidebar:		false;									// Should a fancy sidebar be added to the left side of <pre> (`true`/`false`) [7]
-$kbd-element-padding:				$code-element-padding;	// Padding for <kbd>
-$kbd-element-fore-color:			#fafafa;							// Text color for <kbd>
-$kbd-element-back-color:			#0c0c0c;							// Background color for <kbd>
-$kbd-element-border-style:		0;										// Border style for <kbd>
-$kbd-element-border-radius:	$code-element-border-radius;	// Border radius for <kbd>
-$kbd-element-box-shadow:	$code-element-box-shadow;	// Box shadow for <kbd>
-$style-samp-element:			false;										// Should styles for <samp> be included? (`true`/`false`) [8]
-$include-dfn-fix:			true;													// Should the fix for Android 4.3 concerning <dfn> be included (`true`/`false`) [9]
-$small-font-size:			0.75em;												// Font size for <small> elements
-$sup-font-size:				0.75em;												// Font size for <sup> elements
-$sub-font-size:				0.75em;												// Font size for <sub> elements
-$sup-top:							-0.5em;												// <sup> top
-$sub-bottom:					-0.25em;											// <sub> bottom
-$link-fore-color:					#0277bd;									// Text color for <a>
-$link-visited-fore-color:	#01579b;									// Text color for visited <a>
-$link-font-weight:				500;											// Font weight for <a>
-$apply-link-underline:		true;											// Should an underline be applied to all <a> elements? (`true`/`false`) [10]
-$apply-link-hover-fade:		true;											// Should the :hover and :focus state of <a> elements use fade-out instead of a different color (`true`/`false`) [11]
-$figcaption-font-size:		0.8125rem;								// Font size of <figcaption> elements
-$figcaption-fore-color:		#424242;									// Text color for <figcaption> elements
-//	Notes:
+$base-root-font-size:   16px;                     // Root font sizing for all elements [1]
+$_1px:  (1px/$base-root-font-size) * 1rem;        // Calculated rem value of 1px [1]
+$base-font-size:        1rem;                     // Default font sizing for all elements [2]
+$base-line-height:      1.5;                      // Default line height for all elements.
+$use-fluid-typography:  false;                    // Should fluid typography be used at the root element? (`true`/`false`)
+$body-margin:           0;                        // Margin for the body
+$apply-defaults-to-all: true;                     // Should default values be applied to all elements? (`true` or `false`) [3]
+$h1-font-size:          2rem;                     // Font size of h1
+$h2-font-size:          1.6875rem;                // Font size for h2
+$h3-font-size:          1.4375rem;                // Font size for h3
+$h4-font-size:          1.1875rem;                // Font size for h4
+$h5-font-size:          1rem;                     // Font size for h5
+$h6-font-size:          0.8125rem;                // Font size for h6
+$heading-line-height:   1.2em;                    // Line height for all headings
+$heading-margin:        0.75rem 0.5rem;           // Margin for all headings
+$heading-font-weight:   500;                      // Font weight for all headings
+$heading-smalltext-fore-color:  #424242;          // <small> color in headings
+$make-heading-smalltext-block:  true;             // Should <small> elements in headings be displayed as blocks (`true`/`false`) [4]
+$heading-smalltext-b-font-size:  0.75em;          // Font size of block <small> elements in headings
+$heading-smalltext-b-top-margin:-0.25rem;         // Top margin of block <small> elements in headings
+$paragraph-margin:       0.5rem;                  // Margin for <p> elements
+$list-margin:            0.5rem;                  // Margin for <ol> and <ul> elements
+$list-left-padding:      1rem;                    // Left padding for <ol> and <ul> elements
+$bold-font-weight:       700;                     // Font weight for <b> and <strong>
+$horizontal-rule-line-height:  1.25em;            // <hr> line height
+$horizontal-rule-margin:       0.5rem;            // <hr> margin
+$horizontal-rule-border-style: $_1px solid #8c8c8c; // Border style for horizontal rules (used in the <hr> element's border-top)
+$horizontal-rule-fancy-style:  false;             // Should a fancy styling be applied for the <hr> element (`true`/`false`) [5]
+$blockquote-back-color:      #eeeeee;             // Background color for <blockquote>
+$blockquote-fore-color:      $fore-color;         // Text color for <blockquote>
+$blockquote-margin:          0.5rem;              // Margin for <blockquote>
+$blockquote-padding:         0.5rem 0.5rem 1.5rem;// Padding for <blockquote>
+$blockquote-sidebar-style:   0;                   // Style for the sidebar of <blockquote>
+$blockquote-cite-font-size:  0.875rem;            // Font size for citation of <blockquote>
+$blockquote-cite-fore-color:       #505050;       // Text color for citation of <blockquote>
+$blockquote-cite-left-position:    0.625rem;      // Left padding for citation of <blockquote>
+$blockquote-cite-bottom-position:  0;             // Bottom padding for citation of <blockquote>
+$blockquote-border-style:          0;             // Border style for <blockquote>
+$blockquote-border-radius:         0 2px 2px 0;   // Border radius for <blockquote>
+$blockquote-box-shadow:            none;          // Box shadow for <blockquote>
+$use-default-code-fonts:       true;              // Should default font choice (monospace) be used for code elements? (`true`/`false`) [6]
+$code-element-padding:         0.125rem 0.25rem;  // Padding for <code>
+$code-element-fore-color:      $fore-color;       // Text color for <code>
+$code-element-back-color:      #e6e6e6;           // Background color for <code>
+$code-element-border-style:    0;                 // Border style for <code>
+$code-element-border-radius:   2*$_1px;           // Border radius for <code>
+$code-element-box-shadow:      none;              // Box shadow for <code>
+$pre-element-padding:          0.75rem;           // Padding for <pre>
+$pre-element-fore-color:  $code-element-fore-color; // Text color for <pre>
+$pre-element-back-color:  $code-element-back-color; // Background color for <pre>
+$pre-element-border-style:    0;                  // Border style for <pre>
+$pre-element-border-radius:   0 2*$_1px 2*$_1px 0;// Border radius for <pre>
+$pre-element-margin:          0.5rem;             // Margin for <pre>
+$pre-element-box-shadow:      none;               // Box shadow for <pre>
+$add-pre-element-sidebar:     false;              // Should a fancy sidebar be added to the left side of <pre> (`true`/`false`) [7]
+$kbd-element-padding:         $code-element-padding; // Padding for <kbd>
+$kbd-element-fore-color:      #fafafa;            // Text color for <kbd>
+$kbd-element-back-color:      #0c0c0c;            // Background color for <kbd>
+$kbd-element-border-style:    0;                  // Border style for <kbd>
+$kbd-element-border-radius:  $code-element-border-radius; // Border radius for <kbd>
+$kbd-element-box-shadow:  $code-element-box-shadow; // Box shadow for <kbd>
+$style-samp-element:      false;                  // Should styles for <samp> be included? (`true`/`false`) [8]
+$include-dfn-fix:      true;                      // Should the fix for Android 4.3 concerning <dfn> be included (`true`/`false`) [9]
+$small-font-size:      0.75em;                    // Font size for <small> elements
+$sup-font-size:        0.75em;                    // Font size for <sup> elements
+$sub-font-size:        0.75em;                    // Font size for <sub> elements
+$sup-top:              -0.5em;                    // <sup> top
+$sub-bottom:           -0.25em;                   // <sub> bottom
+$link-fore-color:          #0277bd;               // Text color for <a>
+$link-visited-fore-color:  #01579b;               // Text color for visited <a>
+$link-font-weight:         500;                   // Font weight for <a>
+$apply-link-underline:     true;                  // Should an underline be applied to all <a> elements? (`true`/`false`) [10]
+$apply-link-hover-fade:    true;                  // Should the :hover and :focus state of <a> elements use fade-out instead of a different color (`true`/`false`) [11]
+$figcaption-font-size:     0.8125rem;             // Font size of <figcaption> elements
+$figcaption-fore-color:    #424242;               // Text color for <figcaption> elements
+//  Notes:
 // [1] - The value $base-root-font-size should be in `px` only! This rule is very important, as it will determine the root
-//	element's font sizing. The value of $_1px is calculated based on the value of $base-root-font-size, please do not alter
-// 	the way that it's calculated.
+//  element's font sizing. The value of $_1px is calculated based on the value of $base-root-font-size, please do not alter
+//   the way that it's calculated.
 // [2] - The value of $base-font-size will only be used if the value of $apply-defaults-to-all is set to `true` (see [3]).
-//	This is due to the fact that applying the value of it on the root element again will overwrite the value of
-//	$base-root-font-size (see [1]). The value of this variable should be set in either `em` or `rem`.
+//  This is due to the fact that applying the value of it on the root element again will overwrite the value of
+//  $base-root-font-size (see [1]). The value of this variable should be set in either `em` or `rem`.
 // [3] - It is recommended to set the value of $apply-defaults-to-all to `true`, unless you want to apply extra styling
-//	to elements manually.
+//  to elements manually.
 // [4] - If the value of $make-heading-smalltext-block is `true` the <small> elements in headings will be displayed below
-//	the main heading and the 2 values specified below will apply.
+//  the main heading and the 2 values specified below will apply.
 // [5] - If $horizontal-rule-fancy-style is set to `true` the value of $horizontal-rule-border-style will not be used and
-//	a gradient with the style specified in $horizontal-rule-fancy-gradient will be applied instead.
+//  a gradient with the style specified in $horizontal-rule-fancy-gradient will be applied instead.
 // [6] - If the value of $use-default-code-fonts is set to `false` the value of $code-font-family will be used. `true`
-//	will apply the proper fix to use monospace font without any problems on all browsers.
+//  will apply the proper fix to use monospace font without any problems on all browsers.
 // [7] - if the value of $add-pre-element-sidebar is set to true, the style specified in $pre-element-sidebar-style will
-//	be applied as a left border for the <pre> elements.
+//  be applied as a left border for the <pre> elements.
 // [8] - If the value of $style-samp-element is set to `false`, no styling will be included in the final CSS file for
-//	`samp` elements. Otherwise, the styling defined in the $samp-... variables will be applied.
+//  `samp` elements. Otherwise, the styling defined in the $samp-... variables will be applied.
 // [9] - If the value of $include-dfn-fix is set to `true` a styling fix will be applied, so that the <dfn> elements are
-//	displayed properly on older versions of Android (4.3-) in italics. Otherwise, said fix will not be included.
+//  displayed properly on older versions of Android (4.3-) in italics. Otherwise, said fix will not be included.
 // [10] - If the value of $apply-link-underline is set to `true`, an underline will be applied to the link in its normal
-//	color, as defined in $link-fore-color.
+//  color, as defined in $link-fore-color.
 // [11] - If `$apply-link-hover-fade` is set to `true`, a fading transition will be used for the link when hovered over or
-//	focused. Otherwise, the color specified in $link-hover-fore-color will be used.
-//	Variables for grid elements
-$use-four-step-grid:			false;										// Should the old 4-step grid system be used instead of the new (`true`/`false`) [1]
-$include-parent-layout:		true;											// Should the classes for rows defining the column layout of children be included (`true`/`false`) [2]
-$grid-container-name:			'container';							// Class name for the grid container
-$grid-container-side-padding:	0.75rem;							// Padding for the grid container (left and right only)
-$grid-row-name:								'row';								// Class name for the grid's rows
-$grid-row-parent-layout-prefix:	'cols';							// Class name prefix for the grid's row parents [2]
-$grid-column-prefix:					'col';								// Class name prefix for the grid's columns
-$grid-column-offset-suffix:		'offset';							// Class name suffix for the grid's offsets
-$grid-order-normal-suffix:		'normal';							// Class name suffix for grid columns with normal priority
-$grid-order-first-suffix:			'first';							// Class name suffix for grid columns with highest priority
-$grid-order-last-suffix:			'last';								// Class name suffix for grid columns with lowest priorty
-$grid-column-count:						12;										// Number of columns in the grid (integer value only)
-$grid-column-padding:					0 0.25rem;						// Padding for the columns of the grid
-$grid-small-prefix:						'sm';									// Small screen class prefix for grid
-$grid-medium-breakpoint:			768px;								// Medium screen breakpoint for grid
-$grid-medium-prefix:					'md';									// Medium screen class prefix for grid
-$grid-large-breakpoint:				1280px;								// Large screen breakpoint for grid
-$grid-large-prefix:						'lg';									// Large screen class prefix for grid
-//	Notes:
+//  focused. Otherwise, the color specified in $link-hover-fore-color will be used.
+//  Variables for grid elements
+$use-four-step-grid:           false;             // Should the old 4-step grid system be used instead of the new (`true`/`false`) [1]
+$include-parent-layout:        true;              // Should the classes for rows defining the column layout of children be included (`true`/`false`) [2]
+$grid-container-name:          'container';       // Class name for the grid container
+$grid-container-side-padding:  0.75rem;           // Padding for the grid container (left and right only)
+$grid-row-name:                'row';             // Class name for the grid's rows
+$grid-row-parent-layout-prefix:'cols';            // Class name prefix for the grid's row parents [2]
+$grid-column-prefix:           'col';             // Class name prefix for the grid's columns
+$grid-column-offset-suffix:    'offset';          // Class name suffix for the grid's offsets
+$grid-order-normal-suffix:     'normal';          // Class name suffix for grid columns with normal priority
+$grid-order-first-suffix:      'first';           // Class name suffix for grid columns with highest priority
+$grid-order-last-suffix:       'last';            // Class name suffix for grid columns with lowest priorty
+$grid-column-count:            12;                // Number of columns in the grid (integer value only)
+$grid-column-padding:          0 0.25rem;         // Padding for the columns of the grid
+$grid-small-prefix:            'sm';              // Small screen class prefix for grid
+$grid-medium-breakpoint:        768px;            // Medium screen breakpoint for grid
+$grid-medium-prefix:           'md';              // Medium screen class prefix for grid
+$grid-large-breakpoint:        1280px;            // Large screen breakpoint for grid
+$grid-large-prefix:            'lg';              // Large screen class prefix for grid
+//  Notes:
 // [1] - If the value of $use-four-step-grid is `true`, the grid system will contain 4 breakpoints instead of 3, along with
-//	the needed styles. In this case, values should be specified for $grid-extra-small-prefix and $grid-small-breakpoint.
+//  the needed styles. In this case, values should be specified for $grid-extra-small-prefix and $grid-small-breakpoint.
 // [2] - If the value of $include-parent-layout is `true`, the grid system will contain extra classes that will define the column
-//	layout of their children. In this case, a value should be specified for $grid-row-parent-layout-prefix.
-//	Variables for forms and inputs
-$form-back-color:				#eeeeee;										// Background color for forms
-$form-fore-color:				$fore-color;								// Text color for forms
-$form-border-style:			$_1px solid #c9c9c9;				// Border style for forms
-$form-border-radius:		0;													// Border radius for forms
-$form-margin:						0.5rem;											// Margin for forms
-$form-padding:					0.75rem 0.5rem 1.125rem;		// Padding for forms
-$form-box-shadow:				none;												// Box shadow for forms
-$fieldset-back-color:		$form-back-color;						// Background color for fieldset
-$fieldset-border-style:	$_1px solid #d0d0d0;				// Border style for fieldset
-$fieldset-border-radius:2*$_1px;										// Border radius for fieldset
-$fieldset-margin:				0.125rem;										// Margin for fieldset
-$fieldset-padding:			0.5rem;											// Padding for fieldset
-$legend-font-weight:		$bold-font-weight;					// Font weight for legend
-$legend-font-size:			0.875rem;										// Font size for legend
-$legend-fore-color:			$form-fore-color;						// Text color for legend
-$legend-padding:				0.125rem 0.25rem;						// Padding for legend
-$label-padding:					0.25rem 0.5rem;							// Padding for label
-$input-group-name:			'input-group';							// Class for input groups
-$include-fluid-input-group:		false;								// Should fluid input grooups be included? (`true`/`false`) [1]
-$include-vertical-input-group:		false;						// Should vertical input grooups be included? (`true`/`false`) [1]
-$input-back-color:			#fafafa;										// Background for input
-$input-fore-color:			$fore-color;								// Text color for input
-$input-border-style:		$_1px solid #c9c9c9;				// Border style for input
-$input-border-radius:		2*$_1px;										// Border radius for input
-$input-margin:					0.25rem;										// Margin for input
-$input-padding:					0.5rem 0.75rem;							// Padding for input
-$input-focus-border-color:		#0288d1;							// Border color for focused input
-$input-invalid-border-color:	#d32f2f;							// Border color for invalid input
-$input-disabled-opacity:			0.75;									// Opacity for disabled input
-$input-readonly-back-color:		#e5e5e5;							// Background color for readonly input
-$input-readonly-border-color:	#c9c9c9;							// Border color for readonly input
-$input-placeholder-fore-color:#616161;							// Text color for input placeholder
-$button-back-color:			#dcdcdc;										// Back color for button elements
-$button-back-opacity:		0.75;												// Background opacity for button elements
-$button-hover-back-opacity:		1;										// Background opacity for button elements on hover or focus
-$button-fore-color:			$fore-color;								// Text color for button elements
-$button-border-style:		0;													// Border style for button elements
-$button-border-radius:	2*$_1px;										// Border radius for button elements
-$button-padding:				0.5rem 0.75rem;							// Padding for button elements
-$button-margin:					0.5rem;											// Margin for button elements
-$button-box-shadow:			none;												// Box shadow for buttons
-$button-disabled-opacity:		0.75;										// Disabled button elements opacity
-$button-class-name:			'button';										// Class for custom button elements
-$include-button-group:	false;											// [Hidden flag override] Should button groups be enabled? (`true`/`false`) [2]
-$hide-file-inputs:											true;				// Should a style be added that makes all <input>s of type `file` hidden? (`true`/`false`) [3]
-$button-variant1-name:									'primary';	// Class name for button variant 1
-$button-variant1-back-color:						#0277bd;		// Background color for button variant 1
-$button-variant1-back-opacity:					0.9;				// Background opacity for button variant 1
-$button-variant1-hover-back-opacity:		1;					// Background opacity for button variant 1 on hover or focus
-$button-variant1-fore-color:						#fafafa;		// Text color for button variant 1
-$button-variant2-name:									'secondary';// Class name for button variant 2
-$button-variant2-back-color:						#c62828;		// Background color for button variant 2
-$button-variant2-back-opacity:					0.9;				// Background opacity for button variant 2
-$button-variant2-hover-back-opacity:		1;					// Background opacity for button variant 2 on hover or focus
-$button-variant2-fore-color:						#fafafa;		// Text color for button variant 2
-$button-variant3-name:									'tertiary';	// Class name for button variant 3
-$button-variant3-back-color:						#5f9133;		// Background color for button variant 3
-$button-variant3-back-opacity:					0.9;				// Background opacity for button variant 3
-$button-variant3-hover-back-opacity:		1;					// Background opacity for button variant 3 on hover or focus
-$button-variant3-fore-color:						#fafafa;		// Text color for button variant 3
-$button-style1-name:						'small';						// Class name for button style 1
-$button-style1-border-style:		0;									// Border style for button style 1
-$button-style1-border-radius:		$_1px;							// Border radius for button style 1
-$button-style1-padding:					0.25rem 0.375rem;		// Padding for button style 1
-$button-style1-margin:					0.5rem;							// Margin for button style 1
-$button-style2-name:						'large';						// Class name for button style 2
-$button-style2-border-style:		0;									// Border style for button style 2
-$button-style2-border-radius:		4*$_1px;						// Border radius for button style 2
-$button-style2-padding:					0.75rem 1.125rem;		// Padding for button style 2
-$button-style2-margin:					0.5rem;							// Margin for button style 2
-$checkbox-size:							 		1rem;								// Size for checkbox/radio [4]
-$checkbox-back-color:						$input-back-color;	// Background clor for checkbox/radio
-$checkbox-fore-color:						$input-fore-color;	// Text/mark color for checkbox/radio
-$checkbox-border-thickness:			$_1px;							// Border thickness for checkbox/radio
-$checkbox-border-color:					#bdbdbd;						// Border color for checkbox/radio
-$checkbox-border-radius:			$input-border-radius;	// Border radius for checkbox/radio
+//  layout of their children. In this case, a value should be specified for $grid-row-parent-layout-prefix.
+//  Variables for forms and inputs
+$form-back-color:        #eeeeee;                  // Background color for forms
+$form-fore-color:        $fore-color;              // Text color for forms
+$form-border-style:      $_1px solid #c9c9c9;      // Border style for forms
+$form-border-radius:     0;                        // Border radius for forms
+$form-margin:            0.5rem;                   // Margin for forms
+$form-padding:           0.75rem 0.5rem 1.125rem;  // Padding for forms
+$form-box-shadow:        none;                     // Box shadow for forms
+$fieldset-back-color:    $form-back-color;         // Background color for fieldset
+$fieldset-border-style:  $_1px solid #d0d0d0;      // Border style for fieldset
+$fieldset-border-radius: 2*$_1px;                  // Border radius for fieldset
+$fieldset-margin:        0.125rem;                 // Margin for fieldset
+$fieldset-padding:       0.5rem;                   // Padding for fieldset
+$legend-font-weight:     $bold-font-weight;        // Font weight for legend
+$legend-font-size:       0.875rem;                 // Font size for legend
+$legend-fore-color:      $form-fore-color;         // Text color for legend
+$legend-padding:         0.125rem 0.25rem;         // Padding for legend
+$label-padding:          0.25rem 0.5rem;           // Padding for label
+$input-group-name:       'input-group';            // Class for input groups
+$include-fluid-input-group:    false;              // Should fluid input grooups be included? (`true`/`false`) [1]
+$include-vertical-input-group: false;              // Should vertical input grooups be included? (`true`/`false`) [1]
+$input-back-color:      #fafafa;                   // Background for input
+$input-fore-color:      $fore-color;               // Text color for input
+$input-border-style:    $_1px solid #c9c9c9;       // Border style for input
+$input-border-radius:   2*$_1px;                   // Border radius for input
+$input-margin:          0.25rem;                   // Margin for input
+$input-padding:         0.5rem 0.75rem;            // Padding for input
+$input-focus-border-color:    #0288d1;             // Border color for focused input
+$input-invalid-border-color:  #d32f2f;             // Border color for invalid input
+$input-disabled-opacity:      0.75;                // Opacity for disabled input
+$input-readonly-back-color:   #e5e5e5;             // Background color for readonly input
+$input-readonly-border-color: #c9c9c9;             // Border color for readonly input
+$input-placeholder-fore-color:#616161;             // Text color for input placeholder
+$apply-select-fix:       false;                    // [Hidden flag override] Should the styles that fix <select> styling be applied? (`true`/`false`)
+$button-back-color:      #dcdcdc;                  // Back color for button elements
+$button-back-opacity:    0.75;                     // Background opacity for button elements
+$button-hover-back-opacity: 1;                     // Background opacity for button elements on hover or focus
+$button-fore-color:      $fore-color;              // Text color for button elements
+$button-border-style:    0;                        // Border style for button elements
+$button-border-radius:   2*$_1px;                  // Border radius for button elements
+$button-padding:         0.5rem 0.75rem;           // Padding for button elements
+$button-margin:          0.5rem;                   // Margin for button elements
+$button-box-shadow:      none;                     // Box shadow for buttons
+$button-disabled-opacity:0.75;                     // Disabled button elements opacity
+$button-class-name:      'button';                 // Class for custom button elements
+$include-button-group:   false;                    // [Hidden flag override] Should button groups be enabled? (`true`/`false`) [2]
+$hide-file-inputs:                      true;      // Should a style be added that makes all <input>s of type `file` hidden? (`true`/`false`) [3]
+$button-variant1-name:                  'primary'; // Class name for button variant 1
+$button-variant1-back-color:            #0277bd;   // Background color for button variant 1
+$button-variant1-back-opacity:          0.9;       // Background opacity for button variant 1
+$button-variant1-hover-back-opacity:    1;         // Background opacity for button variant 1 on hover or focus
+$button-variant1-fore-color:            #fafafa;   // Text color for button variant 1
+$button-variant2-name:                  'secondary';// Class name for button variant 2
+$button-variant2-back-color:            #c62828;   // Background color for button variant 2
+$button-variant2-back-opacity:          0.9;       // Background opacity for button variant 2
+$button-variant2-hover-back-opacity:    1;         // Background opacity for button variant 2 on hover or focus
+$button-variant2-fore-color:            #fafafa;   // Text color for button variant 2
+$button-variant3-name:                  'tertiary';// Class name for button variant 3
+$button-variant3-back-color:            #5f9133;   // Background color for button variant 3
+$button-variant3-back-opacity:          0.9;       // Background opacity for button variant 3
+$button-variant3-hover-back-opacity:    1;         // Background opacity for button variant 3 on hover or focus
+$button-variant3-fore-color:            #fafafa;   // Text color for button variant 3
+$button-style1-name:            'small';           // Class name for button style 1
+$button-style1-border-style:     0;                // Border style for button style 1
+$button-style1-border-radius:    $_1px;            // Border radius for button style 1
+$button-style1-padding:          0.25rem 0.375rem; // Padding for button style 1
+$button-style1-margin:           0.5rem;           // Margin for button style 1
+$button-style2-name:             'large';          // Class name for button style 2
+$button-style2-border-style:     0;                // Border style for button style 2
+$button-style2-border-radius:    4*$_1px;          // Border radius for button style 2
+$button-style2-padding:          0.75rem 1.125rem; // Padding for button style 2
+$button-style2-margin:           0.5rem;           // Margin for button style 2
+$checkbox-size:                  1rem;             // Size for checkbox/radio [4]
+$checkbox-back-color:            $input-back-color;// Background clor for checkbox/radio
+$checkbox-fore-color:            $input-fore-color;// Text/mark color for checkbox/radio
+$checkbox-border-thickness:      $_1px;            // Border thickness for checkbox/radio
+$checkbox-border-color:          #bdbdbd;          // Border color for checkbox/radio
+$checkbox-border-radius:      $input-border-radius;// Border radius for checkbox/radio
 $checkbox-focus-border-color: $input-focus-border-color;// Border color for checkbox/radio on focus
-$checkbox-bottom-spacing:				0.375rem;						// Bottom spacing for checkbox/radio
-$checkbox-disabled-opacity:	$input-disabled-opacity;// Opacity for disabled checkbox/radio
-$checkbox-box-shadow:						none;								// Box shadow for checkbox/radio
-$include-switch: 								false;							// Should switch components be included? (`true`/`false`) [5]
-// 	Notes:
+$checkbox-bottom-spacing:        0.375rem;         // Bottom spacing for checkbox/radio
+$checkbox-disabled-opacity:  $input-disabled-opacity;// Opacity for disabled checkbox/radio
+$checkbox-box-shadow:            none;             // Box shadow for checkbox/radio
+$include-switch:                 false;            // Should switch components be included? (`true`/`false`) [5]
+//   Notes:
 // [1] - If the value of $include-fluid-input-group is `true`, fluid input groups will be included, using the values
-//	specified in the corresponding variables. The same applies for $include-vertical-input-group and vertical input groups.
+//  specified in the corresponding variables. The same applies for $include-vertical-input-group and vertical input groups.
 // [2] - Due to the fact that the value of $include-button-group is set to `false`, no button group styles will be created.
-//	If you wish to enable them, please refer to a full flavor for the required variables.
+//  If you wish to enable them, please refer to a full flavor for the required variables.
 // [3] - If the value of $hide-file-inputs is `true`, all <input type="file"> elements will be hidden and the only way
-// 	to access them is via the use of <label> elements that are linked to them. This option is enabled by default to
-//	allow for universal button styles, even for file input buttons, but can be disabled if the base style is desired.
-//	If the value is `false`, some fixes will be applied to the <input type="file"> element.
+//   to access them is via the use of <label> elements that are linked to them. This option is enabled by default to
+//  allow for universal button styles, even for file input buttons, but can be disabled if the base style is desired.
+//  If the value is `false`, some fixes will be applied to the <input type="file"> element.
 // [4] - The value of $checkbox-size will determine a few variables like some `margin` values, `height`, `width` etc.
-//	Variables for navigational elements
+//  Variables for navigational elements
 // [5]  - Due to the fact that the value of $include-switch is set to `false`, no switch styles will be created.
-//	If you wish to enable them, please refer to a full flavor for the required variables.
-$header-height:						2.75rem;									// Height for <header>
-$header-back-color:				#12171a;									// Background color for <header>
-$header-fore-color:				#f5f5f5;									// Text color for <header>
-$header-border-style:			0;												// Border style for <header>
-$header-margin:						0;												// Margin for <header>
-$header-padding:					0.125rem 0.5rem;					// Padding for <header>
-$header-box-shadow:				none;											// Box shadow for <header>
-$header-logo-name:				'logo';										// Class name for <header>'s logo
-$header-logo-font-size:		1.75rem;									// Font size for <header>'s logo
-$header-logo-line-height:	1.3125em;										// Line height for <header>'s logo
-$header-logo-margin:			0.0625rem 0.375rem 0.0625rem 0.0625rem;					// Margin for <header>'s logo
-$header-logo-padding:			0;												// Padding for <header>'s logo
-$header-link-hover-color:	#20292e;									// Hover color for <header>'s links
-$header-link-margin:			0.125rem 0;								// Margin for <header>'s links
-$include-header-sticky:		true;											// Should sticky <header> elements be included? (`true`/`false`) [1]
-$header-sticky-name:			'sticky';									// Class name for sticky <header>
-$include-nav-styles:			false;										// [Hidden flag override] Should <nav> elements by stylized? (`true`/`false`) [2]
-$include-drawer:					false;										// [Hidden flag override] Should the drawer component be included? (`true`/`false`) [2]
-$footer-back-color:				#192024;									// Background color for <footer>
-$footer-fore-color:				#f5f5f5;									// Text color for <footer>
-$footer-border-style:			0;												// Border stye for <footer>
-$footer-font-size:				0.875rem;									// Font size for <footer>
-$footer-margin:						1rem 0 0;									// Margin for <footer>
-$footer-padding:					1.5rem 0.5rem 0.75rem;		// Padding for <footer>
-$footer-link-fore-color:	#0288d1;									// Text color for links in <footer>
-$include-footer-sticky:		true;											// Should sticky <footer> elements be included (`true`/`false`) [3]
-$footer-sticky-name:			'sticky';									// Class name for sticky <footer> elements
-//	Notes:
+//  If you wish to enable them, please refer to a full flavor for the required variables.
+$header-height:            2.75rem;                // Height for <header>
+$header-back-color:        #12171a;                // Background color for <header>
+$header-fore-color:        #f5f5f5;                // Text color for <header>
+$header-border-style:      0;                      // Border style for <header>
+$header-margin:            0;                      // Margin for <header>
+$header-padding:           0.125rem 0.5rem;        // Padding for <header>
+$header-box-shadow:        none;                   // Box shadow for <header>
+$header-logo-name:         'logo';                 // Class name for <header>'s logo
+$header-logo-font-size:    1.75rem;                // Font size for <header>'s logo
+$header-logo-line-height:  1.3125em;               // Line height for <header>'s logo
+$header-logo-margin:       0.0625rem 0.375rem 0.0625rem 0.0625rem; // Margin for <header>'s logo
+$header-logo-padding:      0;                      // Padding for <header>'s logo
+$header-link-hover-color:  #20292e;                // Hover color for <header>'s links
+$header-link-margin:       0.125rem 0;             // Margin for <header>'s links
+$include-header-sticky:    true;                   // Should sticky <header> elements be included? (`true`/`false`) [1]
+$header-sticky-name:       'sticky';               // Class name for sticky <header>
+$include-nav-styles:       false;                  // [Hidden flag override] Should <nav> elements by stylized? (`true`/`false`) [2]
+$include-drawer:           false;                  // [Hidden flag override] Should the drawer component be included? (`true`/`false`) [2]
+$footer-back-color:        #192024;                // Background color for <footer>
+$footer-fore-color:        #f5f5f5;                // Text color for <footer>
+$footer-border-style:      0;                      // Border stye for <footer>
+$footer-font-size:         0.875rem;               // Font size for <footer>
+$footer-margin:            1rem 0 0;               // Margin for <footer>
+$footer-padding:           1.5rem 0.5rem 0.75rem;  // Padding for <footer>
+$footer-link-fore-color:   #0288d1;                // Text color for links in <footer>
+$include-footer-sticky:    true;                   // Should sticky <footer> elements be included (`true`/`false`) [3]
+$footer-sticky-name:       'sticky';               // Class name for sticky <footer> elements
+//  Notes:
 // [1] - If the value of $include-header-sticky is `true`, a class will be created that will allow for sticky positioning
-//	of <header> elements, using the value of $header-sticky-name for the name of the class.
+//  of <header> elements, using the value of $header-sticky-name for the name of the class.
 // [2] - Due to the fact that the values of $include-nav-styles and $include-drawer are set to `false`, <nav> elements
 // will not be stylized and the drawer component will not be included. If you set it to `true`, please refer to a full
 // flavor to find the required variable definitions.
 // [3] - If the value of $include-footer-bottom is `true`, a class will be created that will allow for sticky positioning
-//	of <footer> elements, using the value of $footer-sticky-name for the name of the class.
-//	Variables for responsive tables
-$table-border-style:			$_1px solid #c9c9c9;			// Border style for <table> and children
-$table-border-radius:			0;												// Border radius for <table> and children
-$table-margin:						0 auto;										// Margin for <table>
-$table-box-shadow:				none;											// Box shadow for <table>
-$table-caption-font-size:		1.5rem;									// Font size for <caption>
-$table-caption-margin:			0.5rem;									// Margin for <caption>
-$table-row-padding:					0.5rem;									// Padding for <tr> - both views
-$table-column-padding:			0.625rem;								// Padding for <td> and <th> - desktop view
-$table-head-back-color:			#e6e6e6;								// Background color for <th>
-$table-head-fore-color:			$fore-color;						// Tex color for <th>
-$table-body-back-color:			#fafafa;								// Background color for <td>
-$table-body-fore-color:			$fore-color;						// Text color for <td>
-$table-mobile-breakpoint:		767px;									// Breakpoint for <table> mobile view
-$table-mobile-card-spacing:	0.625rem;								// Space between <tr> cards - mobile view
-$table-mobile-card-label:		'data-label';						// Attribute used to replace column headers in mobile view [1]
-$table-mobile-label-font-weight:$bold-font-weight;	// Font weight for mobile headers
-$include-horizontal-table:		false;								// Should horizontal <table> elements be included? (`true`/`false`) [2]
-$include-scrollable-table:		false;								// Should scrollable <table> elements be included? (`true`/`false`) [2]
-$include-striped-table:				false;								// [Hidden flag override] Should striped <table> elements be included (`true`/`false`) [2]
-//	Notes:
+//  of <footer> elements, using the value of $footer-sticky-name for the name of the class.
+//  Variables for responsive tables
+$table-border-style:      $_1px solid #c9c9c9;     // Border style for <table> and children
+$table-border-radius:     0;                       // Border radius for <table> and children
+$table-margin:            0 auto;                  // Margin for <table>
+$table-box-shadow:        none;                    // Box shadow for <table>
+$table-caption-font-size:    1.5rem;               // Font size for <caption>
+$table-caption-margin:       0.5rem;               // Margin for <caption>
+$table-row-padding:          0.5rem;               // Padding for <tr> - both views
+$table-column-padding:       0.625rem;             // Padding for <td> and <th> - desktop view
+$table-head-back-color:      #e6e6e6;              // Background color for <th>
+$table-head-fore-color:      $fore-color;          // Text color for <th>
+$table-body-back-color:      #fafafa;              // Background color for <td>
+$table-body-fore-color:      $fore-color;          // Text color for <td>
+$table-mobile-breakpoint:    767px;                // Breakpoint for <table> mobile view
+$table-mobile-card-spacing:  0.625rem;             // Space between <tr> cards - mobile view
+$table-mobile-card-label:    'data-label';         // Attribute used to replace column headers in mobile view [1]
+$table-mobile-label-font-weight:$bold-font-weight; // Font weight for mobile headers
+$include-horizontal-table:    false;                // Should horizontal <table> elements be included? (`true`/`false`) [2]
+$include-scrollable-table:    false;                // Should scrollable <table> elements be included? (`true`/`false`) [2]
+$include-striped-table:        false;                // [Hidden flag override] Should striped <table> elements be included (`true`/`false`) [2]
+//  Notes:
 // [1] - The attribute specified in $table-mobile-card-label must be added manually to each and every element in the table
-//	in order for their mobile headers to display properly.
+//  in order for their mobile headers to display properly.
 // [2] - Due to the $include-horizontal-table, $include-scrollable-table and $include-striped-table flags being set to `false`,
-//	no styling will be provided for horizontal, scrollable and striped <table> elements. Please refer to a full fulavor to find
-//	the variables associated with these components, if you want to enable them.
-$card-name:							'card';											// Class name for cards
-$card-back-color:				#fafafa;										// Background color for cards
-$card-fore-color:				$fore-color;								// Text color for cards
-$card-border-style:			$_1px solid #acacac;				// Border style for cards
-$card-border-radius:		0;													// Border radius for cards
-$card-margin:						0.5rem;											// Margin for cards
-$card-box-shadow:				none;												// Box shadow for cards
-$card-section-name:						'section';						// Class name for card sections
-$card-section-border-style:		$_1px solid #c9c9c9;	// Border style for card sections
-$card-section-padding:				0.5rem;								// Padding for card sections
-$card-section-media-name:			'media';							// Class name for card media sections
-$card-section-media-height:		200px;								// Height for card media setions
-$card-normal-width:						320px;								// Width for normal cards
-$card-size1-name:							'fluid';							// Class name for fluid cards
-$card-size1-width:						100%;									// Width for fluid cards
-$card-section-style1-name:				'dark';						// Class name for card section style 1
-$card-section-style1-back-color:	#e0e0e0;					// Background color for card section style 1
-$card-section-style1-fore-color:	$fore-color;			// Text color for card section style 1
-$card-section-padding1-name:		'double-padded';		// Class name for card section padding style 1
-$card-section-padding1-padding:	0.75rem;						// Padding for card section padding style 1
-//	Notes:
+//  no styling will be provided for horizontal, scrollable and striped <table> elements. Please refer to a full fulavor to find
+//  the variables associated with these components, if you want to enable them.
+$card-name:              'card';                   // Class name for cards
+$card-back-color:        #fafafa;                  // Background color for cards
+$card-fore-color:        $fore-color;              // Text color for cards
+$card-border-style:      $_1px solid #acacac;      // Border style for cards
+$card-border-radius:     0;                        // Border radius for cards
+$card-margin:            0.5rem;                   // Margin for cards
+$card-box-shadow:        none;                     // Box shadow for cards
+$card-section-name:            'section';          // Class name for card sections
+$card-section-border-style:    $_1px solid #c9c9c9;// Border style for card sections
+$card-section-padding:         0.5rem;             // Padding for card sections
+$card-section-media-name:      'media';            // Class name for card media sections
+$card-section-media-height:    200px;              // Height for card media setions
+$card-normal-width:            320px;              // Width for normal cards
+$card-size1-name:              'fluid';            // Class name for fluid cards
+$card-size1-width:             100%;               // Width for fluid cards
+$card-section-style1-name:       'dark';           // Class name for card section style 1
+$card-section-style1-back-color: #e0e0e0;          // Background color for card section style 1
+$card-section-style1-fore-color: $fore-color;      // Text color for card section style 1
+$card-section-padding1-name:     'double-padded';  // Class name for card section padding style 1
+$card-section-padding1-padding:  0.75rem;          // Padding for card section padding style 1
+//  Notes:
 // [1] - The cards module depends heavily on the grid system module.
-//	---	---	---
-//	No variables specified for the tab module. This module is disabled by default.
-//	To re-enable it, please refer to a full flavor for variables and documentation.
-//	---	---	---
-//	Variables for contextual background elements and alerts
-$mark-back-color:				#0277bd;										// Background color for <mark>
-$mark-fore-color:				#fafafa;										// Text color for <mark>
-$mark-font-size:				0.9375em;										// Font size for <mark>
-$mark-line-height:			1em;												// Line height for <mark>
-$mark-border-style:			0;													// Border style for <mark>
-$mark-border-radius:		2*$_1px;										// Border radius for <mark>
-$mark-padding:					0.125em 0.25em;							// Padding for <mark>
-$mark-margin:						0;													// Margin for <mark>
-$mark-box-shadow:				none;												// Box shadow for <mark>
-$mark-inline-block-name:		'inline-block';					// Class name for <mark> inline block styling
-$mark-variant1-name:				'secondary';						// Class name for <mark> variant 1
-$mark-variant1-back-color:	#e53935;								// Background color for <mark> variant 1
-$mark-variant2-name:				'tertiary';							// Class name for <mark> variant 2
-$mark-variant2-back-color:	#689f38;								// Background color for <mark> variant 2
-$mark-style1-name:					'tag';									// Class name for <mark> style 1
-$mark-style1-border-style:	0;											// Border style for <mark> style 1
-$mark-style1-border-radius:	200px;									// Border radius for <mark> style 1
-$mark-style1-padding:				0.25em 0.5em;						// Padding for <mark> style 1
-$mark-style2-name:					'inline-block';					// Class name for <mark> style 2
-$mark-style2-border-style:	0;											// Border style for <mark> style 2
-$mark-style2-border-radius:	2*$_1px;								// Border radius for <mark> style 2
-$mark-style2-padding:				0.375em;								// Padding for <mark> style 2
-$mark-style2-font-size:			1em;										// Font size for <mark> style 2
-$mark-style2-line-height:		1.375em;								// Line height for <mark> style 2
-$include-toast:							false;									// [Hidden flag override] Should toasts be included? (`true`/`false``) [1]
-$include-tooltip:						false;									// Should tooltips be included? (`true`/`false`) [1]
-$include-modal:							false;									// Should modals be included? (`true`/`false`) [1]
-// 	Notes:
+//  ---  ---  ---
+//  No variables specified for the tab module. This module is disabled by default.
+//  To re-enable it, please refer to a full flavor for variables and documentation.
+//  ---  ---  ---
+//  Variables for contextual background elements and alerts
+$mark-back-color:        #0277bd;                  // Background color for <mark>
+$mark-fore-color:        #fafafa;                  // Text color for <mark>
+$mark-font-size:         0.9375em;                 // Font size for <mark>
+$mark-line-height:       1em;                      // Line height for <mark>
+$mark-border-style:      0;                        // Border style for <mark>
+$mark-border-radius:     2*$_1px;                  // Border radius for <mark>
+$mark-padding:           0.125em 0.25em;           // Padding for <mark>
+$mark-margin:            0;                        // Margin for <mark>
+$mark-box-shadow:        none;                     // Box shadow for <mark>
+$mark-inline-block-name:    'inline-block';        // Class name for <mark> inline block styling
+$mark-variant1-name:        'secondary';           // Class name for <mark> variant 1
+$mark-variant1-back-color:  #e53935;               // Background color for <mark> variant 1
+$mark-variant2-name:        'tertiary';            // Class name for <mark> variant 2
+$mark-variant2-back-color:  #689f38;               // Background color for <mark> variant 2
+$mark-style1-name:          'tag';                 // Class name for <mark> style 1
+$mark-style1-border-style:  0;                     // Border style for <mark> style 1
+$mark-style1-border-radius: 200px;                 // Border radius for <mark> style 1
+$mark-style1-padding:       0.25em 0.5em;          // Padding for <mark> style 1
+$mark-style2-name:          'inline-block';        // Class name for <mark> style 2
+$mark-style2-border-style:  0;                     // Border style for <mark> style 2
+$mark-style2-border-radius: 2*$_1px;               // Border radius for <mark> style 2
+$mark-style2-padding:       0.375em;               // Padding for <mark> style 2
+$mark-style2-font-size:     1em;                   // Font size for <mark> style 2
+$mark-style2-line-height:   1.375em;               // Line height for <mark> style 2
+$include-toast:              false;                // [Hidden flag override] Should toasts be included? (`true`/`false``) [1]
+$include-tooltip:            false;                // Should tooltips be included? (`true`/`false`) [1]
+$include-modal:              false;                // Should modals be included? (`true`/`false`) [1]
+//   Notes:
 // [1] - Due to the values of $include-toast, $include-tooltip and $include-modal being set
-//	to `false`, no styling is provided for these elements. If you want to enable them, please
-//	refer to a full flavor file for variable definitions.
-//	Variables for progress elements and spinners
-$progress-back-color:					#e0e0e0;							// Background color for <progress>
-$progress-fore-color:					#0277bd;							// Progress bar color for <progress>
-$progress-height:							0.625rem;							// Height of <progress>
-$progress-max-value:					1000;									// Arithmetic max value of <progress>
-$progress-border-style:				0;										// Border style for <progress>
-$progress-border-radius:			2*$_1px;							// Border radius for the <progress> container
-$progress-top-bottom-margin:	0.5rem;								// Top and bottom margin for <progress>
-$progress-left-right-margin:	0.5rem;								// Left and right margin for <progress>
-$progress-box-shadow:					none;									// Box shadow for <progress>
-$progress-inline-name:				'inline';							// Class name for inline <progress>
-$progress-inline-width:				60%;									// Width for inline <progress>
-$progress-variant1-name:			'secondary';					// Class name for <progress> variant 1
-$progress-variant1-fore-color:#e53935;							// Progress bar color for <progress> variant 1
-$progress-variant2-name:			'tertiary';						// Class name for <progress> variant 2
-$progress-variant2-fore-color:#689f38;							// Progress bar color for <progress> variant 2
-$include-spinner-donut:							false;					// [Hidden flag override] Should spinner donuts be enabled? (`true`/`false`) [1]
-//	Notes :
+//  to `false`, no styling is provided for these elements. If you want to enable them, please
+//  refer to a full flavor file for variable definitions.
+//  Variables for progress elements and spinners
+$progress-back-color:          #e0e0e0;            // Background color for <progress>
+$progress-fore-color:          #0277bd;            // Progress bar color for <progress>
+$progress-height:              0.625rem;           // Height of <progress>
+$progress-max-value:           1000;               // Arithmetic max value of <progress>
+$progress-border-style:        0;                  // Border style for <progress>
+$progress-border-radius:       2*$_1px;            // Border radius for the <progress> container
+$progress-top-bottom-margin:   0.5rem;             // Top and bottom margin for <progress>
+$progress-left-right-margin:   0.5rem;             // Left and right margin for <progress>
+$progress-box-shadow:          none;               // Box shadow for <progress>
+$progress-inline-name:         'inline';           // Class name for inline <progress>
+$progress-inline-width:        60%;                // Width for inline <progress>
+$progress-variant1-name:       'secondary';        // Class name for <progress> variant 1
+$progress-variant1-fore-color: #e53935;            // Progress bar color for <progress> variant 1
+$progress-variant2-name:       'tertiary';         // Class name for <progress> variant 2
+$progress-variant2-fore-color: #689f38;            // Progress bar color for <progress> variant 2
+$include-spinner-donut:        false;              // [Hidden flag override] Should spinner donuts be enabled? (`true`/`false`) [1]
+//  Notes :
 // [1] - Due to the value of $include-spinner-donut being set to `false`, the spinner
-//	donut styling will not be included. To enable it, pelase refer to a full flavor.
-//	Variables for utilities and helper classes
-$hidden-name:							'hidden';									// Class name for hidden elements
-$visually-hidden-name:		'visually-hidden';				// Class name for visually hidden elements
-$include-breadcrumbs:			false;										// [Hidden flag override] Should breadcrumbs be included? (`true`/`false`) [1]
-$include-close-icon:			false;										// [Hidden flag override] Should the close icon be included? (`true`/`false`) [1]
-$border-generic-name:					'bordered';						// Class name for generic border style
-$border-radial-style1-name:		'rounded';						// Class name for radial border style 1
-$border-radial-style1-radius:	2*$_1px;							// Border radius for radial border style 1
-$border-radial-style2-name:		'circular';						// Class name for radial border style 2
-$border-radial-style2-radius:	50%;									// Border radius for radial border style 2
-$responsive-margin-name:			'responsive-margin';	// Class name for responsive margin
-$responsive-margin-small-value:		0.25rem;					// Margin value for responsive margin on small screens
-$responsive-margin-medium-value:	0.375rem;					// Margin value for responsive margin on medium screens
-$responsive-margin-large-value:		0.5rem;						// Margin value for responsive margin on large screens
-$responsive-padding-name:		'responsive-padding';		// Class name for responsive padding
-$responsive-padding-small-value:	0.125rem 0.25rem;	// Padding value for responsive padding on small screens
-$responsive-padding-medium-value:	0.25rem 0.375rem;	// Padding value for responsive padding on medium screens
-$responsive-padding-large-value:	0.375rem 0.5rem;	// Padding value for responsive padding on large screens
-$responsive-hidden-prefix:					'hidden';				// Class name prefix for responsive hidden elements
-$responsive-visually-hidden-prefix:	'visually-hidden'; // Class name prefix for responsive visually hidden elements
-// 	Notes:
+//  donut styling will not be included. To enable it, pelase refer to a full flavor.
+//  Variables for utilities and helper classes
+$hidden-name:                  'hidden';           // Class name for hidden elements
+$visually-hidden-name:         'visually-hidden';  // Class name for visually hidden elements
+$include-breadcrumbs:          false;              // [Hidden flag override] Should breadcrumbs be included? (`true`/`false`) [1]
+$include-close-icon:           false;              // [Hidden flag override] Should the close icon be included? (`true`/`false`) [1]
+$border-generic-name:          'bordered';         // Class name for generic border style
+$border-radial-style1-name:    'rounded';          // Class name for radial border style 1
+$border-radial-style1-radius:  2*$_1px;            // Border radius for radial border style 1
+$border-radial-style2-name:    'circular';         // Class name for radial border style 2
+$border-radial-style2-radius:  50%;                // Border radius for radial border style 2
+$responsive-margin-name:      'responsive-margin'; // Class name for responsive margin
+$responsive-margin-small-value:   0.25rem;         // Margin value for responsive margin on small screens
+$responsive-margin-medium-value:  0.375rem;        // Margin value for responsive margin on medium screens
+$responsive-margin-large-value:   0.5rem;          // Margin value for responsive margin on large screens
+$responsive-padding-name:    'responsive-padding'; // Class name for responsive padding
+$responsive-padding-small-value:  0.125rem 0.25rem;// Padding value for responsive padding on small screens
+$responsive-padding-medium-value: 0.25rem 0.375rem;// Padding value for responsive padding on medium screens
+$responsive-padding-large-value:  0.375rem 0.5rem; // Padding value for responsive padding on large screens
+$responsive-hidden-prefix:          'hidden';      // Class name prefix for responsive hidden elements
+$responsive-visually-hidden-prefix: 'visually-hidden'; // Class name prefix for responsive visually hidden elements
+//   Notes:
 // [1] - Due to the values of $include-breadcrumbs and $include-close-icon being set
-//	to `false`, these elements will not be included. Refer to a full flavor file for
-//	help on how to enable them.
+//  to `false`, these elements will not be included. Refer to a full flavor file for
+//  help on how to enable them.
 @import '../mini/core';
 @import '../mini/grid';
 @import '../mini/input_control';
 /*
-	Custom elements for forms and input elements.
+  Custom elements for forms and input elements.
 */
 @include make-button-alt-color ($button-variant1-name, $button-variant1-back-color,
-	$button-variant1-back-opacity, $button-variant1-hover-back-opacity, $button-variant1-fore-color);
+  $button-variant1-back-opacity, $button-variant1-hover-back-opacity, $button-variant1-fore-color);
 @include make-button-alt-color ($button-variant2-name, $button-variant2-back-color,
-	$button-variant2-back-opacity, $button-variant2-hover-back-opacity, $button-variant2-fore-color);
+  $button-variant2-back-opacity, $button-variant2-hover-back-opacity, $button-variant2-fore-color);
 @include make-button-alt-color ($button-variant3-name, $button-variant3-back-color,
-	$button-variant3-back-opacity, $button-variant3-hover-back-opacity, $button-variant3-fore-color);
+  $button-variant3-back-opacity, $button-variant3-hover-back-opacity, $button-variant3-fore-color);
 @include make-button-alt-style ($button-style1-name, $button-style1-border-style,
-	$button-style1-border-radius, $button-style1-padding, $button-style1-margin);
+  $button-style1-border-radius, $button-style1-padding, $button-style1-margin);
 @include make-button-alt-style ($button-style2-name, $button-style2-border-style,
-	$button-style2-border-radius, $button-style2-padding, $button-style2-margin);
+  $button-style2-border-radius, $button-style2-padding, $button-style2-margin);
 @import '../mini/navigation';
 @import '../mini/table';
 @import '../mini/card';
 /*
-	Custom elements for cards and containers.
+  Custom elements for cards and containers.
 */
 @include make-card-alt-size ($card-size1-name, $card-size1-width);
 @include make-card-section-alt-color ($card-section-style1-name, $card-section-style1-back-color,
-	$card-section-style1-fore-color);
+  $card-section-style1-fore-color);
 @include make-card-section-alt-style ($card-section-padding1-name, $card-section-padding1-padding);
-//	---	---	---
+//  ---  ---  ---
 // Tab module is disabled for this flavor.
 // @import '../mini/tab';
-//	---	---	---
+//  ---  ---  ---
 @import '../mini/contextual';
 /*
-	Custom contextual background elements and alerts.
+  Custom contextual background elements and alerts.
 */
 @include make-mark-alt-color ($mark-variant1-name, $mark-variant1-back-color);
 @include make-mark-alt-color ($mark-variant2-name, $mark-variant2-back-color);
 @include make-mark-alt-style ($mark-style1-name, $mark-style1-border-style,
-	$mark-style1-border-radius, $mark-style1-padding);
+  $mark-style1-border-radius, $mark-style1-padding);
 @include make-mark-alt-style ($mark-style2-name, $mark-style2-border-style,
-	$mark-style2-border-radius, $mark-style2-padding, $mark-style2-font-size, $mark-style2-line-height);
+  $mark-style2-border-radius, $mark-style2-padding, $mark-style2-font-size, $mark-style2-line-height);
 @import '../mini/progress';
 /*
-	Custom elements for progress elements and spinners.
+  Custom elements for progress elements and spinners.
 */
 @include make-progress-inline ($progress-inline-name, $progress-inline-width);
 @include make-progress-alt-color ($progress-variant1-name, $progress-variant1-fore-color);
 @include make-progress-alt-color ($progress-variant2-name, $progress-variant2-fore-color);
 @import '../mini/utility';
 /*
-	Custom elements for utilities and helper classes.
+  Custom elements for utilities and helper classes.
 */
 @include make-border-generic ($border-generic-name);
 @include make-border-radial-style ($border-radial-style1-name, $border-radial-style1-radius);
 @include make-border-radial-style ($border-radial-style2-name, $border-radial-style2-radius);
 @include make-margin-responsive ($responsive-margin-name, $responsive-margin-small-value,
-	$responsive-margin-medium-value, $responsive-margin-large-value);
+  $responsive-margin-medium-value, $responsive-margin-large-value);
 @include make-padding-responsive ($responsive-padding-name, $responsive-padding-small-value,
-	$responsive-padding-medium-value, $responsive-padding-large-value);
+  $responsive-padding-medium-value, $responsive-padding-large-value);
 @include make-hidden-responsive ($responsive-hidden-prefix);
 @include make-visually-hidden-responsive ($responsive-visually-hidden-prefix);

src/flavors/mini-pwa.scss

@@ -0,0 +1,468 @@
+//  This is a flavor file. Duplicate it and edit it to create your own flavor. Read instructions carefully.
+//  Single-line comments, starting with '//' will not be included in your final CSS file. Multiline comments,
+//  structured like the flavor description below, will be included in your final CSS file.
+//  Note: This flavor is not a full flavor, we strongly recommend you duplicate the mini-default flavor instead
+//  of this file, unless you know what you are doing.
+/*
+  Flavor name: Progressive Web App (mini-pw)
+  Author: Angelos Chalaris (chalarangelo@gmail.com)
+  Maintainers: Angelos Chalaris
+  mini.css version: v2.3.4
+*/
+//  Basic rules for body and typography
+$fore-color:            #212121;                  // Text and general foreground color
+$back-color:            #eeeeee;                  // Body background color
+$base-font-family:                                // Default font stack for all elements:
+  '-apple-system, BlinkMacSystemFont,\"Segoe UI\",\"Roboto\", \"Droid Sans\",\"Helvetica Neue\", Helvetica, Arial, sans-serif';
+// OS X and iOS system fonts (San Francisco) -> Windows system fonts -> Android system fonts (newer and older) -> Fallback fonts
+$base-root-font-size:   16px;                     // Root font sizing for all elements [1]
+$_1px:  (1px/$base-root-font-size) * 1rem;        // Calculated rem value of 1px [1]
+$base-font-size:        1rem;                     // Default font sizing for all elements [2]
+$base-line-height:      1.5;                      // Default line height for all elements.
+$use-fluid-typography:  false;                    // Should fluid typography be used at the root element? (`true`/`false`)
+$body-margin:           0;                        // Margin for the body
+$apply-defaults-to-all: true;                     // Should default values be applied to all elements? (`true` or `false`) [3]
+$h1-font-size:          2.4375rem;                // Font size of h1
+$h2-font-size:          1.935rem;                  // Font size for h2
+$h3-font-size:          1.5625rem;                // Font size for h3
+$h4-font-size:          1.25rem;                   // Font size for h4
+$h5-font-size:          1rem;                     // Font size for h5
+$h6-font-size:          0.8125rem;                // Font size for h6
+$heading-line-height:   1.25em;                   // Line height for all headings
+$heading-margin:        0.75rem 0.5rem;           // Margin for all headings
+$heading-font-weight:   500;                      // Font weight for all headings
+$heading-smalltext-fore-color:  #424242;          // <small> color in headings
+$make-heading-smalltext-block:  true;             // Should <small> elements in headings be displayed as blocks (`true`/`false`) [4]
+$heading-smalltext-b-font-size:  0.75em;          // Font size of block <small> elements in headings
+$heading-smalltext-b-top-margin:-0.25em;          // Top margin of block <small> elements in headings
+$paragraph-margin:       0.5rem;                  // Margin for <p> elements
+$list-margin:            0.5rem;                  // Margin for <ol> and <ul> elements
+$list-left-padding:      1.25rem;                 // Left padding for <ol> and <ul> elements
+$bold-font-weight:       600;                     // Font weight for <b> and <strong>
+$horizontal-rule-line-height:  1.25em;            // <hr> line height
+$horizontal-rule-margin:       0.5rem;            // <hr> margin
+$horizontal-rule-border-style: $_1px solid #757575; // Border style for horizontal rules (used in the <hr> element's border-top)
+$horizontal-rule-fancy-style:  false;             // Should a fancy styling be applied for the <hr> element (`true`/`false`) [5]
+$blockquote-back-color:      #e0e0e0;             // Background color for <blockquote>
+$blockquote-fore-color:      $fore-color;         // Text color for <blockquote>
+$blockquote-margin:          0.5rem;              // Margin for <blockquote>
+$blockquote-padding:         0.5rem 0.5rem 1.5rem;// Padding for <blockquote>
+$blockquote-sidebar-style:   4*$_1px solid #3f51b5;// Style for the sidebar of <blockquote>
+$blockquote-cite-font-size:  0.875rem;            // Font size for citation of <blockquote>
+$blockquote-cite-fore-color:       #616161;       // Text color for citation of <blockquote>
+$blockquote-cite-left-position:    0.625rem;      // Left padding for citation of <blockquote>
+$blockquote-cite-bottom-position:  0;             // Bottom padding for citation of <blockquote>
+$blockquote-border-style:          0;             // Border style for <blockquote>
+$blockquote-border-radius: 0 3*$_1px 3*$_1px 0;   // Border radius for <blockquote>
+$blockquote-box-shadow:                           // Box shadow for <blockquote>
+  0 2*$_1px 2*$_1px 0 rgba(0, 0, 0, 0.14), 0 1*$_1px 5*$_1px 0 rgba(0, 0, 0, 0.12), 0 3*$_1px 1*$_1px -2*$_1px rgba(0, 0, 0, 0.2);
+$use-default-code-fonts:       true;              // Should default font choice (monospace) be used for code elements? (`true`/`false`) [6]
+$code-element-padding:         0.125rem 0.25rem;  // Padding for <code>
+$code-element-fore-color:      $fore-color;       // Text color for <code>
+$code-element-back-color:      #e0e0e0;           // Background color for <code>
+$code-element-border-style:    0;                 // Border style for <code>
+$code-element-border-radius:   2*$_1px;           // Border radius for <code>
+$code-element-box-shadow:                         // Box shadow for <code>
+  0 2*$_1px 2*$_1px 0 rgba(0, 0, 0, 0.14), 0 1*$_1px 5*$_1px 0 rgba(0, 0, 0, 0.12), 0 3*$_1px 1*$_1px -2*$_1px rgba(0, 0, 0, 0.2);
+$pre-element-padding:          0.75rem;           // Padding for <pre>
+$pre-element-fore-color:  $code-element-fore-color; // Text color for <pre>
+$pre-element-back-color:  $code-element-back-color; // Background color for <pre>
+$pre-element-border-style:    0;                  // Border style for <pre>
+$pre-element-border-radius:   0 3*$_1px 3*$_1px 0;// Border radius for <pre>
+$pre-element-margin:          0.5rem;             // Margin for <pre>
+$pre-element-box-shadow:                          // Box shadow for <pre>
+  0 2*$_1px 2*$_1px 0 rgba(0, 0, 0, 0.14), 0 1*$_1px 5*$_1px 0 rgba(0, 0, 0, 0.12), 0 3*$_1px 1*$_1px -2*$_1px rgba(0, 0, 0, 0.2);
+$add-pre-element-sidebar:     true;               // Should a fancy sidebar be added to the left side of <pre> (`true`/`false`) [7]
+$pre-element-sidebar-style:   4*$_1px solid #303f9f;// Style of the sidebar of <pre>
+$kbd-element-padding:         $code-element-padding; // Padding for <kbd>
+$kbd-element-fore-color:      #fafafa;            // Text color for <kbd>
+$kbd-element-back-color:      #212121;            // Background color for <kbd>
+$kbd-element-border-style:    0;                  // Border style for <kbd>
+$kbd-element-border-radius:  $code-element-border-radius; // Border radius for <kbd>
+$kbd-element-box-shadow:  $code-element-box-shadow; // Box shadow for <kbd>
+$style-samp-element:      false;                  // Should styles for <samp> be included? (`true`/`false`) [8]
+$include-dfn-fix:      true;                      // Should the fix for Android 4.3 concerning <dfn> be included (`true`/`false`) [9]
+$small-font-size:      0.75em;                    // Font size for <small> elements
+$sup-font-size:        0.75em;                    // Font size for <sup> elements
+$sub-font-size:        0.75em;                    // Font size for <sub> elements
+$sup-top:              -0.5em;                    // <sup> top
+$sub-bottom:           -0.25em;                   // <sub> bottom
+$link-fore-color:          #3f51b5;               // Text color for <a>
+$link-visited-fore-color:  #3f51b5;               // Text color for visited <a>
+$link-font-weight:         500;                   // Font weight for <a>
+$apply-link-underline:     true;                  // Should an underline be applied to all <a> elements? (`true`/`false`) [10]
+$apply-link-hover-fade:    true;                  // Should the :hover and :focus state of <a> elements use fade-out instead of a different color (`true`/`false`) [11]
+$figcaption-font-size:     0.8125rem;             // Font size of <figcaption> elements
+$figcaption-fore-color:    #424242;               // Text color for <figcaption> elements
+//  Notes:
+// [1] - The value $base-root-font-size should be in `px` only! This rule is very important, as it will determine the root
+//  element's font sizing. The value of $_1px is calculated based on the value of $base-root-font-size, please do not alter
+//   the way that it's calculated.
+// [2] - The value of $base-font-size will only be used if the value of $apply-defaults-to-all is set to `true` (see [3]).
+//  This is due to the fact that applying the value of it on the root element again will overwrite the value of
+//  $base-root-font-size (see [1]). The value of this variable should be set in either `em` or `rem`.
+// [3] - It is recommended to set the value of $apply-defaults-to-all to `true`, unless you want to apply extra styling
+//  to elements manually.
+// [4] - If the value of $make-heading-smalltext-block is `true` the <small> elements in headings will be displayed below
+//  the main heading and the 2 values specified below will apply.
+// [5] - If $horizontal-rule-fancy-style is set to `true` the value of $horizontal-rule-border-style will not be used and
+//  a gradient with the style specified in $horizontal-rule-fancy-gradient will be applied instead.
+// [6] - If the value of $use-default-code-fonts is set to `false` the value of $code-font-family will be used. `true`
+//  will apply the proper fix to use monospace font without any problems on all browsers.
+// [7] - if the value of $add-pre-element-sidebar is set to true, the style specified in $pre-element-sidebar-style will
+//  be applied as a left border for the <pre> elements.
+// [8] - If the value of $style-samp-element is set to `false`, no styling will be included in the final CSS file for
+//  `samp` elements. Otherwise, the styling defined in the $samp-... variables will be applied.
+// [9] - If the value of $include-dfn-fix is set to `true` a styling fix will be applied, so that the <dfn> elements are
+//  displayed properly on older versions of Android (4.3-) in italics. Otherwise, said fix will not be included.
+// [10] - If the value of $apply-link-underline is set to `true`, an underline will be applied to the link in its normal
+//  color, as defined in $link-fore-color.
+// [11] - If `$apply-link-hover-fade` is set to `true`, a fading transition will be used for the link when hovered over or
+//  focused. Otherwise, the color specified in $link-hover-fore-color will be used.
+//  Variables for grid elements
+$use-four-step-grid:           false;             // Should the old 4-step grid system be used instead of the new (`true`/`false`) [1]
+$include-parent-layout:        true;              // Should the classes for rows defining the column layout of children be included (`true`/`false`) [2]
+$grid-container-name:          'container';       // Class name for the grid container
+$grid-container-side-padding:  0.75rem;           // Padding for the grid container (left and right only)
+$grid-row-name:                'row';             // Class name for the grid's rows
+$grid-row-parent-layout-prefix:'cols';            // Class name prefix for the grid's row parents [2]
+$grid-column-prefix:           'col';             // Class name prefix for the grid's columns
+$grid-column-offset-suffix:    'offset';          // Class name suffix for the grid's offsets
+$grid-order-normal-suffix:     'normal';          // Class name suffix for grid columns with normal priority
+$grid-order-first-suffix:      'first';           // Class name suffix for grid columns with highest priority
+$grid-order-last-suffix:       'last';            // Class name suffix for grid columns with lowest priorty
+$grid-column-count:            12;                // Number of columns in the grid (integer value only)
+$grid-column-padding:          0 0.25rem;         // Padding for the columns of the grid
+$grid-small-prefix:            'sm';              // Small screen class prefix for grid
+$grid-medium-breakpoint:        768px;            // Medium screen breakpoint for grid
+$grid-medium-prefix:           'md';              // Medium screen class prefix for grid
+$grid-large-breakpoint:        1280px;            // Large screen breakpoint for grid
+$grid-large-prefix:            'lg';              // Large screen class prefix for grid
+//  Notes:
+// [1] - If the value of $use-four-step-grid is `true`, the grid system will contain 4 breakpoints instead of 3, along with
+//  the needed styles. In this case, values should be specified for $grid-extra-small-prefix and $grid-small-breakpoint.
+// [2] - If the value of $include-parent-layout is `true`, the grid system will contain extra classes that will define the column
+//  layout of their children. In this case, a value should be specified for $grid-row-parent-layout-prefix.
+//  Variables for forms and inputs
+$form-back-color:        #eeeeee;                  // Background color for forms
+$form-fore-color:        $fore-color;              // Text color for forms
+$form-border-style:      $_1px solid #bdbdbd;      // Border style for forms
+$form-border-radius:     3*$_1px;                  // Border radius for forms
+$form-margin:            0.5rem;                   // Margin for forms
+$form-padding:           0.75rem 0.5rem 1.125rem;  // Padding for forms
+$form-box-shadow:                                  // Box shadow for forms
+  0 2*$_1px 2*$_1px 0 rgba(0, 0, 0, 0.14), 0 1*$_1px 5*$_1px 0 rgba(0, 0, 0, 0.12), 0 3*$_1px 1*$_1px -2*$_1px rgba(0, 0, 0, 0.2);
+$fieldset-back-color:    $form-back-color;         // Background color for fieldset
+$fieldset-border-style:  $_1px solid #e0e0e0;      // Border style for fieldset
+$fieldset-border-radius: 2*$_1px;                  // Border radius for fieldset
+$fieldset-margin:        0.125rem;                 // Margin for fieldset
+$fieldset-padding:       0.5rem;                   // Padding for fieldset
+$legend-font-weight:     600;                      // Font weight for legend
+$legend-font-size:       0.875rem;                 // Font size for legend
+$legend-fore-color:      $form-fore-color;         // Text color for legend
+$legend-padding:         0.125rem 0.25rem;         // Padding for legend
+$label-padding:          0.25rem 0.5rem;           // Padding for label
+$input-group-name:       'input-group';            // Class for input groups
+$include-fluid-input-group:    false;              // Should fluid input grooups be included? (`true`/`false`) [1]
+$include-vertical-input-group: true;               // Should vertical input grooups be included? (`true`/`false`) [1]
+$input-back-color:      #fafafa;                   // Background for input
+$input-fore-color:      $fore-color;               // Text color for input
+$input-border-style:    $_1px solid #bdbdbd;       // Border style for input
+$input-border-radius:   2*$_1px;                   // Border radius for input
+$input-margin:          0.25rem;                   // Margin for input
+$input-padding:         0.5rem 0.75rem;            // Padding for input
+$input-focus-border-color:    #0288d1;             // Border color for focused input
+$input-invalid-border-color:  #d32f2f;             // Border color for invalid input
+$input-disabled-opacity:      0.75;                // Opacity for disabled input
+$input-readonly-back-color:   #e0e0e0;             // Background color for readonly input
+$input-readonly-border-color: #bdbdbd;             // Border color for readonly input
+$input-placeholder-fore-color:#616161;             // Text color for input placeholder
+$apply-select-fix:       false;                    // [Hidden flag override] Should the styles that fix <select> styling be applied? (`true`/`false`)
+$button-back-color:      #e0e0e0;                  // Back color for button elements
+$button-back-opacity:    1;                        // Background opacity for button elements
+$button-hover-back-opacity: 1;                     // Background opacity for button elements on hover or focus
+$button-fore-color:      $fore-color;              // Text color for button elements
+$button-border-style:    0;                        // Border style for button elements
+$button-border-radius:   3*$_1px;                  // Border radius for button elements
+$button-padding:         0.625rem 0.875rem;        // Padding for button elements
+$button-margin:          0.5rem;                   // Margin for button elements
+$button-box-shadow:                                // Box shadow for buttons
+  0 2*$_1px 2*$_1px 0 rgba(0, 0, 0, 0.14), 0 1*$_1px 5*$_1px 0 rgba(0, 0, 0, 0.12), 0 3*$_1px 1*$_1px -2*$_1px rgba(0, 0, 0, 0.2);
+$button-disabled-opacity:0.75;                     // Disabled button elements opacity
+$button-class-name:      'button';                 // Class for custom button elements
+$include-button-group:   false;                    // [Hidden flag override] Should button groups be enabled? (`true`/`false`) [2]
+$hide-file-inputs:                      true;      // Should a style be added that makes all <input>s of type `file` hidden? (`true`/`false`) [3]
+$button-variant1-name:                  'primary'; // Class name for button variant 1
+$button-variant1-back-color:            #303f9f;   // Background color for button variant 1
+$button-variant1-back-opacity:          1;         // Background opacity for button variant 1
+$button-variant1-hover-back-opacity:    1;         // Background opacity for button variant 1 on hover or focus
+$button-variant1-fore-color:            #fafafa;   // Text color for button variant 1
+$checkbox-size:                  1rem;             // Size for checkbox/radio [4]
+$checkbox-back-color:            $input-back-color;// Background clor for checkbox/radio
+$checkbox-fore-color:            $input-fore-color;// Text/mark color for checkbox/radio
+$checkbox-border-thickness:      $_1px;            // Border thickness for checkbox/radio
+$checkbox-border-color:          #bdbdbd;          // Border color for checkbox/radio
+$checkbox-border-radius:      $input-border-radius;// Border radius for checkbox/radio
+$checkbox-focus-border-color: $input-focus-border-color;// Border color for checkbox/radio on focus
+$checkbox-bottom-spacing:        0.375rem;         // Bottom spacing for checkbox/radio
+$checkbox-disabled-opacity:  $input-disabled-opacity;// Opacity for disabled checkbox/radio
+$checkbox-box-shadow:            none;             // Box shadow for checkbox/radio
+$include-switch:                 false;            // Should switch components be included? (`true`/`false`) [5]
+//   Notes:
+// [1] - If the value of $include-fluid-input-group is `true`, fluid input groups will be included, using the values
+//  specified in the corresponding variables. The same applies for $include-vertical-input-group and vertical input groups.
+// [2] - Due to the fact that the value of $include-button-group is set to `false`, no button group styles will be created.
+//  If you wish to enable them, please refer to a full flavor for the required variables.
+// [3] - If the value of $hide-file-inputs is `true`, all <input type="file"> elements will be hidden and the only way
+//   to access them is via the use of <label> elements that are linked to them. This option is enabled by default to
+//  allow for universal button styles, even for file input buttons, but can be disabled if the base style is desired.
+//  If the value is `false`, some fixes will be applied to the <input type="file"> element.
+// [4] - The value of $checkbox-size will determine a few variables like some `margin` values, `height`, `width` etc.
+//  Variables for navigational elements
+// [5]  - Due to the fact that the value of $include-switch is set to `false`, no switch styles will be created.
+//  If you wish to enable them, please refer to a full flavor for the required variables.
+$header-height:            3rem;                   // Height for <header>
+$header-back-color:        #283593;                // Background color for <header>
+$header-fore-color:        #fafafa;                // Text color for <header>
+$header-border-style:      0;                      // Border style for <header>
+$header-margin:            0;                      // Margin for <header>
+$header-padding:           0.25rem 0.75rem;        // Padding for <header>
+$header-box-shadow:                                // Box shadow for <header>
+  0 2*$_1px 2*$_1px 0 rgba(0, 0, 0, 0.14), 0 1*$_1px 5*$_1px 0 rgba(0, 0, 0, 0.12), 0 3*$_1px 1*$_1px -2*$_1px rgba(0, 0, 0, 0.2);
+$header-logo-name:         'logo';                 // Class name for <header>'s logo
+$header-logo-font-size:    1.75rem;                // Font size for <header>'s logo
+$header-logo-line-height:  1.3125em;               // Line height for <header>'s logo
+$header-logo-margin:       0.0625rem 0.375rem 0.0625rem 0.0625rem; // Margin for <header>'s logo
+$header-logo-padding:      0;                      // Padding for <header>'s logo
+$header-link-hover-color:  #303f9f;                // Hover color for <header>'s links
+$header-link-margin:       0.125rem 0;             // Margin for <header>'s links
+$include-header-sticky:    true;                   // Should sticky <header> elements be included? (`true`/`false`) [1]
+$header-sticky-name:       'sticky';               // Class name for sticky <header>
+$include-nav-styles:       false;                  // [Hidden flag override] Should <nav> elements by stylized? (`true`/`false`) [2]
+$drawer-name:              'drawer';               // Class name for the drawer component
+$drawer-back-color:        #f5f5f5;                // Background color of the drawer component
+$drawer-border-style:      1px solid #bdbdbd;      // Border style of the drawer component
+$drawer-border-radius:     0;                      // Border radius of the drawer component
+$drawer-width:             320px;                  // Width of the drawer component
+$drawer-padding:           0;                      // Padding of the drawer component
+$drawer-box-shadow:                                // Box shadow for the drawer component
+  0 2*$_1px 2*$_1px 0 rgba(0, 0, 0, 0.14), 0 1*$_1px 5*$_1px 0 rgba(0, 0, 0, 0.12), 0 3*$_1px 1*$_1px -2*$_1px rgba(0, 0, 0, 0.2);
+$drawer-mobile-breakpoint: 768px;                  // Mobile breakpoint for the drawer component
+$drawer-normal-height:     calc(100vh - 3rem);     // Height of the drawer component when shown as normal menu
+$drawer-right-name:        'right';                // Class name for the right variant of the drawer component
+$drawer-persistent-name:   'drawer';               // Class name for the persisten variant of the drawer component
+$drawer-toggle-name:       'drawer-toggle';        // Class name for the drawer component's toggle
+$drawer-toggle-font-size:  2.5rem;                 // Font size for the drawer component's toggle icon
+$drawer-toggle-line-height:0.125;                  // Line height for the drawer component's toggle icon
+$drawer-toggle-top:        0.4375rem;              // Top position for the drawer component's toggle icon
+$drawer-close-name:        'close';                // Class name of the close element for the drawer component
+$drawer-close-top:         0.75rem;                // Top position of the drawer component's close icon
+$drawer-close-right:       0.25rem;                // Right position of the drawer component's close icon
+$footer-back-color:        #283593;                // Background color for <footer>
+$footer-fore-color:        #fafafa;                // Text color for <footer>
+$footer-border-style:      0;                      // Border stye for <footer>
+$footer-font-size:         0.875rem;               // Font size for <footer>
+$footer-margin:            1rem 0 0;               // Margin for <footer>
+$footer-padding:           1.5rem 0.5rem 0.75rem;  // Padding for <footer>
+$footer-link-fore-color:   #f5f5f5;                // Text color for links in <footer>
+$include-footer-sticky:    false;                  // Should sticky <footer> elements be included (`true`/`false`) [3]
+$footer-sticky-name:       'sticky';               // Class name for sticky <footer> elements
+//  Notes:
+// [1] - If the value of $include-header-sticky is `true`, a class will be created that will allow for sticky positioning
+//  of <header> elements, using the value of $header-sticky-name for the name of the class.
+// [2] - Due to the fact that the value of $include-nav-styles is set to `false`, <nav> elements
+//  will not be stylized. If you set it to `true`, please refer to a full flavor
+//  to find the required variable definitions.
+// [3] - If the value of $include-footer-bottom is `true`, a class will be created that will allow for sticky positioning
+//  of <footer> elements, using the value of $footer-sticky-name for the name of the class.
+//  Variables for responsive tables
+$table-border-style:      $_1px solid #bdbdbd;     // Border style for <table> and children
+$table-border-radius:     3*$_1px;                 // Border radius for <table> and children
+$table-margin:            0 auto;                  // Margin for <table>
+$table-box-shadow:                                 // Box shadow for <table>
+  0 2*$_1px 2*$_1px 0 rgba(0, 0, 0, 0.14), 0 1*$_1px 5*$_1px 0 rgba(0, 0, 0, 0.12), 0 3*$_1px 1*$_1px -2*$_1px rgba(0, 0, 0, 0.2);
+$table-caption-font-size:    1.5rem;               // Font size for <caption>
+$table-caption-margin:       0.5rem;               // Margin for <caption>
+$table-row-padding:          0.5rem;               // Padding for <tr> - both views
+$table-column-padding:       0.625rem;             // Padding for <td> and <th> - desktop view
+$table-head-back-color:      #f5f5f5;              // Background color for <th>
+$table-head-fore-color:      #424242;              // Text color for <th>
+$table-body-back-color:      #fafafa;              // Background color for <td>
+$table-body-fore-color:      $fore-color;          // Text color for <td>
+$table-mobile-breakpoint:    767px;                // Breakpoint for <table> mobile view
+$table-mobile-card-spacing:  0.625rem;             // Space between <tr> cards - mobile view
+$table-mobile-card-label:    'data-label';         // Attribute used to replace column headers in mobile view [1]
+$table-mobile-label-font-weight:$bold-font-weight; // Font weight for mobile headers
+$include-horizontal-table:    false;               // Should horizontal <table> elements be included? (`true`/`false`) [2]
+$include-scrollable-table:    false;               // Should scrollable <table> elements be included? (`true`/`false`) [2]
+$include-striped-table:        false;              // [Hidden flag override] Should striped <table> elements be included (`true`/`false`) [2]
+//  Notes:
+// [1] - The attribute specified in $table-mobile-card-label must be added manually to each and every element in the table
+//  in order for their mobile headers to display properly.
+// [2] - Due to the $include-horizontal-table, $include-scrollable-table and $include-striped-table flags being set to `false`,
+//  no styling will be provided for horizontal, scrollable and striped <table> elements. Please refer to a full fulavor to find
+//  the variables associated with these components, if you want to enable them.
+$card-name:              'card';                   // Class name for cards
+$card-back-color:        #fafafa;                  // Background color for cards
+$card-fore-color:        $fore-color;              // Text color for cards
+$card-border-style:      $_1px solid #bdbdbd;      // Border style for cards
+$card-border-radius:     3*$_1px;                  // Border radius for cards
+$card-margin:            0.5rem;                   // Margin for cards
+$card-box-shadow:                                  // Box shadow for cards
+  0 2*$_1px 2*$_1px 0 rgba(0, 0, 0, 0.14), 0 1*$_1px 5*$_1px 0 rgba(0, 0, 0, 0.12), 0 3*$_1px 1*$_1px -2*$_1px rgba(0, 0, 0, 0.2);
+$card-section-name:            'section';          // Class name for card sections
+$card-section-border-style:    $_1px solid #bdbdbd;// Border style for card sections
+$card-section-padding:         0.75rem;            // Padding for card sections
+$card-section-media-name:      'media';            // Class name for card media sections
+$card-section-media-height:    200px;              // Height for card media setions
+$card-normal-width:            320px;              // Width for normal cards
+$card-size1-name:              'fluid';            // Class name for fluid cards
+$card-size1-width:             100%;               // Width for fluid cards
+$card-section-style1-name:       'accent';         // Class name for card section style 1
+$card-section-style1-back-color: #303f9f;          // Background color for card section style 1
+$card-section-style1-border-style: $_1px solid #283593; // Border style for card section style 1
+$card-section-style1-fore-color: #fafafa;          // Text color for card section style 1
+//  Notes:
+// [1] - The cards module depends heavily on the grid system module.
+//  ---  ---  ---
+//  No variables specified for the tab module. This module is disabled by default.
+//  To re-enable it, please refer to a full flavor for variables and documentation.
+//  ---  ---  ---
+//  Variables for contextual background elements and alerts
+$mark-back-color:        #283593;                  // Background color for <mark>
+$mark-fore-color:        #fafafa;                  // Text color for <mark>
+$mark-font-size:         0.9375em;                 // Font size for <mark>
+$mark-line-height:       1em;                      // Line height for <mark>
+$mark-border-style:      0;                        // Border style for <mark>
+$mark-border-radius:     2*$_1px;                  // Border radius for <mark>
+$mark-padding:           0.25em 0.375em;           // Padding for <mark>
+$mark-margin:            0.125rem;                 // Margin for <mark>
+$mark-box-shadow:                                  // Box shadow for <mark>
+  0 2*$_1px 2*$_1px 0 rgba(0, 0, 0, 0.14), 0 1*$_1px 5*$_1px 0 rgba(0, 0, 0, 0.12), 0 3*$_1px 1*$_1px -2*$_1px rgba(0, 0, 0, 0.2);
+$mark-inline-block-name:    'inline-block';        // Class name for <mark> inline block styling
+$toast-name:                'toast';               // Class name for toast component
+$toast-bottom:              1.5rem;                // Bottom position for toasts
+$toast-back-color:          $fore-color;           // Background color for toasts
+$toast-fore-color:          #fafafa;               // Text color for toasts
+$toast-border-style:        0;                     // Border style for toasts
+$toast-border-radius:       2rem;                  // Border radius for toasts
+$toast-padding:             0.75rem 1.5rem;        // Padding for toasts
+$toast-box-shadow:                                 // Box shadow for toasts
+  0 2*$_1px 2*$_1px 0 rgba(0, 0, 0, 0.14), 0 1*$_1px 5*$_1px 0 rgba(0, 0, 0, 0.12), 0 3*$_1px 1*$_1px -2*$_1px rgba(0, 0, 0, 0.2);
+$include-tooltip:            false;                // Should tooltips be included? (`true`/`false`) [1]
+$include-modal:              false;                // Should modals be included? (`true`/`false`) [1]
+//   Notes:
+// [1] - Due to the values of $include-tooltip and $include-modal being set
+//  to `false`, no styling is provided for these elements. If you want to enable them, please
+//  refer to a full flavor file for variable definitions.
+//  ---  ---  ---
+//  No variables specified for the progress module. This module is disabled by default.
+//  To re-enable it, please refer to a full flavor for variables and documentation.
+//  ---  ---  ---
+//  Variables for utilities and helper classes
+$hidden-name:                  'hidden';           // Class name for hidden elements
+$visually-hidden-name:         'visually-hidden';  // Class name for visually hidden elements
+$include-breadcrumbs:          false;              // [Hidden flag override] Should breadcrumbs be included? (`true`/`false`) [1]
+$close-icon-name:              'close';            // Class name for close icon
+$close-icon-size:              1.5rem;             // Size of the close icon
+$close-icon-back-color:        #e0e0e0;            // Background color for the close icon
+$close-icon-fore-color:        #212121;            // Foreground color for the close icon
+//   Notes:
+// [1] - Due to the values of $include-breadcrumbs being set to `false`, this element will
+//  not be included. Refer to a full flavor file for help on how to enable them.
+@import '../mini/core';
+@import '../mini/grid';
+@import '../mini/input_control';
+/*
+  Custom elements for forms and input elements.
+*/
+@include make-button-alt-color ($button-variant1-name, $button-variant1-back-color,
+  $button-variant1-back-opacity, $button-variant1-hover-back-opacity, $button-variant1-fore-color);
+/*
+  Custom style fixes and tweaks for input elements.
+*/
+button, [type="button"], [type="submit"], [type="reset"],
+a.button, label.button, .button,
+a[role="button"], label[role="button"], [role="button"], label{
+  text-transform: uppercase;
+  font-weight: 600;
+  font-size: 0.875rem;
+}
+button:hover, button:focus, [type="button"]:hover, [type="button"]:focus, [type="submit"]:hover, [type="submit"]:focus, [type="reset"]:hover, [type="reset"]:focus,
+a.button:hover,
+a.button:focus, label.button:hover, label.button:focus, .button:hover, .button:focus,
+a[role="button"]:hover,
+a[role="button"]:focus, label[role="button"]:hover, label[role="button"]:focus, [role="button"]:hover, [role="button"]:focus {
+  background: #e5e5e5;
+  box-shadow: 0 3*$_1px 3*$_1px 0 rgba(0,0,0,0.14),0 1*$_1px 7*$_1px 0 rgba(0,0,0,0.12),0 3*$_1px 1*$_1px -1*$_1px rgba(0,0,0,0.2);
+}
+button.primary:hover, button.primary:focus, [type="button"].primary:hover, [type="button"].primary:focus, [type="submit"].primary:hover, [type="submit"].primary:focus,
+[type="reset"].primary:hover,
+[type="reset"].primary:focus, .button.primary:hover, .button.primary:focus, [role="button"].primary:hover, [role="button"].primary:focus {
+  background: #3f51b5;
+}
+@import '../mini/navigation';
+/*
+  Custom style fixes and tweaks for input elements.
+*/
+.drawer-toggle::before{
+  line-height: 0.3125;
+}
+@media screen and (min-width: 768px) {
+  .drawer-toggle:not(.drawer) {
+    display: inline-block;
+  }
+}
+.drawer {
+  button, [type="button"], [type="submit"], [type="reset"],
+  a, label:not(.close), [role="button"] {
+    display: block;
+    margin: 0;
+    background: #f5f5f5;
+    box-shadow: none;
+    border-bottom: 1px solid #bdbdbd;
+    border-radius: 0;
+    &:hover, &:focus {
+      background: #fafafa;
+      box-shadow: none;
+    }
+  }
+}
+@import '../mini/table';
+/*
+  Custom style fixes and tweaks for table elements.
+*/
+th, table:not(.preset) td:before {
+  text-transform: uppercase;
+  font-weight: 500;
+}
+table:not(.preset) td:before {
+  font-weight: 600;
+  color: #424242;
+}
+th, td {
+  font-size: 0.75rem;
+}
+@import '../mini/card';
+/*
+  Custom elements for cards and containers.
+*/
+@include make-card-alt-size ($card-size1-name, $card-size1-width);
+@include make-card-section-alt-color ($card-section-style1-name, $card-section-style1-back-color,
+  $card-section-style1-fore-color, $card-section-style1-border-style);
+//  ---  ---  ---
+// Tab module is disabled for this flavor.
+// @import '../mini/tab';
+//  ---  ---  ---
+@import '../mini/contextual';
+/*
+  Custom style fixes and tweaks for contextual elements.
+*/
+.toast {
+  font-size: 0.875rem;
+}
+//  ---  ---  ---
+// Progress module is disabled for this flavor.
+// @import '../mini/progress';
+//  ---  ---  ---
+@import '../mini/utility';

src/mini/_card.scss

@@ -1,80 +1,80 @@
 /*
-	Definitions for cards and containers.
+  Definitions for cards and containers.
 */
 // Dependency: This module depends heavily on the grid system module.
-$card-name:								'card' !default;					// Class name for the cards
-$card-section-name:				'section' !default;				// Class name for the cards' sections
-$card-section-media-name:	'media' !default;					// Class name for the cards' sections (media cotent)
-$card-normal-width:				320px !default;						// Width for normal cards
+$card-name:                'card' !default;          // Class name for the cards
+$card-section-name:        'section' !default;       // Class name for the cards' sections
+$card-section-media-name:  'media' !default;         // Class name for the cards' sections (media cotent)
+$card-normal-width:        320px !default;           // Width for normal cards
 // External variables' defaults are used only if you import this module on its own, without the rest of the framework.
-$back-color:							white !default;						// [External variable - core] Background color for everything.
-$fore-color:							black !default;						// [External variable - core] Foreground color for everything.
+$back-color:               white !default;           // [External variable - core] Background color for everything.
+$fore-color:               black !default;           // [External variable - core] Foreground color for everything.
 // Check the `_card_mixins.scss` file to find this module's mixins.
 @import 'card_mixins';
 // Card styling
 .#{$card-name} {
-	// Old syntax
-	display: -webkit-box;
-	-webkit-box-orient: vertical;
-	-webkit-box-pack: justify;
-	-webkit-box-align: center;
-	// New syntax
-	display: -webkit-flex;
-	display:         flex;
-	-webkit-flex-direction: column;
-					flex-direction: column;
-	-webkit-justify-content: space-between;
-					justify-content: space-between;
-	-webkit-align-self: center;
-					align-self: center;
-	position: relative;
-	width: 100%;
-	// Actual styling for the cards
-	@if $card-back-color != $back-color {
-		background: $card-back-color;
-	}
-	@if $card-fore-color != $fore-color {
-		color: $card-fore-color;
-	}
-	@if $card-border-style != 0 {
-		border: $card-border-style;
-	}
-	@if $card-border-radius != 0 {
-		border-radius: $card-border-radius;
-	}
-	@if $card-margin != 0 {
-		margin: $card-margin;
-	}
-	@if $card-box-shadow != none {
-		box-shadow: $card-box-shadow;
-	}
-	// Hide overflow from section borders
-	overflow: hidden;
-	// Card sections
-	& > .#{$card-section-name} {
-		box-sizing: border-box;
-		margin: 0;
-		border: 0;				// Clean borders and radiuses for any element-based sections
-		border-radius: 0; // Clean borders and radiuses for any element-based sections
-		border-bottom: $card-section-border-style;
-		padding: $card-section-padding;
-		width: 100%;
-		// Card media sections
-		&.#{$card-section-media-name} {
-			height: $card-section-media-height;
-			padding: 0;
-			-o-object-fit: cover;
-			   object-fit: cover;
-		}
-	}
-	// Card sections - last
-	& > .#{$card-section-name}:last-child {
-		border-bottom: 0;	// Clean the extra border for last section
-	}
+  // Old syntax
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-box-pack: justify;
+  -webkit-box-align: center;
+  // New syntax
+  display: -webkit-flex;
+  display:         flex;
+  -webkit-flex-direction: column;
+          flex-direction: column;
+  -webkit-justify-content: space-between;
+          justify-content: space-between;
+  -webkit-align-self: center;
+          align-self: center;
+  position: relative;
+  width: 100%;
+  // Actual styling for the cards
+  @if $card-back-color != $back-color {
+    background: $card-back-color;
+  }
+  @if $card-fore-color != $fore-color {
+    color: $card-fore-color;
+  }
+  @if $card-border-style != 0 {
+    border: $card-border-style;
+  }
+  @if $card-border-radius != 0 {
+    border-radius: $card-border-radius;
+  }
+  @if $card-margin != 0 {
+    margin: $card-margin;
+  }
+  @if $card-box-shadow != none {
+    box-shadow: $card-box-shadow;
+  }
+  // Hide overflow from section borders
+  overflow: hidden;
+  // Card sections
+  & > .#{$card-section-name} {
+    box-sizing: border-box;
+    margin: 0;
+    border: 0;        // Clean borders and radiuses for any element-based sections
+    border-radius: 0; // Clean borders and radiuses for any element-based sections
+    border-bottom: $card-section-border-style;
+    padding: $card-section-padding;
+    width: 100%;
+    // Card media sections
+    &.#{$card-section-media-name} {
+      height: $card-section-media-height;
+      padding: 0;
+      -o-object-fit: cover;
+         object-fit: cover;
+    }
+  }
+  // Card sections - last
+  & > .#{$card-section-name}:last-child {
+    border-bottom: 0;  // Clean the extra border for last section
+  }
 }
 // Responsiveness (if the screen is larger than card, set max-width)
 @media screen and (min-width: #{$card-normal-width}) {
-	.#{$card-name} {
-		max-width: $card-normal-width;
-	}
+  .#{$card-name} {
+    max-width: $card-normal-width;
+  }
 }

src/mini/_card_mixins.scss

@@ -5,19 +5,19 @@
 // - $card-alt-size-name : The name of the class used for the alternate size card.
 // - $card-alt-size-width : The width of the alternate size card.
 @mixin make-card-alt-size ($card-alt-size-name, $card-alt-size-width) {
-	@if type-of($card-alt-size-width) == 'number' and unit($card-alt-size-width) == '%' {
-		.#{$card-name}.#{$card-alt-size-name} {
-			max-width: $card-alt-size-width;
-			width: auto;
-		}
-	}
-	@else {
-		@media screen and (min-width: #{$card-alt-size-width}) {
-			.#{$card-name}.#{$card-alt-size-name} {
-				max-width: $card-alt-size-width;
-			}
-		}
-	}
+  @if type-of($card-alt-size-width) == 'number' and unit($card-alt-size-width) == '%' {
+    .#{$card-name}.#{$card-alt-size-name} {
+      max-width: $card-alt-size-width;
+      width: auto;
+    }
+  }
+  @else {
+    @media screen and (min-width: #{$card-alt-size-width}) {
+      .#{$card-name}.#{$card-alt-size-name} {
+        max-width: $card-alt-size-width;
+      }
+    }
+  }
 }
 // Mixin for alternate cards (card color variants).
 // Variables:
@@ -25,36 +25,36 @@
 // - $card-alt-back-color : The background color of the alternate card.
 // - $card-alt-fore-color : The text color of the alternate card.
 // - $card-alt-border-style : (Optional) The border style of the alternate card. Defaults to the value
-//	of $card-border-style.
+//  of $card-border-style.
 // - $card-alt-border-radius : (Optional) The border radius of the alternate card. Defaults to the value
-//	of $card-border-radius.
+//  of $card-border-radius.
 // - $card-alt-section-border-style : (Optional) The border style of the alternate card's sections. Defaults to
-//	the value of $card-section-border-style.
+//  the value of $card-section-border-style.
 @mixin make-card-alt-color ($card-alt-name, $card-alt-back-color, $card-alt-fore-color,
-	$card-alt-border-style : $card-border-style, $card-alt-border-radius : $card-border-radius,
-	$card-alt-section-border-style : $card-section-border-style) {
-	.#{$card-name}.#{$card-alt-name} {
-		@if $card-alt-back-color != $card-back-color {
-			background: $card-alt-back-color;
-		}
-		@if $card-alt-fore-color != $card-fore-color {
-			color: $card-alt-fore-color;
-		}
-		@if $card-alt-border-style != $card-border-style {
-			border: $card-alt-border-style;
-		}
-		@if $card-alt-border-radius != $card-border-radius {
-			border-radius: $card-alt-border-radius;
-		}
-		@if $card-alt-section-border-style != $card-section-border-style{
-			& > .#{$card-section-name} {
-				border-bottom: $card-alt-section-border-style;
-			}
-			& > .#{$card-section-name}:last-child {
-				border-bottom: 0;	// Clean the extra border for last section
-			}
-		}
-	}
+  $card-alt-border-style : $card-border-style, $card-alt-border-radius : $card-border-radius,
+  $card-alt-section-border-style : $card-section-border-style) {
+  .#{$card-name}.#{$card-alt-name} {
+    @if $card-alt-back-color != $card-back-color {
+      background: $card-alt-back-color;
+    }
+    @if $card-alt-fore-color != $card-fore-color {
+      color: $card-alt-fore-color;
+    }
+    @if $card-alt-border-style != $card-border-style {
+      border: $card-alt-border-style;
+    }
+    @if $card-alt-border-radius != $card-border-radius {
+      border-radius: $card-alt-border-radius;
+    }
+    @if $card-alt-section-border-style != $card-section-border-style{
+      & > .#{$card-section-name} {
+        border-bottom: $card-alt-section-border-style;
+      }
+      & > .#{$card-section-name}:last-child {
+        border-bottom: 0;  // Clean the extra border for last section
+      }
+    }
+  }
 }
 // Mixin for alternate card sections (card section color variants).
 // Variables:
@@ -62,27 +62,27 @@
 // - $card-section-alt-back-color : The background color of the alternate card section.
 // - $card-section-alt-fore-color : The text color of the alternate card section.
 // - $card-section-alt-border-style : (Optional) The border style of the alternate card section. Defaults to
-//	the value of $card-section-border-style.
+//  the value of $card-section-border-style.
 @mixin make-card-section-alt-color ($card-section-alt-name, $card-section-alt-back-color,
-	$card-section-alt-fore-color, $card-section-alt-border-style : $card-section-border-style) {
-	.#{$card-name} > .#{$card-section-name}.#{$card-section-alt-name} {
-		@if $card-section-alt-back-color != $card-back-color {
-			background: $card-section-alt-back-color;
-		}
-		@if $card-section-alt-fore-color != $card-fore-color {
-			color: $card-section-alt-fore-color;
-		}
-		@if $card-section-alt-border-style != $card-section-border-style {
-			border: $card-section-alt-border-style;
-		}
-	}
+  $card-section-alt-fore-color, $card-section-alt-border-style : $card-section-border-style) {
+  .#{$card-name} > .#{$card-section-name}.#{$card-section-alt-name} {
+    @if $card-section-alt-back-color != $card-back-color {
+      background: $card-section-alt-back-color;
+    }
+    @if $card-section-alt-fore-color != $card-fore-color {
+      color: $card-section-alt-fore-color;
+    }
+    @if $card-section-alt-border-style != $card-section-border-style {
+      border: $card-section-alt-border-style;
+    }
+  }
 }
 // Mixin for alternate card sections (card section padding variants).
 // Variables:
 // - $card-section-alt-name : The name of the class used for the alternate card section.
 // - $card-section-alt-padding : The padding of the alternate card section.
 @mixin make-card-section-alt-style ($card-section-alt-name, $card-section-alt-padding) {
-	.#{$card-name} > .#{$card-section-name}.#{$card-section-alt-name} {
-		padding: $card-section-alt-padding;
-	}
+  .#{$card-name} > .#{$card-section-name}.#{$card-section-alt-name} {
+    padding: $card-section-alt-padding;
+  }
 }

src/mini/_contextual.scss

@@ -1,265 +1,265 @@
 /*
-	Definitions for contextual background elements, toasts and tooltips.
+  Definitions for contextual background elements, toasts and tooltips.
 */
 // Contextual background elements use the mark element as their base.
-$mark-inline-block-name:	'inline-block' !default;	// Class name for <mark> inline block styling.
-$include-toast:						true !default;						// [Hidden flag] Should toasts be included? (`true`/`false`)
-$toast-name:							'toast' !default;					// Class name for the toasts.
-$include-tooltip:					true !default;						// Should tooltips be included? (`true`/`false`)
-$tooltip-name:						'tooltip' !default;				// Class name for the tooltips.
-$tooltip-bottom-name:			'bottom' !default;				// Bottom tooltip class name.
-$include-modal:						true !default;						// Should modals be included? (`true`/`false`)
-$modal-name:							'modal' !default;					// Class name for the modals.
-$modal-close-name:				'close' !default;					// Class name of the close element for the modal component.
+$mark-inline-block-name:  'inline-block' !default;  // Class name for <mark> inline block styling.
+$include-toast:           true !default;            // [Hidden flag] Should toasts be included? (`true`/`false`)
+$toast-name:              'toast' !default;         // Class name for the toasts.
+$include-tooltip:         true !default;            // Should tooltips be included? (`true`/`false`)
+$tooltip-name:            'tooltip' !default;       // Class name for the tooltips.
+$tooltip-bottom-name:     'bottom' !default;        // Bottom tooltip class name.
+$include-modal:           true !default;            // Should modals be included? (`true`/`false`)
+$modal-name:              'modal' !default;         // Class name for the modals.
+$modal-close-name:        'close' !default;         // Class name of the close element for the modal component.
 // External variables' defaults are used only if you import this module on its own, without the rest of the framework.
-$back-color:							white !default;						// [External variable - core] Background color for everything.
-$fore-color:							black !default;						// [External variable - core] Foreground color for everything.
-$base-line-height:				1 !default;								// [External variable - core] Line height for everything.
-$style-link-active-state:		false !default;					// [External flag - core] Should the :active state of <a> elements be stylized, same as the :hover state (`true`/`false`).
+$back-color:              white !default;           // [External variable - core] Background color for everything.
+$fore-color:              black !default;           // [External variable - core] Foreground color for everything.
+$base-line-height:        1 !default;               // [External variable - core] Line height for everything.
+$style-link-active-state: false !default;           // [External flag - core] Should the :active state of <a> elements be stylized, same as the :hover state (`true`/`false`).
 // Check the `_contextual_mixins.scss` file to find this module's mixins.
 @import 'contextual_mixins';
 // Default styling for mark. Use mixins for alternate styles.
 mark {
-	@if $mark-back-color != $back-color {
-		background: $mark-back-color;
-	}
-	@if $mark-fore-color != $fore-color {
-		color: $mark-fore-color;
-	}
-	@if $mark-font-size != 100% {
-		font-size: $mark-font-size;
-	}
-	@if $mark-line-height != $base-line-height {
-		line-height: $mark-line-height;
-	}
-	@if $mark-border-style != 0 {
-		border: $mark-border-style;
-	}
-	@if $mark-border-radius != 0 {
-		border-radius: $mark-border-radius;
-	}
-	@if $mark-padding != 0 {
-		padding: $mark-padding;
-	}
-	@if $mark-margin != 0 {
-		margin: $mark-margin;
-	}
-	@if $mark-box-shadow != none {
-		box-shadow: $mark-box-shadow;
-	}
-	&.#{$mark-inline-block-name}{
-		display: inline-block; // Can be used to deal with some problems.
-	}
+  @if $mark-back-color != $back-color {
+    background: $mark-back-color;
+  }
+  @if $mark-fore-color != $fore-color {
+    color: $mark-fore-color;
+  }
+  @if $mark-font-size != 100% {
+    font-size: $mark-font-size;
+  }
+  @if $mark-line-height != $base-line-height {
+    line-height: $mark-line-height;
+  }
+  @if $mark-border-style != 0 {
+    border: $mark-border-style;
+  }
+  @if $mark-border-radius != 0 {
+    border-radius: $mark-border-radius;
+  }
+  @if $mark-padding != 0 {
+    padding: $mark-padding;
+  }
+  @if $mark-margin != 0 {
+    margin: $mark-margin;
+  }
+  @if $mark-box-shadow != none {
+    box-shadow: $mark-box-shadow;
+  }
+  &.#{$mark-inline-block-name}{
+    display: inline-block; // Can be used to deal with some problems.
+  }
 }
 // Default styling for toasts. Use mixins for alternate styles
 @if $include-toast {
-	.#{$toast-name} {
-		position: fixed;
-		background: $toast-back-color;
-		bottom: $toast-bottom;
-  	left: 50%;
-  	transform: translate(-50%, -50%);
-		@if $toast-fore-color != $fore-color {
-			color: $toast-fore-color;
-		}
-		@if $toast-border-style != 0 {
-			border: $toast-border-style;
-		}
-		@if $toast-border-radius != 0 {
-			border-radius: $toast-border-radius;
-		}
-		@if $toast-padding != 0 {
-			padding: $toast-padding;
-		}
-		@if $toast-box-shadow != none {
-			box-shadow: $toast-box-shadow;
-		}
-		z-index: 1111;
-	}
+  .#{$toast-name} {
+    position: fixed;
+    background: $toast-back-color;
+    bottom: $toast-bottom;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    @if $toast-fore-color != $fore-color {
+      color: $toast-fore-color;
+    }
+    @if $toast-border-style != 0 {
+      border: $toast-border-style;
+    }
+    @if $toast-border-radius != 0 {
+      border-radius: $toast-border-radius;
+    }
+    @if $toast-padding != 0 {
+      padding: $toast-padding;
+    }
+    @if $toast-box-shadow != none {
+      box-shadow: $toast-box-shadow;
+    }
+    z-index: 1111;
+  }
 }
 // Default styling for tooltips. Use mixins for alternate styles
 @if $include-tooltip {
-	.#{$tooltip-name} {
-		position: relative;
-		display: inline-block;
-		&:before, &:after {
-			position: absolute;
-			opacity: 0;
-			clip: rect(0 0 0 0);
-			-webkit-clip-path: inset(100%);
-							clip-path: inset(100%);
-			transition: all 0.3s;
-			// Remember to keep this index a lower value than the one used for stickies.
-			z-index: 1010;	// Deals with certain problems when combined with cards and tables.
-			left: 50%;
-		}
-		&:not(.#{$tooltip-bottom-name}):before, &:not(.#{$tooltip-bottom-name}):after { // Top (default) tooltip styling
-			bottom: 75%;
-		}
-		&.#{$tooltip-bottom-name}:before, &.#{$tooltip-bottom-name}:after { // Bottom tooltip styling
-			top: 75%;
-		}
-		@if $style-link-active-state {
-			&:hover, &:focus, &:active {
-				&:before, &:after {
-				opacity: 1;
-				clip: auto;
-				-webkit-clip-path: inset(0%);
-								clip-path: inset(0%);
-				}
-			}
-		}
-		@else {
-			&:hover, &:focus {
-				&:before, &:after {
-				opacity: 1;
-				clip: auto;
-				-webkit-clip-path: inset(0%);
-								clip-path: inset(0%);
-				}
-			}
-		}
-		&:before {	// This is the little tooltip triangle
-			content: '';
-			background: transparent;
-			border: $tooltip-tail-size solid transparent;
-			// Older browsers will almost center the tooltip's tail
-			left: 50%;
-			// Newer browsers will center the tail properly
-			left: calc(50% - #{$tooltip-tail-size});
-		}
-		&:not(.#{$tooltip-bottom-name}):before { // Top (default) tooltip styling
-			border-top-color: $tooltip-back-color;
-		}
-		&.#{$tooltip-bottom-name}:before { // Bottom tooltip styling
-			border-bottom-color: $tooltip-back-color;
-		}
-		&:after {	// This is the actual tooltip's text block
-			content: attr(aria-label);
-			background: $tooltip-back-color;
-			@if $tooltip-border-radius != 0 {
-				border-radius: $tooltip-border-radius;
-			}
-			@if $tooltip-fore-color != $fore-color {
-				color: $tooltip-fore-color;
-			}
-			@if $tooltip-padding != 0 {
-				padding: $tooltip-padding;
-			}
-			@if $tooltip-box-shadow != none {
-				box-shadow: $tooltip-box-shadow;
-			}
-			white-space: nowrap;
-			-webkit-transform: translateX(-50%);
-							transform: translateX(-50%);
-		}
-		&:not(.#{$tooltip-bottom-name}):after { // Top (default) tooltip styling
-			margin-bottom: 2 * $tooltip-tail-size;
-		}
-		&.#{$tooltip-bottom-name}:after { // Bottom tooltip styling
-			margin-top: 2 * $tooltip-tail-size;
-		}
-	}
+  .#{$tooltip-name} {
+    position: relative;
+    display: inline-block;
+    &:before, &:after {
+      position: absolute;
+      opacity: 0;
+      clip: rect(0 0 0 0);
+      -webkit-clip-path: inset(100%);
+              clip-path: inset(100%);
+      transition: all 0.3s;
+      // Remember to keep this index a lower value than the one used for stickies.
+      z-index: 1010;  // Deals with certain problems when combined with cards and tables.
+      left: 50%;
+    }
+    &:not(.#{$tooltip-bottom-name}):before, &:not(.#{$tooltip-bottom-name}):after { // Top (default) tooltip styling
+      bottom: 75%;
+    }
+    &.#{$tooltip-bottom-name}:before, &.#{$tooltip-bottom-name}:after { // Bottom tooltip styling
+      top: 75%;
+    }
+    @if $style-link-active-state {
+      &:hover, &:focus, &:active {
+        &:before, &:after {
+        opacity: 1;
+        clip: auto;
+        -webkit-clip-path: inset(0%);
+                clip-path: inset(0%);
+        }
+      }
+    }
+    @else {
+      &:hover, &:focus {
+        &:before, &:after {
+        opacity: 1;
+        clip: auto;
+        -webkit-clip-path: inset(0%);
+                clip-path: inset(0%);
+        }
+      }
+    }
+    &:before {  // This is the little tooltip triangle
+      content: '';
+      background: transparent;
+      border: $tooltip-tail-size solid transparent;
+      // Older browsers will almost center the tooltip's tail
+      left: 50%;
+      // Newer browsers will center the tail properly
+      left: calc(50% - #{$tooltip-tail-size});
+    }
+    &:not(.#{$tooltip-bottom-name}):before { // Top (default) tooltip styling
+      border-top-color: $tooltip-back-color;
+    }
+    &.#{$tooltip-bottom-name}:before { // Bottom tooltip styling
+      border-bottom-color: $tooltip-back-color;
+    }
+    &:after {  // This is the actual tooltip's text block
+      content: attr(aria-label);
+      background: $tooltip-back-color;
+      @if $tooltip-border-radius != 0 {
+        border-radius: $tooltip-border-radius;
+      }
+      @if $tooltip-fore-color != $fore-color {
+        color: $tooltip-fore-color;
+      }
+      @if $tooltip-padding != 0 {
+        padding: $tooltip-padding;
+      }
+      @if $tooltip-box-shadow != none {
+        box-shadow: $tooltip-box-shadow;
+      }
+      white-space: nowrap;
+      -webkit-transform: translateX(-50%);
+              transform: translateX(-50%);
+    }
+    &:not(.#{$tooltip-bottom-name}):after { // Top (default) tooltip styling
+      margin-bottom: 2 * $tooltip-tail-size;
+    }
+    &.#{$tooltip-bottom-name}:after { // Bottom tooltip styling
+      margin-top: 2 * $tooltip-tail-size;
+    }
+  }
 }
 @if $include-modal {
-	.#{$modal-name} {
-		position: fixed;
-		top: 0;
-		left: 0;
-		display: none;
-		width: 100vw;
-		height: 100vh;
-		background: rgba($modal-back-color, $modal-back-opacity);
-		& .card {
-			margin: 0 auto;
-			max-height: 50vh;
-			overflow: auto;
-			& .#{$modal-close-name} {
-				position: absolute;
-				top: $modal-close-top;
-				right: $modal-close-right;
-				padding: 0; // Fixes the extra padding added from <label> styling.
-			}
-		}
-	}
-	:checked + .#{$modal-name} {
-		// Old syntax
-		display: -webkit-box;
-		-webkit-box-flex: 0;
-		// New syntax
-		display: 	-webkit-flex;
-		display:					flex;
-		-webkit-flex: 0 1 auto;
-						flex: 0 1 auto;
-		z-index: 1200;
-		& .card {
-			& .#{$modal-close-name} {
-				z-index: 1211;
-			}
-		}
-	}
+  .#{$modal-name} {
+    position: fixed;
+    top: 0;
+    left: 0;
+    display: none;
+    width: 100vw;
+    height: 100vh;
+    background: rgba($modal-back-color, $modal-back-opacity);
+    & .card {
+      margin: 0 auto;
+      max-height: 50vh;
+      overflow: auto;
+      & .#{$modal-close-name} {
+        position: absolute;
+        top: $modal-close-top;
+        right: $modal-close-right;
+        padding: 0; // Fixes the extra padding added from <label> styling.
+      }
+    }
+  }
+  :checked + .#{$modal-name} {
+    // Old syntax
+    display: -webkit-box;
+    -webkit-box-flex: 0;
+    // New syntax
+    display:   -webkit-flex;
+    display:          flex;
+    -webkit-flex: 0 1 auto;
+            flex: 0 1 auto;
+    z-index: 1200;
+    & .card {
+      & .#{$modal-close-name} {
+        z-index: 1211;
+      }
+    }
+  }
 }
 // [WARNING: As of v2.2.0, the alert component is deprecated and no longer maintained.]
-$include-alerts:					false !default;						// [Hidden flag] Should alerts be included? (`true`/`false`)
+$include-alerts:          false !default;            // [Hidden flag] Should alerts be included? (`true`/`false`)
 // Animation definition for animated alerts (included if wanted)
-@if $include-alerts {			// Turn on if you want to enable the alert component.
-	$alert-name:							'alert' !default;					// Class name for the alerts.
-	$alert-include-animated: 	false !default;						// Should animated alerts be included? (`true`/`false`)
-	$alert-animated-name:			'animated' !default;			// Class name for animated alerts.
-	$alert-back-color:				#d1e6f3 !default;					// Background color for alerts
-	$alert-fore-color:				$fore-color !default;			// Text color for alerts
-	$alert-border-style:		1px solid #d0d0d0 !default;	// Border style for alerts
-	$alert-border-radius:			0 !default;								// Border radius for alerts
-	$alert-padding:						0.75rem !default;					// Padding for alerts
-	$alert-margin:						0.5rem !default;					// Margin for alerts
-	$alert-box-shadow:				none !default;						// Box shadow for alerts
-	@if $alert-include-animated {
-		@-webkit-keyframes alert-anim {
-			45% 	{		-webkit-transform: scale(1);			-webkit-transform-origin: 50% 50%;	}
-			50% 	{		-webkit-transform: scale(1.005);	-webkit-transform-origin: 50% 50%;	}
-			55% 	{		-webkit-transform: scale(1);			-webkit-transform-origin: 50% 50%;	}
-		}
-		@keyframes alert-anim {
-			45% 	{						transform: scale(1);							transform-origin: 50% 50%;	}
-			50% 	{						transform: scale(1.005);					transform-origin: 50% 50%;	}
-			55% 	{						transform: scale(1);							transform-origin: 50% 50%;	}
-		}
-	}
-	// Default styling for alerts. Use mixins for alternate styles
-	.#{$alert-name} {
-		display: block;
-		@if $alert-back-color != $back-color {
-			background: $alert-back-color;
-		}
-		@if $alert-fore-color != $fore-color {
-			color: $alert-fore-color;
-		}
-		@if $alert-border-style != 0 {
-			border: $alert-border-style;
-		}
-		@if $alert-border-radius != 0 {
-			border-radius: $alert-border-radius;
-		}
-		@if $alert-margin != 0 {
-			margin: $alert-margin;
-		}
-		@if $alert-padding != 0 {
-			padding: $alert-padding;
-		}
-		@if $alert-box-shadow != none {
-			box-shadow: $alert-box-shadow;
-		}
-		@if $alert-include-animated {
-			&.#{$alert-animated-name} {
-				// Try to make the animated alert not blurry
-				-webkit-backface-visibility: hidden;
-								backface-visibility: hidden;
-				-webkit-transform: translateZ(0);
-								transform: translateZ(0);
-				// Apply the animation
-				-webkit-animation: alert-anim 6s linear infinite;
-								animation: alert-anim 6s linear infinite;
-			}
-		}
-	}
+@if $include-alerts {      // Turn on if you want to enable the alert component.
+  $alert-name:              'alert' !default;          // Class name for the alerts.
+  $alert-include-animated:   false !default;            // Should animated alerts be included? (`true`/`false`)
+  $alert-animated-name:      'animated' !default;      // Class name for animated alerts.
+  $alert-back-color:        #d1e6f3 !default;          // Background color for alerts
+  $alert-fore-color:        $fore-color !default;      // Text color for alerts
+  $alert-border-style:    1px solid #d0d0d0 !default;  // Border style for alerts
+  $alert-border-radius:      0 !default;                // Border radius for alerts
+  $alert-padding:            0.75rem !default;          // Padding for alerts
+  $alert-margin:            0.5rem !default;          // Margin for alerts
+  $alert-box-shadow:        none !default;            // Box shadow for alerts
+  @if $alert-include-animated {
+    @-webkit-keyframes alert-anim {
+      45%   {    -webkit-transform: scale(1);      -webkit-transform-origin: 50% 50%;  }
+      50%   {    -webkit-transform: scale(1.005);  -webkit-transform-origin: 50% 50%;  }
+      55%   {    -webkit-transform: scale(1);      -webkit-transform-origin: 50% 50%;  }
+    }
+    @keyframes alert-anim {
+      45%   {            transform: scale(1);              transform-origin: 50% 50%;  }
+      50%   {            transform: scale(1.005);          transform-origin: 50% 50%;  }
+      55%   {            transform: scale(1);              transform-origin: 50% 50%;  }
+    }
+  }
+  // Default styling for alerts. Use mixins for alternate styles
+  .#{$alert-name} {
+    display: block;
+    @if $alert-back-color != $back-color {
+      background: $alert-back-color;
+    }
+    @if $alert-fore-color != $fore-color {
+      color: $alert-fore-color;
+    }
+    @if $alert-border-style != 0 {
+      border: $alert-border-style;
+    }
+    @if $alert-border-radius != 0 {
+      border-radius: $alert-border-radius;
+    }
+    @if $alert-margin != 0 {
+      margin: $alert-margin;
+    }
+    @if $alert-padding != 0 {
+      padding: $alert-padding;
+    }
+    @if $alert-box-shadow != none {
+      box-shadow: $alert-box-shadow;
+    }
+    @if $alert-include-animated {
+      &.#{$alert-animated-name} {
+        // Try to make the animated alert not blurry
+        -webkit-backface-visibility: hidden;
+                backface-visibility: hidden;
+        -webkit-transform: translateZ(0);
+                transform: translateZ(0);
+        // Apply the animation
+        -webkit-animation: alert-anim 6s linear infinite;
+                animation: alert-anim 6s linear infinite;
+      }
+    }
+  }
 }

src/mini/_contextual_mixins.scss

@@ -6,14 +6,14 @@
 // - $mark-alt-back-color : The background color of the alternate mark.
 // - $mark-alt-fore-color : (Optional) The text color of the alternate mark. Defaults to the text color of the mark.
 @mixin make-mark-alt-color ($mark-alt-name, $mark-alt-back-color, $mark-alt-fore-color: $mark-fore-color) {
-	mark.#{$mark-alt-name} {
-		@if $mark-alt-back-color != $mark-back-color {
-			background: $mark-alt-back-color;
-		}
-		@if $mark-alt-fore-color != $mark-fore-color {
-			color: $mark-alt-fore-color;
-		}
-	}
+  mark.#{$mark-alt-name} {
+    @if $mark-alt-back-color != $mark-back-color {
+      background: $mark-alt-back-color;
+    }
+    @if $mark-alt-fore-color != $mark-fore-color {
+      color: $mark-alt-fore-color;
+    }
+  }
 }
 // Mixin for alternative mark styles (contextual tags).
 // Variables:
@@ -25,28 +25,28 @@
 // - $mark-alt-line-height : (Optional) The line height of the alternate mark style. Defaults to the line height of the mark.
 // - $mark-alt-box-shadow : (Optional) The box shadow of the alternate mark style. Defaults to the box shadow of the mark.
 @mixin make-mark-alt-style ($mark-alt-name, $mark-alt-border-style, $mark-alt-border-radius,
-	$mark-alt-padding : $mark-padding, $mark-alt-font-size : $mark-font-size, $mark-alt-line-height : $mark-line-height,
-	$mark-alt-box-shadow : $mark-box-shadow ) {
-	mark.#{$mark-alt-name} {
-		@if $mark-alt-font-size != $mark-font-size {
-			font-size: $mark-alt-font-size;
-		}
-		@if $mark-alt-line-height != $mark-line-height {
-			line-height: $mark-alt-line-height;
-		}
-		@if $mark-alt-border-style != $mark-border-style {
-			border: $mark-alt-border-style;
-		}
-		@if $mark-alt-border-radius != $mark-border-radius {
-			border-radius: $mark-alt-border-radius;
-		}
-		@if $mark-alt-padding != $mark-padding {
-			padding: $mark-alt-padding;
-		}
-		@if $mark-alt-box-shadow != $mark-box-shadow {
-			box-shadow: $mark-alt-box-shadow;
-		}
-	}
+  $mark-alt-padding : $mark-padding, $mark-alt-font-size : $mark-font-size, $mark-alt-line-height : $mark-line-height,
+  $mark-alt-box-shadow : $mark-box-shadow ) {
+  mark.#{$mark-alt-name} {
+    @if $mark-alt-font-size != $mark-font-size {
+      font-size: $mark-alt-font-size;
+    }
+    @if $mark-alt-line-height != $mark-line-height {
+      line-height: $mark-alt-line-height;
+    }
+    @if $mark-alt-border-style != $mark-border-style {
+      border: $mark-alt-border-style;
+    }
+    @if $mark-alt-border-radius != $mark-border-radius {
+      border-radius: $mark-alt-border-radius;
+    }
+    @if $mark-alt-padding != $mark-padding {
+      padding: $mark-alt-padding;
+    }
+    @if $mark-alt-box-shadow != $mark-box-shadow {
+      box-shadow: $mark-alt-box-shadow;
+    }
+  }
 }
 // Mixin for alternate toast (toast color variants).
 // Variables:
@@ -54,17 +54,17 @@
 // - $toast-alt-back-color : The background color of the alternate toast.
 // - $toast-alt-fore-color : (Optional) The text color of the alternate mark. Defaults to the text color of the toast.
 @mixin make-toast-alt-color ($toast-alt-name, $toast-alt-back-color, $toast-alt-fore-color: $toast-fore-color) {
-	@if not ($include-toast) {
-		@error "Contextual module's toast mixins are only available if toasts are enabled. Set '$include-toast' to 'true' and try again!";
-	}
-	.#{$toast-name}.#{$toast-alt-name} {
-		@if $toast-alt-back-color != $toast-back-color {
-			background: $toast-alt-back-color;
-		}
-		@if $toast-alt-fore-color != $toast-fore-color {
-			color: $toast-alt-fore-color;
-		}
-	}
+  @if not ($include-toast) {
+    @error "Contextual module's toast mixins are only available if toasts are enabled. Set '$include-toast' to 'true' and try again!";
+  }
+  .#{$toast-name}.#{$toast-alt-name} {
+    @if $toast-alt-back-color != $toast-back-color {
+      background: $toast-alt-back-color;
+    }
+    @if $toast-alt-fore-color != $toast-fore-color {
+      color: $toast-alt-fore-color;
+    }
+  }
 }
 // Mixin for alternate toast styles (toast style variants).
 // Variables:
@@ -74,24 +74,24 @@
 // - $toast-alt-padding : (Optional) Padding of the alternate toast style. Defaults to the toast's padding.
 // - $toast-alt-box-shadow : (Optional) Box shadow of the alretnate toast style. Defaults to the toast's box shadow.
 @mixin make-toast-alt-style ($toast-alt-name, $toast-alt-border-style, $toast-alt-border-radius,
-	$toast-alt-padding : $toast-padding, $toast-alt-box-shadow : $toast-box-shadow) {
-	@if not ($include-toast) {
-		@error "Contextual module's toast mixins are only available if toasts are enabled. Set '$include-toast' to 'true' and try again!";
-	}
-	.#{$toast-name}.#{$toast-alt-name} {
-		@if $toast-alt-border-style != $toast-border-style {
-			border: $toast-alt-border-style;
-		}
-		@if $toast-alt-border-radius != $toast-border-radius {
-			border-radius: $toast-alt-border-radius;
-		}
-		@if $toast-alt-padding != $toast-padding {
-			padding: $toast-alt-padding;
-		}
-		@if $toast-alt-box-shadow != $toast-box-shadow {
-			box-shadow: $toast-alt-box-shadowbox-shadow;
-		}
-	}
+  $toast-alt-padding : $toast-padding, $toast-alt-box-shadow : $toast-box-shadow) {
+  @if not ($include-toast) {
+    @error "Contextual module's toast mixins are only available if toasts are enabled. Set '$include-toast' to 'true' and try again!";
+  }
+  .#{$toast-name}.#{$toast-alt-name} {
+    @if $toast-alt-border-style != $toast-border-style {
+      border: $toast-alt-border-style;
+    }
+    @if $toast-alt-border-radius != $toast-border-radius {
+      border-radius: $toast-alt-border-radius;
+    }
+    @if $toast-alt-padding != $toast-padding {
+      padding: $toast-alt-padding;
+    }
+    @if $toast-alt-box-shadow != $toast-box-shadow {
+      box-shadow: $toast-alt-box-shadowbox-shadow;
+    }
+  }
 }
 // Mixin for alternate tooltip (tooltip color variants).
 // Variables:
@@ -99,27 +99,27 @@
 // - $tooltip-alt-back-color : The background color of the alternate tooltip.
 // - $tooltip-alt-fore-color : (Optional) The text color of the alternate mark. Defaults to the text color of the tooltip.
 @mixin make-tooltip-alt-color ($tooltip-alt-name, $tooltip-alt-back-color, $tooltip-alt-fore-color: $tooltip-fore-color) {
-	@if not ($include-tooltip) {
-		@error "Contextual module's tooltip mixins are only available if tooltips are enabled. Set '$include-tooltip' to 'true' and try again!";
-	}
-	.#{$tooltip-name}.#{$tooltip-alt-name} {
-		@if $tooltip-alt-back-color != $tooltip-back-color {
-			&:not(.#{$tooltip-bottom-name}):before { // Top (default) tooltip styling
-				border-top-color: $tooltip-alt-back-color;
-			}
-			&.#{$tooltip-bottom-name}:before { // Bottom tooltip styling
-				border-bottom-color: $tooltip-alt-back-color;
-			}
-		}
-		&:after {
-			@if $tooltip-alt-back-color != $tooltip-back-color {
-				background: $tooltip-alt-back-color;
-			}
-			@if $tooltip-alt-fore-color != $tooltip-fore-color {
-				color: $tooltip-alt-fore-color;
-			}
-		}
-	}
+  @if not ($include-tooltip) {
+    @error "Contextual module's tooltip mixins are only available if tooltips are enabled. Set '$include-tooltip' to 'true' and try again!";
+  }
+  .#{$tooltip-name}.#{$tooltip-alt-name} {
+    @if $tooltip-alt-back-color != $tooltip-back-color {
+      &:not(.#{$tooltip-bottom-name}):before { // Top (default) tooltip styling
+        border-top-color: $tooltip-alt-back-color;
+      }
+      &.#{$tooltip-bottom-name}:before { // Bottom tooltip styling
+        border-bottom-color: $tooltip-alt-back-color;
+      }
+    }
+    &:after {
+      @if $tooltip-alt-back-color != $tooltip-back-color {
+        background: $tooltip-alt-back-color;
+      }
+      @if $tooltip-alt-fore-color != $tooltip-fore-color {
+        color: $tooltip-alt-fore-color;
+      }
+    }
+  }
 }
 // Mixin for alternate tooltip styles (tooltip style variants).
 // Variables:
@@ -129,36 +129,36 @@
 // - $tooltip-alt-padding : (Optional) Padding of the alternate tooltip style. Defaults to the tooltip's padding.
 // - $tooltip-alt-box-shadow : (Optional) Box shadow of the alretnate tooltip style. Defaults to the tooltip's box shadow.
 @mixin make-tooltip-alt-style ($tooltip-alt-name, $tooltip-alt-tail-size, $tooltip-alt-border-radius,
-	$tooltip-alt-padding : $tooltip-padding, $tooltip-alt-box-shadow : $tooltip-box-shadow) {
-	@if not ($include-tooltip) {
-		@error "Contextual module's tooltip mixins are only available if tooltips are enabled. Set '$include-tooltip' to 'true' and try again!";
-	}
-	.#{$tooltip-name}.#{$tooltip-alt-name} {
-		@if $tooltip-alt-tail-size != $tooltip-tail-size {
-			&:before {
-				border-width: $tooltip-alt-tail-size;
-				left: calc(50% - #{$tooltip-alt-tail-size});
-			}
-			&:not(.#{$tooltip-bottom-name}):after { // Top (default) tooltip styling
-				margin-bottom: 2 * $tooltip-alt-tail-size;
-			}
-			&.#{$tooltip-bottom-name}:after { // Bottom tooltip styling
-				margin-top: 2 * $tooltip-alt-tail-size;
-			}
-		}
+  $tooltip-alt-padding : $tooltip-padding, $tooltip-alt-box-shadow : $tooltip-box-shadow) {
+  @if not ($include-tooltip) {
+    @error "Contextual module's tooltip mixins are only available if tooltips are enabled. Set '$include-tooltip' to 'true' and try again!";
+  }
+  .#{$tooltip-name}.#{$tooltip-alt-name} {
+    @if $tooltip-alt-tail-size != $tooltip-tail-size {
+      &:before {
+        border-width: $tooltip-alt-tail-size;
+        left: calc(50% - #{$tooltip-alt-tail-size});
+      }
+      &:not(.#{$tooltip-bottom-name}):after { // Top (default) tooltip styling
+        margin-bottom: 2 * $tooltip-alt-tail-size;
+      }
+      &.#{$tooltip-bottom-name}:after { // Bottom tooltip styling
+        margin-top: 2 * $tooltip-alt-tail-size;
+      }
+    }
 
-		&:after {
-			@if $tooltip-alt-border-radius != $tooltip-border-radius {
-				border-radius: $tooltip-alt-border-radius;
-			}
-			@if $tooltip-alt-padding != $tooltip-padding {
-				padding: $tooltip-alt-padding;
-			}
-			@if $tooltip-alt-box-shadow != $tooltip-box-shadow {
-				box-shadow: $tooltip-alt-box-shadow;
-			}
-		}
-	}
+    &:after {
+      @if $tooltip-alt-border-radius != $tooltip-border-radius {
+        border-radius: $tooltip-alt-border-radius;
+      }
+      @if $tooltip-alt-padding != $tooltip-padding {
+        padding: $tooltip-alt-padding;
+      }
+      @if $tooltip-alt-box-shadow != $tooltip-box-shadow {
+        box-shadow: $tooltip-alt-box-shadow;
+      }
+    }
+  }
 }
 // [WARNING: As of v2.2.0, this mixin is deprecated, due to the fact that the alert component is no longer maintained.]
 // Mixin for alternate alert (alert color variants).
@@ -167,17 +167,17 @@
 // - $alert-alt-back-color : The background color of the alternate alert.
 // - $alert-alt-fore-color : (Optional) The text color of the alternate mark. Defaults to the text color of the alert.
 @mixin make-alert-alt-color ($alert-alt-name, $alert-alt-back-color, $alert-alt-fore-color: $alert-fore-color) {
-	@if not ($include-alerts) {
-		@error "Contextual module's alert mixins are only available if alerts are enabled. Set '$include-alerts' to 'true' and try again!";
-	}
-	.#{$alert-name}.#{$alert-alt-name} {
-		@if $alert-alt-back-color != $alert-back-color {
-			background: $alert-alt-back-color;
-		}
-		@if $alert-alt-fore-color != $alert-fore-color {
-			color: $alert-alt-fore-color;
-		}
-	}
+  @if not ($include-alerts) {
+    @error "Contextual module's alert mixins are only available if alerts are enabled. Set '$include-alerts' to 'true' and try again!";
+  }
+  .#{$alert-name}.#{$alert-alt-name} {
+    @if $alert-alt-back-color != $alert-back-color {
+      background: $alert-alt-back-color;
+    }
+    @if $alert-alt-fore-color != $alert-fore-color {
+      color: $alert-alt-fore-color;
+    }
+  }
 }
 // [WARNING: As of v2.2.0, this mixin is deprecated, due to the fact that the alert component is no longer maintained.]
 // Mixin for alternate alert styles (alert style variants).
@@ -189,26 +189,26 @@
 // - $alert-alt-margin : (Optional) Margin of the alternate alert style. Defaults to the alert's margin.
 // - $alert-alt-box-shadow : (Optional) Box shadow of the alretnate alert style. Defaults to the alert's box shadow.
 @mixin make-alert-alt-style ($alert-alt-name, $alert-alt-border-style, $alert-alt-border-radius,
-	$alert-alt-padding : $alert-padding, $alert-alt-margin : $alert-margin,
-	$alert-alt-box-shadow : $alert-box-shadow) {
-	@if not ($include-alerts) {
-		@error "Contextual module's alert mixins are only available if alerts are enabled. Set '$include-alerts' to 'true' and try again!";
-	}
-	.#{$alert-name}.#{$alert-alt-name} {
-		@if $alert-alt-border-style != $alert-border-style {
-			border: $alert-alt-border-style;
-		}
-		@if $alert-alt-border-radius != $alert-border-radius {
-			border-radius: $alert-alt-border-radius;
-		}
-		@if $alert-alt-padding != $alert-padding {
-			padding: $alert-alt-padding;
-		}
-		@if $alert-alt-margin != $alert-margin {
-			margin: $alert-alt-margin;
-		}
-		@if $alert-alt-box-shadow != $alert-box-shadow {
-			box-shadow: $alert-alt-box-shadowbox-shadow;
-		}
-	}
+  $alert-alt-padding : $alert-padding, $alert-alt-margin : $alert-margin,
+  $alert-alt-box-shadow : $alert-box-shadow) {
+  @if not ($include-alerts) {
+    @error "Contextual module's alert mixins are only available if alerts are enabled. Set '$include-alerts' to 'true' and try again!";
+  }
+  .#{$alert-name}.#{$alert-alt-name} {
+    @if $alert-alt-border-style != $alert-border-style {
+      border: $alert-alt-border-style;
+    }
+    @if $alert-alt-border-radius != $alert-border-radius {
+      border-radius: $alert-alt-border-radius;
+    }
+    @if $alert-alt-padding != $alert-padding {
+      padding: $alert-alt-padding;
+    }
+    @if $alert-alt-margin != $alert-margin {
+      margin: $alert-alt-margin;
+    }
+    @if $alert-alt-box-shadow != $alert-box-shadow {
+      box-shadow: $alert-alt-box-shadowbox-shadow;
+    }
+  }
 }

src/mini/_core.scss

@@ -1,466 +1,466 @@
 /*
-	Browsers resets and base typography.
+  Browsers resets and base typography.
 */
-$apply-defaults-to-all: 			true !default;				// Should default values be applied to all elements? (`true`/`false`).
-$base-root-font-size:					16px !default;				// Root font sizing for all elements - Should only be specified in `px` units!
-$_1px:	(1px/$base-root-font-size) * 1rem !default; // Calculated rem value of 1px.
-$use-fluid-typography:				false !default;				// Should fluid typography be used at the root element? (`true`/`false`)
-$fluid-type-start-breakpoint:	320px !default;				// Breakpoint where fluid typography scaling starts.
-$fluid-type-end-breakpoint:		1600px !default;			// Breakpoint where fluid typography scaling ends.
-$fluid-type-small-type:				14px !default;				// Smallest root font size for fluid typography.
-$fluid-type-large-type:				18px !default;				// Largest root font size for fluid typography.
-$include-dfn-fix: 						true !default;				// Fix display of <dfn> element in older versions of Android.
-$make-heading-smalltext-block:false !default;				// Should <small> elements in headings be displayed as blocks (`true`/`false`).
-$horizontal-rule-fancy-style: false !default;				// Should a fancy styling be applied for the <hr> element (`true`/`false`).
-$add-pre-element-sidebar: 		false !default;				// Should a fancy sidebar be added to the left side of <pre> (`true`/`false`).
-$apply-link-underline: 				true !default;				// Should an underline be applied to all <a> elements? (`true`/`false`).
-$apply-link-hover-fade: 			true !default;				// Should the :hover and :focus state of <a> elements use fade-out instead of a different color (`true`/`false`).
-$style-link-active-state:			false !default;				// [Hidden flag] Should the :active state of <a> elements be stylized, same as the :hover state (`true`/`false`).
+$apply-defaults-to-all:        true !default;        // Should default values be applied to all elements? (`true`/`false`).
+$base-root-font-size:          16px !default;        // Root font sizing for all elements - Should only be specified in `px` units!
+$_1px:  (1px/$base-root-font-size) * 1rem !default;  // Calculated rem value of 1px.
+$use-fluid-typography:         false !default;       // Should fluid typography be used at the root element? (`true`/`false`)
+$fluid-type-start-breakpoint:  320px !default;       // Breakpoint where fluid typography scaling starts.
+$fluid-type-end-breakpoint:    1600px !default;      // Breakpoint where fluid typography scaling ends.
+$fluid-type-small-type:        14px !default;        // Smallest root font size for fluid typography.
+$fluid-type-large-type:        18px !default;        // Largest root font size for fluid typography.
+$include-dfn-fix:              true !default;        // Fix display of <dfn> element in older versions of Android.
+$make-heading-smalltext-block: false !default;       // Should <small> elements in headings be displayed as blocks (`true`/`false`).
+$horizontal-rule-fancy-style:  false !default;       // Should a fancy styling be applied for the <hr> element (`true`/`false`).
+$add-pre-element-sidebar:      false !default;       // Should a fancy sidebar be added to the left side of <pre> (`true`/`false`).
+$apply-link-underline:         true !default;        // Should an underline be applied to all <a> elements? (`true`/`false`).
+$apply-link-hover-fade:        true !default;        // Should the :hover and :focus state of <a> elements use fade-out instead of a different color (`true`/`false`).
+$style-link-active-state:      false !default;       // [Hidden flag] Should the :active state of <a> elements be stylized, same as the :hover state (`true`/`false`).
 // Base typography rules
 @if $use-fluid-typography {
-	// Calculation of local variables (unitless values needed for the calculation of fluid typography)
-	$_fluid-type-unitless-size-change:	($fluid-type-large-type - $fluid-type-small-type)/($fluid-type-small-type * 0 + 1);
-	$_fluid-type-unitless-distance:	($fluid-type-end-breakpoint - $fluid-type-start-breakpoint)/($fluid-type-start-breakpoint * 0 + 1);
-	html {
-		font-size: #{$fluid-type-small-type};
-	}
-	@media screen and (min-width: #{$fluid-type-start-breakpoint}) {
-		html {
-			font-size: $base-root-font-size; // If the below calculation does not work, this is the fallback.
-			font-size: calc(#{$fluid-type-small-type} + #{$_fluid-type-unitless-size-change} * ((100vw - #{$fluid-type-start-breakpoint}) / #{$_fluid-type-unitless-distance}));
-		}
-	}
-	@media screen and (min-width: #{$fluid-type-end-breakpoint}) {
-		html {
-			font-size: #{$fluid-type-large-type};
-		}
-	}
+  // Calculation of local variables (unitless values needed for the calculation of fluid typography)
+  $_fluid-type-unitless-size-change:  ($fluid-type-large-type - $fluid-type-small-type)/($fluid-type-small-type * 0 + 1);
+  $_fluid-type-unitless-distance:  ($fluid-type-end-breakpoint - $fluid-type-start-breakpoint)/($fluid-type-start-breakpoint * 0 + 1);
+  html {
+    font-size: #{$fluid-type-small-type};
+  }
+  @media screen and (min-width: #{$fluid-type-start-breakpoint}) {
+    html {
+      font-size: $base-root-font-size; // If the below calculation does not work, this is the fallback.
+      font-size: calc(#{$fluid-type-small-type} + #{$_fluid-type-unitless-size-change} * ((100vw - #{$fluid-type-start-breakpoint}) / #{$_fluid-type-unitless-distance}));
+    }
+  }
+  @media screen and (min-width: #{$fluid-type-end-breakpoint}) {
+    html {
+      font-size: #{$fluid-type-large-type};
+    }
+  }
 }
 @else {
-	html {
-		font-size: $base-root-font-size;	// Set root's font sizing.
-	}
+  html {
+    font-size: $base-root-font-size;  // Set root's font sizing.
+  }
 }
 
 @if $apply-defaults-to-all {
-	html, * {
-		font-family: #{$base-font-family};
-		line-height: $base-line-height;
-		// Prevent adjustments of font size after orientation changes in mobile.
-		-webkit-text-size-adjust: 100%;
-	}
-	* {
-		font-size: $base-font-size;
-	}
+  html, * {
+    font-family: #{$base-font-family};
+    line-height: $base-line-height;
+    // Prevent adjustments of font size after orientation changes in mobile.
+    -webkit-text-size-adjust: 100%;
+  }
+  * {
+    font-size: $base-font-size;
+  }
 }
 @else {
-	html {
-		font-family: #{$base-font-family};
-		line-height: $base-line-height;
-		// Prevent adjustments of font size after orientation changes in mobile.
-		-webkit-text-size-adjust: 100%;
-	}
+  html {
+    font-family: #{$base-font-family};
+    line-height: $base-line-height;
+    // Prevent adjustments of font size after orientation changes in mobile.
+    -webkit-text-size-adjust: 100%;
+  }
 }
 
 body {
-	margin: $body-margin;
-	color: $fore-color;
-	background: $back-color;
+  margin: $body-margin;
+  color: $fore-color;
+  background: $back-color;
 }
 
 // Correct display for older versions of IE. Fix display of some elements in other browsers as well.
 article, aside, section, figcaption, figure, main, details, menu {
-	display: block;
+  display: block;
 }
 
 // Correct display in all browsers.
 summary {
-	display: list-item;
+  display: list-item;
 }
 
 // Abbreviations
 abbr[title] {
-	border-bottom: none; 					// Remove bottom border in Firefox 39-.
-	text-decoration: underline; 	// Opinionated style-fix for all browsers.
+  border-bottom: none;           // Remove bottom border in Firefox 39-.
+  text-decoration: underline;   // Opinionated style-fix for all browsers.
 }
 
 // Correct display for older versions of IE.
 audio, video {
-	display: inline-block;
+  display: inline-block;
 }
 
 // Hide overflow in IE.
 svg:not(:root) {
-	overflow: hidden;
+  overflow: hidden;
 }
 
 // Show overflow in IE.
 input {
-	overflow: visible;
+  overflow: visible;
 }
 
 // Make images responsive by default.
 img {
-	max-width: 100%;
- 	height: auto;
+  max-width: 100%;
+   height: auto;
 }
 
 // Fix display of <dfn> element in older versions of Android.
 @if $include-dfn-fix {
-	dfn {
-		font-style: italic;
-	}
+  dfn {
+    font-style: italic;
+  }
 }
 
 h1, h2, h3, h4, h5, h6 {
-	line-height: $heading-line-height;
-	margin: $heading-margin;
-	font-weight: $heading-font-weight;
-	small {
-		color: $heading-smalltext-fore-color;
-		@if $make-heading-smalltext-block {
-			display: block;
-			@if $heading-smalltext-b-top-margin != 0 {
-				margin-top: $heading-smalltext-b-top-margin;
-			}
-			@if $heading-smalltext-b-font-size != $small-font-size {
-				font-size: $heading-smalltext-b-font-size;
-			}
-		}
-	}
+  line-height: $heading-line-height;
+  margin: $heading-margin;
+  font-weight: $heading-font-weight;
+  small {
+    color: $heading-smalltext-fore-color;
+    @if $make-heading-smalltext-block {
+      display: block;
+      @if $heading-smalltext-b-top-margin != 0 {
+        margin-top: $heading-smalltext-b-top-margin;
+      }
+      @if $heading-smalltext-b-font-size != $small-font-size {
+        font-size: $heading-smalltext-b-font-size;
+      }
+    }
+  }
 }
 
 h1 {
-	font-size: $h1-font-size;
+  font-size: $h1-font-size;
 }
 h2 {
-	font-size: $h2-font-size;
+  font-size: $h2-font-size;
 }
 h3 {
-	font-size: $h3-font-size;
+  font-size: $h3-font-size;
 }
 h4 {
-	font-size: $h4-font-size;
+  font-size: $h4-font-size;
 }
 h5 {
-	font-size: $h5-font-size;
+  font-size: $h5-font-size;
 }
 h6 {
-	font-size: $h6-font-size;
+  font-size: $h6-font-size;
 }
 
 p {
-	margin: $paragraph-margin;
+  margin: $paragraph-margin;
 }
 
 ol, ul {
-	margin: $list-margin;
-	padding-left: $list-left-padding;
+  margin: $list-margin;
+  padding-left: $list-left-padding;
 }
 
 b, strong {
-	font-weight: $bold-font-weight;
+  font-weight: $bold-font-weight;
 }
 
 hr {
-	// Fixes and defaults for styling
-	box-sizing: content-box;
-	border: 0;
-	overflow: visible;
-	// Actual styling using variables
-	line-height: $horizontal-rule-line-height;
-	margin: $horizontal-rule-margin;
-	@if $horizontal-rule-fancy-style {
-		height: $_1px;
-		background: linear-gradient(#{$horizontal-rule-fancy-gradient});
-	}
-	@else {
-		height: 0;
-		border-top: $horizontal-rule-border-style;
-	}
+  // Fixes and defaults for styling
+  box-sizing: content-box;
+  border: 0;
+  overflow: visible;
+  // Actual styling using variables
+  line-height: $horizontal-rule-line-height;
+  margin: $horizontal-rule-margin;
+  @if $horizontal-rule-fancy-style {
+    height: $_1px;
+    background: linear-gradient(#{$horizontal-rule-fancy-gradient});
+  }
+  @else {
+    height: 0;
+    border-top: $horizontal-rule-border-style;
+  }
 }
 
 blockquote {
-	display: block;
-	position: relative;
-	font-style: italic;
-	@if $blockquote-back-color != $back-color {
-		background: $blockquote-back-color;
-	}
-	@if $blockquote-fore-color != $fore-color {
-		color: $blockquote-fore-color;
-	}
-	// Overwrite defaults
-	margin: $blockquote-margin;
-	padding: $blockquote-padding;
-	@if $blockquote-border-style != 0 {
-		border: $blockquote-border-style;
-	}
-	@if $blockquote-sidebar-style != 0 {
-		border-left: $blockquote-sidebar-style;
-	}
-	@if $blockquote-border-radius != 0 {
-		border-radius: $blockquote-border-radius;
-	}
-	@if $blockquote-box-shadow != none {
-		box-shadow: $blockquote-box-shadow;
-	}
-	&:after {
-		position: absolute;
-		font-style: normal;
-		font-size: $blockquote-cite-font-size;
-		@if $blockquote-cite-fore-color != $blockquote-fore-color {
-			color: $blockquote-cite-fore-color;
-		}
-		left: $blockquote-cite-left-position;
-		bottom: $blockquote-cite-bottom-position;
-		content: '\2014 \2009'attr(cite);
-	}
+  display: block;
+  position: relative;
+  font-style: italic;
+  @if $blockquote-back-color != $back-color {
+    background: $blockquote-back-color;
+  }
+  @if $blockquote-fore-color != $fore-color {
+    color: $blockquote-fore-color;
+  }
+  // Overwrite defaults
+  margin: $blockquote-margin;
+  padding: $blockquote-padding;
+  @if $blockquote-border-style != 0 {
+    border: $blockquote-border-style;
+  }
+  @if $blockquote-sidebar-style != 0 {
+    border-left: $blockquote-sidebar-style;
+  }
+  @if $blockquote-border-radius != 0 {
+    border-radius: $blockquote-border-radius;
+  }
+  @if $blockquote-box-shadow != none {
+    box-shadow: $blockquote-box-shadow;
+  }
+  &:after {
+    position: absolute;
+    font-style: normal;
+    font-size: $blockquote-cite-font-size;
+    @if $blockquote-cite-fore-color != $blockquote-fore-color {
+      color: $blockquote-cite-fore-color;
+    }
+    left: $blockquote-cite-left-position;
+    bottom: $blockquote-cite-bottom-position;
+    content: '\2014 \2009'attr(cite);
+  }
 }
 
 $use-default-code-fonts: true !default;
 @if $use-default-code-fonts {
-	code, kbd, pre, samp{
-		font-family: monospace, monospace;  // Applies display fix for all code elements
-	}
+  code, kbd, pre, samp{
+    font-family: monospace, monospace;  // Applies display fix for all code elements
+  }
 }
 @else {
-	code, kbd, pre, samp{
-		font-family: $code-font-family;     // Display fix should be applied manually!
-	}
+  code, kbd, pre, samp{
+    font-family: $code-font-family;     // Display fix should be applied manually!
+  }
 }
 
 code {
-	@if $code-element-border-style != 0{
-		border: $code-element-border-style;
-	}
-	@if $code-element-border-radius != 0 {
-		border-radius: $code-element-border-radius;
-	}
-	@if $code-element-back-color != $back-color {
-		background: $code-element-back-color;
-	}
-	@if $code-element-fore-color != $fore-color {
-		color: $code-element-fore-color;
-	}
-	@if $code-element-padding != 0 {
-		padding: $code-element-padding;
-	}
-	@if $code-element-box-shadow != none {
-		box-shadow: $code-element-box-shadow;
-	}
+  @if $code-element-border-style != 0{
+    border: $code-element-border-style;
+  }
+  @if $code-element-border-radius != 0 {
+    border-radius: $code-element-border-radius;
+  }
+  @if $code-element-back-color != $back-color {
+    background: $code-element-back-color;
+  }
+  @if $code-element-fore-color != $fore-color {
+    color: $code-element-fore-color;
+  }
+  @if $code-element-padding != 0 {
+    padding: $code-element-padding;
+  }
+  @if $code-element-box-shadow != none {
+    box-shadow: $code-element-box-shadow;
+  }
 }
 
 pre {
-	overflow: auto; // Responsiveness
-	@if $pre-element-border-style != 0 {
-		border: $pre-element-border-style;
-	}
-	@if $pre-element-border-radius != 0 {
-		border-radius: $pre-element-border-radius;
-	}
-	@if $pre-element-back-color != $back-color {
-		background: $pre-element-back-color;
-	}
-	@if $pre-element-fore-color != $fore-color {
-		color: $pre-element-fore-color;
-	}
-	@if $pre-element-padding != 0 {
-		padding: $pre-element-padding;
-	}
-	@if $pre-element-margin != 0 {
-		margin: $pre-element-margin;
-	}
-	@if $add-pre-element-sidebar {
-		border-left: $pre-element-sidebar-style;
-	}
-	@if $pre-element-box-shadow != none {
-		box-shadow: $pre-element-box-shadow;
-	}
+  overflow: auto; // Responsiveness
+  @if $pre-element-border-style != 0 {
+    border: $pre-element-border-style;
+  }
+  @if $pre-element-border-radius != 0 {
+    border-radius: $pre-element-border-radius;
+  }
+  @if $pre-element-back-color != $back-color {
+    background: $pre-element-back-color;
+  }
+  @if $pre-element-fore-color != $fore-color {
+    color: $pre-element-fore-color;
+  }
+  @if $pre-element-padding != 0 {
+    padding: $pre-element-padding;
+  }
+  @if $pre-element-margin != 0 {
+    margin: $pre-element-margin;
+  }
+  @if $add-pre-element-sidebar {
+    border-left: $pre-element-sidebar-style;
+  }
+  @if $pre-element-box-shadow != none {
+    box-shadow: $pre-element-box-shadow;
+  }
 }
 
 kbd {
-	@if $kbd-element-border-style != 0 {
-		border: $kbd-element-border-style;
-	}
-	@if $kbd-element-border-radius != 0 {
-		border-radius: $kbd-element-border-radius;
-	}
-	@if $kbd-element-back-color != $back-color {
-		background: $kbd-element-back-color;
-	}
-	@if $kbd-element-fore-color != $fore-color {
-		color: $kbd-element-fore-color;
-	}
-	@if $kbd-element-padding != 0 {
-		padding: $kbd-element-padding;
-	}
-	@if $kbd-element-box-shadow != none {
-		box-shadow: $kbd-element-box-shadow;
-	}
+  @if $kbd-element-border-style != 0 {
+    border: $kbd-element-border-style;
+  }
+  @if $kbd-element-border-radius != 0 {
+    border-radius: $kbd-element-border-radius;
+  }
+  @if $kbd-element-back-color != $back-color {
+    background: $kbd-element-back-color;
+  }
+  @if $kbd-element-fore-color != $fore-color {
+    color: $kbd-element-fore-color;
+  }
+  @if $kbd-element-padding != 0 {
+    padding: $kbd-element-padding;
+  }
+  @if $kbd-element-box-shadow != none {
+    box-shadow: $kbd-element-box-shadow;
+  }
 }
 
 $style-samp-element: false !default;
 @if $style-samp-element {
-	samp{
-		@if $samp-element-border-style != 0 {
-			border: $samp-element-border-style;
-		}
-		@if $samp-element-border-radius != 0 {
-			border-radius: $samp-element-border-radius;
-		}
-		@if $samp-element-back-color != $back-color {
-			background: $samp-element-back-color;
-		}
-		@if $samp-element-fore-color != $fore-color {
-			color: $samp-element-fore-color;
-		}
-		@if $samp-element-padding != 0 {
-			padding: $samp-element-padding;
-		}
-		@if $samp-element-box-shadow != none {
-			box-shadow: $samp-element-box-shadow;
-		}
-	}
+  samp{
+    @if $samp-element-border-style != 0 {
+      border: $samp-element-border-style;
+    }
+    @if $samp-element-border-radius != 0 {
+      border-radius: $samp-element-border-radius;
+    }
+    @if $samp-element-back-color != $back-color {
+      background: $samp-element-back-color;
+    }
+    @if $samp-element-fore-color != $fore-color {
+      color: $samp-element-fore-color;
+    }
+    @if $samp-element-padding != 0 {
+      padding: $samp-element-padding;
+    }
+    @if $samp-element-box-shadow != none {
+      box-shadow: $samp-element-box-shadow;
+    }
+  }
 }
 
 @if $small-font-size == $sub-font-size and $small-font-size == $sup-font-size {
-	small, sup, sub {
-		font-size: $small-font-size;
-	}
-	sup {
-		top: $sup-top;
-	}
-	sub{
-		bottom: $sub-bottom;
-	}
-	sup, sub {
-		line-height: 0;
-		position: relative;
-		vertical-align: baseline;
-	}
+  small, sup, sub {
+    font-size: $small-font-size;
+  }
+  sup {
+    top: $sup-top;
+  }
+  sub{
+    bottom: $sub-bottom;
+  }
+  sup, sub {
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
 }
 @else if $small-font-size == $sub-font-size {
-	small, sub {
-		font-size: $small-font-size;
-	}
-	sup {
-		font-size: $sup-font-size;
-		top: $sup-top;
-	}
-	sub {
-		bottom: $sub-bottom;
-	}
-	sup, sub {
-		line-height: 0;
-		position: relative;
-		vertical-align: baseline;
-	}
+  small, sub {
+    font-size: $small-font-size;
+  }
+  sup {
+    font-size: $sup-font-size;
+    top: $sup-top;
+  }
+  sub {
+    bottom: $sub-bottom;
+  }
+  sup, sub {
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
 }
 @else if $small-font-size == $sup-font-size {
-	small, sup {
-		font-size: $small-font-size;
-	}
-	sup {
-		top: $sup-top;
-	}
-	sub {
-		font-size: $sub-font-size;
-		bottom: $sub-bottom;
-	}
-	sup, sub {
-		line-height: 0;
-		position: relative;
-		vertical-align: baseline;
-	}
+  small, sup {
+    font-size: $small-font-size;
+  }
+  sup {
+    top: $sup-top;
+  }
+  sub {
+    font-size: $sub-font-size;
+    bottom: $sub-bottom;
+  }
+  sup, sub {
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
 }
 @else if $sup-font-size == $sub-font-size {
-	small {
-		font-size: $small-font-size;
-	}
-	sup, sub {
-		font-size: $sup-font-size;
-		line-height: 0;
-		position: relative;
-		vertical-align: baseline;
-	}
-	sup {
-		top: $sup-top;
-	}
-	sub{
-		bottom: $sub-bottom;
-	}
+  small {
+    font-size: $small-font-size;
+  }
+  sup, sub {
+    font-size: $sup-font-size;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  sup {
+    top: $sup-top;
+  }
+  sub{
+    bottom: $sub-bottom;
+  }
 }
 @else {
-	small {
- 		font-size: $small-font-size;
-	}
-	sup {
-		font-size: $sup-font-size;
-		top: $sup-top;
-	}
-	sub{
-		font-size: $sub-font-size;
-		bottom: $sub-bottom;
-	}
-	sup, sub {
-		line-height: 0;
-		position: relative;
-		vertical-align: baseline;
-	}
+  small {
+     font-size: $small-font-size;
+  }
+  sup {
+    font-size: $sup-font-size;
+    top: $sup-top;
+  }
+  sub{
+    font-size: $sub-font-size;
+    bottom: $sub-bottom;
+  }
+  sup, sub {
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
 }
 
 // Link styling
 a{
-	color: $link-fore-color;
-	@if $apply-link-underline {
-		text-decoration: underline;
-	}
-	@else {
-		text-decoration: none;
-	}
-	@if $link-font-weight != 500 {
-		font-weight: $link-font-weight;
-	}
-	@if $apply-link-hover-fade {
-		opacity: 1;
-		transition: opacity 0.3s;
-	}
-	&:visited {
-		color: $link-visited-fore-color;
-	}
-	@if $apply-link-hover-fade {
-		@if $style-link-active-state {
-			&:hover, &:focus, &:active {
-				opacity: 0.75;
-			}
-		}
-		@else {
-			&:hover, &:focus {
-				opacity: 0.75;
-			}
-		}
-	}
-	@else {
-		@if $style-link-active-state {
-			&:hover, &:focus, &:active {
-				color: $link-hover-fore-color;
-			}
-		}
-		@else {
-			&:hover, &:focus {
-				color: $link-hover-fore-color;
-			}
-		}
-	}
+  color: $link-fore-color;
+  @if $apply-link-underline {
+    text-decoration: underline;
+  }
+  @else {
+    text-decoration: none;
+  }
+  @if $link-font-weight != 500 {
+    font-weight: $link-font-weight;
+  }
+  @if $apply-link-hover-fade {
+    opacity: 1;
+    transition: opacity 0.3s;
+  }
+  &:visited {
+    color: $link-visited-fore-color;
+  }
+  @if $apply-link-hover-fade {
+    @if $style-link-active-state {
+      &:hover, &:focus, &:active {
+        opacity: 0.75;
+      }
+    }
+    @else {
+      &:hover, &:focus {
+        opacity: 0.75;
+      }
+    }
+  }
+  @else {
+    @if $style-link-active-state {
+      &:hover, &:focus, &:active {
+        color: $link-hover-fore-color;
+      }
+    }
+    @else {
+      &:hover, &:focus {
+        color: $link-hover-fore-color;
+      }
+    }
+  }
 }
 
 // Captions for figures
 figcaption {
-	@if $figcaption-font-size != 100% {
-		font-size: $figcaption-font-size;
-	}
-	@if $figcaption-fore-color != $fore-color {
-		color: $figcaption-fore-color;
-	}
+  @if $figcaption-font-size != 100% {
+    font-size: $figcaption-font-size;
+  }
+  @if $figcaption-fore-color != $fore-color {
+    color: $figcaption-fore-color;
+  }
 }

src/mini/_input_control_mixins.scss

@@ -12,22 +12,22 @@
 // required for such elements. However rules for the normal button elements are applied in order to not require the
 // base class for the button styles.
 @mixin make-button-alt-color ($button-alt-name, $button-alt-back-color, $button-alt-back-opacity,
-	$button-alt-hover-back-opacity, $button-alt-fore-color: $button-fore-color) {
-	button.#{$button-alt-name}, [type="button"].#{$button-alt-name}, [type="submit"].#{$button-alt-name},
-	[type="reset"].#{$button-alt-name}, .#{$button-class-name}.#{$button-alt-name}, [role="button"].#{$button-alt-name} {
-		background: rgba($button-alt-back-color, $button-alt-back-opacity);
-		@if $button-alt-fore-color != $button-fore-color {
-			color: $button-alt-fore-color;
-		}
-		&:hover, &:focus {
-			background: rgba($button-alt-back-color, $button-alt-hover-back-opacity);
-		}
-	}
-	@if $style-link-active-state {
-		a.#{$button-class-name}.#{$button-alt-name}:active, a[role="button"].#{$button-alt-name}:active {
-			background: rgba($button-alt-back-color, $button-alt-hover-back-opacity);
-		}
-	}
+  $button-alt-hover-back-opacity, $button-alt-fore-color: $button-fore-color) {
+  button.#{$button-alt-name}, [type="button"].#{$button-alt-name}, [type="submit"].#{$button-alt-name},
+  [type="reset"].#{$button-alt-name}, .#{$button-class-name}.#{$button-alt-name}, [role="button"].#{$button-alt-name} {
+    background: rgba($button-alt-back-color, $button-alt-back-opacity);
+    @if $button-alt-fore-color != $button-fore-color {
+      color: $button-alt-fore-color;
+    }
+    &:hover, &:focus {
+      background: rgba($button-alt-back-color, $button-alt-hover-back-opacity);
+    }
+  }
+  @if $style-link-active-state {
+    a.#{$button-class-name}.#{$button-alt-name}:active, a[role="button"].#{$button-alt-name}:active {
+      background: rgba($button-alt-back-color, $button-alt-hover-back-opacity);
+    }
+  }
 }
 // Mixin for alternate button styles (button style variants).
 // Variables:
@@ -41,22 +41,22 @@
 // required for such elements. However rules for the normal button elements are applied in order to not require the
 // base class for the button styles.
 @mixin make-button-alt-style ($button-alt-name, $button-alt-border-style, $button-alt-border-radius,
-	$button-alt-padding, $button-alt-margin) {
-	button.#{$button-alt-name}, [type="button"].#{$button-alt-name}, [type="submit"].#{$button-alt-name},
-	[type="reset"].#{$button-alt-name}, .#{$button-class-name}.#{$button-alt-name}, [role="button"].#{$button-alt-name} {
-		@if $button-alt-border-style != $button-border-style {
-			border: $button-alt-border-style;
-		}
-		@if $button-alt-border-radius != $button-border-radius {
-			border-radius: $button-alt-border-radius;
-		}
-		@if $button-alt-padding != $button-padding {
-			padding: $button-alt-padding;
-		}
-		@if $button-alt-margin != $button-margin {
-			margin: $button-alt-margin;
-		}
-	}
+  $button-alt-padding, $button-alt-margin) {
+  button.#{$button-alt-name}, [type="button"].#{$button-alt-name}, [type="submit"].#{$button-alt-name},
+  [type="reset"].#{$button-alt-name}, .#{$button-class-name}.#{$button-alt-name}, [role="button"].#{$button-alt-name} {
+    @if $button-alt-border-style != $button-border-style {
+      border: $button-alt-border-style;
+    }
+    @if $button-alt-border-radius != $button-border-radius {
+      border-radius: $button-alt-border-radius;
+    }
+    @if $button-alt-padding != $button-padding {
+      padding: $button-alt-padding;
+    }
+    @if $button-alt-margin != $button-margin {
+      margin: $button-alt-margin;
+    }
+  }
 }
 // Mixin for alternate switch (switch color variants).
 // Variables:
@@ -66,36 +66,36 @@
 // - $switch-alt-knob-back-color : (Optional) The background color of the alternate switch's knob. Defaults to the background color of the switch's knob.
 // - $switch-alt-bar-back-color : (Optional) The background color of the alternate switch's bar. Defaults to the background color of the switch's bar.
 @mixin make-switch-alt-color ($switch-alt-name, $switch-alt-on-knob-back-color,
-	$switch-alt-on-bar-back-color: $switch-on-bar-back-color, $switch-alt-knob-back-color: $switch-knob-back-color,
-	$switch-alt-bar-back-color: $switch-bar-back-color) {
-	@if not ($include-switch) {
-		@error "Input_control module's switch mixins are only available if switchws are enabled. Set '$include-switch' to 'true' and try again!";
-	}
-	[type="checkbox"] + label.#{$switch-name}.#{$switch-alt-name},
-	[type="radio"] + label.#{$switch-name}.#{$switch-alt-name} {
-		&:before {
-			@if $switch-alt-bar-back-color != $switch--bar-back-color {
-				background: $switch-alt-bar-back-color;
-			}
-		}
-		&:after {
-			@if $switch-alt-knob-back-color != $switch-knob-back-color {
-				background: $switch-alt-knob-back-color;
-			}
-		}
-	}
-	[type="checkbox"]:checked + label.#{$switch-name}.#{$switch-alt-name},
-	[type="radio"]:checked + label.#{$switch-name}.#{$switch-alt-name} {
-		&:before {
-			@if $switch-alt-on-bar-back-color != $switch-on-bar-back-color {
-				background: $switch-alt-on-bar-back-color;
-			}
-		}
-		&:after {
-			@if $switch-alt-on-knob-back-color != $switch-on-knob-back-color {
-				background: $switch-alt-on-knob-back-color;
-			}
-		}
-	}
+  $switch-alt-on-bar-back-color: $switch-on-bar-back-color, $switch-alt-knob-back-color: $switch-knob-back-color,
+  $switch-alt-bar-back-color: $switch-bar-back-color) {
+  @if not ($include-switch) {
+    @error "Input_control module's switch mixins are only available if switchws are enabled. Set '$include-switch' to 'true' and try again!";
+  }
+  [type="checkbox"] + label.#{$switch-name}.#{$switch-alt-name},
+  [type="radio"] + label.#{$switch-name}.#{$switch-alt-name} {
+    &:before {
+      @if $switch-alt-bar-back-color != $switch--bar-back-color {
+        background: $switch-alt-bar-back-color;
+      }
+    }
+    &:after {
+      @if $switch-alt-knob-back-color != $switch-knob-back-color {
+        background: $switch-alt-knob-back-color;
+      }
+    }
+  }
+  [type="checkbox"]:checked + label.#{$switch-name}.#{$switch-alt-name},
+  [type="radio"]:checked + label.#{$switch-name}.#{$switch-alt-name} {
+    &:before {
+      @if $switch-alt-on-bar-back-color != $switch-on-bar-back-color {
+        background: $switch-alt-on-bar-back-color;
+      }
+    }
+    &:after {
+      @if $switch-alt-on-knob-back-color != $switch-on-knob-back-color {
+        background: $switch-alt-on-knob-back-color;
+      }
+    }
+  }
 
 }

src/mini/_navigation.scss

@@ -1,296 +1,294 @@
 /*
-	Definitions for navigation elements.
+  Definitions for navigation elements.
 */
 // Different elements are styled based on the same set of rules.
-$button-class-name:				'button' !default;				// Class name for the button-like elements.
-$header-logo-name:				'logo' !default;					// Class name for <header>'s logo.
-$header-colorize-svgs:		true !default;						// [Hidden flag] Colorizes SVGs in the <header> element's logo (`true`/`false`).
-$include-header-sticky:		false !default;						// Should the sticky class for <header> elements be included (`true`/`false`).
-$header-sticky-name:			'sticky' !default;				// Class name for sticky <header>.
-$include-footer-sticky:		false !default;						// Should the sticky class for <footer> elements be included (`true`/`false`).
-$footer-sticky-name:			'sticky' !default;				// Class name for sticky <footer>.
-$include-nav-styles:			true !default;						// [Hidden flag] Should <nav> elements by stylized? (`true`/`false`)
-$nav-sublink-prefix:			'sublink' !default;				// Prefix for the subcategory tabs in nav.
-$nav-sublink-depth:				2 !default;								// Amount of subcategory classes to add.
-$nav-sublink-padding-left:12px !default;						// Left padding to add to subcategories.
-$nav-include-sublink-bar: false !default;						// Should a border be added to the subcategories? (`true`/`false`)
-$include-drawer:					true !default;						// [Hidden flag] Should the drawer component be included? (`true`/`false`)
-$drawer-name:							'drawer' !default;				// Class name for the drawer component.
-$drawer-toggle-name:			'drawer-toggle' !default;	// Class name for the drawer component's toggle.
-$drawer-mobile-breakpoint: 768px !default;					// Mobile breakpoint for the drawer component.
-$drawer-right-name:				'right' !default;					// Class name for the right variant of the drawer component.
-$drawer-persistent-name:	'persistent' !default;		// Class name for the persisten variant of the drawer component.
-$drawer-width:						320px !default;						// Width of the drawer component.
-$drawer-close-name:				'close' !default;					// Class name of the close element for the drawer component.
+$button-class-name:       'button' !default;        // Class name for the button-like elements.
+$header-logo-name:        'logo' !default;          // Class name for <header>'s logo.
+$header-colorize-svgs:    true !default;            // [Hidden flag] Colorizes SVGs in the <header> element's logo (`true`/`false`).
+$include-header-sticky:   false !default;           // Should the sticky class for <header> elements be included (`true`/`false`).
+$header-sticky-name:      'sticky' !default;        // Class name for sticky <header>.
+$include-footer-sticky:   false !default;           // Should the sticky class for <footer> elements be included (`true`/`false`).
+$footer-sticky-name:      'sticky' !default;        // Class name for sticky <footer>.
+$include-nav-styles:      true !default;            // [Hidden flag] Should <nav> elements by stylized? (`true`/`false`)
+$nav-sublink-prefix:      'sublink' !default;       // Prefix for the subcategory tabs in nav.
+$nav-sublink-depth:       2 !default;               // Amount of subcategory classes to add.
+$nav-sublink-padding-left:12px !default;            // Left padding to add to subcategories.
+$nav-include-sublink-bar: false !default;           // Should a border be added to the subcategories? (`true`/`false`)
+$include-drawer:          true !default;            // [Hidden flag] Should the drawer component be included? (`true`/`false`)
+$drawer-name:             'drawer' !default;        // Class name for the drawer component.
+$drawer-toggle-name:      'drawer-toggle' !default; // Class name for the drawer component's toggle.
+$drawer-mobile-breakpoint:768px !default;           // Mobile breakpoint for the drawer component.
+$drawer-right-name:       'right' !default;         // Class name for the right variant of the drawer component.
+$drawer-persistent-name:  'persistent' !default;    // Class name for the persisten variant of the drawer component.
+$drawer-width:            320px !default;           // Width of the drawer component.
+$drawer-close-name:       'close' !default;         // Class name of the close element for the drawer component.
 // External variables' defaults are used only if you import this module on its own, without the rest of the framework.
-$back-color:							white !default;						// [External variable - core] Background color for everything.
-$fore-color:							black !default;						// [External variable - core] Foreground color for everything.
+$back-color:              white !default;           // [External variable - core] Background color for everything.
+$fore-color:              black !default;           // [External variable - core] Foreground color for everything.
 // Policy for below external flag is `ALWAYS_TRUE`. This is done due to links being underlined by default and as a safeguard from ugly branding.
-$apply-link-underline:		true !default;						// [External flag - core] Should underlining be applied to <a> elements? (`true`/`false`)
-$style-link-active-state:		false !default;					// [External flag - core] Should the :active state of <a> elements be stylized, same as the :hover state (`true`/`false`).
+$apply-link-underline:    true !default;            // [External flag - core] Should underlining be applied to <a> elements? (`true`/`false`)
+$style-link-active-state: false !default;           // [External flag - core] Should the :active state of <a> elements be stylized, same as the :hover state (`true`/`false`).
 // The below variable is used to fix the display problem of the <header> element when used as a responsive row
-$grid-row-name:								'row' !default;				// [External flag - grid] Class name for the grid system rows.
-$button-class-name:				'button' !default;				// [External variable - input_control] Name of the button-like element styling class.
+$grid-row-name:           'row' !default;           // [External flag - grid] Class name for the grid system rows.
+$button-class-name:       'button' !default;        // [External variable - input_control] Name of the button-like element styling class.
 $button-box-shadow:0 1px 3px rgba(0,0,0, 0.1) !default;// [External variable - input_control] Value of button's box-shadow.
-$button-border-style: 1px solid transparent !default;	// [External variable - input_control] Value of button's border-style.
+$button-border-style: 1px solid transparent !default;  // [External variable - input_control] Value of button's border-style.
 // Header styling.
 header {
-	display: block;		// Correct display for older versions of IE.
-	height: $header-height;
-	@if $header-back-color != $back-color {
-		background: $header-back-color;
-	}
-	@if $header-fore-color != $fore-color {
-		color: $header-fore-color;
-	}
-	@if $header-border-style != 0 {
-		border: $header-border-style;
-	}
-	@if $header-margin != 0 {
-		margin: $header-margin;
-	}
-	@if $header-padding != 0 {
-		padding: $header-padding;
-	}
-	@if $header-box-shadow != none {
-		box-shadow: $header-box-shadow;
-	}
-	// Responsiveness for smaller displays, scrolls horizontally.
-	white-space: nowrap;
-	overflow-x: auto;
-	overflow-y: hidden;
-	// Header logo styling.
-	.#{$header-logo-name} {
-		@if $header-colorize-svgs { 		// Deals with SVG colorization in case people use SVGs.
-			color: $header-fore-color;		// Only toggle off if you know what you're doing.
-		}
-		@if $header-logo-font-size != $base-font-size {
-			font-size: $header-logo-font-size;
-		}
-		@if $header-logo-line-height != $base-line-height {
-			line-height: $header-logo-line-height;
-		}
-		@if $header-logo-margin != 0 {
-			margin: $header-logo-margin;
-		}
-		@if $header-logo-padding != 0 {
-			padding: $header-logo-padding;
-		}
-		@if $apply-link-hover-fade {
-			transition: opacity 0.3s ;
-		}
-	}
-	// Link styling.
-	button, [type="button"],
-	a.#{$button-class-name}, label.#{$button-class-name}, .#{$button-class-name},
-	a[role="button"], label[role="button"], [role="button"] {
-		background: $header-back-color;				// Apply color regardless to override styling from other things.
-		color: $header-fore-color;
-		vertical-align: top;									// Alignemt, really important to make this work well.
-		@if $header-link-margin != 0 {
-			margin: $header-link-margin;
-		}
-		@if $style-link-active-state {
-			&:hover, &:focus, &:active {
-				background: $header-link-hover-color;
-			}
-		}
-		@else {
-			&:hover, &:focus {
-				background: $header-link-hover-color;
-			}
-		}
-		@if $button-box-shadow != none {	// Override for buttons when shadow is enabled.
-			box-shadow: none;
-		}
-		@if $button-border-style != 0 {	// Override for buttons when border-style is enabled.
-			border: 0;
-		}
-	}
-	@if $apply-link-underline {				// Override for links if underline is enabled.
-		.#{$header-logo-name}, a.#{$button-class-name}, a[role="button"] {
-			text-decoration: none;
-		}
-	}
-	// Fix for responsive header, using the grid system's row and column alignment.
-	&.#{$grid-row-name} {
-		box-sizing: content-box;
-	}
+  display: block;    // Correct display for older versions of IE.
+  height: $header-height;
+  background: $header-back-color; // Always apply background color to avoid shine through
+  @if $header-fore-color != $fore-color {
+    color: $header-fore-color;
+  }
+  @if $header-border-style != 0 {
+    border: $header-border-style;
+  }
+  @if $header-margin != 0 {
+    margin: $header-margin;
+  }
+  @if $header-padding != 0 {
+    padding: $header-padding;
+  }
+  @if $header-box-shadow != none {
+    box-shadow: $header-box-shadow;
+  }
+  // Responsiveness for smaller displays, scrolls horizontally.
+  white-space: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
+  // Header logo styling.
+  .#{$header-logo-name} {
+    @if $header-colorize-svgs {     // Deals with SVG colorization in case people use SVGs.
+      color: $header-fore-color;    // Only toggle off if you know what you're doing.
+    }
+    @if $header-logo-font-size != $base-font-size {
+      font-size: $header-logo-font-size;
+    }
+    @if $header-logo-line-height != $base-line-height {
+      line-height: $header-logo-line-height;
+    }
+    @if $header-logo-margin != 0 {
+      margin: $header-logo-margin;
+    }
+    @if $header-logo-padding != 0 {
+      padding: $header-logo-padding;
+    }
+    @if $apply-link-hover-fade {
+      transition: opacity 0.3s ;
+    }
+  }
+  // Link styling.
+  button, [type="button"],
+  a.#{$button-class-name}, label.#{$button-class-name}, .#{$button-class-name},
+  a[role="button"], label[role="button"], [role="button"] {
+    background: $header-back-color;        // Apply color regardless to override styling from other things.
+    color: $header-fore-color;
+    vertical-align: top;                  // Alignemt, really important to make this work well.
+    @if $header-link-margin != 0 {
+      margin: $header-link-margin;
+    }
+    @if $style-link-active-state {
+      &:hover, &:focus, &:active {
+        background: $header-link-hover-color;
+      }
+    }
+    @else {
+      &:hover, &:focus {
+        background: $header-link-hover-color;
+      }
+    }
+    @if $button-box-shadow != none {  // Override for buttons when shadow is enabled.
+      box-shadow: none;
+    }
+    @if $button-border-style != 0 {  // Override for buttons when border-style is enabled.
+      border: 0;
+    }
+  }
+  @if $apply-link-underline {        // Override for links if underline is enabled.
+    .#{$header-logo-name}, a.#{$button-class-name}, a[role="button"] {
+      text-decoration: none;
+    }
+  }
+  // Fix for responsive header, using the grid system's row and column alignment.
+  &.#{$grid-row-name} {
+    box-sizing: content-box;
+  }
 }
 // Navigation sidebar styling.
-@if $include-nav-styles {						// Unless you want unstylized <nav> elements, keep this flag on.
-	nav {
-		display: block;									// Correct display for older versions of IE.
-		@if $nav-back-color != $back-color {
-			background: $nav-back-color;
-		}
-		@if $nav-fore-color != $fore-color {
-			color: $nav-fore-color;
-		}
-		@if $nav-border-style != 0 {
-			border: $nav-border-style;
-		}
-		@if $nav-border-radius != 0 {
-			border-radius: $nav-border-radius;
-		}
-		@if $nav-margin != 0 {
-			margin: $nav-margin;
-		}
-		@if $nav-padding != 0 {
-			padding: $nav-padding;
-		}
-		@if $nav-box-shadow != none {
-			box-shadow: $nav-box-shadow;
-		}
-		a, a:visited {
-			display: block;
-			color: $nav-link-fore-color;		// Apply regardless to de-stylize visited links.
-			text-decoration: none;
-		}
-		// Subcategories in navigation.
-		@for $i from 1 through $nav-sublink-depth {
-			.#{$nav-sublink-prefix}-#{$i} {
-				padding-left: $i * $nav-sublink-padding-left;
-				position: relative;
-				@if $nav-include-sublink-bar {
-					&:before {
-						position: absolute;
-						left: $nav-sublink-bar-left-position;
-						top: -$nav-sublink-bar-width;
-						content: '';
-						height: 100%;
-						border: $nav-sublink-bar-width solid $nav-sublink-bar-color;
-						border-left: 0;
-					}
-				}
-			}
-		}
-	}
+@if $include-nav-styles {            // Unless you want unstylized <nav> elements, keep this flag on.
+  nav {
+    display: block;                  // Correct display for older versions of IE.
+    @if $nav-back-color != $back-color {
+      background: $nav-back-color;
+    }
+    @if $nav-fore-color != $fore-color {
+      color: $nav-fore-color;
+    }
+    @if $nav-border-style != 0 {
+      border: $nav-border-style;
+    }
+    @if $nav-border-radius != 0 {
+      border-radius: $nav-border-radius;
+    }
+    @if $nav-margin != 0 {
+      margin: $nav-margin;
+    }
+    @if $nav-padding != 0 {
+      padding: $nav-padding;
+    }
+    @if $nav-box-shadow != none {
+      box-shadow: $nav-box-shadow;
+    }
+    a, a:visited {
+      display: block;
+      color: $nav-link-fore-color;    // Apply regardless to de-stylize visited links.
+      text-decoration: none;
+    }
+    // Subcategories in navigation.
+    @for $i from 1 through $nav-sublink-depth {
+      .#{$nav-sublink-prefix}-#{$i} {
+        padding-left: $i * $nav-sublink-padding-left;
+        position: relative;
+        @if $nav-include-sublink-bar {
+          &:before {
+            position: absolute;
+            left: $nav-sublink-bar-left-position;
+            top: -$nav-sublink-bar-width;
+            content: '';
+            height: 100%;
+            border: $nav-sublink-bar-width solid $nav-sublink-bar-color;
+            border-left: 0;
+          }
+        }
+      }
+    }
+  }
 }
 // Footer styling.
 footer {
-	display: block;		// Correct display for older versions of IE.
-	@if $footer-back-color != $back-color {
-		background: $footer-back-color;
-	}
-	@if $footer-fore-color != $fore-color {
-		color: $footer-fore-color;
-	}
-	@if $footer-border-style != 0 {
-		border: $footer-border-style;
-	}
-	@if $footer-margin != 0 {
-		margin: $footer-margin;
-	}
-	@if $footer-padding != 0 {
-		padding: $footer-padding;
-	}
-	font-size: $footer-font-size;
-	a, a:visited {
-		color: $footer-link-fore-color;
-	}
+  display: block;    // Correct display for older versions of IE.
+  @if $footer-back-color != $back-color {
+    background: $footer-back-color;
+  }
+  @if $footer-fore-color != $fore-color {
+    color: $footer-fore-color;
+  }
+  @if $footer-border-style != 0 {
+    border: $footer-border-style;
+  }
+  @if $footer-margin != 0 {
+    margin: $footer-margin;
+  }
+  @if $footer-padding != 0 {
+    padding: $footer-padding;
+  }
+  font-size: $footer-font-size;
+  a, a:visited {
+    color: $footer-link-fore-color;
+  }
 }
 // Sticky headers and footers.
 @if $include-header-sticky and $include-footer-sticky {
-	header.#{$header-sticky-name}, footer.#{$footer-sticky-name} {
-		position: -webkit-sticky;
-		position:		  		sticky;
-		z-index: 1101;	// Deals with certain problems when combined with cards and tables.
-	}
-	header.#{$header-sticky-name} {
-		top: 0;
-	}
-	footer.#{$footer-sticky-name} {
-		bottom: 0;
-	}
+  header.#{$header-sticky-name}, footer.#{$footer-sticky-name} {
+    position: -webkit-sticky;
+    position:          sticky;
+    z-index: 1101;  // Deals with certain problems when combined with cards and tables.
+  }
+  header.#{$header-sticky-name} {
+    top: 0;
+  }
+  footer.#{$footer-sticky-name} {
+    bottom: 0;
+  }
 }
 @else if $include-header-sticky {
-	header.#{$header-sticky-name} {
-		position: -webkit-sticky;
-		position:		  		sticky;
-		top: 0;
-		z-index: 1101;	// Deals with certain problems when combined with cards and tables.
-	}
+  header.#{$header-sticky-name} {
+    position: -webkit-sticky;
+    position:          sticky;
+    top: 0;
+    z-index: 1101;  // Deals with certain problems when combined with cards and tables.
+  }
 }
 @else if $include-footer-sticky {
-	footer.#{$footer-sticky-name} {
-		position: -webkit-sticky;
-		position:		  		sticky;
-		bottom: 0;
-		z-index: 1101;	// Deals with certain problems when combined with cards and tables.
-	}
+  footer.#{$footer-sticky-name} {
+    position: -webkit-sticky;
+    position:          sticky;
+    bottom: 0;
+    z-index: 1101;  // Deals with certain problems when combined with cards and tables.
+  }
 }
 // Responsive drawer component
 @if $include-drawer {
-	.#{$drawer-toggle-name}:before {
-		position: relative;
-		top: $drawer-toggle-top;
-		font-family: sans-serif;
-		font-size: $drawer-toggle-font-size;
-		line-height: $drawer-toggle-line-height;
-		content: '\2261';
-	}
-	.#{$drawer-name} {
-		display: block;
-		box-sizing: border-box;
-		position: fixed;
-		top: 0;
-		width: $drawer-width;
-		height: 100vh;
-		overflow-y: auto;
-		background: $drawer-back-color;
-		@if $drawer-border-style != 0 {
-			border: $drawer-border-style;
-		}
-		@if $drawer-border-radius != 0 {
-			border-radius: $drawer-border-radius;
-		}
-		margin: 0;
-		@if $drawer-padding != 0 {
-			padding: $drawer-padding;
-		}
-		@if $drawer-box-shadow != none {
-			box-shadow: $drawer-box-shadow;
-		}
-		z-index: 1110;
-		&:not(.#{$drawer-right-name}) {
-			left: -$drawer-width;
-			transition: left 0.3s;
-		}
-		&.#{$drawer-right-name} {
-			right: -$drawer-width;
-			transition: right 0.3s;
-		}
-		& .#{$drawer-close-name} {
-			position: absolute;
-			top: $drawer-close-top;
-			right: $drawer-close-right;
-			z-index: 1111;
-			padding: 0; // Fixes the extra padding added from <label> styling.
-		}
-	}
-	@media screen and (max-width: #{$drawer-width}) {
-		.#{$drawer-name} {
-			width: 100%;
-		}
-	}
-	@media screen and (min-width: #{$drawer-mobile-breakpoint}){
-		.#{$drawer-name}:not(.#{$drawer-persistent-name}) {
-			position: static;
-			height: 100%;
-			z-index: 1100;
-			& .#{$drawer-close-name} {
-				display: none;
-			}
-		}
-		.#{$drawer-toggle-name}:not(.#{$drawer-persistent-name}) {
-			display: none;
-		}
-	}
-	:checked + .#{$drawer-name}:not(.#{$drawer-right-name}) {
-		left: 0;
-	}
-	:checked + .#{$drawer-name}.#{$drawer-right-name} {
-		right: 0;
-	}
+  .#{$drawer-toggle-name}:before {
+    position: relative;
+    top: $drawer-toggle-top;
+    font-family: sans-serif;
+    font-size: $drawer-toggle-font-size;
+    line-height: $drawer-toggle-line-height;
+    content: '\2261';
+  }
+  .#{$drawer-name} {
+    display: block;
+    box-sizing: border-box;
+    position: fixed;
+    top: 0;
+    width: $drawer-width;
+    height: 100vh;
+    overflow-y: auto;
+    background: $drawer-back-color;
+    @if $drawer-border-style != 0 {
+      border: $drawer-border-style;
+    }
+    @if $drawer-border-radius != 0 {
+      border-radius: $drawer-border-radius;
+    }
+    margin: 0;
+    @if $drawer-padding != 0 {
+      padding: $drawer-padding;
+    }
+    @if $drawer-box-shadow != none {
+      box-shadow: $drawer-box-shadow;
+    }
+    z-index: 1110;
+    &:not(.#{$drawer-right-name}) {
+      left: -$drawer-width;
+      transition: left 0.3s;
+    }
+    &.#{$drawer-right-name} {
+      right: -$drawer-width;
+      transition: right 0.3s;
+    }
+    & .#{$drawer-close-name} {
+      position: absolute;
+      top: $drawer-close-top;
+      right: $drawer-close-right;
+      z-index: 1111;
+      padding: 0; // Fixes the extra padding added from <label> styling.
+    }
+  }
+  @media screen and (max-width: #{$drawer-width}) {
+    .#{$drawer-name} {
+      width: 100%;
+    }
+  }
+  @media screen and (min-width: #{$drawer-mobile-breakpoint}){
+    .#{$drawer-name}:not(.#{$drawer-persistent-name}) {
+      position: static;
+      height: 100%;
+      z-index: 1100;
+      & .#{$drawer-close-name} {
+        display: none;
+      }
+    }
+    .#{$drawer-toggle-name}:not(.#{$drawer-persistent-name}) {
+      display: none;
+    }
+  }
+  :checked + .#{$drawer-name}:not(.#{$drawer-right-name}) {
+    left: 0;
+  }
+  :checked + .#{$drawer-name}.#{$drawer-right-name} {
+    right: 0;
+  }
 }

src/mini/_progress.scss

@@ -1,86 +1,86 @@
 /*
-	Definitions for progress elements and spinners.
+  Definitions for progress elements and spinners.
 */
 // Progress elements use the progress element as their base.
-$progress-max-value:			100 !default;							// Arithmetic max value of <progress> - use integer values.
-$progress-height:					14px !default;						// Height of <progress>.
-$include-spinner-donut:		true !default;						// [Hidden flag] Should spinner donuts be enabled? (`true`/`false`)
-$spinner-donut-name:	'spinner-donut' !default;			// Class name for donut spinner.
+$progress-max-value:      100 !default;             // Arithmetic max value of <progress> - use integer values.
+$progress-height:         14px !default;            // Height of <progress>.
+$include-spinner-donut:   true !default;            // [Hidden flag] Should spinner donuts be enabled? (`true`/`false`)
+$spinner-donut-name:  'spinner-donut' !default;     // Class name for donut spinner.
 // Check the `_progress_mixins.scss` file to find this module's mixins.
 @import 'progress_mixins';
 // Default styling for progress. Use mixins for alternate styles.
 progress {
-	display: block;
-	vertical-align: baseline;	// Correct vertical alignment in certain browsers.
-	-webkit-appearance: none;
-	   -moz-appearance: none;
-			appearance: none;
-	height: $progress-height;
-	// Older browsers will sort not display progress properly, but that's ok
-	width: 90%;
-	// Newer browsers will calculate the proper width
-	width: calc(100% - #{$progress-left-right-margin*2});
-	margin: $progress-top-bottom-margin $progress-left-right-margin;
-	border: $progress-border-style;
-	@if $progress-border-radius != 0 {
-		border-radius: $progress-border-radius;
-	}
-	@if $progress-box-shadow != none {
-		box-shadow: $progress-box-shadow;
-	}
-	background: $progress-back-color;		// Background color of the element (IE 10+ and Firefox).
-	color: $progress-fore-color;			// Foreground of the element (IE 10+).
-	&::-webkit-progress-value {				// Foreground of the element (webkit browsers).
-		background: $progress-fore-color;
-		@if $progress-border-radius != 0 {
-			border-top-left-radius: $progress-border-radius;
-			border-bottom-left-radius: $progress-border-radius;
-		}
-	}
-	&::-webkit-progress-bar {				// Background of the element (webkit browsers).
-		background: $progress-back-color;
-	}
-	&::-moz-progress-bar { 					// Foreground of the element (Firefox).
-		background: $progress-fore-color;
-		@if $progress-border-radius != 0 {
-			border-top-left-radius: $progress-border-radius;
-			border-bottom-left-radius: $progress-border-radius;
-		}
-	}
-	&[value="#{$progress-max-value}"] {
-		&::-webkit-progress-value {
-			@if $progress-border-radius != 0 {
-				border-radius: $progress-border-radius;
-			}
-		}
-		&::-moz-progress-bar {
-			@if $progress-border-radius != 0 {
-				border-radius: $progress-border-radius;
-			}
-		}
-	}
+  display: block;
+  vertical-align: baseline;  // Correct vertical alignment in certain browsers.
+  -webkit-appearance: none;
+     -moz-appearance: none;
+      appearance: none;
+  height: $progress-height;
+  // Older browsers will sort not display progress properly, but that's ok
+  width: 90%;
+  // Newer browsers will calculate the proper width
+  width: calc(100% - #{$progress-left-right-margin*2});
+  margin: $progress-top-bottom-margin $progress-left-right-margin;
+  border: $progress-border-style;
+  @if $progress-border-radius != 0 {
+    border-radius: $progress-border-radius;
+  }
+  @if $progress-box-shadow != none {
+    box-shadow: $progress-box-shadow;
+  }
+  background: $progress-back-color;    // Background color of the element (IE 10+ and Firefox).
+  color: $progress-fore-color;      // Foreground of the element (IE 10+).
+  &::-webkit-progress-value {        // Foreground of the element (webkit browsers).
+    background: $progress-fore-color;
+    @if $progress-border-radius != 0 {
+      border-top-left-radius: $progress-border-radius;
+      border-bottom-left-radius: $progress-border-radius;
+    }
+  }
+  &::-webkit-progress-bar {        // Background of the element (webkit browsers).
+    background: $progress-back-color;
+  }
+  &::-moz-progress-bar {           // Foreground of the element (Firefox).
+    background: $progress-fore-color;
+    @if $progress-border-radius != 0 {
+      border-top-left-radius: $progress-border-radius;
+      border-bottom-left-radius: $progress-border-radius;
+    }
+  }
+  &[value="#{$progress-max-value}"] {
+    &::-webkit-progress-value {
+      @if $progress-border-radius != 0 {
+        border-radius: $progress-border-radius;
+      }
+    }
+    &::-moz-progress-bar {
+      @if $progress-border-radius != 0 {
+        border-radius: $progress-border-radius;
+      }
+    }
+  }
 }
-@if $include-spinner-donut {	// Turn off to disable spinner donuts.
+@if $include-spinner-donut {  // Turn off to disable spinner donuts.
 // Animation definition for donut spinner
-	@-webkit-keyframes spinner-donut-anim {
-			0% { 	-webkit-transform: rotate(0deg);	}
-		100% { 	-webkit-transform: rotate(360deg);}
-	}
-					@keyframes spinner-donut-anim {
-			0% {					transform: rotate(0deg);	}
-		100% {					transform: rotate(360deg);}
-	}
+  @-webkit-keyframes spinner-donut-anim {
+      0% {   -webkit-transform: rotate(0deg);  }
+    100% {   -webkit-transform: rotate(360deg);}
+  }
+          @keyframes spinner-donut-anim {
+      0% {          transform: rotate(0deg);  }
+    100% {          transform: rotate(360deg);}
+  }
 }
-@if $include-spinner-donut {	// Turn off to disable spinner donuts.
-	// Style for donut spinner
-	.#{$spinner-donut-name} {
-		display: inline-block;
-		border: $spinner-donut-border-thickness solid $spinner-donut-back-color;
-		border-left: $spinner-donut-border-thickness solid $spinner-donut-fore-color;
-		border-radius: 50%;
-		width: $spinner-donut-size;
-		height: $spinner-donut-size;
-		-webkit-animation: spinner-donut-anim 1.2s linear infinite;
-						animation: spinner-donut-anim 1.2s linear infinite;
-	}
+@if $include-spinner-donut {  // Turn off to disable spinner donuts.
+  // Style for donut spinner
+  .#{$spinner-donut-name} {
+    display: inline-block;
+    border: $spinner-donut-border-thickness solid $spinner-donut-back-color;
+    border-left: $spinner-donut-border-thickness solid $spinner-donut-fore-color;
+    border-radius: 50%;
+    width: $spinner-donut-size;
+    height: $spinner-donut-size;
+    -webkit-animation: spinner-donut-anim 1.2s linear infinite;
+            animation: spinner-donut-anim 1.2s linear infinite;
+  }
 }

src/mini/_progress_mixins.scss

@@ -5,13 +5,13 @@
 // - $progress-inline-name : The name of the class used for the inline progress.
 // - $progress-inline-width : The width of the inline progress.
 @mixin make-progress-inline ($progress-inline-name, $progress-inline-width) {
-	progress.#{$progress-inline-name} {
-		display: inline-block;
-		vertical-align: middle; 	// Align progress bar vertically to look better with text next to it.
-		@if $progress-inline-width != 100% {
-			width: $progress-inline-width;
-		}
-	}
+  progress.#{$progress-inline-name} {
+    display: inline-block;
+    vertical-align: middle;   // Align progress bar vertically to look better with text next to it.
+    @if $progress-inline-width != 100% {
+      width: $progress-inline-width;
+    }
+  }
 }
 // Mixin for alternate progress (progress color variants).
 // Variables:
@@ -19,23 +19,23 @@
 // - $progress-alt-fore-color : The progress bar color of the alternate progress.
 // - $progress-alt-back-color : (Optional) The background color of the alternate progress. Defaults to the background color of the progress.
 @mixin make-progress-alt-color ($progress-alt-name, $progress-alt-fore-color, $progress-alt-back-color: $progress-back-color) {
-	progress.#{$progress-alt-name} {
-		@if $progress-alt-back-color != $progress-back-color {
-			background: $progress-alt-back-color; 	// Background color of the element (IE 10+ and Firefox).
-			&::-webkit-progress-bar {					// Background of the element (webkit browsers).
-				background: $progress-alt-back-color;
-			}
-		}
-		@if $progress-alt-fore-color != $progress-fore-color {
-			color: $progress-alt-fore-color;			// Foreground of the element (IE 10+).
-			&::-webkit-progress-value {					// Foreground of the element (webkit browsers).
-				background: $progress-alt-fore-color;
-			}
-			&::-moz-progress-bar { 						// Foreground of the element (Firefox).
-				background: $progress-alt-fore-color;
-			}
-		}
-	}
+  progress.#{$progress-alt-name} {
+    @if $progress-alt-back-color != $progress-back-color {
+      background: $progress-alt-back-color;   // Background color of the element (IE 10+ and Firefox).
+      &::-webkit-progress-bar {          // Background of the element (webkit browsers).
+        background: $progress-alt-back-color;
+      }
+    }
+    @if $progress-alt-fore-color != $progress-fore-color {
+      color: $progress-alt-fore-color;      // Foreground of the element (IE 10+).
+      &::-webkit-progress-value {          // Foreground of the element (webkit browsers).
+        background: $progress-alt-fore-color;
+      }
+      &::-moz-progress-bar {             // Foreground of the element (Firefox).
+        background: $progress-alt-fore-color;
+      }
+    }
+  }
 }
 // Mixin for alternate progress styles.
 // Variables:
@@ -47,48 +47,48 @@
 // - $progress-alt-border-radius : (Optional) The border radius of the alternate progress style. Defaults to the border radius of the progress.
 // - $progress-alt-box-shadow : (Optional) The box shadow of the alternate progress style. Defaults to the box shadow of the progress.
 @mixin make-progress-alt-style ($progress-alt-name, $progress-alt-height,
-	$progress-alt-top-bottom-margin : $progress-top-bottom-margin, $progress-alt-left-right-margin : $progress-left-right-margin,
-	$progress-alt-border-style : $progress-border-style, $progress-alt-border-radius : $progress-border-radius,
-	$progress-alt-box-shadow : $progress-box-shadow) {
-	progress.#{$progress-alt-name} {
-		@if $progress-alt-height != $progress-height {
-			height: $progress-alt-height;
-		}
-		@if $progress-alt-left-right-margin != $progress-left-right-margin {
-			width: calc(100% - #{$progress-alt-left-right-margin*2});
-		}
-		@if $progress-alt-left-right-margin != $progress-left-right-margin or $progress-alt-top-bottom-margin != $progress-top-bottom-margin {
-			margin: $progress-alt-top-bottom-margin $progress-alt-left-right-margin;
-		}
-		@if $progress-alt-top-bottom-margin != $progress-top-bottom-margin {
-			margin: $progress-alt-top-bottom-margin auto;
-		}
-		@if $progress-alt-border-style != $progress-border-style {
-			border: $progress-alt-border-style;
-		}
-		@if progress-alt-border-radius != $progress-border-radius {
-			border-radius: $progress-alt-border-radius;
-			&::-webkit-progress-value {
-				border-top-left-radius: $progress-alt-border-radius;
-				border-bottom-left-radius: $progress-alt-border-radius;
-			}
-			&::-moz-progress-bar {
-				border-top-left-radius: $progress-alt-border-radius;
-				border-bottom-left-radius: $progress-alt-border-radius;
-			}
-			&[value="#{$progress-max-value}"] {
-				&::-webkit-progress-value {
-					border-radius: $progress-alt-border-radius;
-				}
-				&::-moz-progress-bar {
-					border-radius: $progress-alt-border-radius;
-				}
-			}
-		}
-		@if $progress-alt-box-shadow != $progress-box-shadow {
-			box-shadow: $progress-alt-box-shadow;
-		}
-	}
+  $progress-alt-top-bottom-margin : $progress-top-bottom-margin, $progress-alt-left-right-margin : $progress-left-right-margin,
+  $progress-alt-border-style : $progress-border-style, $progress-alt-border-radius : $progress-border-radius,
+  $progress-alt-box-shadow : $progress-box-shadow) {
+  progress.#{$progress-alt-name} {
+    @if $progress-alt-height != $progress-height {
+      height: $progress-alt-height;
+    }
+    @if $progress-alt-left-right-margin != $progress-left-right-margin {
+      width: calc(100% - #{$progress-alt-left-right-margin*2});
+    }
+    @if $progress-alt-left-right-margin != $progress-left-right-margin or $progress-alt-top-bottom-margin != $progress-top-bottom-margin {
+      margin: $progress-alt-top-bottom-margin $progress-alt-left-right-margin;
+    }
+    @if $progress-alt-top-bottom-margin != $progress-top-bottom-margin {
+      margin: $progress-alt-top-bottom-margin auto;
+    }
+    @if $progress-alt-border-style != $progress-border-style {
+      border: $progress-alt-border-style;
+    }
+    @if progress-alt-border-radius != $progress-border-radius {
+      border-radius: $progress-alt-border-radius;
+      &::-webkit-progress-value {
+        border-top-left-radius: $progress-alt-border-radius;
+        border-bottom-left-radius: $progress-alt-border-radius;
+      }
+      &::-moz-progress-bar {
+        border-top-left-radius: $progress-alt-border-radius;
+        border-bottom-left-radius: $progress-alt-border-radius;
+      }
+      &[value="#{$progress-max-value}"] {
+        &::-webkit-progress-value {
+          border-radius: $progress-alt-border-radius;
+        }
+        &::-moz-progress-bar {
+          border-radius: $progress-alt-border-radius;
+        }
+      }
+    }
+    @if $progress-alt-box-shadow != $progress-box-shadow {
+      box-shadow: $progress-alt-box-shadow;
+    }
+  }
 }
 // Mixin for alternate donut spinner colors (spinner donut color variants).
 // Variables:
@@ -96,32 +96,32 @@
 // - $spinner-donut-alt-back-color : The background color of the alternate donut spinner.
 // - $spinner-donut-alt-fore-color : The foreground color of the alternate donut spinner.
 @mixin make-spinner-donut-alt-color ($spinner-donut-alt-name, $spinner-donut-alt-back-color, $spinner-donut-alt-fore-color) {
-	@if not ($include-spinner-donut) {
-		@error "Progress module's spinner donut mixins are only available if spinner donuts are enabled. Set '$include-spinner-donut' to 'true' and try again!";
-	}
-	.#{$spinner-donut-name}.#{$spinner-donut-alt-name} {
-		border: $spinner-donut-border-thickness solid $spinner-donut-alt-back-color;
-		border-left: $spinner-donut-border-thickness solid $spinner-donut-alt-fore-color;
-	}
+  @if not ($include-spinner-donut) {
+    @error "Progress module's spinner donut mixins are only available if spinner donuts are enabled. Set '$include-spinner-donut' to 'true' and try again!";
+  }
+  .#{$spinner-donut-name}.#{$spinner-donut-alt-name} {
+    border: $spinner-donut-border-thickness solid $spinner-donut-alt-back-color;
+    border-left: $spinner-donut-border-thickness solid $spinner-donut-alt-fore-color;
+  }
 }
 // Mixin for alternate donut spinner styles (spinner donut styles variants).
 // Variables:
 // - $spinner-donut-alt-name : The name of the class used for the alternate donut spinner style.
 // - $spinner-donut-alt-size : The size of the alternate donut spinner style.
 // - $spinner-donut-alt-border-thickness : (Optional) The border thickness of the alternate donut spinner style.
-//	Defaults to the value of $spinner-donut-alt-border-thickness.
+//  Defaults to the value of $spinner-donut-alt-border-thickness.
 @mixin make-spinner-donut-alt-style ($spinner-donut-alt-name, $spinner-donut-alt-size,
-	$spinner-donut-alt-border-thickness : $spinner-donut-border-thickness) {
-	@if not ($include-spinner-donut) {
-		@error "Progress module's spinner donut mixins are only available if spinner donuts are enabled. Set '$include-spinner-donut' to 'true' and try again!";
-	}
-	.#{$spinner-donut-name}.#{$spinner-donut-alt-name} {
-		@if $spinner-donut-alt-border-thickness != $spinner-donut-border-thickness {
-			border-width: $spinner-donut-alt-border-thickness;
-		}
-		@if $spinner-donut-alt-size != $spinner-donut-size {
-			width: $spinner-donut-alt-size;
-			height: $spinner-donut-alt-size;
-		}
-	}
+  $spinner-donut-alt-border-thickness : $spinner-donut-border-thickness) {
+  @if not ($include-spinner-donut) {
+    @error "Progress module's spinner donut mixins are only available if spinner donuts are enabled. Set '$include-spinner-donut' to 'true' and try again!";
+  }
+  .#{$spinner-donut-name}.#{$spinner-donut-alt-name} {
+    @if $spinner-donut-alt-border-thickness != $spinner-donut-border-thickness {
+      border-width: $spinner-donut-alt-border-thickness;
+    }
+    @if $spinner-donut-alt-size != $spinner-donut-size {
+      width: $spinner-donut-alt-size;
+      height: $spinner-donut-alt-size;
+    }
+  }
 }

src/mini/_tab.scss

@@ -1,261 +1,261 @@
 /*
-	Definitions for tabs/horizontal accordions.
+  Definitions for tabs/horizontal accordions.
 */
 // Dependency: This module is somewhat dependent on the grid system.
-$tab-container-name:			'tabs' !default;					// Class name for the tabs container.
-$include-stacked-tabs:		true !default;						// [Hidden flag] Should stacked tabs be included? (`true`/`false`).
-$tab-stacked-name:				'stacked' !default;				// Class name for stacked tabs container.
-$tab-stacked-breakpoint:	767px !default;						// Breakpoint for tabs layout (stacked/horizontal)
+$tab-container-name:      'tabs' !default;          // Class name for the tabs container.
+$include-stacked-tabs:    true !default;            // [Hidden flag] Should stacked tabs be included? (`true`/`false`).
+$tab-stacked-name:        'stacked' !default;       // Class name for stacked tabs container.
+$tab-stacked-breakpoint:  767px !default;           // Breakpoint for tabs layout (stacked/horizontal)
 // External variables' defaults are used only if you import this module on its own, without the rest of the framework.
-$back-color:							white !default;						// [External variable - core] Background color for everything.
-$fore-color:							black !default;						// [External variable - core] Foreground color for everything.
+$back-color:              white !default;           // [External variable - core] Background color for everything.
+$fore-color:              black !default;           // [External variable - core] Foreground color for everything.
 // Tab styling
 .#{$tab-container-name} {
-	width: 100%;
-	opacity: 1;
-	// Old syntax
-	display: -webkit-box;
-	-webkit-box-pack: justify;
-	// New syntax
-	display: -webkit-flex;
-	display:         flex;
-	-webkit-justify-content: space-between;
-					justify-content: space-between;
-	-webkit-flex-wrap: wrap;
-					flex-wrap: wrap;
-	@if $tab-container-box-shadow != none {
-		box-shadow: $tab-container-box-shadow;
-	}
-	// Tab label styling
-	& > label {
-		// Old syntax
-		-webkit-box-flex: 1;
-		// New syntax
-		-webkit-flex-grow: 1;
-						flex-grow: 1;
-		// Make tab labels stay at the top on large displays
-		-webkit-order: 1;
-						order: 1;
-		// Actual styling
-		display: inline-block;
-		height: $tab-label-height;
-		cursor: pointer;
-		transition: background 0.3s;
-		@if $tab-label-back-color != $back-color {
-			background: $tab-label-back-color;
-		}
-		@if $tab-label-fore-color != $fore-color {
-			color: $tab-label-fore-color;
-		}
-		@if $tab-border-style != 0 {
-			border: $tab-border-style;
-		}
-		@if $tab-label-padding != 0 {
-			padding: $tab-label-padding;
-		}
-		@if $tab-border-radius != 0 {	// Style first and last tabs' labels' top corners as needed
-			&:first-of-type {
-				border-top-left-radius: $tab-border-radius;
-			}
-			&:last-of-type {
-				border-top-right-radius: $tab-border-radius;
-			}
-		}
-		// Hover styling for tabs' labels
-		&:hover, &:focus {
-			background: rgba($tab-label-back-color, $tab-label-hover-opacity);
-		}
-	}
-	// Tab radio styling
-	& > [type="radio"], & > [type="checkbox"] {
-		display: none;
-		visibility: hidden;
-	}
-	// Tab content styling
-	& > label + div {
-		// New syntax
-		-webkit-flex-basis: auto;
-						flex-basis: auto;
-		// Make tab panels display after all the labels on larger displays
-		-webkit-order: 2;
-						order: 2;
-		// Hide content, while allowing accessibility
-		height: 1px;
-		width: 1px;
-		margin: -1px;
-		overflow: hidden;
-		position: absolute;
-		clip: rect(0 0 0 0);
-		-webkit-clip-path: inset(100%);
-						clip-path: inset(100%);
-		// Presentation
-		-webkit-transform: scaleY(0);
-						transform: scaleY(0);
-		-webkit-transform-origin: top;
-						transform-origin: top;
-		transition: -webkit-transform 0.3s,
-												transform 0.3s;
-		@if $tab-border-radius != 0 {
-			border-bottom-left-radius: $tab-border-radius;
-			border-bottom-right-radius: $tab-border-radius;
-		}
-	}
-	// Style for tab labels except the first
-	@if $tab-border-style != 0 {
-		& > label:not(:first-of-type) {
-			border-left: 0;
-		}
-	}
-	// Tab label styling for open tab
-	& > :checked + label {
-		@if $tab-label-selected-back-color != $tab-label-back-color {
-			background: $tab-label-selected-back-color;
-			&:hover, &:focus {
-				background: rgba($tab-label-selected-back-color, $tab-label-hover-opacity);
-			}
-		}
-		@if $tab-label-selected-fore-color != $tab-label-fore-color {
-			color: $tab-label-selected-fore-color;
-		}
-		border-bottom-color: $tab-selected-border-color;
-	}
-	// Tab content styling (open tab)
-	& > :checked + label + div {
-		box-sizing: border-box;
-		position: relative;
-		height: $tab-panel-height;
-		width: 100%;
-		overflow: auto;
-		margin: 0;
-		-webkit-transform: scaleY(1);
-						transform: scaleY(1);
-		@if $tab-panel-back-color != $back-color {
-			background: $tab-panel-back-color;
-		}
-		@if $tab-panel-fore-color != $fore-color {
-			color: $tab-panel-fore-color;
-		}
-		@if $tab-border-style != 0 {
-			border: $tab-border-style;
-			border-top: 0;
-		}
-		@if $tab-panel-padding != 0 {
-			padding: $tab-panel-padding;
-		}
-		// Fix display for some browsers
-		clip: auto;
-		-webkit-clip-path: inset(0%);
-						clip-path: inset(0%);
-	}
+  width: 100%;
+  opacity: 1;
+  // Old syntax
+  display: -webkit-box;
+  -webkit-box-pack: justify;
+  // New syntax
+  display: -webkit-flex;
+  display:         flex;
+  -webkit-justify-content: space-between;
+          justify-content: space-between;
+  -webkit-flex-wrap: wrap;
+          flex-wrap: wrap;
+  @if $tab-container-box-shadow != none {
+    box-shadow: $tab-container-box-shadow;
+  }
+  // Tab label styling
+  & > label {
+    // Old syntax
+    -webkit-box-flex: 1;
+    // New syntax
+    -webkit-flex-grow: 1;
+            flex-grow: 1;
+    // Make tab labels stay at the top on large displays
+    -webkit-order: 1;
+            order: 1;
+    // Actual styling
+    display: inline-block;
+    height: $tab-label-height;
+    cursor: pointer;
+    transition: background 0.3s;
+    @if $tab-label-back-color != $back-color {
+      background: $tab-label-back-color;
+    }
+    @if $tab-label-fore-color != $fore-color {
+      color: $tab-label-fore-color;
+    }
+    @if $tab-border-style != 0 {
+      border: $tab-border-style;
+    }
+    @if $tab-label-padding != 0 {
+      padding: $tab-label-padding;
+    }
+    @if $tab-border-radius != 0 {  // Style first and last tabs' labels' top corners as needed
+      &:first-of-type {
+        border-top-left-radius: $tab-border-radius;
+      }
+      &:last-of-type {
+        border-top-right-radius: $tab-border-radius;
+      }
+    }
+    // Hover styling for tabs' labels
+    &:hover, &:focus {
+      background: rgba($tab-label-back-color, $tab-label-hover-opacity);
+    }
+  }
+  // Tab radio styling
+  & > [type="radio"], & > [type="checkbox"] {
+    display: none;
+    visibility: hidden;
+  }
+  // Tab content styling
+  & > label + div {
+    // New syntax
+    -webkit-flex-basis: auto;
+            flex-basis: auto;
+    // Make tab panels display after all the labels on larger displays
+    -webkit-order: 2;
+            order: 2;
+    // Hide content, while allowing accessibility
+    height: 1px;
+    width: 1px;
+    margin: -1px;
+    overflow: hidden;
+    position: absolute;
+    clip: rect(0 0 0 0);
+    -webkit-clip-path: inset(100%);
+            clip-path: inset(100%);
+    // Presentation
+    -webkit-transform: scaleY(0);
+            transform: scaleY(0);
+    -webkit-transform-origin: top;
+            transform-origin: top;
+    transition: -webkit-transform 0.3s,
+                        transform 0.3s;
+    @if $tab-border-radius != 0 {
+      border-bottom-left-radius: $tab-border-radius;
+      border-bottom-right-radius: $tab-border-radius;
+    }
+  }
+  // Style for tab labels except the first
+  @if $tab-border-style != 0 {
+    & > label:not(:first-of-type) {
+      border-left: 0;
+    }
+  }
+  // Tab label styling for open tab
+  & > :checked + label {
+    @if $tab-label-selected-back-color != $tab-label-back-color {
+      background: $tab-label-selected-back-color;
+      &:hover, &:focus {
+        background: rgba($tab-label-selected-back-color, $tab-label-hover-opacity);
+      }
+    }
+    @if $tab-label-selected-fore-color != $tab-label-fore-color {
+      color: $tab-label-selected-fore-color;
+    }
+    border-bottom-color: $tab-selected-border-color;
+  }
+  // Tab content styling (open tab)
+  & > :checked + label + div {
+    box-sizing: border-box;
+    position: relative;
+    height: $tab-panel-height;
+    width: 100%;
+    overflow: auto;
+    margin: 0;
+    -webkit-transform: scaleY(1);
+            transform: scaleY(1);
+    @if $tab-panel-back-color != $back-color {
+      background: $tab-panel-back-color;
+    }
+    @if $tab-panel-fore-color != $fore-color {
+      color: $tab-panel-fore-color;
+    }
+    @if $tab-border-style != 0 {
+      border: $tab-border-style;
+      border-top: 0;
+    }
+    @if $tab-panel-padding != 0 {
+      padding: $tab-panel-padding;
+    }
+    // Fix display for some browsers
+    clip: auto;
+    -webkit-clip-path: inset(0%);
+            clip-path: inset(0%);
+  }
 }
 // Stacked tabs
 @if $include-stacked-tabs { // Turn off if you don't want stacked tabs enabled (except on smaller screens for responsiveness)
-	.#{$tab-container-name}.#{$tab-stacked-name} {
-		// Old syntax
-		-webkit-box-orient: vertical;
-		// New syntax
-		-webkit-flex-direction: column;
-						flex-direction: column;
-		& > label {
-			-webkit-order: initial;		// Reset order to show stacked tabs properly
-							order: initial;
-			@if $tab-border-radius != 0 {	// Style first and last tabs' labels' corners as needed
-				&:last-of-type {
-					border-top-right-radius: 0;
-					border-bottom-left-radius: $tab-border-radius;
-					border-bottom-right-radius: $tab-border-radius;
-				}
-				// Keep :first-of-type below :last-of-type to make sure that single collapses get proper radiuses
-				&:first-of-type {
-					border-top-right-radius: $tab-border-radius;
-				}
-			}
-		}
-		& > :checked + label {
-			@if $tab-border-style != 0 {
-				border: $tab-border-style;
-			}
-			@if $tab-border-radius != 0 {
-				border-bottom-left-radius: 0;
-				border-bottom-right-radius: 0;
-			}
-		}
-		& > label + div {
-			-webkit-order: initial;		// Reset order to show stacked tabs properly
-							order: initial;
-			// Presentation
-			-webkit-transform-origin: top;
-							transform-origin: top;
-			@if $tab-border-radius != 0 {
-				border-radius: 0;
-			}
-		}
-		& > label:not(:first-of-type) {
-			@if $tab-border-style != 0 {
-				border: $tab-border-style;
-				border-top: 0;
-			}
-		}
-		& > :checked + label + div {
-			height: auto;
-		}
-		@if $tab-border-radius != 0 {
-			& > label + div:last-of-type {
-				border-bottom-left-radius: $tab-border-radius;
-				border-bottom-right-radius: $tab-border-radius;
-			}
-		}
-	}
+  .#{$tab-container-name}.#{$tab-stacked-name} {
+    // Old syntax
+    -webkit-box-orient: vertical;
+    // New syntax
+    -webkit-flex-direction: column;
+            flex-direction: column;
+    & > label {
+      -webkit-order: initial;    // Reset order to show stacked tabs properly
+              order: initial;
+      @if $tab-border-radius != 0 {  // Style first and last tabs' labels' corners as needed
+        &:last-of-type {
+          border-top-right-radius: 0;
+          border-bottom-left-radius: $tab-border-radius;
+          border-bottom-right-radius: $tab-border-radius;
+        }
+        // Keep :first-of-type below :last-of-type to make sure that single collapses get proper radiuses
+        &:first-of-type {
+          border-top-right-radius: $tab-border-radius;
+        }
+      }
+    }
+    & > :checked + label {
+      @if $tab-border-style != 0 {
+        border: $tab-border-style;
+      }
+      @if $tab-border-radius != 0 {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
+    & > label + div {
+      -webkit-order: initial;    // Reset order to show stacked tabs properly
+              order: initial;
+      // Presentation
+      -webkit-transform-origin: top;
+              transform-origin: top;
+      @if $tab-border-radius != 0 {
+        border-radius: 0;
+      }
+    }
+    & > label:not(:first-of-type) {
+      @if $tab-border-style != 0 {
+        border: $tab-border-style;
+        border-top: 0;
+      }
+    }
+    & > :checked + label + div {
+      height: auto;
+    }
+    @if $tab-border-radius != 0 {
+      & > label + div:last-of-type {
+        border-bottom-left-radius: $tab-border-radius;
+        border-bottom-right-radius: $tab-border-radius;
+      }
+    }
+  }
 }
 // Responsiveness
 @media screen and (max-width: #{$tab-stacked-breakpoint}) {
-	.#{$tab-container-name} {
-		// Old syntax
-		-webkit-box-orient: vertical;
-		// New syntax
-		-webkit-flex-direction: column;
-						flex-direction: column;
-		& > label {
-			-webkit-order: initial;		// Reset order to show stacked tabs properly
-							order: initial;
-			@if $tab-border-radius != 0 {	// Style first and last tabs' labels' corners as needed
-				&:first-of-type {
-					border-top-right-radius: $tab-border-radius;
-				}
-				&:last-of-type {
-					border-top-right-radius: 0;
-					border-bottom-left-radius: $tab-border-radius;
-					border-bottom-right-radius: $tab-border-radius;
-				}
-			}
-		}
-		& > :checked + label {
-			@if $tab-border-style != 0 {
-				border: $tab-border-style;
-			}
-			@if $tab-border-radius != 0 {
-				border-bottom-left-radius: 0;
-				border-bottom-right-radius: 0;
-			}
-		}
-		& > label + div {
-			-webkit-order: initial;		// Reset order to show stacked tabs properly
-							order: initial;
-			@if $tab-border-radius != 0 {
-				border-radius: 0;
-			}
-		}
-		& > label:not(:first-of-type) {
-			@if $tab-border-style != 0 {
-				border: $tab-border-style;
-				border-top: 0;
-			}
-		}
-		@if $tab-border-radius != 0 {
-			& > label + div:last-of-type {
-				border-bottom-left-radius: $tab-border-radius;
-				border-bottom-right-radius: $tab-border-radius;
-			}
-		}
-	}
+  .#{$tab-container-name} {
+    // Old syntax
+    -webkit-box-orient: vertical;
+    // New syntax
+    -webkit-flex-direction: column;
+            flex-direction: column;
+    & > label {
+      -webkit-order: initial;    // Reset order to show stacked tabs properly
+              order: initial;
+      @if $tab-border-radius != 0 {  // Style first and last tabs' labels' corners as needed
+        &:first-of-type {
+          border-top-right-radius: $tab-border-radius;
+        }
+        &:last-of-type {
+          border-top-right-radius: 0;
+          border-bottom-left-radius: $tab-border-radius;
+          border-bottom-right-radius: $tab-border-radius;
+        }
+      }
+    }
+    & > :checked + label {
+      @if $tab-border-style != 0 {
+        border: $tab-border-style;
+      }
+      @if $tab-border-radius != 0 {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
+    & > label + div {
+      -webkit-order: initial;    // Reset order to show stacked tabs properly
+              order: initial;
+      @if $tab-border-radius != 0 {
+        border-radius: 0;
+      }
+    }
+    & > label:not(:first-of-type) {
+      @if $tab-border-style != 0 {
+        border: $tab-border-style;
+        border-top: 0;
+      }
+    }
+    @if $tab-border-radius != 0 {
+      & > label + div:last-of-type {
+        border-bottom-left-radius: $tab-border-radius;
+        border-bottom-right-radius: $tab-border-radius;
+      }
+    }
+  }
 }

src/mini/_utility.scss

@@ -1,167 +1,167 @@
 /*
-	Definitions for utilities and helper classes.
+  Definitions for utilities and helper classes.
 */
-$hidden-name:						'hidden' !default;					// Class name for hidden elements.
-$visually-hidden-name:	'visually-hidden' !default;	// Class name for visually hidden elements.
-$include-breadcrumbs:		true !default;							// [Hidden flag] Should breadcrumbs be included? (`true`/`false`)
-$breadcrumbs-name:			'breadcrumbs' !default;			// Class name for breadcrumbs.
-$include-close-icon:		true !default;							// [Hidden flag] Should the close icon be included? (`true`/`false`)
-$close-icon-name:				'close'!default;						// Class name for close icon.
+$hidden-name:           'hidden' !default;          // Class name for hidden elements.
+$visually-hidden-name:  'visually-hidden' !default; // Class name for visually hidden elements.
+$include-breadcrumbs:   true !default;              // [Hidden flag] Should breadcrumbs be included? (`true`/`false`)
+$breadcrumbs-name:      'breadcrumbs' !default;     // Class name for breadcrumbs.
+$include-close-icon:    true !default;              // [Hidden flag] Should the close icon be included? (`true`/`false`)
+$close-icon-name:       'close'!default;            // Class name for close icon.
 // The floats, clearfix and center-block flags are for legacy features.
-$include-floats:				false !default;							// Should floats be included? (`true`/`false`)
-$include-clearfix:			false !default;							// Should clearfix be included? (`true`/`false`)
-$include-center-block:	false !default;							// Should center block be included? (`true`/`false`)
-$style-link-active-state:		false !default;					// [External flag - core] Should the :active state of <a> elements be stylized, same as the :hover state (`true`/`false`).
+$include-floats:        false !default;             // Should floats be included? (`true`/`false`)
+$include-clearfix:      false !default;             // Should clearfix be included? (`true`/`false`)
+$include-center-block:  false !default;             // Should center block be included? (`true`/`false`)
+$style-link-active-state:    false !default;        // [External flag - core] Should the :active state of <a> elements be stylized, same as the :hover state (`true`/`false`).
 // Check the `_utility_mixins.scss` file to find this module's mixins.
 @import 'utility_mixins';
 // Hidden elements class. ATTENTION: Uses !important.
 .#{$hidden-name}{
-	display: none !important;
+  display: none !important;
 }
 // Visually hidden elements class. ATTENTION: Uses !important.
 .#{$visually-hidden-name} {
-	position: absolute !important;
-	width: 1px !important;
-	height: 1px !important;
-	margin: -1px !important;
-	border: 0 !important;
-	padding: 0 !important;
-	clip: rect(0 0 0 0) !important;
-	-webkit-clip-path: inset(100%) !important;
-					clip-path: inset(100%) !important;
-	overflow: hidden !important;
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  margin: -1px !important;
+  border: 0 !important;
+  padding: 0 !important;
+  clip: rect(0 0 0 0) !important;
+  -webkit-clip-path: inset(100%) !important;
+          clip-path: inset(100%) !important;
+  overflow: hidden !important;
 }
-@if $include-breadcrumbs {	// Turn off if you do not want breadcrumbs to be included.
-	// Breadcrumbs
-	ul.#{$breadcrumbs-name} {
-		// Old syntax
-		display: -webkit-box;
-		// New syntax
-		display: 	-webkit-flex;
-		display: 		 			flex;
-		list-style: none;
-		// Apply margin from styling
-		@if $breadcrumbs-margin != 0 {
-			margin: $breadcrumbs-margin;
-		}
-		@else {	// Reset margins from list styling
-			margin-left: 0;
-			margin-right: 0;
-		}
-		padding: 0;				// Remove unnecessary left and right empty space
-		@if $breadcrumbs-border-style !=0 {
-			border: $breadcrumbs-border-style;
-		}
-		@if $breadcrumbs-border-radius != 0 {
-			border-radius: $breadcrumbs-border-radius;
-		}
-		@if $breadcrumbs-box-shadow != none {
-			box-shadow: $breadcrumbs-box-shadow;
-		}
-		li {
-			// Old syntax
-			-webkit-box-flex: 1;
-			max-width: 100%;
-			// New syntax
-			-webkit-flex-grow: 1;
-							flex-grow: 1;
-			-webkit-flex-basis: 0;
-							flex-basis: 0;
-			position: relative;
-			text-align: center;
-			background: $breadcrumbs-back-color;
-			height: $breadcrumbs-height;
-			line-height: $breadcrumbs-height;
-			margin-right: ($breadcrumbs-height/2) + $breadcrumbs-separator-width;
-			&:before, &:after {
-				content: "";
-				position: absolute;
-				top: 0;
-				width: 0;
-				height: 0;
-				border: 0 solid $breadcrumbs-back-color;
-				border-width: ($breadcrumbs-height/2) ceil($breadcrumbs-height/4);
-			}
-			&:before {
-				left: -($breadcrumbs-height/2);
-				border-left-color: transparent;
-			}
-			&:after {
-				left: 100%;
-				border-color: transparent;
-				border-left-color: $breadcrumbs-back-color;
-			}
-			&:first-child {
-				&:before {
-					border: 0;
-				}
-			}
-			&:last-child {
-				margin-right: 0;
-				&:after {
-					border: 0;
-				}
-			}
-		}
-	}
+@if $include-breadcrumbs {  // Turn off if you do not want breadcrumbs to be included.
+  // Breadcrumbs
+  ul.#{$breadcrumbs-name} {
+    // Old syntax
+    display: -webkit-box;
+    // New syntax
+    display:   -webkit-flex;
+    display:            flex;
+    list-style: none;
+    // Apply margin from styling
+    @if $breadcrumbs-margin != 0 {
+      margin: $breadcrumbs-margin;
+    }
+    @else {  // Reset margins from list styling
+      margin-left: 0;
+      margin-right: 0;
+    }
+    padding: 0;        // Remove unnecessary left and right empty space
+    @if $breadcrumbs-border-style !=0 {
+      border: $breadcrumbs-border-style;
+    }
+    @if $breadcrumbs-border-radius != 0 {
+      border-radius: $breadcrumbs-border-radius;
+    }
+    @if $breadcrumbs-box-shadow != none {
+      box-shadow: $breadcrumbs-box-shadow;
+    }
+    li {
+      // Old syntax
+      -webkit-box-flex: 1;
+      max-width: 100%;
+      // New syntax
+      -webkit-flex-grow: 1;
+              flex-grow: 1;
+      -webkit-flex-basis: 0;
+              flex-basis: 0;
+      position: relative;
+      text-align: center;
+      background: $breadcrumbs-back-color;
+      height: $breadcrumbs-height;
+      line-height: $breadcrumbs-height;
+      margin-right: ($breadcrumbs-height/2) + $breadcrumbs-separator-width;
+      &:before, &:after {
+        content: "";
+        position: absolute;
+        top: 0;
+        width: 0;
+        height: 0;
+        border: 0 solid $breadcrumbs-back-color;
+        border-width: ($breadcrumbs-height/2) ceil($breadcrumbs-height/4);
+      }
+      &:before {
+        left: -($breadcrumbs-height/2);
+        border-left-color: transparent;
+      }
+      &:after {
+        left: 100%;
+        border-color: transparent;
+        border-left-color: $breadcrumbs-back-color;
+      }
+      &:first-child {
+        &:before {
+          border: 0;
+        }
+      }
+      &:last-child {
+        margin-right: 0;
+        &:after {
+          border: 0;
+        }
+      }
+    }
+  }
 }
 @if $include-close-icon { // Turn off if you do not want to include the close icon
-	// Close icon
-	.#{$close-icon-name}{
-		display: inline-block;
-		width: $close-icon-size;
-		font-family: sans-serif;
-		font-size: $close-icon-size;
-		line-height: 1;
-		font-weight: 700;
-		border-radius: 2rem;
-		background: rgba($close-icon-back-color,0);
-		vertical-align: top;
-		cursor: pointer;
-		transition: background 0.3s;
-		@if $style-link-active-state {
-			&:hover, &:focus, &:active {
-				background: rgba($close-icon-back-color,1);
-			}
-		}
-		@else {
-			&:hover, &:focus {
-				background: rgba($close-icon-back-color,1);
-			}
-		}
-		&:before {
-			content: "\00D7";
-  		display: block;
-  		text-align: center;
-		}
-	}
+  // Close icon
+  .#{$close-icon-name}{
+    display: inline-block;
+    width: $close-icon-size;
+    font-family: sans-serif;
+    font-size: $close-icon-size;
+    line-height: 1;
+    font-weight: 700;
+    border-radius: 2rem;
+    background: rgba($close-icon-back-color,0);
+    vertical-align: top;
+    cursor: pointer;
+    transition: background 0.3s;
+    @if $style-link-active-state {
+      &:hover, &:focus, &:active {
+        background: rgba($close-icon-back-color,1);
+      }
+    }
+    @else {
+      &:hover, &:focus {
+        background: rgba($close-icon-back-color,1);
+      }
+    }
+    &:before {
+      content: "\00D7";
+      display: block;
+      text-align: center;
+    }
+  }
 }
 // Floats. ATTENTION: Uses !important.
 // NOTE: Might be obsolete and not play well with others.
 @if $include-floats {
-	.#{$float-prefix}-left {
-		float: left !important;
-	}
-	.#{$float-prefix}-right {
-		float: right !important;
-	}
+  .#{$float-prefix}-left {
+    float: left !important;
+  }
+  .#{$float-prefix}-right {
+    float: right !important;
+  }
 }
 // Clearfix mixin. ATTENTION: Uses !important.
 // NOTE: Might be obsolete and not play well with others.
 @if $include-clearfix {
-	.#{$clearfix-name} {
-		&:before, &:after {
-			content: ' ' !important;
-			display: table !important;
-			clear: both !important;
-		}
-	}
+  .#{$clearfix-name} {
+    &:before, &:after {
+      content: ' ' !important;
+      display: table !important;
+      clear: both !important;
+    }
+  }
 }
 // Center block. ATTENTION: Uses !important.
 @if $include-center-block {
-	.#{$center-block-name} {
-		display: block !important;
-		margin-left: auto !important;
-		margin-right: auto !important;
-	}
+  .#{$center-block-name} {
+    display: block !important;
+    margin-left: auto !important;
+    margin-right: auto !important;
+  }
 }

src/mini/_utility_mixins.scss

@@ -4,27 +4,27 @@
 // Variables:
 // - $border-generic-name : The name of the class used for the generic border.
 @mixin make-border-generic ($border-generic-name) {
-	.#{$border-generic-name} {
-		border: 1px solid rgba(0,0,0, 0.25) !important;
-	}
+  .#{$border-generic-name} {
+    border: 1px solid rgba(0,0,0, 0.25) !important;
+  }
 }
 // Generic radial border mixin. ATTENTION: Uses !important.
 // Variables:
 // - $border-radial-name : The name of the class used for the radial border.
 // - $border-radial-radius : The border radius used for the radial border.
 @mixin make-border-radial-style ($border-radial-name, $border-radial-radius) {
-	.#{$border-radial-name} {
-		border-radius: $border-radial-radius !important;
-	}
+  .#{$border-radial-name} {
+    border-radius: $border-radial-radius !important;
+  }
 }
 // Generic box shadow mixin. ATTENTION: Uses !important.
 // Variables:
 // - $box-shadow-name : The name of the class used for the generic box shadow.
 // - $box-shadow-value : The box shadow value of the generic box shadow.
 @mixin make-box-shadow-generic ($box-shadow-name, $box-shadow-value) {
-	.#{$box-shadow-name} {
-		box-shadow: $box-shadow-value !important;
-	}
+  .#{$box-shadow-name} {
+    box-shadow: $box-shadow-value !important;
+  }
 }
 // Responsive margin mixin. ATTENTION: Uses !important.
 // Variables:
@@ -38,32 +38,32 @@
 // - $margin-small-breakpoint : (Optional) Small screen breakpoint for the responsive margin, used only if above flag is set to `true`. Defaults to `480px`.
 // - $margin-extra-small-value : (Optional) Responsive margin value for extra small screens, used only if above flag is set to `true`. Defaults to `0`.
 @mixin make-margin-responsive ($margin-name, $margin-small-value,
-	$margin-medium-value, $margin-large-value, $margin-medium-breakpoint : 768px,
-	$margin-large-breakpoint : 1280px, $margin-use-four-step-grid : false,
-	$margin-small-breakpoint : 480px, $margin-extra-small-value : 0) {
-	@if $margin-use-four-step-grid {
-		.#{$margin-name} {
-			margin: $margin-extra-small-value !important;
-		}
-		@media screen and (min-width: #{$margin-small-breakpoint}) {
-			margin: $margin-small-value !important;
-		}
-	}
-	@else {
-		.#{$margin-name} {
-			margin: $margin-small-value !important;
-		}
-	}
-	@media screen and (min-width: #{$margin-medium-breakpoint}) {
-		.#{$margin-name} {
-			margin: $margin-medium-value !important;
-		}
-	}
-	@media screen and (min-width: #{$margin-large-breakpoint}) {
-		.#{$margin-name} {
-			margin: $margin-large-value !important;
-		}
-	}
+  $margin-medium-value, $margin-large-value, $margin-medium-breakpoint : 768px,
+  $margin-large-breakpoint : 1280px, $margin-use-four-step-grid : false,
+  $margin-small-breakpoint : 480px, $margin-extra-small-value : 0) {
+  @if $margin-use-four-step-grid {
+    .#{$margin-name} {
+      margin: $margin-extra-small-value !important;
+    }
+    @media screen and (min-width: #{$margin-small-breakpoint}) {
+      margin: $margin-small-value !important;
+    }
+  }
+  @else {
+    .#{$margin-name} {
+      margin: $margin-small-value !important;
+    }
+  }
+  @media screen and (min-width: #{$margin-medium-breakpoint}) {
+    .#{$margin-name} {
+      margin: $margin-medium-value !important;
+    }
+  }
+  @media screen and (min-width: #{$margin-large-breakpoint}) {
+    .#{$margin-name} {
+      margin: $margin-large-value !important;
+    }
+  }
 }
 // Responsive padding mixin. ATTENTION: Uses !important.
 // Variables:
@@ -77,32 +77,32 @@
 // - $padding-small-breakpoint : (Optional) Small screen breakpoint for the responsive padding, used only if above flag is set to `true`. Defaults to `480px`.
 // - $padding-extra-small-value : (Optional) Responsive padding value for extra small screens, used only if above flag is set to `true`. Defaults to `0`.
 @mixin make-padding-responsive ($padding-name, $padding-small-value,
-	$padding-medium-value, $padding-large-value, $padding-medium-breakpoint : 768px,
-	$padding-large-breakpoint : 1280px, $padding-use-four-step-grid : false,
-	$padding-small-breakpoint : 480px, $padding-extra-small-value : 0) {
-	@if $padding-use-four-step-grid{
-		.#{$padding-name} {
-			padding: $padding-extra-small-value !important;
-		}
-		@media screen and (min-width: #{$padding-small-breakpoint}) {
-			padding: $padding-small-value !important;
-		}
-	}
-	@else {
-		.#{$padding-name} {
-			padding: $padding-small-value !important;
-		}
-	}
-	@media screen and (min-width: #{$padding-medium-breakpoint}) {
-		.#{$padding-name} {
-			padding: $padding-medium-value !important;
-		}
-	}
-	@media screen and (min-width: #{$padding-large-breakpoint}) {
-		.#{$padding-name} {
-			padding: $padding-large-value !important;
-		}
-	}
+  $padding-medium-value, $padding-large-value, $padding-medium-breakpoint : 768px,
+  $padding-large-breakpoint : 1280px, $padding-use-four-step-grid : false,
+  $padding-small-breakpoint : 480px, $padding-extra-small-value : 0) {
+  @if $padding-use-four-step-grid{
+    .#{$padding-name} {
+      padding: $padding-extra-small-value !important;
+    }
+    @media screen and (min-width: #{$padding-small-breakpoint}) {
+      padding: $padding-small-value !important;
+    }
+  }
+  @else {
+    .#{$padding-name} {
+      padding: $padding-small-value !important;
+    }
+  }
+  @media screen and (min-width: #{$padding-medium-breakpoint}) {
+    .#{$padding-name} {
+      padding: $padding-medium-value !important;
+    }
+  }
+  @media screen and (min-width: #{$padding-large-breakpoint}) {
+    .#{$padding-name} {
+      padding: $padding-large-value !important;
+    }
+  }
 }
 // Responsive hidden elements mixin. ATTENTION: Uses !important.
 // Variables:
@@ -116,38 +116,38 @@
 // - $hidden-small-breakpoint : (Optional) Small screen breakpoint for the responsive hiding, used only if the above variable is set to `true`. Defaults to `480px`.
 // - $hidden-extra-small-suffix : (Optional) The extra-small-screen suffix for the name of the class used for the responsive hiding. Used only if the above flag is set to `true`. Defaults to 'xs'.
 @mixin make-hidden-responsive ($hidden-prefix, $hidden-medium-breakpoint : 768px,
-	$hidden-large-breakpoint : 1280px , $hidden-small-suffix : 'sm', $hidden-medium-suffix : 'md',
-	$hidden-large-suffix : 'lg', $hidden-use-four-step-grid : false,
-	$hidden-small-breakpoint : 480px, $hidden-extra-small-suffix : 'xs') {
-	@if $hidden-use-four-step-grid {
-		@media screen and (max-width: #{$hidden-small-breakpoint}-1px) {
-			.#{$hidden-prefix}-#{$hidden-extra-small-suffix} {
-				display: none !important;
-			}
-		}
-		@media screen and (min-width: #{$hidden-small-breakpoint}) and (max-width: #{$hidden-medium-breakpoint}-1px) {
-			.#{$hidden-prefix}-#{$hidden-small-suffix} {
-				display: none !important;
-			}
-		}
-	}
-	@else {
-		@media screen and (max-width: #{$hidden-medium-breakpoint}-1px) {
-			.#{$hidden-prefix}-#{$hidden-small-suffix} {
-				display: none !important;
-			}
-		}
-		@media screen and (min-width: #{$hidden-medium-breakpoint}) and (max-width: #{$hidden-large-breakpoint}-1px) {
-			.#{$hidden-prefix}-#{$hidden-medium-suffix} {
-				display: none !important;
-			}
-		}
-		@media screen and (min-width: #{$hidden-large-breakpoint}) {
-			.#{$hidden-prefix}-#{$hidden-large-suffix} {
-				display: none !important;
-			}
-		}
-	}
+  $hidden-large-breakpoint : 1280px , $hidden-small-suffix : 'sm', $hidden-medium-suffix : 'md',
+  $hidden-large-suffix : 'lg', $hidden-use-four-step-grid : false,
+  $hidden-small-breakpoint : 480px, $hidden-extra-small-suffix : 'xs') {
+  @if $hidden-use-four-step-grid {
+    @media screen and (max-width: #{$hidden-small-breakpoint}-1px) {
+      .#{$hidden-prefix}-#{$hidden-extra-small-suffix} {
+        display: none !important;
+      }
+    }
+    @media screen and (min-width: #{$hidden-small-breakpoint}) and (max-width: #{$hidden-medium-breakpoint}-1px) {
+      .#{$hidden-prefix}-#{$hidden-small-suffix} {
+        display: none !important;
+      }
+    }
+  }
+  @else {
+    @media screen and (max-width: #{$hidden-medium-breakpoint}-1px) {
+      .#{$hidden-prefix}-#{$hidden-small-suffix} {
+        display: none !important;
+      }
+    }
+    @media screen and (min-width: #{$hidden-medium-breakpoint}) and (max-width: #{$hidden-large-breakpoint}-1px) {
+      .#{$hidden-prefix}-#{$hidden-medium-suffix} {
+        display: none !important;
+      }
+    }
+    @media screen and (min-width: #{$hidden-large-breakpoint}) {
+      .#{$hidden-prefix}-#{$hidden-large-suffix} {
+        display: none !important;
+      }
+    }
+  }
 }
 // Responsive visually hidden elements mixin. ATTENTION: Uses !important.
 // Variables:
@@ -161,81 +161,81 @@
 // - $visually-hidden-small-breakpoint : (Optional) Small screen breakpoint for the responsive visual hiding, used only if the above variable is set to `true`. Defaults to `480px`.
 // - $visually-hidden-extra-small-suffix : (Optional) The extra-small-screen suffix for the name of the class used for the responsive visual hiding. Used only if the above flag is set to `true`. Defaults to 'xs'.
 @mixin make-visually-hidden-responsive ($visually-hidden-prefix, $visually-hidden-medium-breakpoint : 768px,
-	$visually-hidden-large-breakpoint : 1280px , $visually-hidden-small-suffix : 'sm', $visually-hidden-medium-suffix : 'md',
-	$visually-hidden-large-suffix : 'lg', $visually-hidden-use-four-step-grid : false,
-	$visually-hidden-small-breakpoint : 480px, $visually-hidden-extra-small-suffix : 'xs') {
-	@if $visually-hidden-use-four-step-grid {
-		@media screen and (max-width: #{$visually-hidden-small-breakpoint}-1px) {
-			.#{$visually-hidden-prefix}-#{$visually-hidden-extra-small-suffix} {
-				position: absolute !important;
-				width: 1px !important;
-				height: 1px !important;
-				margin: -1px !important;
-				border: 0 !important;
-				padding: 0 !important;
-				clip: rect(0 0 0 0) !important;
-				-webkit-clip-path: inset(100%) !important;
-				clip-path: inset(100%) !important;
-				overflow: hidden !important;
-			}
-		}
-		@media screen and (min-width: #{$visually-hidden-small-breakpoint}) and (max-width: #{$visually-hidden-medium-breakpoint}-1px) {
-			.#{$visually-hidden-prefix}-#{$visually-hidden-small-suffix} {
-				position: absolute !important;
-				width: 1px !important;
-				height: 1px !important;
-				margin: -1px !important;
-				border: 0 !important;
-				padding: 0 !important;
-				clip: rect(0 0 0 0) !important;
-				-webkit-clip-path: inset(100%) !important;
-				clip-path: inset(100%) !important;
-				overflow: hidden !important;
-			}
-		}
-	}
-	@else {
-		@media screen and (max-width: #{$visually-hidden-medium-breakpoint}-1px) {
-			.#{$visually-hidden-prefix}-#{$visually-hidden-small-suffix} {
-				position: absolute !important;
-				width: 1px !important;
-				height: 1px !important;
-				margin: -1px !important;
-				border: 0 !important;
-				padding: 0 !important;
-				clip: rect(0 0 0 0) !important;
-				-webkit-clip-path: inset(100%) !important;
-				clip-path: inset(100%) !important;
-				overflow: hidden !important;
-			}
-		}
-		@media screen and (min-width: #{$visually-hidden-medium-breakpoint}) and (max-width: #{$visually-hidden-large-breakpoint}-1px) {
-			.#{$visually-hidden-prefix}-#{$visually-hidden-medium-suffix} {
-				position: absolute !important;
-				width: 1px !important;
-				height: 1px !important;
-				margin: -1px !important;
-				border: 0 !important;
-				padding: 0 !important;
-				clip: rect(0 0 0 0) !important;
-				-webkit-clip-path: inset(100%) !important;
-				clip-path: inset(100%) !important;
-				overflow: hidden !important;
-			}
-		}
-		@media screen and (min-width: #{$visually-hidden-large-breakpoint}) {
-			.#{$visually-hidden-prefix}-#{$visually-hidden-large-suffix} {
-				position: absolute !important;
-				width: 1px !important;
-				height: 1px !important;
-				margin: -1px !important;
-				border: 0 !important;
-				padding: 0 !important;
-				clip: rect(0 0 0 0) !important;
-				-webkit-clip-path: inset(100%) !important;
-				clip-path: inset(100%) !important;
-				overflow: hidden !important;
-			}
-		}
-	}
+  $visually-hidden-large-breakpoint : 1280px , $visually-hidden-small-suffix : 'sm', $visually-hidden-medium-suffix : 'md',
+  $visually-hidden-large-suffix : 'lg', $visually-hidden-use-four-step-grid : false,
+  $visually-hidden-small-breakpoint : 480px, $visually-hidden-extra-small-suffix : 'xs') {
+  @if $visually-hidden-use-four-step-grid {
+    @media screen and (max-width: #{$visually-hidden-small-breakpoint}-1px) {
+      .#{$visually-hidden-prefix}-#{$visually-hidden-extra-small-suffix} {
+        position: absolute !important;
+        width: 1px !important;
+        height: 1px !important;
+        margin: -1px !important;
+        border: 0 !important;
+        padding: 0 !important;
+        clip: rect(0 0 0 0) !important;
+        -webkit-clip-path: inset(100%) !important;
+        clip-path: inset(100%) !important;
+        overflow: hidden !important;
+      }
+    }
+    @media screen and (min-width: #{$visually-hidden-small-breakpoint}) and (max-width: #{$visually-hidden-medium-breakpoint}-1px) {
+      .#{$visually-hidden-prefix}-#{$visually-hidden-small-suffix} {
+        position: absolute !important;
+        width: 1px !important;
+        height: 1px !important;
+        margin: -1px !important;
+        border: 0 !important;
+        padding: 0 !important;
+        clip: rect(0 0 0 0) !important;
+        -webkit-clip-path: inset(100%) !important;
+        clip-path: inset(100%) !important;
+        overflow: hidden !important;
+      }
+    }
+  }
+  @else {
+    @media screen and (max-width: #{$visually-hidden-medium-breakpoint}-1px) {
+      .#{$visually-hidden-prefix}-#{$visually-hidden-small-suffix} {
+        position: absolute !important;
+        width: 1px !important;
+        height: 1px !important;
+        margin: -1px !important;
+        border: 0 !important;
+        padding: 0 !important;
+        clip: rect(0 0 0 0) !important;
+        -webkit-clip-path: inset(100%) !important;
+        clip-path: inset(100%) !important;
+        overflow: hidden !important;
+      }
+    }
+    @media screen and (min-width: #{$visually-hidden-medium-breakpoint}) and (max-width: #{$visually-hidden-large-breakpoint}-1px) {
+      .#{$visually-hidden-prefix}-#{$visually-hidden-medium-suffix} {
+        position: absolute !important;
+        width: 1px !important;
+        height: 1px !important;
+        margin: -1px !important;
+        border: 0 !important;
+        padding: 0 !important;
+        clip: rect(0 0 0 0) !important;
+        -webkit-clip-path: inset(100%) !important;
+        clip-path: inset(100%) !important;
+        overflow: hidden !important;
+      }
+    }
+    @media screen and (min-width: #{$visually-hidden-large-breakpoint}) {
+      .#{$visually-hidden-prefix}-#{$visually-hidden-large-suffix} {
+        position: absolute !important;
+        width: 1px !important;
+        height: 1px !important;
+        margin: -1px !important;
+        border: 0 !important;
+        padding: 0 !important;
+        clip: rect(0 0 0 0) !important;
+        -webkit-clip-path: inset(100%) !important;
+        clip-path: inset(100%) !important;
+        overflow: hidden !important;
+      }
+    }
+  }
 }