Utility module initial commit

docs/v2/DEVLOG.md

@@ -272,4 +272,8 @@
 - Changed demo page structure to follow the ordering of modules in `core`.
 - Tweaked `progress` `inline` to `60vw` instead of `80vw`, should fit more screens properly.
 - Added a heading for the `utility` module section in demo page.
-- Deployed demo page yet again.
+- Deployed demo page yet again.
+- Created `mini-core/utility` for utilities and helper classes.
+- Copied almost verbatim the mixins from *v1* for `make-border-generic` and `make-border-radial-style`. Added variables and calls for mixins in flavor.
+- Copied and tweaked `make-breadcrumbs` mixin from *v1*'s extras.
+- Dropped mixin for `make-btn-group`, opened issue (#23) to later build it.

docs/v2/index.html

@@ -388,7 +388,9 @@
             <progress class="nano" value="35" max="100"></progress>
             <hr>
             <h2>Utilities and Helpers <small>Useful classes for common problems</small></h2> 
-            <p>Implementation pending...</p>       
+            <p>The utilities provided with <strong>mini.css</strong> aim to solve common problems and allow ease of use whenever possible. Most of them are showcased below:</p>
+            <p><span class="bordered">Generic border (using black outline and opacity of 0.25)</span>, <span class="bordered rounded">Radial border style 1</span> &amp; <span class="bordered circular">&nbsp;2 </span>.</p>  
+            <ul class="breadcrumbs"><li><a href="#">These</a></li><li><a href="#">are</a></li><li><a href="#">breadcrumbs</a></li></ul>  
           </div>
         </div>
       </div>

flavors/v2/mini-default.css

@@ -874,3 +874,21 @@ progress.nano {
     border-radius: 0; }
   progress.nano[value="100"]::-moz-progress-bar {
     border-radius: 0; }
+
+.bordered {
+  border: 1px solid rgba(0, 0, 0, 0.25) !important; }
+
+.rounded {
+  border-radius: 2px !important; }
+
+.circular {
+  border-radius: 50% !important; }
+
+ul.breadcrumbs {
+  list-style: none; }
+  ul.breadcrumbs > li {
+    display: inline-block;
+    padding-right: 0.125em; }
+    ul.breadcrumbs > li + li:before {
+      content: '\27e9';
+      padding: 0.125em; }

flavors/v2/mini-default.scss

@@ -301,9 +301,16 @@ $progress-style1-height:		2px;											// Height for <progress> style 1
 $progress-style1-margin:		0 auto 1px;										// Margin for <progress> style 1
 $progress-style1-border-style:	0;												// Border style for <progress> style 1
 $progress-style1-border-radius:	0;												// Border radius for <progress> style 1
+//	Variables for core utilities and helper classes.
+$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:	2px;											// 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
+$breadcrumbs-name:				'breadcrumbs';									// Class name for breadcrumbs
 //	Enable base
 @import '../../scss/v2/core';
-//	Use mixins for button elements
+//	Use mixins for button 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, 
@@ -314,19 +321,24 @@ $progress-style1-border-radius:	0;												// Border radius for <progress> st
 	$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);
-// Custom button style demonstration (not enabled)
+// Custom button style demonstration (not enabled).
 //@include make-button-alt-color ($button-custom-name, $button-custom-back-color, 
 //	$button-custom-back-opacity, $button-custom-hover-back-opacity);
 //@include make-button-alt-style ($button-custom-name, $button-custom-border-style,
 //	$button-custom-border-radius, $button-custom-padding, $button-custom-margin);
-//	Use mixins for contextual background elements
-@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-radius, $mark-style1-padding);
-@include make-mark-alt-style($mark-style2-name, $mark-style2-border-radius, $mark-style2-padding);
-//	Use mixins for progress elements
-@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);
-@include make-progress-alt-style($progress-style1-name, $progress-style1-height, 
-	$progress-style1-margin, $progress-style1-border-style, $progress-style1-border-radius);
+//	Use mixins for contextual background elements.
+@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-radius, $mark-style1-padding);
+@include make-mark-alt-style ($mark-style2-name, $mark-style2-border-radius, $mark-style2-padding);
+//	Use mixins for progress elements.
+@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);
+@include make-progress-alt-style ($progress-style1-name, $progress-style1-height, 
+	$progress-style1-margin, $progress-style1-border-style, $progress-style1-border-radius);
+//	Use mixins for core 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-breadcrumbs($breadcrumbs-name);

scss/v2/_core.scss

@@ -363,4 +363,5 @@ a{
 @import 'mini-core/checkbox';
 @import 'mini-core/contextual';
 @import 'mini-core/progress';
+@import 'mini-core/utility';
 //===================================================

scss/v2/mini-core/_utility.scss

@@ -0,0 +1,44 @@
+// Definitions for utilities and helper classes.
+// Note: most mixins need to be called separately to work.
+// Generic border mixin. ATTENTION: Uses !important.
+// 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;
+}
+}
+// 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;
+}	
+}
+// Breadcrumb mixin.
+// Variables:
+// - $breadcrumbs-name : The name of the class used for the breadcrumbs.
+// - $use-right-angle-symbol : Should the right angle symbol be used as a separator (`true`/`false`).
+//	Value is `true` by default. If `false` a forward slash will be used.
+@mixin make-breadcrumbs($breadcrumbs-name, $use-right-angle-symbol : true){
+ul.#{$breadcrumbs-name}{
+	list-style: none;
+& > li{
+	display: inline-block;
+// Some padding is needed for the breacrumbs to appear properly. 2px should be enough.
+	padding-right: 0.125em;	
+& + li:before{
+@if $use-right-angle-symbol{
+	content: '\27e9';
+}
+@else {
+	content: '\002f';
+}
+// Some padding is needed for the breacrumbs to appear properly. 2px should be enough.
+	padding: 0.125em;
+}
+}
+}
+}