edge_framework 0.6.1 → 0.8.1

data/Gemfile

@@ -1,4 +1,4 @@
 source 'https://rubygems.org'
 
-# Specify your gem's dependencies in edge-style.gemspec
+# Specify your gem's dependencies in edge.gemspec
 gemspec

data/Gemfile.lock

@@ -0,0 +1,38 @@
+PATH
+  remote: .
+  specs:
+    edge_framework (0.6.1)
+      compass (>= 0.12.0)
+      sass (>= 3.2.0)
+      win32console
+
+GEM
+  remote: https://rubygems.org/
+  specs:
+    chunky_png (1.2.9)
+    compass (0.12.2)
+      chunky_png (~> 1.2)
+      fssm (>= 0.2.7)
+      sass (~> 3.1)
+    diff-lcs (1.2.4)
+    fssm (0.2.10)
+    rake (10.1.0)
+    rspec (2.14.1)
+      rspec-core (~> 2.14.0)
+      rspec-expectations (~> 2.14.0)
+      rspec-mocks (~> 2.14.0)
+    rspec-core (2.14.5)
+    rspec-expectations (2.14.2)
+      diff-lcs (>= 1.1.3, < 2.0)
+    rspec-mocks (2.14.3)
+    sass (3.2.13)
+    win32console (1.3.2-x86-mingw32)
+
+PLATFORMS
+  x86-mingw32
+
+DEPENDENCIES
+  bundler (~> 1.3)
+  edge_framework!
+  rake
+  rspec

data/assets/sass/edge/_base.scss

@@ -17,34 +17,33 @@ $experimental-support-for-khtml : false;
 // -------------------------------------------------------
 // OUTPUT CONFIG
 // DEBUG:
-//   Set to true for various useful functionality during
+//   Set to true for useful functionality during
 //   development
+// RESPONSIVE:
+//   Add responsiveness to the output
 // EXTERNAL CALL:
 //   Add extra feature if calling Component's mixin exter-
 //   -nally
-// RESPONSIVE:
-//   Add responsiveness to the GRID
 // INCLUDE:
 //   Set to false if you want to import the mixins only
 // -------------------------------------------------------
 $debug : false !default;
+$responsive  : true !default;
 
 $external-call : false !default; // user shouldn't modify this
 
-$responsive : true !default;
-
 $include-normalize  : true !default;
 $include-typography : true !default;
 
 $include-grid       : true !default;
-$include-block-grid : true !default;
+$include-tile       : true !default;
 $include-visibility : true !default;
 
 $include-button     : true !default;
 $include-form       : true !default;
-$include-print      : true !default;
 
-$include-code       : true !default;
+$include-print      : false !default;
+$include-code       : false !default;
 
 // ----------
 // COLOR
@@ -78,20 +77,20 @@ $body-line-height : 1.5 !default;
 // ------------------------
 // It strips the unit of measure and returns it
 @function stripUnit($num) {
-	@return $num / ($num * 0 + 1);
+  @return $num / ($num * 0 + 1);
 }
 
 // Convert the number to EM
 @function convertToEm($value, $context: $body-font-size) {
-	// If not number, return it as is
-	@if type-of($value) != number { @return $value; }
-	
-	$value: stripUnit($value) / stripUnit($context) * 1em;
-	// Turn 0em into 0
-	@if ($value == 0em) {
-		$value: 0;
-	}
-	@return $value;
+  // If not number, return it as is
+  @if type-of($value) != number { @return $value; }
+  
+  $value: stripUnit($value) / stripUnit($context) * 1em;
+  // Turn 0em into 0
+  @if ($value == 0em) {
+    $value: 0;
+  }
+  @return $value;
 }
 
 // EXAMPLE USAGE
@@ -99,141 +98,173 @@ $body-line-height : 1.5 !default;
 //   padding : em(20px 30px 15px 10px);
 //   border  : em(10px solid rgba(black, 0.3) );
 @function em($values, $context: $body-font-size) {
-	// 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) );
-		}
-		@return join((), $emValues, space );
-	}
+  // 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) );
+    }
+    @return join((), $emValues, space );
+  }
 }
 
 // -------------------
 // MEDIA QUERIES
