edge_framework 0.0.2

data/assets/sass/edge/components/_grid.scss

@@ -0,0 +1,301 @@
+/* ---------------
+EDGE Grid
+--------------- */
+// Based on Zurb's Foundation
+
+$row-width       : em($content-width) !default;
+$column-padding  : em(0px) !default;
+$column-margin   : em(25px) !default; // Margin between column at maximum row's width
+$total-columns   : 12 !default;
+
+// Calculate percentages for grid
+@function gridCalc($colNumber, $totalColumns: $total-columns, $collapse: false ) {
+	$baseSize : percentage( $colNumber / $totalColumns );
+
+	// Additional size due to margin between grid.
+	$fillSize : 0 !default;
+	@if $collapse == false {
+		$fillSize : $colNumber * ( gridMarginCalc() / $totalColumns );
+	}
+	
+	@return $baseSize + $fillSize;
+}
+
+// Calculate percentages for Margin between grid
+@function gridMarginCalc($colMargin: $column-margin, $rowWidth: $row-width) {
+	@return percentage( $colMargin / $rowWidth );
+}
+
+// Create ROW
+@mixin grid-row($behavior: false, $minify: false) {
+	@if $minify == false {
+		@include clearfix;
+	}
+	// use @include grid-row(nest); to include a nested row
+	@if $behavior == nest {
+		width        : auto;
+		max-width    : none;
+		margin-left  : -($column-padding);
+		margin-right : -($column-padding);
+	}
+	// use @include grid-row(collapse); to collapse a container row margins
+	@else if $behavior == collapse {
+		width     : 100%;
+		max-width : $row-width;
+		margin    : 0;
+	}
+	// use @include grid-row(nest-in-non-collapse); to collapse outer margins of nested-row inside non-collapsed-row
+	@else if $behavior == nest-in-non-collapse {
+		width     : auto;
+		max-width : none;
+	}
+	// use @include grid-row(nest-in-collapse); to collapse outer margins of nested-row inside collapsed-row
+	@else if $behavior == nest-in-collapse {
+		width     : auto;
+		max-width : none;
+		margin    : 0;
+	}
+
+	// use @include grid-row; to use a container row
+	@else {
+		width     : 100%;
+		max-width : $row-width;
+		margin    : 0 auto;
+	}
+}
+
+// Create COLUMN
+@mixin grid-column($columns  : false,
+				$last-column : false,
+				$center      : false,
+				$offset      : false,
+				$push        : false,
+				$pull        : false,
+				$collapse    : false,
+				$minify      : false, // Remove style redundancy
+				$float       : left ) {
+	
+	$not-for-columns : $push == false and $pull == false;
+	// If column number not specified
+	@if $columns == false and $minify and $not-for-columns {
+		position     : relative;
+		margin-#{$default-opposite} : gridMarginCalc();
+		&:last-child { margin-#{$default-opposite} : 0; }
+	}
+	
+	// If not collapse, add padding
+	@if $collapse == false and $minify == false {
+		padding-left  : $column-padding;
+		padding-right : $column-padding;
+	}
+
+	// If collapsed, remove padding and margin
+	@if $collapse and $minify == false {
+		padding-left  : 0;
+		padding-right : 0;
+		margin-#{$default-opposite} : 0;
+	}
+
+	// If collapsed and no column-number given, remove margin between grid
+	@if $collapse and $columns == false and $minify == true {
+		margin-#{$default-opposite} : 0;
+	}
+	
+	// If a column number is given, calculate width
+	@if $columns {
+		@if $minify == false { position : relative; }
+		// If collapsed, recalculate the width
+		@if $collapse {
+			width : gridCalc($columns, $collapse: true);
+		}
+		// Else, reduce the width with the margin
+		@else {
+			width : gridCalc($columns) - gridMarginCalc();
+
+			@if $minify == false {
+				margin-#{$default-opposite} : gridMarginCalc();
+
+				// If last-column specified explicitly
+				@if $last-column {
+					margin-#{$default-opposite} : 0;
+				} @else {
+					&:last-child { margin-#{$default-opposite} : 0; }
+				}
+			}
+		}
+	}
+
+	// If offset, calculate appropriate margins
+	@if $offset {
+		margin-#{$default-float}: gridCalc($offset, $collapse:$collapse);
+	}
+
+	// Source Ordering, adds left/right depending on which you use.
+	@if $push {
+		@if $minify == false { position : relative; }
+		#{$default-float}    : gridCalc($push, $collapse: $collapse);
+		#{$default-opposite} : auto;
+	}
+	@if $pull {
+		@if $minify == false { position : relative; }
+		#{$default-opposite} : gridCalc($pull, $collapse: $collapse);
+		#{$default-float}    : auto;
+	}
+	// If centered, get rid of float and add appropriate margins
+	@if $center {
+		margin-left  : auto !important;
+		margin-right : auto !important;
+		float        : none !important;
+	}
+	@if $float {
+		@if $float == left or true {
+			float : $default-float;
+		} @else if $float == right {
+			float : $default-opposite;
+		} @else {
+			float : none;
+		}
+	}
+}
+
+// CSS
+body {
+	&.not-responsive {
+		min-width : $row-width;
+	}
+	&.only-responsive-below-small {
+		min-width : $row-width;
+		@include small {
+			min-width : 0;
+		}
+	}
+}
+// For `normal-row`
+.row {
+	@include grid-row;
+	
+	.column,
+	.columns {
+		@include grid-column($columns: false, $minify: true);
+
+		&.last { margin-#{$default-opposite} : 0 !important; }
+	}
+
+	// Width for `normal-row`
+	@for $i from 1 through $total-columns {
+		.large-#{$i} {
+			@include grid-column($columns:$i, $collapse:null, $float:false, $minify: true );
+		}
+	}
+	
+	// For `collapsed-row`
+	&.collapse {
+		.column,
+		.columns {
+			@include grid-column($collapse: true);
+		}
+
+		// For `nested-row inside collapsed-row`, it's automatically collapsed
+		.row {
+			@include grid-row($behavior: nest-in-collapse, $minify: true);
+			
+			.column,
+			.columns {
+				@include grid-column($columns: false, $collapse: true, $minify: true);
+			}
+		}
+
+		@for $i from 1 through $total-columns {
+			.large-#{$i} {
+				@include grid-column($columns:$i, $collapse:true, $float:false, $minify: true );
+			}
+		}
+	}
+
+	// For `nested-row`
+	.row {
+		@include grid-row($behavior: nest, $minify: true);
+	}
+
+	// Offset for large columns
+	@for $i from 1 through $total-columns - 2 {
+		.large-offset-#{$i} {
+			@include grid-column($offset:$i, $collapse:null, $float:false );
+		}
+	}
+}
+
+.column.large-centered,
+.columns.large-centered {
+	@include grid-column($center:true, $collapse:null, $float:false );
+}
+
+// Push and pull for large-columns
+@for $i from 2 through $total-columns - 2 {
+	.row {
+		.push-#{$i} {
+			@include grid-column($push:$i, $collapse:false, $float:false, $minify:true ); }
+		.pull-#{$i} {
+			@include grid-column($pull:$i, $collapse:false, $float:false, $minify:true ); }
+		&.collapse {
+			.push-#{$i} {
+				@include grid-column($push:$i, $collapse:true, $float:false, $minify:true ); }
+			.pull-#{$i} {
+				@include grid-column($pull:$i, $collapse:true, $float:false, $minify:true ); }
+		}
+	}
+}
+
+@include medium-up {
+	@for $i from 2 through $total-columns - 2 {
+		.small-push-#{$i} {
+			left: inherit;
+		}
+		.small-pull-#{$i}  {
+			right: inherit;
+		}
+	}
+}
+
+@include small {
+	// Set all `large` columns to 100%
+	.row .column,
+	.row .columns,
+	.row.collapse .column,
+	.row.collapse .columns {
+		@include grid-column($columns: $total-columns, $minify: true);
+		
+		// Reset push and pull
+		&[class*="push"], &[class*="pull"] {
+			left  : auto;
+			right : auto;
+		}
+	}
+	
+	// Reset large-offset
+	.row {
+		[class*="large-offset"] {
+			margin-left : 0;
+		}
+	}
+
+	// Small columns
+	@for $i from 1 through $total-columns {
+		.row .small-#{$i} {
+			@include grid-column($columns:$i, $collapse:null, $float:false, $minify: true );
+		}
+	}
+	
+	// Small offset
+	@for $i from 1 through $total-columns - 2 {
+		.row {
+			.small-offset-#{$i}, &.collapse .small-offset-#{$i} {
+				@include grid-column($offset:$i, $collapse:null, $float:false );
+			}
+		}
+	}
+	.column.small-centered,
+	.columns.small-centered {
+		@include grid-column($center:true, $collapse:null, $float:false );
+	}
+}

