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/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;
+		}
+	}
+}