edge_framework 0.6.1 → 0.8.1

data/assets/sass/edge/_components.scss

@@ -5,7 +5,7 @@
 @import "components/form";
 
 @import "components/grid";
-@import "components/block-grid";
+@import "components/tile";
 
 @import "components/visibility";
 @import "components/print";

data/assets/sass/edge/_helpers.scss

@@ -1,9 +1,9 @@
 @import "helpers/sprites";
 @import "helpers/sticky-footer";
 
-// The mixins from Components class, but don't output the CSS
+// Disable the output, because we only want to enable the mixin
 $include-grid       : false;
-$include-block-grid : false;
+$include-tile       : false;
 $include-visibility : false;
 
 $include-button     : false;

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

@@ -2,7 +2,7 @@
 // CODE HIGHLIGHTER
 //   Based on Prism.js - Coy Theme
 //   @origin Tim Shedor
-//           https://github.com/tshedor/workshop-wp-theme
+//     https://github.com/tshedor/workshop-wp-theme
 // -------------------------------------------------------
 
 $code-font-family   : "Consolas", Courier, "monospace" !default;
@@ -48,9 +48,9 @@ $code-python-color  : #376a94; // dark-blue
 }
 
 @if $include-code {
-/* ------------------
-EDGE CODE Highlighter
---------------------- */
+/* ----------------------
+  EDGE CODE Highlighter
+---------------------- */
 
 // Reset
 code, kbd, samp {

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

@@ -0,0 +1,287 @@
+// -----------------------------------------
+// GRID 
+//   Based on ZURB's Foundation 4
+// -----------------------------------------
+
+$row-max-width   : 1140px !default;
+$total-columns   : 12 !default;
+$column-distance : 20px !default;
+
+// Calculate percentages for grid
+@function gridCalc($colNumber, $totalColumns:$total-columns) {
+  @return percentage($colNumber / $totalColumns);
+}
+
+// For creating container, nested, and collapsed rows.
+@mixin grid-row(
+  $nest      : false,
+  $collapse  : false,
+  $for-base  : false,  // Prevent style repetition, only for internal use
+  $max-width : $row-max-width,
+  $distance  : $column-distance ) {
+  
+  $max-width : $max-width + $distance; // to make up for the padding
+  $distance  : em($distance);
+
+  // prevent duplicate for base CSS class
+  @if $for-base == false {
+    @include clearfix;
+  }
+  
+  @if $nest and $collapse {
+    width     : auto;
+    max-width : none;
+    margin    : 0;
+    padding-#{$default-float}    : 0;
+    padding-#{$default-opposite} : 0;
+  }
+
+  @else if $nest {
+    width      : auto;
+    max-width  : none;
+    margin-#{$default-float}    : -($distance / 2);
+    margin-#{$default-opposite} : -($distance / 2);
+  }
+
+  @else if $collapse {
+    width     : 100%;
+    max-width : $max-width;
+    margin    : 0 auto;
+    padding-#{$default-float}    : $distance / 2;
+    padding-#{$default-opposite} : $distance / 2;
+  }
+
+  // use @include grid-row; to use a container row
+  @else {
+    width     : 100%;
+    max-width : $max-width;
+    margin    : 0 auto;
+  }
+}
+
+// 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      : 0,
+  $push        : 0,
+  $pull        : 0,
+  $collapse    : false,
+  $float       : true,
+  $form        : false, // Create form-columns
+  $for-base    : false, // Prevent style repetition, only for internal use
+  $distance      : em($column-distance),
+  $total-columns : $total-columns,
+  $external      : $external-call, // Mixin used from external file
+  $small    : false // For external use, apply CSS for small-grid
+  ) {
+
+  @if $for-base == false {
+    position: relative;
+  }
+
+  // If collapsed, get rid of distance padding
+  @if $collapse {
+    // If not for form-column
+    @if $form == false {
+      padding-left  : 0;
+      padding-right : 0;
+    }
+  }
+
+  // Set distance between padding whenever a column isn't set to collapse
+  //   Form-column can't have distance
+  // (use $collapse:null to do nothing)
+  @else if $collapse == false and $form == false {
+    padding-left  : $distance / 2;
+    padding-right : $distance / 2;
+  }
+
+  // If a column number is given, calculate width
+  @if $columns {
+    width : gridCalc($columns, $total-columns);
+
+    // If last column, float naturally instead of to the right
+    @if $last-column {
+      float: $default-opposite;
+    }
+  }
+
+  // If offset, calculate appropriate margins
+  @if $offset > 0 { 
+    margin-#{$default-float}: gridCalc($offset, $total-columns);
+  }
+
+  // Source Ordering, adds left/right depending on which you use.
+  @if $push > 0 {
+    #{$default-float}    : gridCalc($push, $total-columns);
+    #{$default-opposite} : auto;
+  }
+  @if $pull > 0 {
+    #{$default-opposite} : gridCalc($pull, $total-columns);
+    #{$default-float}    : auto;
+  }
+
+  // If centered, get rid of float and add appropriate margins
+  @if $center {
+    margin-#{$default-float}    : auto !important;
+    margin-#{$default-opposite} : auto !important;
+    float : none !important;
+    
+    // If for form-column, change display to `block`
+    @if $form {
+      display: block;
+    }
+  }
+
+  @if $float {
+    @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%;
+      }
+    }
+  }
+}
+
+@if $include-grid {
+
+/* ---------------
+EDGE Grid
+--------------- */
+
+body {
+  &.not-responsive {
+    min-width: em($row-max-width + $column-distance);
+  }
+  &.only-responsive-below-small {
+    min-width : $row-max-width;
+    .row {
+      min-width: em($row-max-width);
+
+      // Nested row
+      .row {
+        min-width: 0;
+      }
+    }
+
+    @include small {
+      min-width : 0;
+      .row {
+        min-width: 0;
+      }
+    }
+  }
+}
+
+// Normal row
+.row {
+  @include grid-row;
+  
+  // Collapsed row
+  &.collapse {
+    @include grid-row($collapse:true);
+    .column,
+    .columns {
+      @include grid-column($collapse:true);
+    }
+  }
+  
+  // Nested-collapsed row
+  .row {
+    @include grid-row($nest:true);
+    &.collapse {
+      @include grid-row($nest:true, $collapse:true);
+    }
+  }
+}
+
+// Normal column
+.column,
+.columns {
+  @include grid-column($columns:$total-columns);
+}
+
+
+// Normal form-row
+.form-row {
+  @include grid-row($collapse:true, $nest:true);
+
+  .form-column,
+  .form-columns {
+    @include grid-column($collapse:true, $form:true);
+  }
+}
+
+@for $i from 1 through $total-columns {
+  .large#{-$i} { @include grid-column($columns:$i, $collapse:null, $float:false, $for-base:true); }
+}
+
+// Centered column
+.column.large-centered,
+.columns.large-centered {
+  @include grid-column($center:true, $collapse:null, $float:false);
+}
+
+// Centered form-column
+.form-column.large-centered,
+.form-columns.large-centered {
+  @include grid-column($center:true, $collapse:null, $float:false, $form:true);
+}
+
+// Source Ordering
+@include medium-up {
+  @for $i from 1 through $total-columns - 1 {
+    .large-offset-#{$i} {
+      @include grid-column($offset:$i, $collapse:null, $float:false, $for-base:true);
+    }
+    .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);
+    }
+  }
+}
+
+// Small screen and below
+@include small {
+  
+  body:not(.not-responsive) {
+    .column,
+    .columns {
+      @include grid-column($columns:$total-columns);
+    }
+    @for $i from 1 through $total-columns {
+      .small#{-$i} {
+        @include grid-column($columns:$i, $collapse:null, $float:false, $for-base:true);
+      }
+    }
+  }
+
+  @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);
+  }
+}
+
+} // $include-grid

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

