Added new footer element class for absolute positioning, as discussed in #42

dist/mini-default.css

@@ -2,7 +2,7 @@
 /*
 	Flavor name: Default (mini-default)
 	Author: Angelos Chalaris (chalarangelo@gmail.com)
-	mini.css version: v2.0.2 (Fermion)
+	mini.css version: v2.1.0 (Fermion)
 */
 /* 
 	Browsers resets and base typography. 
@@ -681,6 +681,12 @@ footer {
   footer a, footer a:visited {
     color: #039be5; }
 
+footer.bottom {
+  box-sizing: border-box;
+  position: absolute;
+  bottom: 0;
+  width: 100%; }
+
 /* 
 	Definitions for forms and input elements. 
 */

docs/v2/DEVLOG.md

@@ -751,3 +751,8 @@
 - Updated `index.html` to use the new `.sticky` `header`, along with other styling changes, such as content sizing.
 - *TODO* Update the rest of the pages, bump everything to `v2.1.0` and use the local stylesheets in the meantime.
 - Content spacing changes in `index.html`.
+
+## 20170108
+
+- Added `$include-footer-bottom` flag, coded the necessary parts for absolute-bottom-aligned `footer` elements.
+- *TODO* Update all pages to use the new `footer` absolute-alignment. Should solve some issues on different devices.

docs/v2/demo.html

@@ -136,6 +136,6 @@
       </div>
     </div></main>
     <!-- End of page content-->
-    <footer><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.</footer>
+    <footer class="bottom"><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.</footer>
   </body>
 </html>

src/flavors/mini-default.scss

@@ -4,7 +4,7 @@
 /*
 	Flavor name: Default (mini-default)
 	Author: Angelos Chalaris (chalarangelo@gmail.com)
-	mini.css version: v2.0.2 (Fermion)
+	mini.css version: v2.1.0 (Fermion)
 */
 //	Basic rules for body and typography
 $fore-color:					#212121;										// Text and general foreground color
@@ -198,9 +198,14 @@ $footer-font-size:				85%;											// Font size for <footer>
 $footer-margin:					18px 0 0;										// Margin for <footer>
 $footer-padding:				22px 10px 12px;									// Padding for <footer>
 $footer-link-fore-color:		#039be5;										// Text color for links in <footer>
+$include-footer-bottom:			true;											// Should the class that aligns <footer> elements to  
+																				// the bottom of the page be included (`true`/`false`) [2]
+$footer-bottom-name:			'bottom';										// Class name for <footer> element with bottom alignment [2]
 //	Notes:
 // [1] - If the value of $include-header-sticky is `true`, a class will be created that will allow for sticky positioning
 //	of <header> elements, using the value of $header-sticky-name for the name of the class.
+// [2] - If the value of $include-footer-bottom is `true`, a class will be created that will allow for absolute positioning
+//	of <footer> elements, using the value of $footer-bottom-name for the name of the class.
 //	Variables for forms and inputs
 $form-back-color:				#eeeeee;										// Background color for forms
 $form-fore-color:				$fore-color;									// Text color for forms

src/mini/_navigation.scss

@@ -117,6 +117,9 @@ nav {
 		}
 	}
 }
+
+$include-footer-bottom:			false !default;									// Should the class that aligns <footer> elements to the 
+																				// bottom of the page be included
 // Footer styling.
 footer {
 	display: block;		// Correct display for older versions of IE.
@@ -140,3 +143,11 @@ footer {
 		color: $footer-link-fore-color;
 	}
 }
+@if $include-footer-bottom {
+	footer.#{$footer-bottom-name}{
+		box-sizing: border-box;
+		position: absolute;
+		bottom: 0;
+		width: 100%;
+	}
+}