edge_framework 0.1.0 → 0.2.0

checksums.yaml

@@ -1,15 +1,15 @@
 ---
 !binary "U0hBMQ==":
   metadata.gz: !binary |-
-    ODA0NjU4MTZkZTFmNDM5ZWJkMzIzYzFlM2FhNTE5MWQ3MTk5N2E5Yg==
+    MDVhNzhhZWFkM2FlMTVjYWQzNTlhMDlkYTE0YjEzNjIzODVhYTcyYQ==
   data.tar.gz: !binary |-
-    YmIxNmQ0YmRkNzdiZDRjYWVmZGY1ZjQwNzM5OGU3MjkyMjA4OTJhMA==
+    ZDcyZDBhMWJlZGI5N2M0YTAyNDU5MTMxMzZiZDI3MmQ4MjEyOGZiOQ==
 !binary "U0hBNTEy":
   metadata.gz: !binary |-
-    MTU3OGQ5ZDI5MzViYTA2M2NhNWNhODY1OWM5NzZjZDY0MjQ4M2Y5ZWMxODc3
-    OGM5YjkyYjg1NWRlNzk1ZThhZmZjMDBjNmY4ZDg1YTcyNGI3MTZhZjg0MWJk
-    ZjM4YjE3Yzk1NmNmZjMwMTg2MjhhMDA5OThiZDA0YmFjMGRmNmI=
+    ODc0OGYyZDAzYThlMDkwNmNhN2MyYmU0NDhlOGQ3ZjMyOWIzZjJhNTA0OWMz
+    NGZkNTQ0OWEyYzA5ZjQzZjk1ZjIzMWY2ZWQ4MzUwNmUyMTE4MTA5MDFlYzE1
+    YjhjOGFiNTFlMzI5NmEzZmJhMzE1YWJlOTdlNzBjOTM0NTM2YzI=
   data.tar.gz: !binary |-
-    ZDVhNjYzNDQxNGU0NWQwMGVkYWExMGNhNTlkMDUxZGEzZDlmNTA3YTFjMWE0
-    M2QxMzcwMDc3NWJhMmU1YWYwNjBhNDMzMDViOGM5ZDdmZDcwODRkYjlhN2Ji
-    MjMyZjJmOWU3ZDIzYTEwZjQ0YjAzMWJkNDgyMzQyODI0MWQyNmE=
+    MjVlYjFiNjEzY2Q3OGQzMDliZGNhZWNiYWYzZTE1MzY5ZGQwZjJiZWZlN2E4
+    OTAzMzA4NzE0YWE5YzFhNmQ3OTQ3YWQzZmE4ZmY0ZTNiMjVlNDY4Mjc2Y2Jj
+    OGIwODlmNjk5YTE5ZGMyYzdmM2JmZTc0ODllMGFmZDE3Mzg3OTE=

data/.gitignore

@@ -1,3 +1,8 @@
+assets/test.html
+assets/css/
+assets/sass/for-test.scss
+config.rb
+
 #################
 ## Eclipse
 #################
@@ -238,6 +243,4 @@ rdoc
 spec/reports
 test/tmp
 test/version_tmp
-tmp
-
-.gitattributes
+tmp

data/assets/sass/edge/_base.scss

@@ -1,14 +1,52 @@
-// This module must be imported first before other EDGE module
-
+// This module MUST be imported first before any other EDGE module
+@charset "UTF-8";
 @import "compass";
 
+// -------------------------------------------------------
+// OUTPUT CONFIG
+// FULL:
+//   Set to true to keep full styling
+//   Set to false to use barebone style
+// DEBUG:
+//   Set to true for various useful functionality during
+//   development
+// EXTERNAL CALL:
+//   Add extra feature if calling Component's mixin exter-
+//   -nally
+// INCLUDE:
+//   Set to false if you want to import the mixins only
+// -------------------------------------------------------
+$full  : true !default;
+$debug : false !default;
+
+$external-call : false !default; // user shouldn't modify this
+
+$include-main       : true !default;
+$include-grid       : true !default;
+$include-block-grid : true !default;
+$include-visibility : true !default;
+
+$include-button     : true !default;
+$include-form       : true !default;
+$include-typography : true !default;
+
+$include-normalize  : true !default;
+$include-print      : true !default;
+
 // ----------
 // COLOR
 // ----------
