demo.2

- restructured input files
- sorted gulpfile and separated old stuff
- next up are node module updates

source/code/hippie/functions.js

@@ -1,4 +1,4 @@
-'use strict';
+"use strict";
 
 function setup() {
 	if($('#js_tph').length && full_view_hover) {

source/code/hippie/global.js

@@ -1,4 +1,4 @@
-'use strict';
+"use strict";
 
 // DOM ready
 // ------------------------------------------------------------------------------
@@ -22,9 +22,9 @@ $( document ).ready(function() {
 		function() {
 			var $this = $(this);
 
-			if($(this).attr("emmet")){
-
-			}
+			// if($(this).attr("emmet")){
+			//
+			// }
 
 			$(this).next(".exp_pop").show();
 		}, function() {
@@ -47,11 +47,11 @@ $( document ).ready(function() {
 	$(".exp_help_btn").click(function(e){
 		var $wrap, $pop;
 
-		if(exp_mode != true){
+		if(exp_mode !== true){
 			exp_mode = true;
 
 			$(".js_pop").each(function(i, e){
-				if($(this).css("position") == "static") {
+				if($(this).css("position") === "static") {
 					$(this).addClass("js_changed_pos");
 					$(this).css("position", "relative");
 				}
@@ -70,7 +70,7 @@ $( document ).ready(function() {
 				$(this).after($pop);
 				if($(this).hasClass("js_changed_pos")){
 					$(this).css("position", "");
-					if($(this).attr("style") == "") {
+					if($(this).attr("style") === "") {
 						$(this).removeAttr("style");
 					}
 					$(this).removeClass("js_changed_pos");
@@ -112,14 +112,14 @@ $( document ).ready(function() {
 	var i = 0;
 	$( ".pass-def dd" ).each(function() {
 		$( this ).find( "li" ).each(function( index ) {
-			if ( 0 == $( this ).children( "ul" ).length ) {
+			if ( 0 === $( this ).children( "ul" ).length ) {
 				//console.log( index + ": " + $( this ).text() );
 				var tempContent = $( this ).html();
 				//$( this ).html( "<span class=\"list-count\"></span>" );
 				$( this ).html( tempContent +"<span class=\"list-count\">"+ i +"</span>" );
 				i++;
 			}
-		})
+		});
 	});
 
 

source/code/hippie/variables.js

@@ -1,4 +1,4 @@
-'use strict';
+"use strict";
 
 var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
 var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

source/data.json

@@ -4,6 +4,10 @@
       "href": "demo/intro.html",
       "text": "Intro"
     },
+    {
+      "href": "demo/elements.html",
+      "text": "Elements"
+    },
     {
       "href": "demo/os.html",
       "text": "OS"
@@ -18,10 +22,6 @@
     }
   ],
   "links": [
-    {
-      "href": "elements.html",
-      "text": "Elements"
-    },
     {
       "href": "blank.html",
       "text": "Blank"

source/style/_demo_config.scss

@@ -1,4 +1,6 @@
 // Override for configuration file
+// All variables setup with !default in gloabl/_config.scss can be used
 // ------------------------------------------------------------------------------
 
+// $basic_back_color: yellow;
 // $basic_link_color: magenta;

source/style/demo.scss

@@ -0,0 +1,16 @@
+// Start a new project by creating YOUR-PROJECT.scss and _YOUR-CONFIG.scss
+// Then import your config and hippie
+// NOTE // No css rules allowed in here
+// ------------------------------------------------------------------------------
+@import "demo_config";
+@import "hippie/hippie";
+
+
+// Additional Modules and variables
+// in dependency to other basic styles
+// could be defined here
+// -----------------------------------------------------------------------------
+@import "modules/demo/demo_module";
+// @import "modules/YOUR-MODULE/YOUR-FILES";
+// New
+@import "new";

source/style/example.scss

@@ -1,5 +0,0 @@
-// Add hippie
-// ------------------------------------------------------------------------------
-@import "hippie";
-
-// NOTE // No css rules allowed in here

source/style/hippie/_basic.scss

@@ -1,30 +1,7 @@
-/*
- * # TABLE OF CONTENTS
- *
- * - Reset
- * - Global functions and mixins
- * - Configuration
- * - Special modules
- * - Basic styles
- *   - Common
- *   - Typography
- *
- *   - Sections
- *   - Grouping
- *   - Textlevel
- *   - Embedded
- *   - Tables
- *   - Interactive
- * - Modules
- *
- */
-
-
 // Reset
 // Use a file outside of hippie i.e. vendor/normalize.css
 // -----------------------------------------------------------------------------
 @import "../../vendor/normalizecss/normalize.css";
-// @import "vendor/YOUR-FILES.css";
 
 
 
@@ -39,26 +16,20 @@
 // Fonts
 // Use a central file outside of hippie for font definitions with @font-face
 // -----------------------------------------------------------------------------
-// @import "vendor/fonts.css";
+// @import "../../vendor/fonts.css";
 
 
 
 // Global configuration with default values
-// Adjustments can be made by copying values from _config.scss to _override.scss
-// Be careful though changes will get lost if hippie gets updated
 // -----------------------------------------------------------------------------
-// @import "global/default"; // DO NOT EDIT
-@import "settings"; // EDIT
-@import "global/config"; // DO NOT EDIT
+@import "global/config";
 
 
 
 // Modules and variables
-// Additional modules can be defined here
 // -----------------------------------------------------------------------------
 @import "modules/vendor";
 // @import modules/all deprecated because of the new vendor mixin
-// @import "modules/YOUR-MODULE/YOUR-FILES";
 
 // Basic styles - this is the core of definitions
 // Individual styles can be added her
@@ -73,29 +44,10 @@
 @import "elements/embedded";
 @import "elements/tables";
 @import "elements/interactive";
-// @import "YOU-NAME-IT";
 
 // Individual Modules and variables
 // in dependency to other styles
-// Additional modules can be defined here
 // -----------------------------------------------------------------------------
 @import "modules/breakpoint/breakpoint_module";
-@import "modules/navigation/nav_module";
 @import "modules/tables/tables_module";
-@import "modules/card/card_module";
-@import "modules/editor/editor_module";
-@import "modules/explanation/explanation_module";
-@import "modules/print/print_module";
-// @import "modules/YOUR-MODULE/YOUR-FILES";
-
-
-
-// Demonstration
-@import "modules/demo/demo_module";
-
-
-
-// Not yet sorted
-@import "elements/new";
-
-// NOTE // No css rules allowed in here
+@import "modules/maintenance/maintenance_module";

source/style/hippie/_hippie.scss

@@ -0,0 +1,33 @@
+/*
+ * # TABLE OF CONTENTS
+ *
+ * - Reset
+ * - Global functions and mixins
+ * - Configuration
+ * - Special modules
+ * - Basic styles
+ *   - Common
+ *   - Typography
+ *
+ *   - Sections
+ *   - Grouping
+ *   - Textlevel
+ *   - Embedded
+ *   - Tables
+ *   - Interactive
+ * - Modules
+    - Breakpoint
+    - Tables
+    - Maintenance
+*
+ */
+@import "basic";
+
+// Additional Modules and variables
+// in dependency to other basic styles
+// -----------------------------------------------------------------------------
+@import "modules/navigation/nav_module";
+@import "modules/card/card_module";
+@import "modules/editor/editor_module";
+@import "modules/explanation/explanation_module";
+@import "modules/print/print_module";

source/style/maintenance.scss

@@ -1,102 +1,16 @@
-/*
- * # TABLE OF CONTENTS
- *
- * - Reset
- * - Global functions and mixins
- * - Configuration
- * - Special modules
- * - Basic styles
- *   - Common
- *   - Typography
- *
- *   - Sections
- *   - Grouping
- *   - Textlevel
- *   - Embedded
- *   - Tables
- *   - Interactive
- * - Modules
- *
- */
-
-
-// Reset
-// Use a file outside of hippie i.e. vendor/normalize.css
-// -----------------------------------------------------------------------------
-@import "../vendor/normalizecss/normalize.css";
-// @import "normalize-css/normalize.css";
-// @import "vendor/YOUR-FILES.css";
-
-
-
-// Functions and Mixins
-// Important code constructions
-// -----------------------------------------------------------------------------
-@import "functions/all";
-@import "mixins/all";
-
-
-
-// Fonts
-// Use a central file outside of hippie for font definitions with @font-face
-// -----------------------------------------------------------------------------
-// @import "vendor/fonts.css";
-
-
-
-// Global configuration with default values
-// Adjustments can be made by copying values from _config.scss to _override.scss
-// Be careful though changes will get lost if hippie gets updated
-// -----------------------------------------------------------------------------
-// @import "global/default"; // DO NOT EDIT
-@import "settings"; // EDIT
-@import "global/config"; // DO NOT EDIT
-
-
-
-// Modules and variables
-// Additional modules can be defined here
-// -----------------------------------------------------------------------------
-// @import "modules/vendor";
-// @import modules/all deprecated because of the new vendor mixin
-// @import "modules/YOUR-MODULE/YOUR-FILES";
-
-// Basic styles - this is the core of definitions
-// Individual styles can be added her
-// -----------------------------------------------------------------------------
-@import "global/common";
-@import "elements/typography";
-// Following the w3c document element structure
-// https://w3c.github.io/html/index.html#contents
-@import "elements/sections";
-@import "elements/grouping";
-@import "elements/textlevel";
-@import "elements/embedded";
-@import "elements/tables";
-@import "elements/interactive";
-// @import "YOU-NAME-IT";
-
-// Individual Modules and variables
-// in dependency to other styles
-// Additional modules can be defined here
-// -----------------------------------------------------------------------------
-@import "modules/breakpoint/breakpoint_module";
-// @import "modules/navigation/nav_module";
-@import "modules/tables/tables_module";
-// @import "modules/card/card_module";
-// @import "modules/editor/editor_module";
-// @import "modules/explanation/explanation_module";
-// @import "modules/print/print_module";
-// @import "modules/YOUR-MODULE/YOUR-FILES";
-
-
-
-// Demonstration
-@import "modules/maintenance/maintenance_module";
-
-
-
-// Not yet sorted
-// @import "elements/new";
-
+// Start a new project by creating YOUR-PROJECT.scss and _YOUR-CONFIG.scss
+// Then import your config and hippie
 // NOTE // No css rules allowed in here
+// ------------------------------------------------------------------------------
+@import "demo_config";
+@import "hippie/basic";
+
+
+// Additional Modules and variables
+// in dependency to other basic styles
+// could be defined here
+// -----------------------------------------------------------------------------
+@import "modules/demo/demo_module";
+// @import "modules/YOUR-MODULE/YOUR-FILES";
+// New
+@import "new";

source/templates/default.njk

@@ -17,7 +17,7 @@
   <link rel="icon" href="./favicon.ico" type="image/vnd.microsoft.icon">
   <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
 
-  <link rel="stylesheet" type="text/css" media="all" href="./css/example.css"/>
+  <link rel="stylesheet" type="text/css" media="all" href="./css/demo.css"/>
   <!-- <link rel="stylesheet" type="text/css" media="print" href="./css/print.css"/> -->
   {% endblock %}
 </head>

source/templates/demo.njk

@@ -28,7 +28,7 @@
   <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
 
   <!-- <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,500italic,700' rel='stylesheet' type='text/css'> -->
-  <link rel="stylesheet" type="text/css" media="all" href="../css/example.css"/>
+  <link rel="stylesheet" type="text/css" media="all" href="../css/demo.css"/>
   <!-- <link rel="stylesheet" type="text/css" media="print" href="./css/print.css"/> -->
   {% endblock %}
 </head>