Minor addition to card module

docs/v2/DEVLOG.md

@@ -313,3 +313,4 @@
 - For consistency reasons (inconsistent `margin`s might cause problems with `card`s of different types), there is no choice to change the `margin` of customized `card`s through via mixin.
 - Created mixin `make-card-section-alt-style`, added `double-padded` style to add twice the `padding` to sections.
 - Deployed updated demo page.
+- Added a new mixin `add-grid-row-cards-alignment` without parameters that allows `row`s to align the elements they contain automatically horizontally.

docs/v2/index.html

@@ -393,9 +393,9 @@
             <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><br>
             <h2>Cards <small>Modern content containers</small></h2>
-            <p>Cards are some of the most modern and stylish content containers and are widely used in many website types. <strong>mini.css</strong> provides you with the <code>.card</code> class, along with a handful of pre-built styles to help you create beatiful cards for your pages. Note that this module is heavily dependent on the grid system module. To use the cards, simply replace the grid's columns with your cards and you're ready to go. Below are some examples:</p>
+            <p>Cards are some of the most modern and stylish content containers and are widely used in many website types. <strong>mini.css</strong> provides you with the <code>.card</code> class, along with a handful of pre-built styles to help you create beatiful cards for your pages. Note that this module is heavily dependent on the grid system module. To use the cards, simply replace the grid's columns with your cards and you're ready to go. Note that in the examples below, we try to showcase as many features as possible, but there might be something we missed. Also, the <code>.row</code> which acts as the contaienr for the cards has the <code>.cards</code> class applied to it, which helps align the cards horizontally, by automatically shrinking or expanding the spaces between them.</p>
             <div class="container">
-              <div class="row">
+              <div class="row cards">
                 <div class="card">
                   <img src="catdemo.jpg" class="section media">
                   <div class="section">

flavors/v2/mini-default.css

@@ -985,3 +985,8 @@ ul.breadcrumbs {
 
 .card > .section.double-padded {
   padding: 12px 16px 12px; }
+
+.row.cards {
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-around;
+  justify-content: space-around; }

flavors/v2/mini-default.scss

@@ -395,4 +395,5 @@ $card-section-padding1-padding:	12px 16px 12px;									// Padding for card sect
 	$card-section-style1-fore-color);
 @include make-card-section-alt-color ($card-section-style2-name, $card-section-style2-back-color, 
 	$card-section-style2-fore-color);
-@include make-card-section-alt-style ($card-section-padding1-name, $card-section-padding1-padding);
+@include make-card-section-alt-style ($card-section-padding1-name, $card-section-padding1-padding);
+@include add-grid-row-cards-alignment;

scss/v2/mini-shell/_card.scss

@@ -146,4 +146,15 @@ $card-normal-width:				320px !default;									// Width for normal cards
 .#{$card-name} > .#{$card-section-name}.#{$card-section-alt-name} {
 	padding: $card-section-alt-padding;
 }
+}
+// Mixin for grid system's row that spaces cards apart.
+@mixin add-grid-row-cards-alignment {
+$grid-row-name:					'row' !default;								// Class name for the cards
+.#{$grid-row-name}.#{$card-name}s {
+// Old syntax
+	-webkit-box-pack: justify;
+// New syntax
+	-webkit-justify-content: space-around;
+  			justify-content: space-around;
+}
 }