-$main-color    : #0099CC !default;
-$sub-color     : #AAA !default;
-$alert-color   : #CC0000 !default;
-$success-color : #3D9900 !default;
+// Two main colors of your site
+$main-color    : #0173BC !default;
+$sub-color     : #E9E9E9 !default;
+
+// These 5 colors below should NEVER be used directly
+// Put it to other variable like $header-color: $blue-color;
+$passive-color : #E9E9E9 !default;
+$blue-color    : #0173BC !default;
+$yellow-color  : #DBA924 !default;
+$red-color     : #DA2E18 !default;
+$green-color   : #2CAE34 !default;
 
 // ---------------
 // BODY
@@ -18,20 +56,24 @@ $body-font-color  : #222 !default;
 $body-font-weight : normal !default;
 $body-font-style  : normal !default;
 
-$header-font-family : "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !default;
-$body-font-family   : "Helvetica", Helvetica, Arial, sans-serif !default;
+$header-font-family : "Helvetica Neue", "Helvetica", Helvetica, Arial, "sans-serif" !default;
+$body-font-family   : "Helvetica", Helvetica, Arial, "sans-serif" !default;
+$code-font-family   : "Consolas", Courier, "monospace" !default;
 
 // The default font-size is set to 100% of the browser style sheet (usually 16px)
 // for compatibility with brower-based text zoom or user-set defaults.
 $base-font-size   : 100% !default;
+// Maximum width of the grid
+$content-width    : 1140px !default;
 
 // ---------------
 // GLOBAL VALUE
 // ---------------
 $g-radius : 5px !default;
 $g-round  : 1000px !default;
+$g-transition : all 0.2s ease-out !default;
 
-$content-width : 1140px !default; // For grid
+%transition { @include transition($g-transition); }
 
 // ------------------------
 // PIXEL --> EM CONVERTER
@@ -48,7 +90,7 @@ $em-base  : 16px !default;
 	// If not number, return it as is
 	@if type-of($value) != number { @return $value; }
 	
