Addition to user file handling

Enabled usage of predeterminded javascript user files. Added 
`variables.js`, `functions.js` and `globals.js` to build queue.
Therefore added option for emtpy single globs.

Changed some sass for better modular usage.

gulpfile.js

@@ -44,7 +44,7 @@ const input = {
   templates: 'source/templates',
   data: 'source/data/**/*.json',
   style: 'source/style/**/*.s+(a|c)ss',
-  code: ['source/code/hippie/variables.js', 'source/code/hippie/functions.js', 'source/code/hippie/global.js', '!source/vendor/**/*'],
+  code: ['source/code/hippie/variables.js', 'source/code/hippie/functions.js', 'source/code/hippie/global.js', 'source/code/variables.js', 'source/code/functions.js', 'source/code/global.js', 'source/code/**/*.js', '!source/vendor/**/*'],
   fonts: 'node_modules/@fortawesome/fontawesome-free/webfonts/**/*',
   art: {
     favicons: 'source/art/favicons/**/*.+(ico|png)',
@@ -175,7 +175,10 @@ function styleLint() {
 // Javascript for the win
 function code(cb) {
   pump([
-    src(input.code, { sourcemaps: true }),
+    src(input.code, {
+      sourcemaps: true,
+      allowEmpty: true
+    }),
     cache('code'),
     concat(hippie.jsFile +'.js'),
     dest(output.code),
@@ -189,7 +192,7 @@ function code(cb) {
 }
 // Linting
 function codeLint() {
-  return src(input.code)
+  return src(input.code, { allowEmpty: true })
   .pipe(plumber())
   .pipe(jshint())
   .pipe(jshint.reporter('jshint-stylish'))

source/screens/demo.njk

@@ -1,6 +1,6 @@
 <!-- page-index.njk -->
 {% set pageId = "index" %}
-{% set pageClass = "height_full" %}
+{% set pageClass = "h_full_view" %}
 
 {% extends "demo/_default.njk" %}
 

source/screens/demo/blank.njk

@@ -1,6 +1,6 @@
 <!-- page-blank.njk -->
 {% set pageId = "blank" %}
-{% set pageClass = "height_full" %}
+{% set pageClass = "h_full_view" %}
 
 {% extends "demo/_default.njk" %}
 

source/screens/demo/examples.njk

@@ -100,7 +100,7 @@
         </nav>
       </header>
       <pre class="pre_code"><code>header.header_page>nav.nav_right>ul>(li>a.a_button{Nav $})*4</code></pre>
-      <div class="box_space height_basic">
+      <div class="box_space h_basic">
         <header id="js_demo_fix" class="header_page demo__header header_fix">
           <nav class="nav_right">
             <ul>

source/screens/demo/maintenance.njk

@@ -1,6 +1,6 @@
 <!-- page-maintenance.njk -->
 {% set pageId = "blank" %}
-{% set pageClass = "height_full" %}
+{% set pageClass = "h_full_view" %}
 
 {% extends "demo/_maintenance.njk" %}
 

source/screens/demo/os.njk

@@ -10,7 +10,7 @@
 {% endblock %}
 
 {% block main %}
-<div class="height_full">
+<div class="h_full_view">
   <div class="flex_wrap">
     <button class="demo__button_32"></button>
     <button class="demo__button_32"></button>

source/screens/demo/tests.njk

@@ -1,6 +1,6 @@
 <!-- page-tests.njk -->
 {% set pageId = "tests" %}
-{% set pageClass = "height_full" %}
+{% set pageClass = "h_full_view" %}
 
 {% extends "demo/_default.njk" %}
 {% import "demo/macros/_nav.njk" as nav %}

source/style/hippie/global/_common.scss

@@ -17,6 +17,14 @@
 	}
 }
 
+%h_content_full {
+	height: 100%;
+
+	body {
+		min-height: 100%;
+	}
+}
+
 %hidden {
 	display: none;
 }
@@ -80,14 +88,18 @@
 	margin-left: 0;
 }
 
-.height_basic {
+.h_basic {
 	height: 1024px;
 }
 
-.height_full {
+.h_full_view {
 	height: 100vh;
 }
 
+.h_100 {
+	height: 100%;
+}
+
 .wrap_center {
 	&	> * {
 		margin-right: (100% - $width_basic) / 2;
@@ -159,7 +171,7 @@
 
 // Positioned elements
 // -----------------------------------------------------------------------------
-%full_viewport {
+%viewport_fixed {
 	position: fixed;
 	top: 0;
 	left: 0;
@@ -206,7 +218,7 @@
 }
 
 .pos_full_view {
-	@extend %full_viewport;
+	@extend %viewport_fixed;
 	background-color: rgba($alpha_color, 0.5);
 }
 
@@ -225,7 +237,7 @@
 }
 
 .hover_full_view_change {
-	@extend %full_viewport;
+	@extend %viewport_fixed;
 	z-index: $z_heaven;
 	background-color: transparentize($color_darkest, 0.5);
 	transition: background-color $duration_long $timing_basic $duration_long;

source/style/hippie/modules/card/_card_module.scss

@@ -1,23 +1,12 @@
-// Custom extends and mixins
-// ------------------------------------------------------------------------------
-@import "mixins";
-@import "extends";
-
 // Card module styles
 // ------------------------------------------------------------------------------
 
-%absolute_full {
+.card_html {
-	position: absolute;
+  @extend %h_content_full;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-}
 
-.card_body {
+  body {
-	height: 100%;
     .bkg_box {
-		@extend %absolute_full;
+      @extend %full_parent;
       transition-duration: 800ms;
       overflow: hidden;
       vertical-align: top;
@@ -27,20 +16,8 @@
       position: relative;
     }
     .flex_wrap_center {
-		display: -webkit-box;
-		display: -webkit-flex;
-		display: -moz-box;
-		display: -ms-flexbox;
       display: flex;
-		-webkit-box-align: center;
-		-webkit-align-items: center;
-		-moz-box-align: center;
-		-ms-flex-align: center;
       align-items: center;
-		-webkit-box-pack: center;
-		-webkit-justify-content: center;
-		-moz-box-pack: center;
-		-ms-flex-pack: center;
       justify-content: center;
       height: 100%;
     }
@@ -65,21 +42,21 @@
       line-height: 1.4em;
     }
 
-	/*  .full {
+    // .full {
-	position: absolute;
+    // 	position: absolute;
-	width: 128px;
+    // 	width: 128px;
-	height: 128px;
+    // 	height: 128px;
-	top: 16px;
+    // 	top: 16px;
-	left: 16px;
+    // 	left: 16px;
-	background-color: #fff;
+    // 	background-color: #fff;
-}
+    // }
-.mark {
+    // .mark {
-float: left;
+    // 	float: left;
-width: 32px;
+    // 	width: 32px;
-height: 32px;
+    // 	height: 32px;
-margin-top: 16px;
+    // 	margin-top: 16px;
-}
+    // }
-*/
+
     .marked {
       padding-left: 1em;
       text-indent: -1em;
@@ -97,3 +74,4 @@ a:hover {
       text-decoration: none;
     }
   }
+}