@@ -5,156 +5,177 @@
 
 $row-max-width   : 1140px !default;
 $total-columns   : 12 !default;
-$column-distance : 20px !default;
+$column-gutter   : 20px !default;
 
 // Calculate percentages for grid
-@function gridCalc($colNumber, $totalColumns:$total-columns) {
-	@return percentage($colNumber / $totalColumns);
+@function gridCalc($colNumber, $totalColumns) {
+  @return percentage($colNumber / $totalColumns);
 }
 
-// For creating container, nested, and collapsed rows.
+// ---------------------------------
+// GRID ROW
+//   Create container for the grid
+// ---------------------------------
 @mixin grid-row(
-	$nest      : false,
-	$collapse  : false,
-	$for-base  : false,  // Prevent style repetition, only for internal use
-	$max-width : $row-max-width,
-	$distance  : $column-distance ) {
-	
-	$max-width : $max-width + $distance; // to make up for the padding
-	$distance  : em($distance);
-
-	// prevent duplicate for base CSS class
-	@if $for-base == false {
-		@include clearfix;
-	}
-	
-	@if $nest and $collapse {
-		width     : auto;
-		max-width : none;
-		margin    : 0;
-		padding-#{$default-float}    : 0;
-		padding-#{$default-opposite} : 0;
-	}
-
-	@else if $nest {
-		width      : auto;
-		max-width  : none;
-		margin-#{$default-float}    : -($distance / 2);
-		margin-#{$default-opposite} : -($distance / 2);
-	}
-
-	@else if $collapse {
-		width     : 100%;
-		max-width : $max-width;
-		margin    : 0 auto;
-		padding-#{$default-float}    : $distance / 2;
-		padding-#{$default-opposite} : $distance / 2;
-	}
+  $nest      : false,
+  $collapse  : false,
+  $width     : $row-max-width,
+  $gutter    : $column-gutter,
+  $for-base  : false ) {
+
+  @if $for-base {
+    margin: 0 auto;
+    width: 100%;
+    max-width: $width + $gutter;
+    
+    @if not $responsive {
+      min-width: $width + $gutter;
+    }
+    @include clearfix;
+  }
+
+  $gutter: em($gutter);
+  
+  @if $nest and $collapse {
+    width: auto;
+    max-width: none;
+    margin: 0;
+    padding-right: 0;
+    padding-left: 0;
+  }
+
+  @else if $nest {
+    width: auto;
+    max-width: none;
+    margin-right: -($gutter / 2);
+    margin-left: -($gutter / 2);
+  }
+
+  @else if $collapse {
+    width: 100%;
+    max-width: $width;
+    margin: 0 auto;
+    padding-right: $gutter / 2;
+    padding-left: $gutter / 2;
+  }
+}
 
-	// use @include grid-row; to use a container row
-	@else {
-		width     : 100%;
-		max-width : $max-width;
-		margin    : 0 auto;
-	}
+@mixin external-call-column(
+  $column : 0,
+  $total  : 0,
+  $offset : 0,
+  $parent-offset : 0) {
+  
+  @if $column > 0 {
+    width: gridCalc($column, $total);
+  } @else {
+    width: 100%;
+  }
+
+  // Offset is only allowed if the column is specified
+  @if $column > 0 and $offset > 0 {
+    margin-#{$default-float}: gridCalc($offset, $total);
+  }
+  // If parent (larger) column has offset, remove it
+  @else if $parent-offset > 0 {
+    margin-#{$default-float}: 0;
+  }
 }
 
-// For creating columns - @include these inside a media query to control small vs. large grid layouts
+// ------------------------
+// GRID COLUMN
+//   Create the grid
+// ------------------------
 @mixin grid-column(
-	$columns     : false,
-	$last-column : false,
-	$center      : false,
-	$offset      : 0,
-	$push        : 0,
-	$pull        : 0,
-	$collapse    : false,
-	$float       : true,
-	$form        : false, // Create form-columns
-	$for-base    : false, // Prevent style repetition, only for internal use
-	$distance      : em($column-distance),
-	$total-columns : $total-columns,
-	$external      : $external-call, // Mixin used from external file
-	$small    : false // For external use, apply CSS for small-grid
-	) {
-
-	@if $for-base == false {
-		position: relative;
-	}
-
-	// If collapsed, get rid of distance padding
-	@if $collapse {
-		// If not for form-column
-		@if $form == false {
-			padding-left  : 0;
-			padding-right : 0;
-		}
-	}
-
-	// Set distance between padding whenever a column isn't set to collapse
-	//   Form-column can't have distance
-	// (use $collapse:null to do nothing)
-	@else if $collapse == false and $form == false {
-		padding-left  : $distance / 2;
-		padding-right : $distance / 2;
-	}
-
-	// If a column number is given, calculate width
-	@if $columns {
-		width : gridCalc($columns, $total-columns);
-
-		// If last column, float naturally instead of to the right
-		@if $last-column {
-			float: $default-opposite;
-		}
-	}
-
-	// If offset, calculate appropriate margins
-	@if $offset > 0 { 
-		margin-#{$default-float}: gridCalc($offset, $total-columns);
-	}
-
-	// Source Ordering, adds left/right depending on which you use.
-	@if $push > 0 {
-		#{$default-float}    : gridCalc($push, $total-columns);
-		#{$default-opposite} : auto;
-	}
-	@if $pull > 0 {
-		#{$default-opposite} : gridCalc($pull, $total-columns);
-		#{$default-float}    : auto;
-	}
-
-	// If centered, get rid of float and add appropriate margins
-	@if $center {
-		margin-#{$default-float}    : auto !important;
-		margin-#{$default-opposite} : auto !important;
-		float : none !important;
-		
-		// If for form-column, change display to `block`
-		@if $form {
-			display: block;
-		}
-	}
-
-	@if $float {
-		@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%;
-			}
-		}
-	}
+  $large  : 0,
+  $small  : 0, // For external call only, small size screen
+  $mini   : 0, // For external call only, mini size screen
+  $large-offset : 0,
+  $small-offset : 0, // For external call only
+  $mini-offset  : 0, // For external call only
+  $push  : 0,
+  $pull  : 0,
+  $collapse  : false,
+  $center    : false,
+  $gutter    : $column-gutter,
+  $total     : $total-columns,
+  $for-base  : false ) {
+
+  @if $for-base {
+    position: relative;
+    float: $default-float;
+    padding-right: em($gutter) / 2;
+    padding-left: em($gutter) / 2;
+  }
+
+  // If gutter's value is different from default, it means it is passed as param
+  @if not $gutter == $column-gutter {
+    padding-right: em($gutter) / 2;
+    padding-left: em($gutter) / 2;
+  }
+
+  // If collapsed, get rid of distance padding
+  @if $collapse {
+    padding-right: 0;
+    padding-left: 0;
+  }
+
+  // If offset, calculate appropriate margins
+  @if $large-offset > 0 { 
+    margin-#{$default-float}: gridCalc($large-offset, $total);
+  }
+
+  // If a column number is given, calculate width
+  @if $large > 0 {
+    width: gridCalc($large, $total);
+  }
+
+  // Source Ordering, adds left/right depending on which you use.
+  @if $push > 0 {
+    #{$default-float}: gridCalc($push, $total);
+    #{$default-opposite}: auto;
+  }
+  @if $pull > 0 {
+    #{$default-opposite}: gridCalc($pull, $total);
+    #{$default-float}: auto;
+  }
+
+  // If centered, get rid of float and add auto margin
+  @if $center {
+    display: block;
+    float: none;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
+  
+  // If external call and responsive is true
+  @if $external-call and $responsive {
+    // If small column is specified
+    @if $small > 0 {
+      @include below(small) {
+        @include external-call-column($column:$small, $total:$total, $offset:$small-offset, $parent-offset:$large-offset);
+      }
+      
+      // Mini column is allowed only if Small column is specified
+      @if $mini > 0 {
+        @include below(mini) {
+          @include external-call-column($column:$mini, $total:$total, $offset:$mini-offset, $parent-offset:$small-offset);
+        }
+      }
+      // If mini is not passed, stack the column
+      @else {
+        @include below(mini) {
+          @include external-call-column($column:$mini, $total:$total, $offset:$mini-offset, $parent-offset:$small-offset);
+        }
+      }
+    }
+    // If small is not passed, stack the column
+    @else {
+      @include below(small) {
+        @include external-call-column($column:$small, $total:$total, $offset:$small-offset, $parent-offset:$large-offset);
+      }
+    }
+  }
 }
 
 @if $include-grid {
@@ -163,125 +184,84 @@ $column-distance : 20px !default;
 EDGE Grid
 --------------- */
 
-body {
-	&.not-responsive {
-		min-width: em($row-max-width + $column-distance);
-	}
-	&.only-responsive-below-small {
-		min-width : $row-max-width;
-		.row {
-			min-width: em($row-max-width);
-
-			// Nested row
-			.row {
-				min-width: 0;
-			}
-		}
-
-		@include small {
-			min-width : 0;
-			.row {
-				min-width: 0;
-			}
-		}
-	}
-}
-
 // Normal row
 .row {
-	@include grid-row;
-	
-	// Collapsed row
-	&.collapse {
-		@include grid-row($collapse:true);
-		.column,
-		.columns {
-			@include grid-column($collapse:true);
-		}
-	}
-	
-	// Nested-collapsed row
-	.row {
-		@include grid-row($nest:true);
-		&.collapse {
-			@include grid-row($nest:true, $collapse:true);
-		}
-	}
+  @include grid-row($for-base:true);
+  
+  // Collapsed row
+  &.collapse {
+    @include grid-row($collapse:true);
+    .column,
+    .columns {
+      @include grid-column($collapse:true);
+    }
+  }
+  
+  // Nested-collapsed row
+  .row {
+    @include grid-row($nest:true);
+    &.collapse {
+      @include grid-row($nest:true, $collapse:true);
+    }
+  }
 }
 
 // Normal column
 .column,
 .columns {
-	@include grid-column($columns:$total-columns);
-}
-
-
-// Normal form-row
-.form-row {
-	@include grid-row($collapse:true, $nest:true);
-
-	.form-column,
-	.form-columns {
-		@include grid-column($collapse:true, $form:true);
-	}
+  @include grid-column($large:$total-columns, $for-base:true);
 }
 
 @for $i from 1 through $total-columns {
-	.large#{-$i} { @include grid-column($columns:$i, $collapse:null, $float:false, $for-base:true); }
+  .large#{-$i} { @include grid-column($large:$i); }
 }
 
 // Centered column
 .column.large-centered,
 .columns.large-centered {
-	@include grid-column($center:true, $collapse:null, $float:false);
-}
-
-// Centered form-column
-.form-column.large-centered,
-.form-columns.large-centered {
-	@include grid-column($center:true, $collapse:null, $float:false, $form:true);
+  @include grid-column($center:true);
 }
 
 // Source Ordering
-@include medium-up {
-	@for $i from 1 through $total-columns - 1 {
-		.large-offset-#{$i} {
-			@include grid-column($offset:$i, $collapse:null, $float:false, $for-base:true);
-		}
-		.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);
-		}
-	}
+@include above(small) {
+  @for $i from 1 through $total-columns - 1 {
+    .large-offset-#{$i} {
+      @include grid-column($large-offset:$i);
+    }
+    .push#{-$i} {
+      @include grid-column($push:$i);
+    }
+    .pull#{-$i} {
+      @include grid-column($pull:$i);
+    }
+  }
 }
 
-// Small screen and below
-@include small {
-	
-	body:not(.not-responsive) {
-		.column,
-		.columns {
-			@include grid-column($columns:$total-columns);
-		}
-		@for $i from 1 through $total-columns {
-			.small#{-$i} {
-				@include grid-column($columns:$i, $collapse:null, $float:false, $for-base:true);
-			}
-		}
-	}
-
-	@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);
-	}
-}
+@if $responsive {
+  // Small screen and below
+  @include below(small) {
+    .column,
+    .columns {
+      @include grid-column($large:$total-columns);
+    }
+    @for $i from 1 through $total-columns {
+      .small#{-$i} {
+        @include grid-column($large:$i);
+      }
+    }
+
+    @for $i from 0 through $total-columns - 2 {
+      .small-offset-#{$i} {
+        @include grid-column($large-offset:$i);
+      }
+    }
+
+    .column.small-centered,
+    .columns.small-centered {
+      @include grid-column($center:true);
+    }
+  }
+
+} // responsive
 
 } // $include-grid