From af7818b25539f5132d8ef88a296c12742bcb2fa8 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Tue, 13 Dec 2016 10:26:16 +0200 Subject: [PATCH] Updated module comments for easier viewing --- dist/mini-default.css | 47 ++++++++++++++++++++++++++++++++++- docs/v2/DEVLOG.md | 1 + src/flavors/mini-default.scss | 25 ++++++++++++++----- src/mini/_card.scss | 4 ++- src/mini/_contextual.scss | 4 ++- src/mini/_core.scss | 4 ++- src/mini/_grid.scss | 4 ++- src/mini/_input_control.scss | 4 ++- src/mini/_navigation.scss | 4 ++- src/mini/_progress.scss | 4 ++- src/mini/_tab.scss | 4 ++- src/mini/_table.scss | 4 ++- src/mini/_utility.scss | 4 ++- 13 files changed, 96 insertions(+), 17 deletions(-) diff --git a/dist/mini-default.css b/dist/mini-default.css index 4c396a7..1c9a18c 100644 --- a/dist/mini-default.css +++ b/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; } diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md index 2f97829..9bc129b 100644 --- a/docs/v2/DEVLOG.md +++ b/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. \ No newline at end of file diff --git a/src/flavors/mini-default.scss b/src/flavors/mini-default.scss index 51d5454..51f5c3d 100644 --- a/src/flavors/mini-default.scss +++ b/src/flavors/mini-default.scss @@ -1,12 +1,10 @@ -// 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. +// 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. /* 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); diff --git a/src/mini/_card.scss b/src/mini/_card.scss index 2b1281d..3a6ed33 100644 --- a/src/mini/_card.scss +++ b/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 diff --git a/src/mini/_contextual.scss b/src/mini/_contextual.scss index eea1747..4c0c3cf 100644 --- a/src/mini/_contextual.scss +++ b/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 inline block styling diff --git a/src/mini/_core.scss b/src/mini/_core.scss index 912cb73..aab1dd2 100644 --- a/src/mini/_core.scss +++ b/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 { diff --git a/src/mini/_grid.scss b/src/mini/_grid.scss index 7b9d0d1..8338c59 100644 --- a/src/mini/_grid.scss +++ b/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 diff --git a/src/mini/_input_control.scss b/src/mini/_input_control.scss index 696525a..a36c4a4 100644 --- a/src/mini/_input_control.scss +++ b/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 { diff --git a/src/mini/_navigation.scss b/src/mini/_navigation.scss index 1d21f8b..c9d7695 100644 --- a/src/mini/_navigation.scss +++ b/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 diff --git a/src/mini/_progress.scss b/src/mini/_progress.scss index 0f8690f..35a939c 100644 --- a/src/mini/_progress.scss +++ b/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 diff --git a/src/mini/_tab.scss b/src/mini/_tab.scss index 6b35cdc..3ce8329 100644 --- a/src/mini/_tab.scss +++ b/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 diff --git a/src/mini/_table.scss b/src/mini/_table.scss index 87f2a1c..10f5a2f 100644 --- a/src/mini/_table.scss +++ b/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 { diff --git a/src/mini/_utility.scss b/src/mini/_utility.scss index 84e03d1..0cce1c8 100644 --- a/src/mini/_utility.scss +++ b/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;