gulp and file structure overhaul

new gulp setup
including new npm packages
new file structure
moved all development files to source/
used files are in build/ now

source/code/functions.js

@@ -0,0 +1,57 @@
+function setup() {
+	if($('#js_tph').length && full_view_hover) {
+		// $('body').prepend("<div id=\"js_tph\" class=\"layer__hover hover_full_view_change\"></div>");
+		$('#js_tph').addClass("hover_full_view_change");
+	}
+}
+
+// get document coordinates of the element
+// function getCoords(elem) {
+//   let box = elem.getBoundingClientRect();
+//
+//   return {
+//     top: box.top + pageYOffset,
+//     left: box.left + pageXOffset
+//   };
+// }
+
+// https://stackoverflow.com/a/488073/1444149
+function Utils() {
+
+}
+
+Utils.prototype = {
+    constructor: Utils,
+    isElementInView: function (element, fullyInView) {
+        var pageTop = $(window).scrollTop();
+        var pageBottom = pageTop + $(window).height();
+        var elementTop = $(element).offset().top;
+        var elementBottom = elementTop + $(element).height();
+
+        if (fullyInView === true) {
+            return ((pageTop < elementTop) && (pageBottom > elementBottom));
+        } else {
+            return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
+        }
+    }
+};
+
+var Utils = new Utils();
+
+// TEST
+
+function scrollNav() {
+	$('.nav a').click(function(){
+		//Toggle Class
+		$(".active").removeClass("active");
+		$(this).closest('li').addClass("active");
+		var theClass = $(this).attr("class");
+		$('.'+theClass).parent('li').addClass('active');
+		//Animate
+		$('html, body').stop().animate({
+				scrollTop: $( $(this).attr('href') ).offset().top - 160
+		}, 400);
+		return false;
+	});
+	$('.scrollTop a').scrollTop();
+}

source/code/global.js

@@ -0,0 +1,143 @@
+// DOM ready
+// ------------------------------------------------------------------------------
+$( document ).ready(function() {
+
+	// Setup
+	// ------------------------------------------------------------------------------
+
+	setup();
+
+
+
+	// Modules
+	// ------------------------------------------------------------------------------
+
+	// Explanation module scripts
+	var exp_mode = false;
+
+	// Displays explanation popup
+	$(".js_pop").hover(
+		function() {
+			var $this = $(this);
+
+			if($(this).attr("emmet")){
+
+			}
+
+			$(this).next(".exp_pop").show();
+		}, function() {
+			$(this).next(".exp_pop").hide();
+		}
+	).mousemove(
+		function(ev) {
+			$(this).next(".exp_pop").css({
+				"top": ev.pageY - $(this).next(".exp_pop").outerHeight() - 4,
+				"left": ev.pageX + 8
+			});
+		}
+	);
+
+	// WIP Activates layer with explanation elements
+	// Besser ::after oder ::before benutzen
+	$(".exp_help_btn").click(function(e){
+		var $wrap, $pop;
+
+		if(exp_mode != true){
+			exp_mode = true;
+
+			$(".js_pop").each(function(i, e){
+				if($(this).css("position") == "static") {
+					$(this).addClass("js_changed_pos");
+					$(this).css("position", "relative");
+				}
+
+				$pop = $(this).next(".exp_pop").detach();
+				$wrap = $(this).wrap("<span class=\"exp_wrap\"></span>").parent().prepend("<span class=\"exp_marker_pop\"></span>");
+				$wrap.after($pop);
+			});
+
+		} else {
+			$(".js_pop").each(function(i, e){
+				$wrap = $(this).parent(".exp_wrap");
+				$pop = $wrap.next(".exp_pop").detach();
+				$wrap.find(".exp_marker_pop").remove();
+				$(this).unwrap(".exp_wrap");
+				$(this).after($pop);
+				if($(this).hasClass("js_changed_pos")){
+					$(this).css("position", "");
+					if($(this).attr("style") == "") {
+						$(this).removeAttr("style");
+					}
+					$(this).removeClass("js_changed_pos");
+				}
+			});
+
+			exp_mode = false;
+
+		}
+		console.log("Explanation mode: "+ exp_mode);
+	});
+
+	//	WIP Scroll to top
+	$('#js_scrolltop').click(function(event) {
+		console.log('scroll to the top');
+		event.preventDefault();
+		// $('body').scrollTop();
+		$('body').animate({scrollTop: 0}, basic_ease, function() {
+			 console.log('arrived at top');
+		});
+	});
+	$('#js_scrolldown').click(function(event) {
+		console.log('scroll down');
+		event.preventDefault();
+		$('body').animate({scrollTop: $(document).height()}, basic_ease * 2, function() {
+			 console.log('arrived at bottom');
+		});
+	});
+
+
+
+	$( "#gameIcon" ).click(function(event) {
+		event.preventDefault();
+		$( this ).clone().appendTo( "#gameDetail" );
+		$( this ).siblings().clone().appendTo( "#gameDetail" );
+		$( "#gameDetail" ).removeClass( "magic" );
+	});
+
+	var i = 0;
+	$( ".pass-def dd" ).each(function() {
+		$( this ).find( "li" ).each(function( index ) {
+			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++;
+			}
+		})
+	});
+
+
+
+});
+
+
+
+// Scroll
+// ------------------------------------------------------------------------------
+$( document ).scroll(function() {
+
+	// Toggle navigation elements
+	doc_pos_y = $( document ).scrollTop();
+	// console.log(doc_pos_y);
+	var h = scroll_y_margin;
+	// var demo_margin = $('.header__fix');
+	if (doc_pos_y > h) {
+		$('#js_scrolltop').parent().removeClass('magic');
+	} else {
+		$('#js_scrolltop').parent().addClass('magic');
+	}
+
+
+
+});

source/code/variables.js

@@ -0,0 +1,12 @@
+var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
+var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
+
+var full_view_hover = false;
+
+var doc_pos_y = 0;
+var basic_ease = 600;
+var scroll_y_margin = h;
+
+
+// TEST
+// var fixed_containers = [];

source/style/_abovethefold.scss

@@ -0,0 +1,23 @@
+/*
+ * # TABLE OF CONTENTS
+ *
+ * - Reset
+ * - Priority CSS Rules
+ *
+ */
+
+
+// Reset
+// Use a file outside of hippie i.e. vendor/normalize.css
+// -----------------------------------------------------------------------------
+// @import "vendor/normalize.css";
+
+
+
+/*
+ * # NOTE
+ *
+ * CSS rules for content which is presented immediately 
+ * to the screen and needs priority loading
+ *
+ */

source/style/_hippie.scss