data/assets/sass/edge/components/_main.scss

@@ -0,0 +1,133 @@
+/* ------------------
+EDGE Boilerplate
+--------------------- */
+
+// Set box-sizing globally to handle padding and border widths
+*,
+*:before,
+*:after {
+	@include box-sizing(border-box);
+}
+
+html,
+body {
+	font-size: $base-font-size;
+}
+
+body {
+	position    : relative;
+	background  : $body-bg;
+	color       : $body-font-color;
+	padding     : 0;
+	margin      : 0;
+	font-family : $body-font-family;
+	font-weight : $body-font-weight;
+	font-style  : $body-font-style;
+	line-height : 1;
+}
+
+h1, h2, h3, h4, h5, h6 {
+	font-family : $header-font-family;
+}
+
+p {
+	line-height   : 1.5;
+	margin-top    : 0;
+	margin-bottom : 0;
+}
+
+// A better looking default horizontal rule
+hr {
+	display    : block;
+	height     : 1px;
+	margin     : 1em 0;
+	padding    : 0;
+	border     : 0;
+	border-top : 1px solid #ccc;
+}
+
+// Override `normalize` part that we don't like
+a:focus { outline: none; }
+
+h1 { margin: 0; }
+
+fieldset {
+	border  : 0;
+	margin  : 0;
+	padding : 0;
+}
+
+
+// Grid Defaults to get images and embeds to work properly
+img,
+object,
+embed { max-width: 100%; height: auto; }
+
+object,
+embed { height: 100%; }
+
+#map_canvas,
+.map_canvas {
+	img,
+	embed,
+	object {
+		max-width: none !important;
+	}
+}
+
+// Allow only vertical resizing of textareas.
+textarea {
+	resize     : vertical;
+	height     : auto;
+	min-height : 50px;
+}
+
+// Make select elements 100% width by default
+select {
+	width: 100%;
+}
+
+// Get rid of gap under images
+img {
+	display: inline-block;
+	vertical-align: middle;
+	-ms-interpolation-mode: bicubic;
+}
+
+
+// Chrome Sibling Selector Fix
+body {
+	-webkit-animation: bugfix infinite 1s;
+}
+
+@-webkit-keyframes bugfix { 
+	from { padding: 0; }
+	to { padding: 0; }
+}
+
+// -----------------------------------
+/* Miscellaneous useful HTML classes */
+// -----------------------------------
+.left         { float: left !important; }
+.right        { float: right !important; }
+.text-left    { text-align: left !important; }
+.text-right   { text-align: right !important; }
+.text-center  { text-align: center !important; }
+.text-justify { text-align: justify !important; }
+.hide         { display: none !important; visibility: hidden !important; }
+.visual-hide  {
+	border   : 0 !important;
+	clip     : rect(0 0 0 0) !important;
+	height   : 1px !important;
+	margin   : -1px !important;
+	overflow : hidden !important;
+	padding  : 0 !important;
+	position : absolute !important;
+	width    : 1px !important;
+}
+
+.bold, b, strong { font-weight: 700 !important; }
+.italic, em      { font-style: italic !important; }
+
+// Font smoothing, only works on Safari Webkit
+.antialiased     { -webkit-font-smoothing: antialiased; }

