Utilities and helper classes complete

docs/v2/DEVLOG.md

@@ -276,4 +276,9 @@
 - 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.
+- Changed the way `breacrumbs` are built (use some `em`-based `padding` now instead of some whitespaces).
 - Dropped mixin for `make-btn-group`, opened issue (#23) to later build it.
+- Added utility mixin `make-hidden` from *v1*, exactly the same.
+- Added new utility mixin `make-visually-hidden` for accessible elements that are visually hidden.
+- Added `make-floats` and `make-center-block` mixins along with `make-clearfix` mixin from *v1*.
+- Explained utilities in demo page.

docs/v2/index.html

@@ -388,9 +388,10 @@
             <progress class="nano" value="35" max="100"></progress>
             <hr>
             <h2>Utilities and Helpers <small>Useful classes for common problems</small></h2> 
-            <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>The utilities provided with <strong>mini.css</strong> aim to solve common problems and allow ease of use whenever possible. Some 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>  
+            <ul class="breadcrumbs"><li><a href="#">These</a></li><li><a href="#">are</a></li><li><a href="#">breadcrumbs</a></li></ul>
+            <p>You can also use the <code>.hidden</code> class to hide any element you want or the <code>.visually-hidden</code> class for elements that need to be invisible to users but exist in the accessibility tree, set <code>float</code>s to left or right using the <code>.float-left</code> and <code>.float-right</code> classes or clear <code>float</code>s using the <code>.clearfix</code> class, which implements the <a href="http://nicolasgallagher.com/micro-clearfix-hack/">micro clearfix</a> by Nicolas Gallagher. Finally, use the <code>.center-block</code> class to make an element center and display as a block.</p>
           </div>
         </div>
       </div>

flavors/v2/mini-default.css

@@ -884,6 +884,36 @@ progress.nano {
 .circular {
   border-radius: 50% !important; }
 
+.hidden {
+  display: none !important; }
+
+.visually-hidden {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  margin: -1px !important;
+  border: 0 !important;
+  padding: 0 !important;
+  clip-path: inset(100%);
+  clip: rect(0 0 0 0);
+  overflow: hidden !important; }
+
+.float-left {
+  float: left !important; }
+
+.float-right {
+  float: right !important; }
+
+.clearfix:before, .clearfix:after {
+  content: ' ';
+  display: table;
+  clear: both; }
+
+.center-block {
+  display: block;
+  margin-left: auto;
+  margin-right: auto; }
+
 ul.breadcrumbs {
   list-style: none; }
   ul.breadcrumbs > li {

flavors/v2/mini-default.scss

@@ -307,6 +307,11 @@ $border-radial-style1-name:		'rounded';										// Class name for radial border
 $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
+$hidden-name:					'hidden';										// Class name for hidden elements
+$visually-hidden-name:			'visually-hidden';								// Class name for visually hidden elements
+$float-prefix:					'float';										// Prefix for float classes
+$clearfix-name:					'clearfix';										// Class name for clearfix
+$center-block-name:				'center-block';									// Class name for center block
 $breadcrumbs-name:				'breadcrumbs';									// Class name for breadcrumbs
 //	Enable base
 @import '../../scss/v2/core';
@@ -341,4 +346,9 @@ $breadcrumbs-name:				'breadcrumbs';									// Class name for breadcrumbs
 @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);
+@include make-hidden ($hidden-name);
+@include make-visually-hidden ($visually-hidden-name);
+@include make-floats ($float-prefix);
+@include make-clearfix ($clearfix-name);
+@include make-center-block ($center-block-name);
+@include make-breadcrumbs ($breadcrumbs-name);

scss/v2/mini-core/_utility.scss

@@ -17,12 +17,70 @@
 	border-radius: $border-radial-radius !important;
 }	
 }
+// Hidden mixin. ATTENTION: Uses !important.
+// Variables:
+// - $hidden-name : The name of the class used for the hidden elements.
+@mixin make-hidden ($hidden-name) {
+.#{$hidden-name}{
+	display: none !important;
+}
+}
+// Visually hidden mixin. ATTENTION: Uses !important.
+// Makes element invisible, but still accessible to screen readers.
+// Variables:
+// - $visually-hidden-name : The name of the class used for the visually hidden elements.
+@mixin make-visually-hidden ($visually-hidden-name) {
+.#{$visually-hidden-name} {
+	position: absolute !important;
+	width: 1px !important;
+	height: 1px !important;
+	margin: -1px !important;
+	border: 0 !important;
+	padding: 0 !important;
+	clip-path: inset(100%);
+	clip: rect(0 0 0 0);
+	overflow: hidden !important;
+}
+}
+// Floats mixin. ATTENTION: Uses !important.
+// Variables:
+// - $float-prefix : Prefix for the class names of floats.
+@mixin make-floats ($float-prefix) {
+.#{$float-prefix}-left {
+	float: left !important;
+}
+.#{$float-prefix}-right {
+	float: right !important;
+}
+}
+// Clearfix mixin.
+// Variables:
+// - $clearfix-name : The name of the class used for the clearfix.
+@mixin make-clearfix($clearfix-name) {
+.#{$clearfix-name} {
+&:before, &:after {
+	content: ' ';
+	display: table;
+	clear: both;
+}
+}
+}
+// Center block mixin.
+// Variables:
+// - $center-block-name : The name of the class used for the center block.
+@mixin make-center-block($center-block-name) {
+.#{$center-block-name} {
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+}
+}
 // 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){
+@mixin make-breadcrumbs ($breadcrumbs-name, $use-right-angle-symbol : true) {
 ul.#{$breadcrumbs-name}{
 	list-style: none;
 & > li{