-	$value: stripUnit($value) / stripUnit($em-base) * 1em;
+	$value: stripUnit($value) / stripUnit($context) * 1em;
 	// Turn 0em into 0
 	@if ($value == 0em) {
 		$value: 0;
@@ -62,25 +104,32 @@ $em-base  : 16px !default;
 //   padding : em(20px 30px 15px 10px);
 //   @include box-shadow(em(inset 2px 0 5px rgba(black, 0.3) ) );
 @function em($values, $context: $em-base) {
-	// If the value only contain single number, return it quickly without the overhead further below
-	@if type-of($values) == number {
-		@return convertToEm($values, $context);
+	// If debug mode, return it plainly
+	@if $debug {
+		@return $values;
 	}
+	// Only convert to EM on non-debug mode
+	@else {
+		// If the value only contain single number, return it quickly without the overhead further below
+		@if type-of($values) == number {
+			@return convertToEm($values, $context);
+		}
 
-	$emValues   : (); // This will eventually store the converted $values in a list
-	@each $val in $values {
-		$emValues: append($emValues, convertToEm($val, $context) );
+		$emValues   : (); // This will eventually store the converted $values in a list
+		@each $val in $values {
+			$emValues: append($emValues, convertToEm($val, $context) );
+		}
+		@return join((), $emValues, space );
 	}
-	@return join((), $emValues, space );
 }
 
 // -------------------
 // MEDIA QUERIES
 // -------------------
-$phone-screen  : em(480px) !default;
-$small-screen  : em(767px) !default;
-$medium-screen : em(1140px) !default;
-$large-screen  : em(1440px) !default;
+$phone-screen  : 480px !default;
+$small-screen  : 767px !default;
+$medium-screen : 1140px !default;
+$large-screen  : 1440px !default;
 $retina-screen : 192dpi !default;
 // 480px and down
 @mixin phone() {
@@ -124,20 +173,19 @@ $retina-screen : 192dpi !default;
 //     @include box-shadow(shiny(right), ...)
 // ---------------------------------------------------
 @function shiny($applyTo: top, $activeState: false) {
-	@if $applyTo == top {
-		$size : 0 1px; }
-	@else if $applyTo == right {
+	$size  : 0 1px; // top
+	$shiny : inset $size 0 rgba(white, 0.5); // normal state
+
+	@if $applyTo == right {
 		$size : 1px 0; }
 	@else if $applyTo == left {
 		$size : -1px 0; }
 	@else if $applyTo == bottom {
 		$size : 0 -1px; }
 	
-	// Initialize the shiny shadow
+	// Change the shiny shadow if active-state
 	@if $activeState {
 		$shiny : inset $size 0 rgba(black, 0.2);
-	} @else {
-		$shiny : inset $size 0 rgba(white, 0.5);
 	}
 	@return $shiny;
 }
@@ -178,9 +226,11 @@ $retina-screen : 192dpi !default;
 @mixin selection($color: lighten($main-color, 35%) ) {
 	::-moz-selection {
 		background  : $color;
+		text-shadow : none;
 	}
 	::selection {
 		background  : $color;
+		text-shadow : none;
 	}
 }
 
@@ -228,7 +278,7 @@ $default-opposite : right !default;
 			$direction == bottom {
 			$height : $width/2;
 		}
-		// Else if corner triangle, `heigth` is the same as `width`
+		// Else if cornered triangle, `heigth` is the same as `width`
 		@else if $direction == top-right or
 				 $direction == top-left or
 				 $direction == bottom-right or

data/assets/sass/edge/_components.scss

@@ -1,9 +1,12 @@
 @import "components/normalize";
 @import "components/main";
-@import "components/grid";
-@import "components/block_grid";
-@import "components/print";
+
+@import "components/button";
+@import "components/typography";
 @import "components/form";
+
+@import "components/grid";
+@import "components/block-grid";
+
 @import "components/visibility";
-// @import "components/typography";
-// @import "components/form";
+@import "components/print";

data/assets/sass/edge/_helpers.scss

@@ -1,2 +1,19 @@
 @import "helpers/sprites";
-@import "helpers/sticky-footer";
+@import "helpers/sticky-footer";
+
+// The mixins from Components class, but don't output the CSS
+$include-main       : false;
+$include-grid       : false;
+$include-block-grid : false;
+$include-visibility : false;
+
+$include-button     : false;
+$include-form       : false;
+$include-typography : false;
+
+$include-normalize  : false;
+$include-print      : false;
+
+$external-call : true; // add extra feature to some Component's mixin
+
+@import "components";

data/assets/sass/edge/components/{_block_grid.scss → _block-grid-margin.scss}

@@ -1,8 +1,8 @@
-/* ---------------
-EDGE Block Grid
---------------- */
-// Based on Zurb's Foundation
-
+// ------------------------------------------
+// BLOCK GRID with MARGIN
+//   *Deprecated* in v 0.1
+//   Using margin for distance between block
+// ------------------------------------------
 $block-grid-max-width : em($content-width) !default;
 $block-grid-total     : 12 !default;
 $block-grid-margin    : em(25px) !default;
@@ -63,27 +63,38 @@ $block-grid-margin    : em(25px) !default;
 	}
 }
 
+@if $include-block-grid {
+
+/* ---------------
+EDGE Block Grid
+--------------- */
+
 [class*="block-grid-"] { @include block-grid; }
 
 // Large block grid
 @for $i from 2 through $block-grid-total {
 	.large-block-grid-#{($i)} {
-		@include block-grid($i, $base-style: false);
+		@include block-grid($i, $for-base: false);
 
 		&.collapse {
-			@include block-grid($i, $base-style: false, $collapse: true);
+			@include block-grid($i, $for-base: false, $collapse: true);
 		}
 	}
 }
 
 @include small {
 	[class*="small-block-grid-"] > li { clear: none !important; }
-
-	// Reset large-block-grid nth-child margin
-	[class*="large-block-grid-"] > li:nth-child(n+1) {
-		margin-#{$default-opposite} : blockGridMarginCalc($block-grid-margin);
-	}
 	
+	// Make large-block-grid 100% width
+	[class*="large-block-grid-"] > li {
+		width: 100%;
+		
+		// Reset large-block-grid nth-child margin
+		&:nth-child(n+1) {
+			margin-#{$default-opposite} : blockGridMarginCalc($block-grid-margin);
+		}
+	}
+
 	// Small block grid
 	@for $i from 2 through $block-grid-total {
 		.small-block-grid-#{($i)} {
@@ -97,3 +108,5 @@ $block-grid-margin    : em(25px) !default;
 
 // Base style for collapsed block-grid, written below to override other style
 [class*="block-grid-"].collapse { @include block-grid($collapse: true); }
+
+}

data/assets/sass/edge/components/_block-grid.scss

@@ -0,0 +1,110 @@
+// ------------------------------------------
+// BLOCK GRID
+//   Based heavily on ZURB's Foundation
+// ------------------------------------------
+
+$block-distance  : em(15px) !default;
+$max-blocks      : 12 !default;
+
+@mixin block-grid-calc (
+	$per-row  : false,
+	$distance : $block-distance,
+	$collapse : false,
+	$for-base : true ) {
+
+	@if $per-row {
+		width   : 100% / $per-row;
+
+		&:nth-of-type(n) {
+			clear: none;
+		}
+		&:nth-of-type(#{$per-row}n+1) {
+			clear: both;
+		}
+	} @else {
+		@if $collapse {
+			padding : 0;
+		} @else {
+			padding : 0 ($distance / 2);
+		}
+	}
+}
+
+@mixin block-grid (
+	$per-row  : false,
+	$distance : $block-distance,
+	$collapse : false,
+	$for-base : true ) {
+	
+	// For base class
+	@if $for-base {
+		display : block;
+		padding : 0;
+
+		@if $collapse {
+			margin  : 0;
+		} @else {
+			margin  : 0 (-$distance / 2);
+		}
+		
+		@include clearfix;
+
+		& > li {
+			display : block;
+			height  : auto;
+			float   : $default-float;
+			@include block-grid-calc($distance:$distance, $collapse:$collapse);
+		}
+	}
+
+	@if $per-row {
+		& > li {
+			@include block-grid-calc($per-row:$per-row);
+		}
+	}
+}
+
+@if $include-block-grid {
+
+/* ---------------
+EDGE Block Grid
+--------------- */
+
+[class*="block-grid-"] {
+	@include block-grid();
+	
+	&.collapse {
+		@include block-grid($collapse:true);
+	}
+}
+
+@for $i from 1 through $max-blocks {
+	.large-block-grid-#{$i} {
+		@include block-grid($per-row:$i, $for-base:false );
+	}
+}
+
+@include small {
+	// Make large-block-grid 100% width
+	[class*="large-block-grid-"] > li {
+		width: 100%;
+	}
+
+	// Remove large grid clearing
+	@for $i from 1 through $max-blocks {
+		.large-block-grid-#{$i} > li:nth-of-type(#{$i}n+1) {
+			clear: none;
+		}
+	}
+
+	@for $i from 1 through $max-blocks {
+		.small-block-grid-#{$i} {
+			@include block-grid($per-row:$i, $for-base:false );
+		}
+	}
+}
+
+
+
+
+} // include-block-grid

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

@@ -0,0 +1,50 @@
+$button-padding : em(10px 20px);
+
+@mixin button($bg-color:$main-color, $for-base:false) {
+	// Button Shadow
+	$shadow-base  : 0 1px 0 darken($bg-color, 20%);
+	$shadow-hover  : inset 1px 1px 5em rgba(black, 0.2);
+
+	background : $bg-color;
+	color      : contrast-color($bg-color, #333, white, 50%);
+	border     : none;
+	
+	@if $full {
+		$shadow-base  : 0 1px 0 darken($bg-color, 20%);
+		@include box-shadow($shadow-base );
+	}
+
+	@if $for-base {
+		position  : relative;
+		cursor    : pointer;
+		padding   : $button-padding;
+		
+		@if $full {
+			&:hover {
+				// background: darken($bg-color, 10%);
+				@include box-shadow($shadow-base, $shadow-hover );
+			}
+
+			&:active {
+				top: 1px;
+				border: none;
+				@include box-shadow($shadow-hover );
+			}
+		}
+	}
+}
+
+@if $include-button {
+	
+/* ---------------
+EDGE Button
+--------------- */
+button,
+.button,
+input[type="button"],
+input[type="submit"],
+input[type="reset"] {
+	@include button($for-base: true);
+}
+
+}

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

@@ -1,4 +1,4 @@
-
+@if $include-form {
 
 // Remove the delete (x) mark from IE
 input::-ms-clear {
@@ -12,4 +12,6 @@ input::-webkit-calendar-picker-indicator{
 
 input[type="date"]::-webkit-input-placeholder{ 
 	visibility: hidden !important;
+}
+
 }