data/assets/sass/edge/components/_normalize.scss

@@ -0,0 +1,49 @@
+/* ---------------------------
+Normalize | git.io/normalize
+------------------------------ */
+
+article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; }
+audio, canvas, video { display: inline-block; }
+audio:not([controls]) { display: none; height: 0; }
+[hidden] { display: none; }
+
+html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
+body { margin: 0; }
+
+a:focus { outline: thin dotted; }
+a:active, a:hover { outline: 0; }
+
+h1 { font-size: 2em; margin: 0.67em 0; }
+abbr[title] { border-bottom: 1px dotted; }
+b, strong { font-weight: bold; }
+dfn { font-style: italic; }
+hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; }
+
+mark { background: #ff0; color: #000; }
+code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; }
+pre { white-space: pre-wrap; }
+q { quotes: "\201C" "\201D" "\2018" "\2019"; }
+small { font-size: 80%; }
+sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
+sup { top: -0.5em; }
+sub { bottom: -0.25em; }
+
+img { border: 0; }
+svg:not(:root) { overflow: hidden; }
+
+figure { margin: 0; }
+
+fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }
+legend { border: 0; padding: 0; }
+button, input, select, textarea { font-family: inherit; font-size: 100%; margin: 0;}
+button, input { line-height: normal; }
+button, select { text-transform: none; }
+button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; }
+button[disabled], html input[disabled] { cursor: default; }
+input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }
+input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
+input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
+button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
+textarea { overflow: auto; vertical-align: top; }
+
+table { border-collapse: collapse; border-spacing: 0; }