+//   How to use:
+//     @include below(small)
+//     @include below(500px)
+//     @include above(retina)
+//     @include between(small, medium)
+
+//     @media only screen and #{above(small)} and #{portrait}
 // -------------------
-$phone-screen  : 480px !default;
-$small-screen  : 767px !default;
-$medium-screen : 1140px !default;
+$mini-screen  : 480px !default;
+$small-screen : 768px !default;
 $large-screen  : 1440px !default;
 $retina-screen : 192dpi !default;
 
-@mixin below($size) {
-	@media only screen and (max-width: $size) { @content; }
+@function translateSize($size-name) {
+  // If passed param is number, return it as it is
+  @if type-of($size-name) == number {
+    @return $size;
+  }
+  // Else, return the size as requested
+  @else if $size-name == mini {
+    @return $mini-screen;
+  }
+  @else if $size-name == small {
+    @return $small-screen;
+  }
+  @else if $size-name == large {
+    @return $large-screen;
+  }
+  @else if $size-name == retina {
+    @return $retina-screen;
+  }
 }
 
-@mixin above($size) {
-	@media only screen and (min-width: $size) { @content; }
+// Function to be used in conjunction with @media
+@function below($named-size) {
+  $size: translateSize($named-size);
+  @if $size == retina {
+    @return "(-webkit-max-device-pixel-ratio: 2), (max-resolution: #{$size})";
+  }
+  @else {
+    @return "(max-width: #{$size})";
+  }
 }
 
-@mixin between($smaller-size, $large-size) {
-	@media only screen and (min-width: $smaller-size) and (max-width: $larger-size) {
-		@content;
-	}
+@function above($named-size) {
+  $size: translateSize($named-size);
+  @if $named-size == retina {
+    @return "(-webkit-min-device-pixel-ratio: 2), (min-resolution: #{$size})";
+  }
+  @else {
+    @return "(min-width: #{$size})";
+  }
 }
 
-// 480px and down
-@mixin phone() {
-	@include below($phone-screen) { @content; }
+@function between($smaller-size, $larger-size) {
+  $smaller-size: translateSize($smaller-size);
+  $larger-size: translateSize($larger-size);
+  @return "(min-width: #{$smaller-size}) and (max-width: #{$larger-size})";
 }
-// 767px and down
-@mixin small() {
-	@include below($small-screen) { @content; }
-}
-// 768px and up. If you're planning to support IE8, NEVER use medium-up
-@mixin medium-up() {
-	@include above($small-screen + 1px) { @content; }
+
+@function landscape() {
+  @return "(orientation: landscape)";
 }
-// 1140px and down
-@mixin medium() {
-	@include below($medium-screen) { @content; }
+
+@function portrait() {
+  @return "(orientation: portrait)";
 }
-// large() is not needed, just put it outside media query
-
-// 2x pixel ratio
-@mixin retina() {
-	@media only screen and (-webkit-min-device-pixel-ratio: 2),
-	(min-resolution: $retina-screen) {
-		@content;
-	}
+
+// Standalone mixin
+@mixin below($named-size) {
+  $size: translateSize($named-size);
+  @if $named-size == retina {
+    @media only screen and (-webkit-max-device-pixel-ratio: 2), (max-resolution: $size) {
+      @content;
+    }
+  } 
+  @else {
+    @media only screen and (max-width: $size) { @content; }
+  }
 }
-// Landscape orientation __
-@mixin landscape {
-	@media only screen and (orientation: landscape) { @content; }
+
+@mixin above($named-size) {
+  $size: translateSize($named-size);
+  @if $named-size == retina {
+    @media only screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: $size) {
+      @content;
+    }
+  }
+  @else {
+    @media only screen and (min-width: $size) { @content; }
+  }
 }
-// Portrait orientation |
-@mixin portrait {
-	@media only screen and (orientation: portrait) { @content; }
+
+@mixin between($smaller-size, $larger-size) {
+  $smaller-size: translateSize($smaller-size);
+  $larger-size: translateSize($larger-size);
+  @media only screen and (min-width: $smaller-size) and (max-width: $larger-size) {
+    @content;
+  }
 }
 
 // ----------------------------------------------
 // CLEARING FLOAT
-// Make a container wraps floated element
-//
-// If you prefer readable output, use the mixin
-// If you prefer smaller output, use placeholder
+//   Make a container wraps floated element
 // ----------------------------------------------
-%clearfix {
-	zoom: 1;
-	&:before, &:after {
-		content : " ";
-		display : table;
-	}
-	&:after {
-		clear: both;
-	}
-}
 @mixin clearfix {
-	zoom:  1;
-	&:before, &:after {
-		content : " ";
-		display : table;
-	}
-	&:after {
-		clear: both;
-	}
+  zoom:  1;
+  &:before, &:after {
+    content: " ";
+    display: table;
+  }
+  &:after {
+    clear: both;
+  }
 }
 
-
 // --------------------------------
 // SELECTION
-// Change the text highlight color
+//   Change the text highlight color
 // --------------------------------
 
 @mixin selection($background-color:lighten($main-color, 35%), $color:white) {
   ::-moz-selection {
-    background  : $background-color;
-    text-shadow : none !important;
-    color       : $color !important;
+    background: $background-color;
+    text-shadow: none !important;
+    color: $color !important;
   }
 
   ::selection {
-    background  : $background-color;
-    text-shadow : none !important;
-    color       : $color !important;
+    background: $background-color;
+    text-shadow: none !important;
+    color: $color !important;
   }
 }
 
 // ------------------------------------------------------
 // DISABLE SELECTION
-// Prevents user to select/highlight the element's text
+//   Prevents user to select/highlight the element's text
 // ------------------------------------------------------
 @mixin disable-user-select {
-	-webkit-touch-callout : none;
-	-webkit-user-select   : none;
-	-khtml-user-select    : none;
-	-moz-user-select      : none;
-	-ms-user-select       : none;
-	user-select           : none;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 
 // ---------------------
@@ -244,91 +275,91 @@ $default-float    : left !default;
 $default-opposite : right !default;
 // No need to change this conditional statement, $text-direction variable controls it all.
 @if $text-direction == ltr {
-	$default-float    : left;
-	$default-opposite : right;
+  $default-float    : left;
+  $default-opposite : right;
 } @else {
-	$default-float    : right;
-	$default-opposite : left;
+  $default-float    : right;
+  $default-opposite : left;
 }
 
 // ----------------------------------------------------------
 // TRIANGLE
-// Create a triangle
+//   Create a triangle
 //
-// Don't specify the `height` to create equalateral triangle
+//   Don't specify the `height` to create equalateral triangle
 // ----------------------------------------------------------
 @mixin triangle($width, $direction:top, $color:$main-color, $height:false) {
-	// If height is not specified, make the triangle equalateral
-	@if not $height {
-		// If normal triangle, `height` is set to half `width`
-		@if $direction == top or
-			$direction == right or
-			$direction == left or
-			$direction == bottom {
-			$height : ($width / 2) * 1.732;
-		}
-		// Else if cornered triangle, `heigth` is the same as `width`
-		@else if $direction == top-right or
-				 $direction == top-left or
-				 $direction == bottom-right or
-				 $direction == bottom-left {
-			$height : $width;
-		}
-	}
-	width        : 0;
-	height       : 0;
-	font-size    : 0;
-	line-height  : 0%;
-	border-style : solid;
-	border-color : transparent;
-	// Top /\
-	@if $direction == top {
-		border-width        : 0 $width/2 $height $width/2;
-		border-bottom-color : $color;
-	}
-	// Right |>
-	@else if $direction == right {
-		border-width      : $width/2 0 $width/2 $height;
-		border-left-color : $color;
-	}
-	// Bottom \/
-	@else if $direction == bottom {
-		border-width     : $height $width/2 0 $width/2;
-		border-top-color : $color;
-	}
-	// Left <|
-	@else if $direction == left {
-		border-width       : $width/2 $height $width/2 0;
-		border-right-color : $color;
-	}
-
-	//            __
-	// Top-right  \ | 
-	//             \|
-	@else if $direction == top-right {
-		border-width       : 0 $width $height 0;
-		border-right-color : $color;
-	}
-	
-	// Bottom-right /|
-	//             /_|
-	@else if $direction == bottom-right {
-		border-width        : 0 0 $height $width;
-		border-bottom-color : $color;
-	}
-	// Bottom-left |\
-	//             |_\
-	@else if $direction == bottom-left {
-		border-width      : $height 0 0 $width;
-		border-left-color : $color;
-	}
-	//           __
-	// Top-left | /
-	//          |/
-	@else if $direction == top-left {
-		border-width     : $height $width 0 0;
-		border-top-color : $color;
-	}
+  // If height is not specified, make the triangle equalateral
+  @if not $height {
+    // If normal triangle, `height` is set to half `width`
+    @if $direction == top or
+      $direction == right or
+      $direction == left or
+      $direction == bottom {
+      $height : ($width / 2) * 1.732;
+    }
+    // Else if cornered triangle, `heigth` is the same as `width`
+    @else if $direction == top-right or
+         $direction == top-left or
+         $direction == bottom-right or
+         $direction == bottom-left {
+      $height : $width;
+    }
+  }
+  width        : 0;
+  height       : 0;
+  font-size    : 0;
+  line-height  : 0%;
+  border-style : solid;
+  border-color : transparent;
+  // Top /\
+  @if $direction == top {
+    border-width        : 0 $width/2 $height $width/2;
+    border-bottom-color : $color;
+  }
+  // Right |>
+  @else if $direction == right {
+    border-width      : $width/2 0 $width/2 $height;
+    border-left-color : $color;
+  }
+  // Bottom \/
+  @else if $direction == bottom {
+    border-width     : $height $width/2 0 $width/2;
+    border-top-color : $color;
+  }
+  // Left <|
+  @else if $direction == left {
+    border-width       : $width/2 $height $width/2 0;
+    border-right-color : $color;
+  }
+
+  //            __
+  // Top-right  \ | 
+  //             \|
+  @else if $direction == top-right {
+    border-width       : 0 $width $height 0;
+    border-right-color : $color;
+  }
+  
+  // Bottom-right /|
+  //             /_|
+  @else if $direction == bottom-right {
+    border-width        : 0 0 $height $width;
+    border-bottom-color : $color;
+  }
+  // Bottom-left |\
+  //             |_\
+  @else if $direction == bottom-left {
+    border-width      : $height 0 0 $width;
+    border-left-color : $color;
+  }
+  //           __
+  // Top-left | /
+  //          |/
+  @else if $direction == top-left {
+    border-width     : $height $width 0 0;
+    border-top-color : $color;
+  }
 }
 
 // ------------------------------------------------
@@ -336,12 +367,12 @@ $default-opposite : right !default;
 // for property that is not supported by Compass
 // ------------------------------------------------
 @mixin css3($property, $value,
-	$moz      : $experimental-support-for-mozilla,
-	$webkit   : $experimental-support-for-webkit,
-	$o        : $experimental-support-for-opera,
-	$ms       : $experimental-support-for-microsoft,
-	$khtml    : $experimental-support-for-khtml,
-	$official : true) {
+  $moz      : $experimental-support-for-mozilla,
+  $webkit   : $experimental-support-for-webkit,
+  $o        : $experimental-support-for-opera,
+  $ms       : $experimental-support-for-microsoft,
+  $khtml    : $experimental-support-for-khtml,
+  $official : true) {
 
   @if $webkit { -webkit-#{$property}: $value; }
   @if $khtml { -khtml-#{$property}: $value; }