Updated module comments for easier viewing

dist/mini-default.css

@@ -1,7 +1,10 @@
 /*
 	Flavor name: Default (mini-default)
 	Author: Angelos Chalaris (chalarangelo@gmail.com)
-	mini.css version: v2.0 (in-production)
+	mini.css version: v2.0.0 (Fermion)
+*/
+/* 
+	Browsers resets and base typography. 
 */
 html {
   font-size: 16px; }
@@ -142,6 +145,9 @@ a {
   a:hover, a:focus, a:active {
     opacity: 0.75; }
 
+/* 
+	Definitions for the grid system. 
+*/
 .container {
   margin: 0 auto;
   padding: 0 10px; }
@@ -534,6 +540,9 @@ a {
   .col-lg-last {
     -webkit-order: 999;
     order: 999; } }
+/*
+	Definitions for navigation elements. 
+*/
 header {
   display: block;
   height: 44px;
@@ -586,6 +595,9 @@ footer {
   footer a, footer a:visited {
     color: #039be5; }
 
+/* 
+	Definitions for forms and input elements. 
+*/
 form {
   background: #eeeeee;
   border: 1px solid #bdbdbd;
@@ -785,6 +797,9 @@ input[type="file"] {
   background: #212121;
   content: ''; }
 
+/* 
+	Definitions for the responsive table component. 
+*/
 table {
   border-collapse: separate;
   border-spacing: 0;
@@ -962,6 +977,9 @@ table.striped tr:nth-of-type(2n) > td {
 @media (max-width: 767px) {
   table.striped:not(.preset) tr:nth-of-type(2n) {
     background: #eeeeee; } }
+/* 
+	Definitions for cards and containers. 
+*/
 .card {
   display: -webkit-box;
   -webkit-box-orient: vertical;
@@ -1000,6 +1018,9 @@ table.striped tr:nth-of-type(2n) > td {
 @media (min-width: 320px) {
   .card {
     max-width: 320px; } }
+/* 
+	Definitions for tabs/horizontal accordions. 
+*/
 .tabs {
   width: 100%;
   opacity: 1;
@@ -1107,6 +1128,9 @@ table.striped tr:nth-of-type(2n) > td {
       .tabs > [type="radio"] + label + div + [type="radio"] + label {
         border: 1px solid #9e9e9e;
         border-top: 0; } }
+/* 
+	Definitions for contextual background elements and alerts. 
+*/
 mark {
   background: #0277bd;
   color: #fafafa;
@@ -1155,6 +1179,9 @@ mark {
     -webkit-animation: alert-anim 6s linear infinite;
     animation: alert-anim 6s linear infinite; }
 
+/*
+	Definitions for progress elements and spinners. 
+*/
 progress {
   display: block;
   vertical-align: baseline;
@@ -1209,6 +1236,9 @@ progress {
   -webkit-animation: spinner-donut-anim 1.2s linear infinite;
   animation: spinner-donut-anim 1.2s linear infinite; }
 
+/* 
+	Definitions for utilities and helper classes. 
+*/
 .hidden {
   display: none !important; }
 
@@ -1309,6 +1339,9 @@ ul.breadcrumbs {
   margin-left: auto !important;
   margin-right: auto !important; }
 
+/* 
+	Custom elements for forms and input elements. 
+*/
 button.primary, [type="button"].primary, [type="submit"].primary,
 [type="reset"].primary, .button.primary {
   background: rgba(2, 119, 189, 0.9);
@@ -1361,6 +1394,9 @@ button.large, [type="button"].large, [type="submit"].large,
   padding: 12px 18px;
   margin: 10px 8px; }
 
+/* 
+	Custom elements for cards and containers. 
+*/
 @media (min-width: 480px) {
   .card.large {
     max-width: 480px; } }
@@ -1389,6 +1425,9 @@ button.large, [type="button"].large, [type="submit"].large,
 .card > .section.double-padded {
   padding: 10px 12px 10px; }
 
+/* 
+	Custom contextual background elements and alerts. 
+*/
 mark.secondary {
   background: #f44336; }
 
@@ -1417,6 +1456,9 @@ mark.inline-block {
 .alert.critical {
   border: 1px solid #d50000; }
 
+/* 
+	Custom elements for progress elements and spinners. 
+*/
 progress.inline {
   display: inline-block;
   vertical-align: middle;
@@ -1470,6 +1512,9 @@ progress.nano {
   width: 32px;
   height: 32px; }
 
+/* 
+	Custom elements for utilities and helper classes. 
+*/
 .bordered {
   border: 1px solid rgba(0, 0, 0, 0.25) !important; }
 

docs/v2/DEVLOG.md

@@ -639,3 +639,4 @@
 - Thoroughly tested `close` and `breadcrumbs`. Found dos and don'ts.
 - Completed documentation for `utility` module.
 - Removed `playground.html` page, as it was no longer needed.
+- Updated comments for modules, so that they can show up in the resulting file.

src/flavors/mini-default.scss

@@ -1,12 +1,10 @@
-// 	This is a flavor file. Duplicate it and edit it to create your own
+// 	This is a flavor file. Duplicate it and edit it to create your own flavor. Read instructions carefully.
-//	flavor. Read instructions carefully.
+// 	Single-line comments, starting with '//' will not be included in your final CSS file. Multiline comments,
-// 	Single-line comments, starting with '//' will not be included in
+//	structured like the flavor description below, will be included in your final CSS file.
-//	your final CSS file. Multiline comments, structured like the flavor
-//	description below, will be included in your final CSS file.
 /*
 	Flavor name: Default (mini-default)
 	Author: Angelos Chalaris (chalarangelo@gmail.com)
-	mini.css version: v2.0 (in-production)
+	mini.css version: v2.0.0 (Fermion)
 */
 //	Basic rules for body and typography
 $fore-color:					#212121;										// Text and general foreground color
@@ -518,6 +516,9 @@ $center-block-name:				'center-block';									// Class name for center block
 //	Enable mini.css
 @import '../mini/core';
 //	Use mixins for forms and inputs
+/* 
+	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);
 @include make-button-alt-color ($button-variant2-name, $button-variant2-back-color, 
@@ -531,6 +532,9 @@ $center-block-name:				'center-block';									// Class name for center block
 @include make-button-alt-style ($button-style2-name, $button-style2-border-style,
 	$button-style2-border-radius, $button-style2-padding, $button-style2-margin);
 //	Use mixins for cards
+/* 
+	Custom elements for cards and containers. 
+*/
 @include make-card-alt-size ($card-size1-name, $card-size1-width);
 @include make-card-alt-size ($card-size2-name, $card-size2-width);
 @include make-card-alt-size ($card-size3-name, $card-size3-width);
@@ -542,6 +546,9 @@ $center-block-name:				'center-block';									// Class name for center block
 	$card-section-style2-fore-color);
 @include make-card-section-alt-style ($card-section-padding1-name, $card-section-padding1-padding);
 //	Use mixins for 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, 
@@ -553,6 +560,9 @@ $center-block-name:				'center-block';									// Class name for center block
 @include make-alert-alt-style ($alert-style1-name, $alert-style1-border-style, $alert-style1-border-radius);
 @include make-alert-alt-style ($alert-style2-name, $alert-style2-border-style, $alert-style2-border-radius);
 //	Use mixins 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);
@@ -566,6 +576,9 @@ $center-block-name:				'center-block';									// Class name for center block
 @include make-spinner-donut-alt-style ($spinner-donut-style1-name, $spinner-donut-style1-size, 
 	$spinner-donut-style1-border-thickness);
 //	Use mixins 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);

src/mini/_card.scss

@@ -1,4 +1,6 @@
-// Definitions for cards and containers.
+/* 
+	Definitions for cards and containers. 
+*/
 // Dependency: This module depends heavily on the grid system module.
 // Card styling
 $card-name:						'card' !default;								// Class name for the cards

src/mini/_contextual.scss

@@ -1,4 +1,6 @@
-// Definitions for contextual background elements and alerts.
+/* 
+	Definitions for contextual background elements and alerts. 
+*/
 // Contextual background elements use the mark element as their base.
 // Default styling for mark. Use mixins for alternate styles.
 $mark-inline-block-name:		'inline-block' !default;						// Class name for <mark> inline block styling

src/mini/_core.scss

@@ -1,4 +1,6 @@
-// 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` or `false`).
 $base-root-font-size:			16px !default;									// Root font sizing for all elements - In `px` only!
 html {

src/mini/_grid.scss

@@ -1,4 +1,6 @@
-// Definitions for the grid system.
+/* 
+	Definitions for the grid system. 
+*/
 // The grid system uses the flexbox module, meaning it might be incompatible with certain browsers.
 $use-four-step-grid:			false !default;									// Flag for the grid system choice
 $grid-container-name:			'container' !default;							// Class name for the grid system container

src/mini/_input_control.scss

@@ -1,4 +1,6 @@
-// Definitions for forms and input elements.
+/* 
+	Definitions for forms and input elements. 
+*/
 // Different elements are styled based on the same set of rules.
 // Base form styling.
 form {

src/mini/_navigation.scss

@@ -1,4 +1,6 @@
-// Definitions for navigation elements.
+/*
+	Definitions for navigation elements. 
+*/
 // Different elements are styled based on the same set of rules.
 // Header styling.
 $button-class-name:				'button' !default;								// Class name for the button-like elements

src/mini/_progress.scss

@@ -1,4 +1,6 @@
-// Definitions for progress elements and spinners.
+/*
+	Definitions for progress elements and spinners. 
+*/
 // Progress elements use the progress element as their base.
 // Default styling for progress. Use mixins for alternate styles.
 $progress-max-value:			100 !default;									// Arithmetic max value of <progress>

src/mini/_tab.scss

@@ -1,4 +1,6 @@
-// Definitions for tabs/horizontal accordions.
+/* 
+	Definitions for tabs/horizontal accordions. 
+*/
 // Dependency: This module is somewhat dependent on the grid system.
 // Tab styling
 $tab-container-name:			'tabs' !default;								// Class name for the tabs container

src/mini/_table.scss

@@ -1,4 +1,6 @@
-// Definitions for the responsive table component.
+/* 
+	Definitions for the responsive table component. 
+*/
 // The tables use the common table elements and syntax.
 // Desktop view.
 table {	

src/mini/_utility.scss

@@ -1,4 +1,6 @@
-// Definitions for utilities and helper classes.
+/* 
+	Definitions for utilities and helper classes. 
+*/
 // Hidden elements class. ATTENTION: Uses !important.
 .#{$hidden-name}{
 	display: none !important;