data/assets/sass/edge/components/_palette.scss

@@ -0,0 +1,24 @@
+// --------------------------
+// EDGE Palette *deprecated*
+// --------------------------
+// This component has been deprecated, the colors are now declared in "_base"
+
+$blue_light   : #33B5E5;
+$blue         : #0099CC;
+
+$purple_light : #AA66CC;
+$purple       : #9933CC;
+
+$green_light  : #99CC00;
+$green        : #3D9900;
+
+$orange_light : #FFBB33;
+$orange       : #FF8800;
+
+$red_light    : #FF4444;
+$red          : #CC0000;
+
+$gray_dark    : #333;
+$gray         : #777;
+$gray_semi    : #AAA;
+$gray_light   : #EEE;

data/assets/sass/edge/components/_print.scss

@@ -0,0 +1,71 @@
+/* ------------------------------
+H5BP PRINT
+- Style for printing the website
+--------------------------------- */
+
+@media print {
+	* {
+		background: transparent !important;
+		color: #000 !important; /* Black prints faster: h5bp.com/s */
+		box-shadow: none !important;
+		text-shadow: none !important;
+	}
+
+	a,
+	a:visited {
+		text-decoration: underline;
+	}
+
+	a[href]:after {
+		content: " (" attr(href) ")";
+	}
+
+	abbr[title]:after {
+		content: " (" attr(title) ")";
+	}
+
+	/*
+	 * Don't show links for images, or javascript/internal links
+	 */
+
+	.ir a:after,
+	a[href^="javascript:"]:after,
+	a[href^="#"]:after {
+		content: "";
+	}
+
+	pre,
+	blockquote {
+		border: 1px solid #999;
+		page-break-inside: avoid;
+	}
+
+	thead {
+		display: table-header-group; /* h5bp.com/t */
+	}
+
+	tr,
+	img {
+		page-break-inside: avoid;
+	}
+
+	img {
+		max-width: 100% !important;
+	}
+
+	@page {
+		margin: 0.5cm;
+	}
+
+	p,
+	h2,
+	h3 {
+		orphans: 3;
+		widows: 3;
+	}
+
+	h2,
+	h3 {
+		page-break-after: avoid;
+	}	
+}

data/assets/sass/edge/components/_typography.scss

@@ -0,0 +1,4 @@
+/* ---------------
+EDGE Typography
+--------------- */
+

data/assets/sass/edge/components/_visibility.scss

@@ -0,0 +1,64 @@
+/* ---------------
+EDGE Visibility
+--------------- */
+// Based on Zurb's Foundation
+
+/* Above small breakpoint (>=768px) */
+	.show-for-small,
+	.hide-for-large { display: none !important; }
+	
+	.show-for-large,
+	.hide-for-small { display: inherit !important; }
+
+	table {
+		&.show-for-large,
+		&.hide-for-small { display: none !important; }
+	}
+	thead {
+		&.show-for-large,
+		&.hide-for-small { display: table-header-group !important; }
+	}
+	tbody {
+		&.show-for-large,
+		&.hide-for-small { display: table-row-group !important; }
+	}
+	tr {
+		&.show-for-large,
+		&.hide-for-small { display: table-row !important; }
+	}
+	td,
+	th {
+		&.show-for-large,
+		&.hide-for-small { display: table-cell !important; }
+	}
+
+/* Below small breakpoint (<768px) */
+	@include small {
+		.show-for-large,
+		.hide-for-small { display: none !important; }
+
+		.show-for-small,
+		.hide-for-large { display: inherit !important; }
+
+		table {
+			&.show-for-small,
+			&.hide-for-large { display: none !important; }
+		}
+		thead {
+			&.show-for-small,
+			&.hide-for-large { display: table-header-group !important; }
+		}
+		tbody {
+			&.show-for-small,
+			&.hide-for-large { display: table-row-group !important; }
+		}
+		tr {
+			&.show-for-small,
+			&.hide-for-large { display: table-row !important; }
+		}
+		td,
+		th {
+			&.show-for-small,
+			&.hide-for-large { display: table-cell !important; }
+		}
+	}