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,99 +1,77 @@
-// 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 {
-	.bkg_box {
+      @extend %full_parent;
-		@extend %absolute_full;
+      transition-duration: 800ms;
-		transition-duration: 800ms;
+      overflow: hidden;
-		overflow: hidden;
+      vertical-align: top;
-		vertical-align: top;
+      z-index: -1;
-		z-index: -1;
+    }
-	}
+    .bkg_box > svg {
-	.bkg_box > svg {
+      position: relative;
-		position: relative;
+    }
-	}
+    .flex_wrap_center {
-	.flex_wrap_center {
+      display: flex;
-		display: -webkit-box;
+      align-items: center;
-		display: -webkit-flex;
+      justify-content: center;
-		display: -moz-box;
+      height: 100%;
-		display: -ms-flexbox;
+    }
-		display: flex;
+    .flex_content {
-		-webkit-box-align: center;
+      position: relative;
-		-webkit-align-items: center;
+      padding: 64px 64px 24px 64px;
-		-moz-box-align: center;
+      border: 1px solid #FFF;
-		-ms-flex-align: center;
+      background-color: #F5F5F5;
-		align-items: center;
+      z-index: 40;
-		-webkit-box-pack: center;
+    }
-		-webkit-justify-content: center;
+    h1 {
-		-moz-box-pack: center;
+      margin: 16px 0;
-		-ms-flex-pack: center;
+      color: #1E1E1E;
-		justify-content: center;
+      font-size: 24px;
-		height: 100%;
+      line-height: 1.4em;
-	}
+      font-weight: normal;
-	.flex_content {
+    }
-		position: relative;
+    p {
-		padding: 64px 64px 24px 64px;
+      margin-top: 0;
-		border: 1px solid #FFF;
+      margin-bottom: 16px;
-		background-color: #F5F5F5;
+      font-size: 12px;
-		z-index: 40;
+      line-height: 1.4em;
-	}
+    }
-	h1 {
-		margin: 16px 0;
-		color: #1E1E1E;
-		font-size: 24px;
-		line-height: 1.4em;
-		font-weight: normal;
-	}
-	p {
-		margin-top: 0;
-		margin-bottom: 16px;
-		font-size: 12px;
-		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 {
+    .marked {
-	padding-left: 1em;
+      padding-left: 1em;
-	text-indent: -1em;
+      text-indent: -1em;
-	text-align: center;
+      text-align: center;
-}
+    }
-.marked::before { content: "*\0000a0" }
+    .marked::before { content: "*\0000a0" }
-.decent { color: #666 }
+    .decent { color: #666 }
-a {
+    a {
-	color: #000;
+      color: #000;
-	text-decoration: none;
+      text-decoration: none;
-}
+    }
-a:hover {
+    a:hover {
-	color: #F4F9FA;
+      color: #F4F9FA;
-	background-color: #0C85FF;
+      background-color: #0C85FF;
-	text-decoration: none;
+      text-decoration: none;
-}
+    }
+  }
 }