edge_framework 0.1.0 → 0.2.0

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

@@ -0,0 +1,309 @@
+// -----------------------------------------
+// GRID with MARGIN
+//   *Deprecated* in v 0.1
+//   Using margin for distance between grid
+// -----------------------------------------
+$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-#{$default-float}    : -($column-padding);
+		margin-#{$default-opposite} : -($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;
+		}
+	}
+}
+
+@if $include-grid {
+
+/* ---------------
+EDGE Grid
+--------------- */
+
+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 );
+	}
+}
+
+}