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