edge_framework 0.1.0 → 0.2.0

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

@@ -1,56 +1,49 @@
-/* ---------------
-EDGE Grid
---------------- */
-// Based on Zurb's Foundation
+// -----------------------------------------
+// GRID 
+//   Based heavily 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
+$column-distance : 30px !default;
+$row-max-width   : $content-width !default;
 $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;
+@function gridCalc($colNumber, $totalColumns:$total-columns) {
+	@return percentage($colNumber / $totalColumns);
 }
 
-// Calculate percentages for Margin between grid
-@function gridMarginCalc($colMargin: $column-margin, $rowWidth: $row-width) {
-	@return percentage( $colMargin / $rowWidth );
-}
+// For creating container, nested, and collapsed rows.
+@mixin grid-row(
+	$behavior  : false,
+	$for-base  : false,
+	$max-width : $row-max-width,
+	$distance  : $column-distance ) {
+	
+	$max-width : em($max-width) + em($distance); // to make up for the padding
 
-// Create ROW
-@mixin grid-row($behavior: false, $minify: false) {
-	@if $minify == false {
+	// prevent duplicate for base CSS class
+	@if $for-base == 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);
+		width      : auto;
+		max-width  : none;
+		margin-#{$default-float}    : -($distance / 2);
+		margin-#{$default-opposite} : -($distance / 2);
 	}
+
 	// use @include grid-row(collapse); to collapse a container row margins
 	@else if $behavior == collapse {
 		width     : 100%;
-		max-width : $row-width;
+		max-width : $max-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 {
+
+	// use @include grid-row(nest-collapse); to collapse outer margins on a nested row
+	@else if $behavior == nest-collapse {
 		width     : auto;
 		max-width : none;
 		margin    : 0;
@@ -59,243 +52,192 @@ $total-columns   : 12 !default;
 	// use @include grid-row; to use a container row
 	@else {
 		width     : 100%;
-		max-width : $row-width;
+		max-width : $max-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 ) {
+// For creating columns - @include these inside a media query to control small vs. large grid layouts
+@mixin grid-column(
+	$columns     : false,
+	$last-column : false,
+	$center      : false,
+	$offset      : false,
+	$push        : false,
+	$pull        : false,
+	$collapse    : false,
+	$float       : true,
+	$for-base    : false,
+	$distance      : $column-distance,
+	$total-columns : $total-columns,
+	$external      : $external-call, // Mixin used from external file
+	$small    : false // For usage by external file, apply CSS for small-grid
+	) {
 	
-	$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 $for-base == false {
+		position: relative;
 	}
 
-	// If collapsed, remove padding and margin
-	@if $collapse and $minify == false {
+	// If collapsed, get rid of distance padding
+	@if $collapse {
 		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;
+	// Distance padding whenever a column isn't set to collapse
+	// (use $collapse:null to do nothing)
+	@else if $collapse == false {
+		padding-left  : $distance / 2;
+		padding-right : $distance / 2;
 	}
-	
+
 	// 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();
+		width : gridCalc($columns, $total-columns);
 
-			@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 last column, float naturally instead of to the right
+		@if $last-column {
+			float: $default-opposite;
 		}
 	}
 
 	// If offset, calculate appropriate margins
-	@if $offset {
-		margin-#{$default-float}: gridCalc($offset, $collapse:$collapse);
+	@if $offset { 
+		margin-#{$default-float}: gridCalc($offset, $total-columns);
 	}
 
 	// Source Ordering, adds left/right depending on which you use.
 	@if $push {
-		@if $minify == false { position : relative; }
-		#{$default-float}    : gridCalc($push, $collapse: $collapse);
+		#{$default-float}    : gridCalc($push, $total-columns);
 		#{$default-opposite} : auto;
 	}
 	@if $pull {
-		@if $minify == false { position : relative; }
-		#{$default-opposite} : gridCalc($pull, $collapse: $collapse);
+		#{$default-opposite} : gridCalc($pull, $total-columns);
 		#{$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;
+		margin-#{$default-float}    : auto !important;
+		margin-#{$default-opposite} : 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;
+		@if $float == left or $float == true {
+			float: $default-float;
+		}
+		@else if $float == right {
+			float: $default-opposite;
+		}
+		@else {
+			float: none;
+		}
+	}
+	
+	// If used from external file and size is not small
+	@if $external {
+		@if $small == false {
+			@include small {
+				width : 100%;
+			}
 		}
 	}
 }
 
-// CSS
+@if $include-grid {
+
+/* ---------------
+EDGE Grid
+--------------- */
+
 body {
 	&.not-responsive {
-		min-width : $row-width;
+		min-width : $row-max-width;
 	}
 	&.only-responsive-below-small {
-		min-width : $row-width;
+		min-width : $row-max-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`
+	// 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 );
-			}
+			@include grid-column($collapse:true, $for-base:false);
 		}
 	}
-
-	// For `nested-row`
+	
+	// Nested-collapsed 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 );
+		@include grid-row($behavior:nest);
+		&.collapse {
+			@include grid-row($behavior:nest-collapse); }
 		}
 	}
-}
+	
+	// Normal column
+	.column,
+	.columns {
+		@include grid-column($columns:$total-columns);
+	}
+	
 
-.column.large-centered,
-.columns.large-centered {
-	@include grid-column($center:true, $collapse:null, $float:false );
-}
+	@for $i from 1 through $total-columns {
+		.large#{-$i} { @include grid-column($columns:$i, $collapse:null, $float:false, $for-base:true); }
+	}
 
-// 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 ); }
+	@for $i from 0 through $total-columns - 1 {
+		.row .large-offset-#{$i} {
+			@include grid-column($offset:$i, $collapse:null, $float:false, $for-base:true);
 		}
 	}
-}
 
-@include medium-up {
-	@for $i from 2 through $total-columns - 2 {
-		.small-push-#{$i} {
-			left: inherit;
-		}
-		.small-pull-#{$i}  {
-			right: inherit;
-		}
+	// Centered column
+	.column.large-centered,
+	.columns.large-centered {
+		@include grid-column($center:true, $collapse:null, $float:false);
 	}
-}
 
-@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;
+	@include medium-up {
+		@for $i from 1 through $total-columns - 1 {
+			.push#{-$i} {
+				@include grid-column($push:$i, $collapse:null, $float:false, $for-base:true);
+			}
+			.pull#{-$i} {
+				@include grid-column($pull:$i, $collapse:null, $float:false, $for-base:true);
+			}
 		}
 	}
-	
-	// Reset large-offset
-	.row {
-		[class*="large-offset"] {
-			margin-left : 0;
+
+		// Small screen and below
+	@include small {
+		.column,
+		.columns {
+			@include grid-column($columns:$total-columns);
 		}
-	}
 
-	// Small columns
-	@for $i from 1 through $total-columns {
-		.row .small-#{$i} {
-			@include grid-column($columns:$i, $collapse:null, $float:false, $minify: true );
+		@for $i from 1 through $total-columns {
+			.small#{-$i} {
+				@include grid-column($columns:$i, $collapse:null, $float:false, $for-base: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 );
+
+		@for $i from 0 through $total-columns - 2 {
+			.small-offset-#{$i} {
+				@include grid-column($offset:$i, $collapse:null, $float:false, $for-base:true);
 			}
 		}
+
+		.column.small-centered,
+		.columns.small-centered {
+			@include grid-column($center:true, $collapse:null, $float:false);
+		}
 	}
-	.column.small-centered,
-	.columns.small-centered {
-		@include grid-column($center:true, $collapse:null, $float:false );
-	}
-}
+} // $include-grid

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

@@ -1,7 +1,11 @@
+@if $include-main {
+
 /* ------------------
 EDGE Boilerplate
 --------------------- */
 
+* { margin: 0; 	padding: 0; }
+
 // Set box-sizing globally to handle padding and border widths
 *,
 *:before,
@@ -18,8 +22,6 @@ 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;
@@ -36,6 +38,17 @@ p {
 	margin-bottom : 0;
 }
 
+a {
+	display         : inline-block;
+	cursor          : pointer;
+	text-decoration : none;
+}
+
+// Clear bullet or numbering on plain <ul> and <ol>
+ul, ol {
+	list-style: none;
+}
+
 // A better looking default horizontal rule
 hr {
 	display    : block;
@@ -49,7 +62,7 @@ hr {
 // Override `normalize` part that we don't like
 a:focus { outline: none; }
 
-h1 { margin: 0; }
+h1, h2, h3, h4, h5, h6 { margin: 0; }
 
 fieldset {
 	border  : 0;
@@ -57,7 +70,6 @@ fieldset {
 	padding : 0;
 }
 
-
 // Grid Defaults to get images and embeds to work properly
 img,
 object,
@@ -94,7 +106,6 @@ img {
 	-ms-interpolation-mode: bicubic;
 }
 
-
 // Chrome Sibling Selector Fix
 body {
 	-webkit-animation: bugfix infinite 1s;
@@ -105,16 +116,6 @@ body {
 	to { padding: 0; }
 }
 
-// Disable text-shadow on selection
-::-moz-selection {
-	background  : #3297fd;
-	text-shadow : none;
-}
-::selection {
-	background  : #3297fd;
-	text-shadow : none;
-}
-
 // -----------------------------------
 /* Miscellaneous useful HTML classes */
 // -----------------------------------
@@ -139,5 +140,14 @@ body {
 .bold, b, strong { font-weight: 700 !important; }
 .italic, em      { font-style: italic !important; }
 
+ul.inline, ol.inline {
+	list-style-type : none;
+	li {
+		display : inline-block;
+	}
+}
+
 // Font smoothing, only works on Safari Webkit
-.antialiased     { -webkit-font-smoothing: antialiased; }
+.antialiased     { -webkit-font-smoothing: antialiased; }
+
+}

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

@@ -1,3 +1,5 @@
+@if $include-normalize {
+	
 /* ---------------------------
 Normalize | git.io/normalize
 ------------------------------ */
@@ -46,4 +48,6 @@ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webki
 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; }
+table { border-collapse: collapse; border-spacing: 0; }
+
+}

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

@@ -1,3 +1,5 @@
+@if $include-print {
+	
 /* ------------------------------
 H5BP PRINT
 - Style for printing the website
@@ -68,4 +70,7 @@ H5BP PRINT
 	h3 {
 		page-break-after: avoid;
 	}	
-}
+}
+
+}
+

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

@@ -1,4 +1,33 @@
+// HEADER
+$h1-font-size: em(44px) !default;
+$h2-font-size: em(37px) !default;
+$h3-font-size: em(27px) !default;
+$h4-font-size: em(23px) !default;
+$h5-font-size: em(18px) !default;
+$h6-font-size: 1em !default;
+
+$header-font-weight: 700 !default;
+
+
+@if $include-typography {
+
 /* ---------------
 EDGE Typography
 --------------- */
 
+h1 { font-size: $h1-font-size }
+h2 { font-size: $h2-font-size }
+h3 { font-size: $h3-font-size }
+h4 { font-size: $h4-font-size }
+h5 { font-size: $h5-font-size; }
+h6 { font-size: $h6-font-size; }
+
+
+code {
+	display    : inline-block;
+	&, pre {
+		font-family: $code-font-family;
+	}
+}
+
+}