@@ -0,0 +1,101 @@
+/*
+ * # 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/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/demo/demo_module";
+
+
+
+// Not yet sorted
+@import "elements/new";
+
+// NOTE // No css rules allowed in here

source/style/_settings.scss

@@ -0,0 +1,4 @@
+// Override for configuration file
+// ------------------------------------------------------------------------------
+
+// $basic_link_color: magenta;

source/style/elements/_embedded.scss

@@ -0,0 +1,47 @@
+// Images
+// -----------------------------------------------------------------------------
+
+img {
+	vertical-align: top;
+}
+
+picture {
+
+}
+
+source {
+
+}
+
+
+
+// Other stuff
+// -----------------------------------------------------------------------------
+
+iframe {
+
+}
+
+embed {
+
+}
+
+object {
+
+}
+
+video {
+
+}
+
+audio {
+
+}
+
+map {
+
+}
+
+area {
+
+}

source/style/elements/_grouping.scss

@@ -0,0 +1,267 @@
+// Basic content
+// -----------------------------------------------------------------------------
+
+// Paragraph
+p {
+	@extend %basic;
+	margin: $basic_space 0;
+	code {
+		padding: $tiny_space $half_space;
+		font-size: 1em;
+		line-height: 1;
+	}
+}
+
+// Address
+address {
+
+}
+
+// Line
+hr {
+	margin: $space_3 auto;
+	border-width: $basic_border_width 0 0;
+	border-style: solid;
+	border-color: $darkest_color;
+}
+
+.hr__hidden {
+	@extend hr;
+	border-color: transparent;
+}
+
+.hr__dotted {
+	@extend hr;
+	border-style: dotted;
+}
+
+// Preformat
+pre {
+	@extend %basic_mono;
+}
+
+.pre__code {
+	// overflow-x: scroll;
+	border-color: rgba($brightest_color,.1);
+	border-style: dotted;
+	border-width:  0 0 0 $border_width_4;
+	border-radius: $basic_corner;
+	padding: $basic_space;
+	background-color: rgba($brightest_color,.1);
+	code {
+		background-color: transparent;
+	}
+}
+
+// Quote
+blockquote {
+	margin: $basic_space $basic_indent;
+}
+
+.quote__mark {
+	p::before {
+		content: "\201E \0020";
+	}
+	p::after {
+		content: "\201C \0020";
+	}
+	.quote__source {
+		&::before, &::after {
+			content: "";
+		}
+	}
+}
+
+// List
+dl, ul, ol {
+	margin: $double_space 0 $basic_space;
+}
+
+ul, ol {
+	padding-left: $basic_indent;
+}
+
+li, dt, dd {
+	@extend %basic;
+}
+
+li, dd {
+	// margin-bottom: $basic_space;
+}
+
+dd {
+	margin-left: $basic_indent;
+}
+
+ul {
+	li {
+		list-style: square;
+	}
+}
+
+.list__dash {
+	li {
+		list-style: none;
+		position: relative;
+
+		&::before {
+			content: "_";
+			position: absolute;
+			left: -1em;
+		}
+	}
+}
+
+.list__link {
+	li {
+		margin-bottom: $tiny_space * 2;
+		text-transform: uppercase;
+		a {
+			display: block;
+			padding: $basic_padding;
+			color: $basic_font_color;
+			img {
+				margin-right: $basic_space;
+				padding-bottom: .2em;
+				vertical-align: text-bottom;
+			}
+			&:active,
+			&:focus,
+			&:hover {
+				background-color: $basic_action_color;
+				color: $basic_highlight_color;
+			}
+		}
+	}
+}
+
+.list__horizontal {
+	overflow: auto;
+	li {
+		@extend .float_space_left;
+	}
+}
+
+// Embedded
+figure {
+	margin: $double_space $basic_indent;
+}
+
+figcaption {
+	@extend %basic;
+}
+
+
+
+// Special elements
+// -----------------------------------------------------------------------------
+
+main {
+
+}
+
+div {
+
+}
+
+.box__page {
+	height: 100vh;
+}
+
+.box__info {
+	padding: $double_space $basic_indent;
+	border-right: $basic_space solid rgba($echo_color, .6);
+	background-color: rgba($echo_color, .1) !important;
+}
+
+.box__main_indent {
+	margin-left: 25%;
+}
+
+.box__full_width {
+	// position: relative;
+	// overflow: hidden;
+	// width: 100%;
+}
+
+
+// Inline
+.box__inline_left {
+	@extend .float_space_left;
+	// padding: $basic_space / 2;
+}
+
+
+// Columns
+.block__column_line {
+	column-rule: $basic_border;
+}
+.block__column_2, .block__column_3 {
+	@extend p;
+}
+.block__column_2 {
+	column-count: 2;
+	column-gap: $space_3;
+}
+.block__column_3 {
+	column-count: 3;
+	column-gap: $space_4;
+}
+
+
+// Space and placeholders
+.box__space {
+	position: relative;
+	width: 100%;
+}
+
+.box__cube {
+	float: left;
+	display: table;
+	width: $space_4;
+	text-align: center;
+	vertical-align: middle;
+	span {
+		display: table-cell;
+	}
+}
+
+.box__placeholder {
+	width: 100%;
+	height: $space_4;
+	border: $border_width_4 solid rgba($darkest_color,.1);
+	border-radius: $basic_corner;
+	padding: $basic_space;
+	background-color: rgba($darkest_color,.1);
+	svg {
+		vertical-align: top;
+	}
+}
+
+.box__placeholder_bkg {
+	width: 100%;
+	height: $space_4;
+	border: $border_width_4 solid rgba($darkest_color,.1);
+	border-radius: $basic_corner;
+	padding: $basic_space;
+	/*data:[<mime type>][;charset=<charset>][;base64],<encoded data>*/
+	background: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0' y='0' width='100%' height='100%'><line x1='2%' y1='2%' x2='98%' y2='98%' stroke='#000' stroke-width='.5'/><line x1='0' y1='100%' x2='100%' y2='0' stroke='#000' stroke-width='.5'/></svg>") no-repeat;
+	background-color: rgba($darkest_color,.1);
+}
+
+
+// Data
+.box__file_tile {
+	@extend .float_space_left;
+}
+
+
+// Flex
+.flex__column_wrap {
+	@extend .flex;
+
+	.column {
+		@extend .flex__child;
+		flex-grow: 1;
+	}
+}

source/style/elements/_interactive.scss

@@ -0,0 +1,195 @@
+// Form basics
+// -----------------------------------------------------------------------------
+
+form {
+
+}
+
+fieldset {
+	margin: $high_margin;
+	padding: $basic_space;
+	border: $basic_border;
+}
+
+legend {
+	@extend %basic;
+	padding: 0 $half_space;
+}
+
+
+
+// Common
+// -----------------------------------------------------------------------------
+input, button, textarea {
+	margin: $io_margin;
+
+	&[disabled="disabled"],
+	&[disabled] {
+		cursor: not-allowed;
+	}
+}
+
+label {
+	@extend %basic;
+
+	input {
+		margin-left: $basic_space;
+	}
+}
+
+input {
+	color: $basic_io_font_color;
+
+	&[disabled="disabled"],
+	&[disabled] {
+		cursor: not-allowed;
+	}
+}
+
+@each $input in $basic_input_list, textarea {
+	#{$input} {
+		@extend %basic_mono;
+		border: $basic_io_border;
+		padding: $half_space;
+		background-color: $basic_io_back_color;
+
+		&:hover {
+			background-color: $basic_highlight_color;
+		}
+
+		&[readonly="readonly"],
+		&[readonly] {
+			border-color: darken($basic_io_border_color, 30%);
+			background-color: darken($basic_io_back_color, 30%);
+		}
+
+		&[disabled="disabled"],
+		&[disabled] {
+			border-color: transparent;
+		}
+	}
+}
+
+@each $input in $basic_input_list {
+
+	#{$input} {
+		line-height: 1;
+	}
+}
+
+@each $input in $basic_button_list {
+	#{$input} {
+		padding: $basic_padding;
+	}
+}
+
+label + input,
+.input__label_right {
+	margin: 0 $basic_space;
+}
+
+.label__table {
+	display: table;
+
+	input {
+		display: table-cell;
+	}
+}
+
+
+
+.input__default {
+
+	label {
+		@extend .label__table;
+		margin: $half_space 0;
+
+		input {
+			padding: $half_space ($half_space + 1);
+			border-style: solid;
+			border-color: transparent;
+			background-color: $basic_io_back_color;
+			color: $basic_io_font_color;
+
+			&:hover {
+				background-color: $darkest_color;
+				color: $brightest_color;
+			}
+		}
+	}
+}
+
+
+
+// More
+// -----------------------------------------------------------------------------
+
+textarea {
+
+}
+
+button {
+
+}
+
+select {
+
+}
+
+datalist {
+
+}
+
+optgroup {
+
+}
+
+option {
+
+}
+
+output {
+
+}
+
+progress {
+
+}
+
+meter {
+
+}
+
+
+
+// Interactive elements
+// -----------------------------------------------------------------------------
+
+details {
+
+}
+
+summary {
+
+}
+
+menu {
+
+}
+
+menuitem {
+
+}
+
+dialog {
+
+}
+
+
+
+// Canvas
+// -----------------------------------------------------------------------------
+
+canvas {
+
+}

source/style/elements/_new.scss

@@ -0,0 +1,38 @@
+.test {
+	li::after {
+		content: "";
+		display: block;
+		height: 16px;
+	}
+}
+
+.front_color_1 { color: $alpha_color; &::after { background-color: $alpha_color; } }
+.front_color_2 { color: $bravo_color; &::after { background-color: $bravo_color; }  }
+.front_color_3 { color: $charlie_color; &::after { background-color: $charlie_color; }  }
+.front_color_4 { color: $delta_color; &::after { background-color: $delta_color; }  }
+.front_color_5 { color: $echo_color; &::after { background-color: $echo_color; }  }
+
+.back_color_1 { background-color: $alpha_color;}
+.back_color_2 { background-color: $bravo_color;}
+.back_color_3 { background-color: $charlie_color;}
+.back_color_4 { background-color: $delta_color;}
+.back_color_5 { background-color: $echo_color;}
+
+%label {
+	padding: 0 $half_space;
+}
+
+.label_1 {
+	@extend %label;
+	@extend .back_color_1;
+}
+
+.label_2 {
+	@extend %label;
+	@extend .back_color_2;
+}
+
+.label_3 {
+	@extend %label;
+	@extend .back_color_3;
+}

