Fixed a header bug

Fixed a bug where header.row would not display properly, should now work as expected, enabling layout customization and responsiveness inside the header.

dist/mini-dark.css

@@ -1094,6 +1094,10 @@ header .logo, header a.button, header a[role="button"] {
   text-decoration: none;
 }
 
+header.row {
+  box-sizing: content-box;
+}
+
 nav {
   display: block;
   background: #37474f;

dist/mini-default.css

@@ -1093,6 +1093,10 @@ header .logo, header a.button, header a[role="button"] {
   text-decoration: none;
 }
 
+header.row {
+  box-sizing: content-box;
+}
+
 nav {
   display: block;
   background: #eceff1;

dist/mini-lite.css

@@ -997,6 +997,10 @@ header .logo, header a.button, header a[role="button"] {
   text-decoration: none;
 }
 
+header.row {
+  box-sizing: content-box;
+}
+
 footer {
   display: block;
   background: #192024;

dist/mini-nord.css

@@ -1092,6 +1092,10 @@ header .logo, header a.button, header a[role="button"] {
   text-decoration: none;
 }
 
+header.row {
+  box-sizing: content-box;
+}
+
 nav {
   display: block;
   border: 1px solid #D8DEE9;

dist/mini-sucroa.css

@@ -1099,6 +1099,10 @@ header .logo, header a.button, header a[role="button"] {
   text-decoration: none;
 }
 
+header.row {
+  box-sizing: content-box;
+}
+
 nav {
   display: block;
   background: #e8deff;

docs/modules.html

@@ -114,7 +114,6 @@
           <div class="card fluid">
             <h2 class="section"><mark class="primary"><i class="fa fa-compass fa-fw" aria-hidden="true"></i></mark>&nbsp;Navigation</h2>
             <div class="section box-left"><p>The <strong>navigation</strong> module seeks to remedy the problems of vertical and horizontal navigation design paradigms, by combining the two for a better presentational effect. HTML5 navigational elements are at the heart of the module, allowing you to quickly build your navigation without complicated structures and hacks. More specifically, the <strong>navigation</strong> module contains:</p><ul>
-							<li><a href="navigation.html#navigation-title">Navigation</a>
 							<li><a href="navigation.html#header" class="sublink-1">Styling for headers, logos and header links</a></li>
 							<li><a href="navigation.html#navigation-bar" class="sublink-1">Styling for navigation bars</a></li>
 							<li><a href="navigation.html#footer" class="sublink-1">Styling for footers</a></li>

docs/v2/DEVLOG.md

@@ -1140,3 +1140,4 @@
 - Thoroughly tested fluid typography and updated the `core` module with the required variables and flags. This added a little bit of extra size to the framework, but it seems worthwhile as it scales a bit better on smaller screens, so that there is slightly more real estate for content.
 - Updated all flavors for fluid typography (basically only `default` and `dark` actually use it for now).
 - Updated `core` module documentation and customization documentation to explain fluid typography.
+- Fixed the `header` element bug that didn't allow them to work well with the `.row` class for responsive layouts. They should now display as expected.

src/mini/_navigation.scss

@@ -20,6 +20,8 @@ $fore-color:							black !default;						// [External variable - core] Foreground
 // Policy for below external flag is `ALWAYS_TRUE`. This is done due to links being underlined by default and as a safeguard from ugly branding.
 $apply-link-underline:		true !default;						// [External flag - core] Should underlining be applied to <a> elements? (`true`/`false`)
 $style-link-active-state:		false !default;					// [External flag - core] Should the :active state of <a> elements be stylized, same as the :hover state (`true`/`false`).
+// The below variable is used to fix the display problem of the <header> element when used as a responsive row
+$grid-row-name:								'row' !default;				// [External flag - grid] Class name for the grid system rows.
 $button-class-name:				'button' !default;				// [External variable - input_control] Name of the button-like element styling class.
 $button-box-shadow:0 1px 3px rgba(0,0,0, 0.1) !default;// [External variable - input_control] Value of button's box-shadow.
 $button-border-style: 1px solid transparent !default;	// [External variable - input_control] Value of button's border-style.
@@ -102,6 +104,10 @@ header {
 			text-decoration: none;
 		}
 	}
+	// Fix for responsive header, using the grid system's row and column alignment.
+	&.#{$grid-row-name} {
+		box-sizing: content-box;
+	}
 }
 // Navigation sidebar styling.
 @if $include-nav-styles {						// Unless you want unstylized <nav> elements, keep this flag on.