source/style/elements/_sections.scss

@@ -0,0 +1,145 @@
+// Document
+// -----------------------------------------------------------------------------
+
+html {
+	height: 100%;
+}
+
+
+
+
+// Basic sections
+// -----------------------------------------------------------------------------
+
+body {
+	position: relative;
+	box-sizing: $box_sizing;
+	font-family: $primary_font_family;
+	font-size: $basic_size;
+	line-height: $basic_line;
+	color: $basic_font_color;
+	background-color: $basic_back_color;
+
+	*,
+	::before,
+	::after {
+		box-sizing: inherit;
+	}
+
+	&:hover {
+
+		.layer__hover {
+			background-color: transparent;
+		}
+	}
+}
+
+article {
+
+}
+
+section {
+
+}
+
+.sec__main_center {
+	width: $basic_width;
+	margin: 0 auto;
+	padding-top: $space_3;
+
+	@include forTabletPortraitUp {
+		width: $width_small;
+	}
+	@include forTabletLandscapeUp {
+		width: $width_medium;
+	}
+	@include forBigDesktopUp {
+		width: $width_large;
+	}
+}
+
+aside {
+
+	&.right + section {
+		margin-right: calc(#{$basic_aside_width} + #{$basic_space});
+	}
+
+	&.left + section {
+		margin-left: calc(#{$basic_aside_width} + #{$basic_space});
+	}
+}
+
+
+nav {
+
+}
+
+aside {
+	width: $basic_aside_width;
+
+	&.left {
+		float: left;
+	}
+
+	&.right {
+		float: right;
+	}
+
+	*:first-child {
+		margin-top: 0;
+	}
+}
+
+header {
+
+}
+
+.header__page {
+	overflow: auto;
+}
+
+footer {
+
+}
+
+// Headings
+// -----------------------------------------------------------------------------
+
+h1, h2, h3, h4, h5, h6 {
+
+}
+
+h1 {
+	@extend %head_1;
+	margin: $space_5 0 $space_3;
+}
+
+h2 {
+	@extend %head_2;
+	margin: $space_4 0 $space_3;
+}
+
+h3 {
+	@extend %head_3;
+	margin: $double_space 0 $double_space;
+	text-transform: uppercase;
+}
+
+h4 {
+	@extend %head_3;
+	margin: $double_space 0 $double_space;
+	text-transform: none;
+}
+
+h5 {
+	@extend %head_4;
+	margin: $double_space 0 $basic_space;
+	text-transform: none;
+}
+
+h6 {
+	@extend %basic;
+	margin: $basic_space 0;
+	text-transform: none;
+	font-weight: bold;
+}

source/style/elements/_tables.scss

@@ -0,0 +1,80 @@
+// Table
+// -----------------------------------------------------------------------------
+
+table {
+	margin: $high_margin;
+	border: $basic_border;
+	border-collapse: collapse;
+}
+
+th, td {
+	@extend %basic;
+	padding: $half_space;
+}
+
+th {
+	border: $basic_border;
+	text-align: left;
+}
+
+.precol {
+	border-right: $basic_border;
+}
+
+td {
+	border-right: $cell_border;
+	border-bottom: $cell_border;
+}
+
+td:last-child {
+	border-right: 0;
+}
+
+tr:last-child td {
+	border-bottom: 0;
+}
+
+tfoot {
+	tr:first-child td {
+		border-top: $basic_border;
+	}
+}
+
+.table__blank {
+	border: $basic_border_width solid transparent;
+
+	th, td {
+	border: $basic_border_width solid transparent;
+	}
+}
+
+.table__free {
+	border: $basic_border_width solid transparent;
+}
+
+.table__stripe {
+	td {
+	border-top: 0;
+	border-bottom: 0;
+	}
+
+	tr:nth-child(even) td {
+	background-color: rgba($brightest_color, .1);
+	}
+}
+
+.table__fix {
+	table-layout: fixed;
+}
+
+caption {
+	@extend p;
+	padding: $half_space 0;
+	border: $dotted_border;
+	text-align: center;
+}
+
+// Data
+.table__file_simple {
+	@extend .width_full;
+}

source/style/elements/_textlevel.scss

@@ -0,0 +1,166 @@
+// Links
+// -----------------------------------------------------------------------------
+
+a {
+	color: $basic_link_color;
+	//  color: lighten($basic_action_color, 20%);
+	text-decoration: none;
+
+	&:active,
+	&:focus,
+	&:hover {
+		color: $basic_highlight_color;
+	}
+}
+
+.a__line {
+	border-bottom-width: $tiny_space;
+	border-bottom-style: dotted;
+	border-color: $basic_border_color;
+	background-color: transparent;
+	color: $basic_font_color;
+	transition: color $basic_duration $basic_timing;
+
+	&:active,
+	&:focus,
+	&:hover {
+		background-color: $basic_action_color;
+		color: $basic_highlight_color;
+	}
+}
+
+.a__button {
+	@extend %default_button;
+}
+
+.a__button_text {
+	@extend %default_button;
+	padding: $wide_padding;
+	background-color: transparent;
+	color: $basic_font_color;
+}
+
+.a__button_border {
+	@extend .a__button_text;
+	border: $cell_border;
+}
+
+
+// Other elements
+// -----------------------------------------------------------------------------
+
+i, em {
+	font-style: italic;
+}
+
+.i__bright {
+	font-style: normal;
+	color: $brightest_color;
+}
+
+b, strong {
+	font-weight: 500; // TODO maybe bolder
+}
+
+small {
+
+}
+
+
+// Cite
+cite {
+	font-style: italic;
+}
+
+q {
+
+}
+
+dfn {
+
+}
+
+abbr {
+
+}
+
+data {
+
+}
+
+time {
+
+}
+
+// Code
+code {
+	@extend %basic_mono;
+	color: lighten($basic_font_color, 12%);
+	background-color: rgba($brightest_color,.1);
+}
+.code__solo {
+	@extend %basic_mono;
+	padding: $tiny_space $half_space;
+	color: $basic_font_color;
+}
+
+samp {
+
+}
+
+kbd {
+
+}
+
+sub, sup {
+
+}
+
+u {
+
+}
+
+// Marks
+mark {
+	background-color: $alpha_color;
+}
+.mark__cursor {
+	color: $basic_highlight_color;
+	background-color: $darkest_color;
+}
+::-moz-selection {
+	color: $basic_highlight_color;
+	background-color: $darkest_color;
+}
+::selection {
+	color: $basic_highlight_color;
+	background-color: $darkest_color;
+}
+
+span {
+
+}
+.span__solo {
+	@extend %solo;
+}
+
+br {
+
+}
+
+wbr {
+
+}
+
+
+
+// Edits
+// -----------------------------------------------------------------------------
+
+ins {
+
+}
+
+del {
+
+}

source/style/elements/_typography.scss

@@ -0,0 +1,63 @@
+// Basic styles
+// -----------------------------------------------------------------------------
+
+%basic {
+	font-family: $primary_font_family;
+	font-size: $text_size_1;
+	line-height: $text_line_1;
+}
+
+%basic_mono {
+	font-family: $third_font_family;
+	font-size: $text_size_1;
+	line-height: $text_line_1;
+}
+
+%basic_print {
+	font-family: $third_font_family;
+	font-size: $text_size_1;
+	line-height: $text_line_1;
+}
+
+%head_all {
+	color: $basic_head_color;
+}
+
+%head_1 {
+	font-family: $secondary_font_family;
+	font-size: $head_size_1;
+	font-weight: 300;
+	line-height: $head_line_1;
+}
+
+%head_2 {
+	font-family: $secondary_font_family;
+	font-size: $head_size_2;
+	font-weight: 300;
+	line-height: $head_line_2;
+}
+
+%head_3 {
+	font-family: $secondary_font_family;
+	font-size: $head_size_3;
+	font-weight: 300;
+	line-height: $head_line_3;
+}
+
+%head_4 {
+	font-family: $secondary_font_family;
+	font-size: $head_size_4;
+	font-weight: 300;
+	line-height: $head_line_4;
+}
+
+%solo {
+	@extend %basic;
+	color: $basic_font_color;
+}
+
+%short {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	-o-text-overflow: ellipsis; // vendor
+}

source/style/example.scss

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

source/style/functions/_all.scss

@@ -0,0 +1,3 @@
+@import "color";
+@import "shade";
+@import "tint";

source/style/functions/_color.scss

@@ -0,0 +1,13 @@
+@function createColorMap($color, $percentage, $opacity) {
+  $map: (
+    base: $color,
+    light: lighten($color, $percentage),
+    dark: darken($color, $percentage),
+    trans: transparentize($color, $opacity)
+  );
+  @return $map;
+}
+
+@function basic_color($key: 'alpha') {
+  @return map-get($color_palette, $key);
+}

source/style/functions/_shade.scss

@@ -0,0 +1,24 @@
+@charset "UTF-8";
+
+// Mixes a color with black.
+//
+// @param {Color} $color
+//
+// @param {Number (Percentage)} $percent
+//   The amount of black to be mixed in.
+//
+// @example scss - Usage
+//   .element {
+//     background-color: shade(#0c85ff, 60%);
+//   }
+//
+// @example css - CSS Output
+//   .element {
+//     background-color: #074f99;
+//   }
+//
+// @return {Color}
+
+@function shade($color, $percent) {
+  @return mix(#000, $color, $percent);
+}

source/style/functions/_tint.scss

@@ -0,0 +1,24 @@
+@charset "UTF-8";
+
+// Mixes a color with white.
+//
+// @param {Color} $color
+//
+// @param {Number (Percentage)} $percent
+//   The amount of white to be mixed in.
+//
+// @example scss - Usage
+//   .element {
+//     background-color: tint(#0c85ff, 40%);
+//   }
+//
+// @example css - CSS Output
+//   .element {
+//     background-color: #9dceff;
+//   }
+//
+// @return {Color}
+
+@function tint($color, $percent) {
+  @return mix(#fff, $color, $percent);
+}

source/style/global/_common.scss

@@ -0,0 +1,205 @@
+// General layout attributes
+// ------------------------------------------------------------------------------
+%size_content {
+	box-sizing: content-box;
+}
+
+%size_content_solo {
+	@extend %size_content;
+
+	*,
+	::before,
+	::after {
+		box-sizing: $box_sizing;
+	}
+}
+
+%hidden {
+	display: none;
+}
+
+.magic {
+	@extend %hidden;
+}
+
+.center_50 {
+	margin-right: 25%;
+	margin-left: 25%;
+}
+.center_25 {
+	margin-right: 37.5%;
+	margin-left: 37.5%;
+}
+
+.width_full {
+	width: 100%;
+	margin-right: 0;
+	margin-left: 0;
+}
+
+.height_basic {
+	height: 1024px;
+}
+
+.txt_center {
+	text-align: center !important;
+}
+.txt_right {
+	text-align: right !important;
+}
+.txt_left {
+	text-align: left !important;
+}
+
+.space_right {
+	margin-right: $space_3;
+}
+
+
+
+// Clearing and floating
+// ------------------------------------------------------------------------------
+.clear {
+	clear: both;
+
+	&::before,
+	&::after {
+		clear: both;
+	}
+}
+
+.overflow {
+	overflow: auto;
+}
+
+.float_space_left {
+	float: left;
+	margin-right: $space_3;
+}
+
+.float_half_size {
+	float: left;
+	width: 50%;
+}
+
+.x_long {
+	overflow-x: scroll;
+}
+
+
+// Positioned elements
+// ------------------------------------------------------------------------------
+%full_viewport {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100vw;
+	height: 100vh;
+}
+
+%full_parent {
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	// width: 100%;
+	// height: 100%;
+}
+
+.pos_abs {
+	position: absolute;
+}
+
+.pos_rel {
+	position: relative;
+}
+
+.pos_fix {
+	position: fixed;
+}
+
+.pos_bottom {
+	bottom: 0;
+}
+
+.pos_full_view {
+	@extend %full_viewport;
+	background-color: rgba($alpha_color, .5);
+}
+
+.pos_full_page {
+	@extend %full_parent;
+	background-color: rgba($charlie_color, .25);
+}
+
+.hover_back_change {
+	background-color: darken($basic_back_color, 10%);
+	transition: background-color .2s ease-in-out;
+
+	&:hover {
+		background-color: $basic_back_color;
+	}
+}
+
+.hover_full_view_change {
+	@extend %full_viewport;
+	z-index: $z_heaven;
+	background-color: transparentize($darkest_color, .5);
+	transition: background-color .2s ease-in-out;
+	pointer-events: none;
+}
+
+.flex {
+	display: flex;
+}
+
+.flex__wrap {
+	@extend .flex;
+	flex-wrap: wrap;
+}
+
+.flex__row {
+	@extend .flex;
+	flex-direction: column;
+	// align-items: flex-start;
+	justify-content: flex-start;
+}
+
+.flex__child {
+	flex:  0 1 auto;
+}
+
+.flex__child_one {
+	flex:  1;
+}
+
+.flex__child_end {
+	align-self: flex-end;
+}
+
+
+// Colors
+// ------------------------------------------------------------------------------
+.txt_light_color {
+	color: darken($basic_back_color, 10%);
+}
+
+
+
+// Input
+// ------------------------------------------------------------------------------
+%default_button {
+	display: inline-block;
+	padding: $basic_padding;
+	background-color: transparentize($basic_link_color, .8);
+	border-radius: $basic_corner;
+
+	&:active,
+	&:focus,
+	&:hover {
+		background-color: rgba($basic_highlight_color, .1);
+		color: $basic_highlight_color;
+		border-color: transparent;
+	}
+}

source/style/global/_config.scss

@@ -0,0 +1,441 @@
+// Default configuration
+// ------------------------------------------------------------------------------
+
+
+// TEXT
+// ------------------------------------------------------------------------------
+
+$basic_size: 17px !default;
+$basic_print_size: 10pt !default;
+
+$size_1: $basic_size * 4;
+
+$basic_line: 1;
+
+// $i: 1;
+// @while $i < 7 {
+//   %head_#{$i} { width: 2em * $i; }
+//   $i: $i + 1;
+// }
+// $head_sizes: (h1: 3.1em, h2: 2.5em, h3: 1.8em, h4: 1.35em);
+//
+// @each $head, $size in $head_sizes {
+// 	#{$head} {
+// 		font-size: $size;
+// 	}
+// }
+
+// $head_sizes: (
+//   basic: (
+//     'h1': ('font-size': 24),
+//     'h2': ('font-size': 20),
+//     'h3': ('font-size': 19),
+//     'h4': ('font-size': 18),
+//     'h5': ('font-size': 17),
+//     'h6': ('font-size': 16),
+//   ),
+//   print: (
+//     'h1': ('font-size': 48),
+//     'h2': ('font-size': 40),
+//     'h3': ('font-size': 31),
+//     'h4': ('font-size': 25),
+//     'h5': ('font-size': 20),
+//     'h6': ('font-size': 16),
+//   ),
+// );
+
+$head_size_1: 3.1em !default;
+$head_size_2: 2.5em !default;
+$head_size_3: 1.8em !default;
+$head_size_4: 1.35em !default;
+
+$text_size_1: 1em;
+$text_size_2: 20;
+
+$text_line_1: 1.5 !default;
+$head_line_1: $text_line_1;
+$head_line_2: $text_line_1;
+$head_line_3: $text_line_1;
+$head_line_4: $text_line_1;
+
+$print_font_family: #{'Times New Roman', times} !default;
+$monospace_font_family: #{'Courier New', monospace} !default;
+
+$primary_font_family: #{'Roboto', 'Segoe UI', 'Liberation Sans', 'Source Sans', 'Trebuchet MS', Helvetica, Arial, sans-serif, sans} !default;
+$secondary_font_family: $primary_font_family !default;
+$third_font_family: $monospace_font_family !default;
+$fourth_font_family: $print_font_family !default;
+
+$basic_indent: 2em !default;
+
+
+// COLORS
+// ------------------------------------------------------------------------------
+
+$color_palette: (
+  alpha: #fad803,
+  bravo: #d30a51,
+  charlie: #273f8b,
+  delta: #b7e0f0,
+  echo: #52bed1,
+	foxtrot: #0c85ff
+) !default;
+
+@include addDefaultColors;
+
+$darkest_color: black !default;
+$brightest_color: white !default;
+$medium_color: lighten($darkest_color, 50%) !default;
+$dark_color: lighten($darkest_color, 20%) !default;
+$bright_color: darken($brightest_color, 20%) !default;
+
+$basic_front_color: $darkest_color !default;
+$basic_back_color: $medium_color !default;
+$basic_font_color: $basic_front_color !default;
+$basic_head_color: $basic_front_color !default;
+
+$basic_link_color: $echo_color !default;
+$basic_highlight_color: $brightest_color !default;
+$basic_action_color: $foxtrot_color !default;
+
+
+
+$basic_border_color: $basic_front_color !default;
+
+// default shadow colors
+// $shadow_color: fade-out($medium_color, .5);
+
+$basic_color_list: ();
+
+@each $key, $value in $color_palette {
+  $map: ();
+  $map: map-merge($map, ($key: createColorMap($value, 15%, .5)) );
+  $basic_color_list: map-merge($basic_color_list, $map);
+}
+
+
+// LAYOUT
+// ------------------------------------------------------------------------------
+
+$box_sizing: border-box !default;
+
+$z_heaven: 100 !default;
+$z_top: 10 !default;
+$z_basic: 1 !default;
+$z_earth: -100 !default;
+
+$basic_width: 96% !default;
+$width_small: 80% !default;
+$width_medium: 60% !default;
+$width_large: 48% !default;
+
+$basic_space: 8px !default;
+$tiny_space: 1px !default;
+$half_space: $basic_space / 2 !default;
+$double_space: $basic_space * 2 !default;
+$space_3: $basic_space * 4;
+$space_4: $basic_space * 8;
+$space_5: $basic_space * 16;
+
+$basic_margin: $basic_space 0 !default;
+$high_margin: $double_space 0 !default;
+$io_margin: 0 $space_3 !default;
+
+$basic_padding: calc(#{$basic_space} - 3px) $basic_space !default;
+$wide_padding: calc(#{$basic_space} - 1px) calc(#{$basic_space} * 2) !default;
+
+$basic_corner: $tiny_space;
+
+$basic_border_width: $tiny_space !default;
+$border_width_4: $tiny_space * 4;
+$border_width_8: $tiny_space * 8;
+$basic_border: $tiny_space solid $basic_border_color;
+$dotted_border: $tiny_space dotted $basic_border_color;
+$cell_border: $tiny_space solid $darkest_color;
+
+$basic_corner_radius: $tiny_space * 2;
+
+$basic_aside_width: 20%;
+
+
+// IO
+// ------------------------------------------------------------------------------
+
+$basic_input_list:
+	'input[type="color"]',
+	'input[type="date"]',
+	'input[type="datetime"]',
+	'input[type="datetime-local"]',
+	'input[type="email"]',
+	'input[type="month"]',
+	'input[type="number"]',
+	'input[type="password"]',
+	'input[type="search"]',
+	'input[type="tel"]',
+	'input[type="text"]',
+	'input[type="time"]',
+	'input[type="url"]',
+	'input[type="week"]',
+	'input:not([type])';
+
+$basic_button_list:
+	'button',
+	'input[type="button"]',
+	// 'input[type="file"]',
+	'input[type="reset"]',
+	'input[type="submit"]';
+
+$basic_focus_list:
+	'a[href]',
+	'area[href]',
+	'button:not([disabled])',
+	'input:not([disabled])',
+	'select:not([disabled])',
+	'textarea:not([disabled])',
+	'*[tabindex]';
+
+$basic_io_font_color: lighten($basic_font_color, 10%);
+$basic_io_back_color: darken($brightest_color, 10%);
+$basic_io_border_color: $brightest_color;
+
+$basic_io_border_width: $tiny_space * 2 !default;
+$basic_io_border: $basic_io_border_width solid $basic_io_border_color;
+$dotted_io_border: $tiny_space dotted $basic_io_border_color;
+
+$basic_shadow: inset 0 1px 3px rgba($darkest_color, 0.06);
+$basic_focus_shadow: $basic_shadow, 0 0 5px adjust-color($basic_action_color, $lightness: -5%, $alpha: -0.3);
+
+
+// ANIMATIONS
+// ------------------------------------------------------------------------------
+
+$basic_duration: 150ms;
+$basic_timing: ease;
+
+
+// HARDWARE BREAKPOINTS
+// ------------------------------------------------------------------------------
+
+$screen_tiny: 768px;
+$screen_small: 1024px;
+$screen_medium: 1280px;
+$screen_large: 1440px;
+$screen_huge: 1680px;
+$screen_gigantic: 1920px;
+
+
+// VENDOR PREFIX
+// ------------------------------------------------------------------------------
+
+$prefix_defaults: -moz- -webkit- -o- -ms- '';
+$webkit_support: -webkit- '';
+$moz_support: -moz- '';
+$ms_support: -ms- '';
+$moz_webkit_support: -moz- -webkit- '';
+$moz_ms_support: -moz- -ms- '';
+$webkit_ms_support: -webkit- -ms- '';
+
+
+// SYMBOLS
+// ------------------------------------------------------------------------------
+
+$icons: (
+  glass: "\f000",
+  music: "\f001",
+  search: "\f002",
+  envelope-o: "\f003",
+  heart: "\f004"
+);
+
+@each $name, $icon in $icons {
+  .sym_#{$name}::before {
+    content: $icon;
+  }
+}
+
+// USER AGENT
+// ------------------------------------------------------------------------------
+
+$no_agent_focus: true;
+
+@include overrideUserAgent;
+
+
+// The config file is intended to allow users to quickly redefine core elements of the design
+// that will cascade throughout the css to get your design up and running FAST!
+
+// For instruction, please see https://github.com/Anotheruiguy/toadstool/blob/master/sass/doc-src/config.md
+
+/////// Typography configuration///////
+// -----------------------------------------------------------------------------
+// $font_size: 12;
+//
+// $heading_1: 46;
+// $heading_2: 32;
+// $heading_3: 28;
+// $heading_4: 18;
+// $heading_5: 18;
+// $heading_6: 18;
+//
+// $line: $font_size * 1.5;
+//
+// $small_point_size: 10;
+// $large_point_size: 14;
+//
+// $primary_font_family: #{"Helvetica Neue", Arial, sans-serif};
+// $secondary_font_family: #{"Helvetica Neue", Arial, sans-serif};
+// $heading_font_family: #{"Helvetica Neue", Arial, sans-serif};
+
+// $icon_font_alpha: #{'ico-fonts'};
+
+/////// Default webfont directory///////
+// -----------------------------------------------------------------------------
+// $webfont_directory: "/fonts/";
+
+/////// default image directory ///////
+// -----------------------------------------------------------------------------
+// In Sinatra, the images folder resides in the public directory.  This directory is not made publically accessible,
+// so simply referencing the images directory will be fine.
+// $imgDir: "/images/";
+
+/////// OOCSS generic base colors///////
+// -----------------------------------------------------------------------------
+// Red, green, yellow, blue, accent and black is not law, but a common theme in most designs.
+// Using Toadstool, all you need to do is edit these 6 hex values and everything else is created
+// by magic, unicorns and fairy dust!
+
+// $alpha_primary:   #5a2e2e;        // red
+// $bravo_primary:   #3e4147;        // green
+// $charlie_primary: #fffedf;        // yellow
+// $delta_primary:   #2a2c31;        // blue
+// $echo_primary:    #dfba69;        // accent
+
+// $alpha_gray:      #333;           //black
+
+/////// Toadstool color math ///////
+// -----------------------------------------------------------------------------
+// Local color functions to create default color palette
+//@import "color/color_math";
+//@import "color/grayscale_math";
+//@import "color/color_defaults";
+
+/////// Grid configuration ///////
+// -----------------------------------------------------------------------------
+// setting default units of measurement for Toadstool grid solution
+// $grid_type:                  12;             // sets default column grid
+// $grid_uom:                   percent;        // use either ``em`` or ``percent``
+// $grid_padding_l:             0;              // sets default left/right padding inside grid block
+// $grid_padding_r:             0;              // sets default left/right padding inside grid block
+// $grid_padding_tb:            0;              // sets default top/bottom padding inside grid block
+// $grid_border:                0;              // sets default border width on all grid blocks
+// $grid_child:                 none;           // sets parent child relationship between grid blocks
+// $grid_align:                 default;        // by default grids float left. Optional argument is ``center``
+// $col_base:                   10;             // equal to 10px in the standard 960.gs
+// $col_gutter:                 $col_base * 2;  // sets default grid gutter width
+// $grid_960:                   960 / 100%;     // grid math for percentages
+
+
+
+/////// HTML 5 feature colors ///////
+// -----------------------------------------------------------------------------
+// used with the `ins` tag
+// http://www.w3schools.com/tags/tag_ins.asp
+// $ins_color:                            $charlie_color;
+
+// used with the `mark` tag
+// http://www.w3schools.com/html5/tag_mark.asp
+// $mark_color:                           $charlie_color;
+
+// webkit tap highlight color
+// $webkit_tap_hightlight:                $delta_color_bravo;
+
+// overrides the default content selection color in the browser
+// $selection_color:                      $charlie_color;
+// $selection_text_color:                 $primary_text;
+
+
+
+/////// Config defaults for forms ///////
+// -----------------------------------------------------------------------------
+// $alert_back_color:        $alpha_color;
+
+// $input_disabled:                $bravo_gray;
+// $input_disabled_bkg:            lighten($input_disabled, 75%);
+// $input_disabled_border:         lighten($input_disabled, 50%);
+// $input_disabled_text:           lighten($input_disabled, 50%);
+//
+// $form_field_back_color:   $brightest_color;
+// $form_field_focus_color:        $brightest_color;
+// $form_field_fail_bkg:           $alpha_color_juliet;
+
+// $form_field_border:             $charlie_gray;
+// $form_field_border_fail:        $alpha_color_echo;
+// $form_field_focus_border_color: $charlie_gray;
+
+// $form_field_text_fail:          $alpha_color_echo;
+// $form_label_color:              $alpha_gray;
+// $optional_field_text_color:     $delta_gray;
+// $instructional_text:            $charlie_gray;
+// $placeholder_text:              $hotel_gray;
+// $inline_alert_bkg_color:        $alpha_color_delta;
+// $inline_alert_text_color:       $brightest_color;
+
+// Non-color defaults (currently not represented in the SG view)
+// ---------------------------------------------------------
+// $form_field_border_radius:      $standard_round_corner;
+// $form_field_text:               $primary_text;
+// $form_field_height:             35;
+// $form_field_padding:            6;
+// $form_label_weight:             bold;
+// $form_label_lineheight:         20;
+// $inline_alert_lineheight:       30;
+// $inline_alert_left_padding:     12;
+// $inline_alert_weight:           bold;
+// $inline_alert_top_margin:       12;
+// $inline_alert_border_width:     1;
+
+
+
+/////// Config defaults for buttons ///////
+// -----------------------------------------------------------------------------
+// $button-color:  $delta-color;
+// $button-text-color: $brightest_color;
+// $button-line-height: 32;
+// $button-border-radius: 3;
+// $button-padding: 20;
+// $button-font-size: 18;
+// $button-weight: bold;
+// $button-text-shadow: true;
+// $button-box-shadow: true;
+
+/////// Config defaults for ``standard_rounded_border`` mixin ///////
+// -----------------------------------------------------------------------------
+// $standard_round_corner:                3;                // sets default border radius
+// $standard_corner_width:                1px;              // sets default border width
+// $standard_border_color:                $border_color;    // sets default border color
+
+/////// Config defaults for ``standard_block_spacing`` mixin ///////
+// -----------------------------------------------------------------------------
+// $default_block_spacing:                20;               // sets margin-bottom
+
+/////// Config defaults for site border style ///////
+// -----------------------------------------------------------------------------
+// $standard_border_style:                solid;
+
+/////// Config defaults for ``standard_hr`` mixin ///////
+// -----------------------------------------------------------------------------
+// $standard_hr_spacing:                  40;               // sets padding and margin bottom
+// $standard_hr_color:                    $delta_gray;
+// $standard_hr_width:                    1px;
+
+/////// Config values for all default shadows ///////
+// -----------------------------------------------------------------------------
+// $h-shadow:                             0;                // horizontal shadow settings
+// $v-shadow:                             2;                // vertical shaddow settings
+// $blur:                                 3;                // blur settings
+//
+// $inset_color:                          $shadow_color;    // for use with ``dual_box_shadow`` mixin
+// $ih-shadow:                            0;                // inset horizontal shadow settings
+// $iv-shadow:                            2;                // inset vertical shaddow settings
+// $is-shadow:                            2;                // inset spread shaddow settings
+// $iblur:                                3;                // inset blur settings

source/style/mixins/_all.scss

@@ -0,0 +1,4 @@
+@import "media_query";
+@import "flow";
+@import "color";
+@import "user_agent";

source/style/mixins/_color.scss

@@ -0,0 +1,20 @@
+@mixin addDefaultColors() {
+  @if map-has-key($color_palette, alpha) {
+    $alpha_color: map-get($color_palette, alpha) !global;
+  }
+  @if map-has-key($color_palette, bravo) {
+    $bravo_color: map-get($color_palette, bravo) !global;
+  }
+  @if map-has-key($color_palette, charlie) {
+    $charlie_color: map-get($color_palette, charlie) !global;
+  }
+  @if map-has-key($color_palette, delta) {
+    $delta_color: map-get($color_palette, delta) !global;
+  }
+  @if map-has-key($color_palette, echo) {
+    $echo_color: map-get($color_palette, echo) !global;
+  }
+  @if map-has-key($color_palette, foxtrot) {
+    $foxtrot_color: map-get($color_palette, foxtrot) !global;
+  }
+}

source/style/mixins/_flow.scss

@@ -0,0 +1,25 @@
+@charset "UTF-8";
+
+// Provides an easy way to include a clearflow for containing floats.
+//
+// @link http://cssmojo.com/latest_new_clearfix_so_far/
+//
+// @example scss - Usage
+//   .element {
+//     @include clearFlow;
+//   }
+//
+// @example css - CSS Output
+//   .element::after {
+//     content: "";
+//     clear: both;
+//     display: table;
+//   }
+
+@mixin clearFlow {
+  &::after {
+    content: "";
+    clear: both;
+    display: table;
+  }
+}

source/style/mixins/_media_query.scss

@@ -0,0 +1,35 @@
+//Sections for Media Queries
+@mixin forPhoneOnly {
+  @media (max-width: #{$screen_tiny - 1}) { @content; } //599px
+}
+@mixin forTabletPortraitUp {
+  @media (min-width: $screen_tiny) { @content; } //600px
+}
+@mixin forTabletPortraitOnly {
+  @media (min-width: $screen_tiny) and (max-width: #{$screen_small - 1}) { @content; } //600px - 899px
+}
+@mixin forTabletLandscapeUp {
+  @media (min-width: $screen_small) { @content; } //900px
+}
+@mixin forTabletLandscapeOnly {
+  @media (min-width: $screen_small) and (max-width: #{$screen_medium - 1}) { @content; } //900px - 1199px
+}
+@mixin forDesktopUp {
+  @media (min-width: $screen_medium) { @content; } //1200px
+}
+@mixin forDesktopOnly {
+  @media (min-width: $screen_medium) and (max-width: #{$screen_huge - 1}) { @content; } //1200px - 1799px
+}
+@mixin forBigDesktopUp {
+  @media (min-width: $screen_huge) { @content; } //1800px
+}
+
+//Mobile-first Media Query
+@mixin goingLarge($width) {
+  @media (min-width: $width/16+em) { @content; }
+}
+
+//Desktop-first Media Query
+@mixin goingSmall($width) {
+  @media (max-width: $width/16+em) { @content; }
+}

source/style/mixins/_user_agent.scss

@@ -0,0 +1,9 @@
+@mixin overrideUserAgent() {
+  @if $no_agent_focus == true {
+    @each $el in $basic_focus_list {
+      #{$el}:focus {
+        outline: 0;
+      }
+    }
+  }
+}

source/style/modules/_vendor.scss

@@ -0,0 +1,23 @@
+/**
+ * @description
+ * Generates cross-browser-compatible output for a given element with its value.
+ *
+ * @author sthag
+ *
+ * @param values
+ * @returns
+ *   -webkit-<name>: <values>
+ *       ...-<name>: <values>
+ *
+ * @example
+ *   .selector
+ *     @include vendor-prefix(hyphens, auto)
+ */
+@mixin vendor-prefix($name, $argument) {
+	-webkit-#{$name}: #{$argument};
+	-ms-#{$name}: #{$argument};
+	-moz-#{$name}: #{$argument};
+	-o-#{$name}: #{$argument};
+	#{$name}: #{$argument};
+}
+

source/style/modules/breakpoint/_breakpoint_module.scss

@@ -0,0 +1,46 @@
+.query__goingLarge {
+  @include goingLarge($screen_tiny) {};
+}
+
+.query__goingSmall {
+  @include goingSmall($screen_gigantic) {};
+}
+
+.query__phoneUp {
+}
+
+.query__phoneOnly {
+  @include forPhoneOnly {}
+}
+
+.query__tabletPortaitOnly {
+  @include forTabletPortraitOnly {
+  }
+}
+
+.query__tabletPortraitUp {
+  @include forTabletPortraitUp {
+  }
+}
+
+.query__tabletLandscapeOnly {
+  @include forTabletLandscapeOnly {}
+}
+
+.query__tabletLandscapeUp {
+  @include forTabletLandscapeUp {}
+}
+
+.query__desktopOnly {
+  @include forDesktopOnly {
+  }
+}
+
+.query__desktopUp {
+  @include forDesktopUp {
+  }
+}
+
+.query__bigDesktopUp {
+  @include forBigDesktopUp {}
+}

source/style/modules/card/_card_module.scss

@@ -0,0 +1,99 @@
+// Custom extends and mixins
+// ------------------------------------------------------------------------------
+@import "mixins";
+@import "extends";
+
+// Card module styles
+// ------------------------------------------------------------------------------
+
+%absolute_full {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+
+.card_body {
+	height: 100%;
+	.bkg_box {
+		@extend %absolute_full;
+		transition-duration: 800ms;
+		overflow: hidden;
+		vertical-align: top;
+		z-index: -1;
+	}
+	.bkg_box > svg {
+		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%;
+	}
+	.flex_content {
+		position: relative;
+		padding: 64px 64px 24px 64px;
+		border: 1px solid #FFF;
+		background-color: #F5F5F5;
+		z-index: 40;
+	}
+	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 {
+	position: absolute;
+	width: 128px;
+	height: 128px;
+	top: 16px;
+	left: 16px;
+	background-color: #fff;
+}
+.mark {
+float: left;
+width: 32px;
+height: 32px;
+margin-top: 16px;
+}
+*/
+.marked {
+	padding-left: 1em;
+	text-indent: -1em;
+	text-align: center;
+}
+.marked::before { content: "*\0000a0" }
+.decent { color: #666 }
+a {
+	color: #000;
+	text-decoration: none;
+}
+a:hover {
+	color: #F4F9FA;
+	background-color: #0C85FF;
+	text-decoration: none;
+}
+}

source/style/modules/demo/_demo_module.scss

@@ -0,0 +1,176 @@
+.demo__intro {
+	@extend .sec__main_center;
+	border-top-width: $border_width_8;
+	border-top-style: solid;
+	border-color: $basic_border_color;
+	padding-top: $space_3;
+}
+
+.demo__header {
+	padding: $double_space;
+
+	nav {
+
+		ul {
+			margin: 0;
+		}
+	}
+}
+
+.header__fancy {
+	background-color: transparentize($bravo_color, .4);
+
+	nav {
+
+		a {
+			background-color: transparentize($alpha_color, .4);
+			color: $alpha_color;
+
+			&:active,
+			&:focus,
+			&:hover {
+				background-color: rgba($brightest_color, .2);
+				color: $brightest_color;
+			}
+		}
+	}
+}
+
+.header__fix {
+	position: relative;
+	top: 0;
+	left: 0;
+	width: 100%;
+	background-color: transparentize($charlie_color, .4);
+
+	nav {
+
+		a {
+
+			&:active,
+			&:focus,
+			&:hover {
+				background-color: rgba($brightest_color, .2);
+				color: $brightest_color;
+			}
+		}
+	}
+}
+
+.demo__footer {
+	width: 100%;
+	// height: 128px;
+	padding: $double_space 0;
+	background-color: $dark_color;
+	color: $bright_color;
+
+	nav {
+
+		a {
+			color: $brightest_color;
+		}
+	}
+}
+
+.demo__avatar {
+
+	img {
+		opacity: 1;
+		width: 128px;
+		height: auto;
+		min-width: 128px;
+		min-height: 128px;
+		border-radius: 50%;
+		background-color: $delta_color;
+	}
+}
+
+.demo__flag {
+	height: 40vh;
+}
+
+.demo__credits {
+	margin: $space_3 0 $basic_space 0;
+}
+
+.demo__button_32 {
+	width: 32px;
+	height: 32px;
+}
+
+
+
+.demo__queries > p {
+  padding: $basic_padding;
+}
+
+.query__phoneUp {
+  background-color: rgba($basic_front_color, .2);
+}
+
+.query__phoneOnly {
+  @include forPhoneOnly { background-color: rgba($basic_front_color, .2); }
+}
+
+.query__tabletPortaitOnly {
+  @include forTabletPortraitOnly { background-color: rgba($basic_front_color, .2); }
+}
+
+.query__tabletPortraitUp {
+  @include forTabletPortraitUp { background-color: rgba($basic_front_color, .2); }
+}
+
+.query__tabletLandscapeOnly {
+  @include forTabletLandscapeOnly { background-color: rgba($basic_front_color, .2); }
+}
+
+.query__tabletLandscapeUp {
+  @include forTabletLandscapeUp { background-color: rgba($basic_front_color, .2); }
+}
+
+.query__desktopOnly {
+  @include forDesktopOnly { background-color: rgba($basic_front_color, .2); }
+}
+
+.query__desktopUp {
+  @include forDesktopUp { background-color: rgba($basic_front_color, .2); }
+}
+
+.query__bigDesktopUp {
+  @include forBigDesktopUp { background-color: rgba($basic_front_color, .2); }
+}
+
+.demo__query_example {
+	@include goingLarge($screen_tiny/1px) {background-color: $alpha_color; }
+	@include goingLarge($screen_small/1px) {background-color: $bravo_color; }
+	@include goingLarge($screen_medium/1px) {background-color: $charlie_color; }
+	@include goingLarge($screen_large/1px) {background-color: $delta_color; }
+	@include goingLarge($screen_huge/1px) {background-color: $echo_color; }
+	@include goingLarge($screen_gigantic/1px) {background-color: $foxtrot_color; }
+	margin-bottom: $space_3;
+	padding: $space_3;
+	text-align: center;
+
+	&:after {
+		@extend code;
+		@include goingLarge($screen_tiny/1px) {
+			& { content: '768px'; }
+		}
+		@include goingLarge($screen_small/1px) {
+			& { content: '1024px'; }
+		}
+		@include goingLarge($screen_medium/1px) {
+			& { content: '1280px'; }
+		}
+		@include goingLarge($screen_huge/1px) {
+			& { content: '1680px'; }
+		}
+		@include goingLarge($screen_gigantic/1px) {
+			& { content: '1920px'; }
+		}
+		content: '< 768px';
+		padding: $basic_padding;
+		border-radius: $basic_corner_radius;
+		background-color: rgba($basic_front_color, .2);
+	}
+}

source/style/modules/editor/_editor_module.scss

@@ -0,0 +1,23 @@
+// Custom extends and mixins
+// ------------------------------------------------------------------------------
+@import "mixins";
+@import "extends";
+
+// Editor module styles
+// ------------------------------------------------------------------------------
+
+%wip {
+  border-right: $basic_space solid rgba(crimson, .8);
+  background-color: rgba(crimson, .1) !important;
+}
+.wip {
+  @extend %wip;
+  &::before, &::after {
+    content: "";
+    display: block;
+    height: 48px;
+  }
+}
+.wip_txt {
+  @extend %wip;
+}

source/style/modules/explanation/_explanation_module.scss

@@ -0,0 +1,115 @@
+// Custom extends and mixins
+// ------------------------------------------------------------------------------
+@import "mixins";
+@import "extends";
+
+// Explanation module styles
+// ------------------------------------------------------------------------------
+
+%expose_after {
+  &::after {
+    content: "";
+    display: block;
+    height: 48px;
+    background-color: rgba($delta_color, .1) !important;
+  }
+}
+%expose_before {
+  &::before {
+    content: "";
+    display: block;
+    height: 48px;
+    background-color: rgba($delta_color, .1) !important;
+  }
+}
+%expose {
+  &::before, &::after {
+    content: "";
+    display: block;
+    height: 48px;
+    background-color: rgba($delta_color, .1) !important;
+  }
+}
+%exp {
+}
+%exp_hidden {
+  display: none;
+}
+
+.exp_wrap {
+  position: relative;
+}
+
+.exp_pop {
+  @extend %exp_hidden !optional;
+  position: absolute;
+  z-index: 100;
+  top: $space_5;
+  left: $space_5;
+  padding: $half_space;
+  border: 4px solid $basic_back_color;
+  border-radius: 4px;
+  background-color: $basic_back_color;
+  pointer-events: none;
+}
+.exp_marker_pop {
+  position: absolute;
+  top: -$basic_size / 4 * 3;
+  right: -$basic_size / 2;
+  width: $basic_size;
+  height: $basic_size;
+  border: $tiny_space solid $basic_highlight_color;
+  border-radius: $basic_size;
+  color: $basic_highlight_color;
+  background-color: $darkest_color;
+}
+
+.exp_expose {
+  @extend %expose !optional;
+}
+.exp_expose_pre {
+  @extend %expose_after;
+}
+.exp_expose_post {
+  @extend %expose_before;
+}
+
+.exp_overlay_btn {
+  position: fixed;
+  width: 3em;
+  height: 2em;
+	// padding: $basic_space $basic_space * 2;
+  cursor: pointer;
+}
+.exp_help_btn {
+  display: table;
+  right: $double_space;
+  bottom: $double_space;
+  background-color: rgba($darkest_color, .4);
+  &:hover {
+    background-color: $brightest_color;
+    > .span__solo {
+      color: $darkest_color;
+    }
+  }
+  .span__solo {
+    display: table-cell;
+    color: rgba($brightest_color, .8);
+		font-family: $monospace_font_family;
+		font-size: 1.4em;
+    text-align: center;
+    vertical-align: middle;
+  }
+}
+
+
+
+.expose_height {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba($delta_color, .1) !important;
+  @include vendor-prefix(transition, height .5s ease);
+}

source/style/modules/navigation/_nav_module.scss

@@ -0,0 +1,162 @@
+nav {
+
+	ul {
+		padding-left: 0;
+	}
+
+	li {
+		margin-bottom: $basic_space;
+		list-style: none;
+	}
+}
+
+.nav__horizontal {
+	ul {
+		@extend .overflow;
+
+		ul {
+			margin: $basic_space 0;
+		}
+
+		li {
+			@extend .float_space_left;
+			margin-right: $basic_space;
+			margin-bottom: 0;
+
+			&:last-child {
+				margin-right: 0;
+			}
+		}
+	}
+}
+
+.nav__right {
+	float: right;
+	margin-left: $basic_space;
+
+	.align_parent {
+		margin-right: $basic_space * -1;
+	}
+}
+
+.nav__separate {
+	li {
+		position: relative;
+		padding-left: $tiny_space;
+
+		&:not(:first-child) {
+
+			&::before {
+				content: "";
+				position: absolute;
+				width: $tiny_space;
+				height: 100%;
+				left: 0;
+				top: 0;
+				background-color: $darkest_color;
+			}
+		}
+	}
+}
+
+.nav__separate_right {
+	float: right;
+	li {
+		position: relative;
+
+		&:first-child {
+			padding-left: $basic_space * 2 + $tiny_space;
+
+			&::before {
+				content: "";
+				position: absolute;
+				width: $tiny_space;
+				height: 100%;
+				left: 0;
+				top: 0;
+				background-color: $brightest_color;
+				margin: 0 $basic_space;
+			}
+		}
+	}
+}
+
+.nav__center_old {
+	@extend .nav__horizontal;
+	float: right;
+	position: relative;
+	left: -50%;
+
+	ul {
+		position: relative;
+		left: 50%;
+		text-align: center;
+	}
+}
+
+.nav__column {
+	position: relative;
+	margin: $basic_space 0;
+
+	ul {
+		@extend .flex;
+		margin: 0 $space_5;
+
+		li {
+			@extend .flex__child;
+			flex-grow: 1;
+			margin: 0;
+			text-align: center;
+
+			a {
+				display: block;
+			}
+		}
+	}
+}
+
+.nav__page_meta {
+	position: fixed;
+	// display: table;
+	// width: 3em;
+  right: 0;
+  bottom: $double_space;
+
+	ul {
+		margin: $basic_space 0;
+	}
+
+	li {
+		margin-bottom: 0;
+	}
+	.a_button_meta {
+		// display: table-cell;
+		display: inline-block;
+
+		&:active,
+		&:focus {
+			background-color: transparent;
+		}
+
+		&:hover {
+			background-color: $basic_action_color;
+		}
+	}
+}
+
+.header__page {
+
+	nav {
+		@extend .nav__horizontal;
+
+		a {
+
+			&:active,
+			&:focus,
+			&:hover {
+				background-color: rgba($basic_font_color, .2);
+				color: $basic_font_color;
+			}
+		}
+	}
+}

source/style/modules/print/_print_module.scss

@@ -0,0 +1,128 @@
+// Custom extends and mixins
+// ------------------------------------------------------------------------------
+@import "mixins";
+@import "extends";
+
+// Print module styles
+// ------------------------------------------------------------------------------
+
+%paper {
+	background-color: $brightest_color;
+}
+
+$a4: ".dina4" 1.2cm 1.2cm 1.2cm 2.4cm;
+$a5: ".dina5" 0 0 0 1.2cm;
+$a6: ".dina6" 0 0 0 1.2cm;
+
+$din: $a4, $a5, $a6;
+
+.print_body {
+	font-size: $basic_print_size;
+	margin: 10vh 20vw;
+
+	@page {
+		size: A4;
+		margin: 1.2cm;
+	}
+
+	@page:first {
+		size: A4;
+		margin: 0;
+	}
+
+	@each $space in $din {
+		#{nth($space, 1)} {
+			padding-top: nth($space, 2);
+			padding-right: nth($space, 3);
+			padding-bottom: nth($space, 4);
+			padding-left: nth($space, 5);
+
+			.page_head, .page_foot {
+				right: nth($space, 3);
+				left: nth($space, 5);
+			}
+			.page_head {
+				top: nth($space, 2);
+			}
+			.page_foot {
+				bottom: nth($space, 4);
+			}
+		}
+	}
+
+	*[class^="din"] {
+		@extend %paper;
+		position: relative;
+		overflow: auto;
+
+		p {
+			@extend %basic_print;
+		}
+
+		.page_head, .page_foot {
+			position: absolute;
+		}
+
+		.page_head {
+			page: cover;
+		}
+
+		.page_foot {
+			display: flex;
+			flex-direction: row;
+
+			*:last-child {
+				margin-bottom: 0;
+			}
+
+			p {
+				flex: 1 0 auto;
+				margin: 0;
+				font-size: 8pt;
+				line-height: 10pt;
+				text-align: center;
+			}
+
+			.page_no {
+				flex: 1 0 auto;
+				font-size: 20pt;
+				line-height: 1;
+				text-align: right;
+			}
+			p:first-child {
+				text-align: left;
+			}
+		}
+		.page_content {
+			margin-top: 10cm;
+			margin-bottom: 2cm;
+		}
+		margin: $space_3 auto;
+	}
+
+	.page_title, .page_date {
+		font-size: 14pt;
+	}
+
+	.page_title {
+		margin: 0;
+	}
+
+	.page_date, .page_no {
+		@extend %head_1;
+		float: right;
+	}
+
+	.page_author {
+		position: absolute;
+		top: 5cm;
+		right: 0;
+		text-align: right;
+	}
+
+	.page_recipient {
+		position: absolute;
+		top: 5cm;
+		left: 0;
+	}
+}

source/style/modules/tables/_tables_module.scss

@@ -0,0 +1,68 @@
+.table__link {
+	width: 100%;
+	border: 0;
+	table-layout: auto;
+
+	tbody {
+		border-bottom: $cell_border;
+
+		&:hover {
+			background-color: $bright_color;
+		}
+	}
+
+	th, td {
+		border: 0;
+	}
+
+	.cell__icon {
+		width: 48px;
+		text-align: center;
+		img {
+			vertical-align: text-top;
+		}
+	}
+
+	.cell__link {
+		padding-right: $basic_space;
+		padding-left: $basic_space;
+
+		&:hover {
+			background-color: $foxtrot_color;
+			a:first-child {
+				display: none;
+			}
+			a:last-child {
+				display: block;
+				color: $basic_highlight_color;
+			}
+		}
+
+		a {
+			display: block;
+		}
+
+		a:last-child {
+			display: none;
+		}
+	}
+
+	th:last-child, .cell__date {
+		width: 16%;
+		text-align: center;
+	}
+
+	.cell__text {
+		padding-right: $basic_space;
+		padding-left: $basic_space;
+
+		div {
+			width: 100%;
+		}
+
+		.shorten {
+			@extend %short;
+			max-height: 44px;
+		}
+	}
+}