edge_framework 0.9.0 → 0.9.9

data/README.md

@@ -1,7 +1,7 @@
 Welcome to Edge Framework
 ==========================
 
-Edge is a light-weight responsive SASS framework. It is built for developers that are working with dedicated designer. Edge offers non-intrusive and easily overriden style.
+Edge is a unobtrusive Sass framework.
 
 It is based on [Foundation by ZURB](http://www.zurb.com).
 
@@ -10,30 +10,26 @@ Edge is MIT-licensed and absolutely free to use.
 Installation
 =============
 
-We distribute Edge using Rubygems, just type in the following commands on your `terminal`:
-
     gem install edge_framework
 
 Windows PC doesn't come with Ruby pre-installed, so you can follow [this Ruby installation guide](https://docs.google.com/document/d/155e-Dx4SnQj_bMrM24kI4_ZEmBp-TQ_tuinhMvZsIhM/edit?usp=sharing) we wrote. After you installed Ruby, type in the command above on `cmd` (command prompt).
 
-We assume that you know how to use Sass and Compass. If not, you can find a lot of decent tutorial on YouTube or other site.
-
-Template Generator
+CLI - Template Generator
 ====================
 
 Edge can generate basic template for your project. Open `cmd` or `terminal` in your project directory and type in one of these commands:
 
-1. Standard HTML
+1. Static HTML
 
-    `edge create html <project_name>`
+    `edge create html`
 
 2. Standard PHP
 
-    `edge create php <project_name>`
+    `edge create php`
 
 3. Wordpress
     
-    `edge create wordpress <project_name>`
+    `edge create wordpress`
 
 4. Coming soon: Rails, Sinatra, Django, Flask
 

data/assets/sass/edge/_base.scss

@@ -16,19 +16,15 @@ $experimental-support-for-khtml : false;
 
 // -------------------------------------------------------
 // OUTPUT CONFIG
-// DEBUG:
-//   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
-// INCLUDE:
-//   Set to false if you want to import the mixins only
+// Debug      : if true - add useful functionality for development
+// Responsive : add responsiveness to the output
+// Vertical-rhythm : vertically-align all header, paragraph, and list
+// External call   : Add extra feature if calling Component's mixin externally
+// Include         : if false - no CSS output
 // -------------------------------------------------------
-$debug : false !default;
+$debug       : false !default;
 $responsive  : true !default;
+$vertical-rhythm : false !default;
 
 $external-call : false !default; // user shouldn't modify this
 
@@ -41,9 +37,10 @@ $include-visibility : true !default;
 
 $include-button     : true !default;
 $include-form       : true !default;
+$include-animate    : true !default;
 
 $include-print      : false !default;
-$include-code       : true !default;
+$include-code       : false !default;
 
 // ----------
 // COLOR
@@ -267,6 +264,15 @@ $retina-screen : 192dpi !default;
   user-select: none;
 }
 
+@mixin user-select($value) {
+  -webkit-touch-callout: $value;
+  -webkit-user-select: $value;
+  -khtml-user-select: $value;
+  -moz-user-select: $value;
+  -ms-user-select: $value;
+  user-select: $value;
+}
+
 // ---------------------
 // TEXT DIRECTION
 // ---------------------
@@ -288,14 +294,20 @@ $default-opposite : right !default;
 //
 //   Don't specify the `height` to create equalateral triangle
 // ----------------------------------------------------------
-@mixin triangle($width, $direction:top, $color:$main-color, $height:false) {
+@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 == up or
       $direction == right or
       $direction == left or
-      $direction == bottom {
+      $direction == bottom or 
+      $direction == down {
       $height : ($width / 2) * 1.732;
     }
     // Else if cornered triangle, `heigth` is the same as `width`
@@ -306,14 +318,14 @@ $default-opposite : right !default;
       $height : $width;
     }
   }
-  width        : 0;
-  height       : 0;
-  font-size    : 0;
-  line-height  : 0%;
-  border-style : solid;
-  border-color : transparent;
+  width: 0;
+  height: 0;
+  font-size: 0;
+  line-height: 0%;
+  border-style: solid;
+  border-color: transparent;
   // Top /\
-  @if $direction == top {
+  @if $direction == top or $direction == up {
     border-width        : 0 $width/2 $height $width/2;
     border-bottom-color : $color;
   }
@@ -323,7 +335,7 @@ $default-opposite : right !default;
     border-left-color : $color;
   }
   // Bottom \/
-  @else if $direction == bottom {
+  @else if $direction == bottom or $direction == down {
     border-width     : $height $width/2 0 $width/2;
     border-top-color : $color;
   }

data/assets/sass/edge/_components.scss

@@ -1,12 +1,13 @@
 @import "components/normalize";
-
-@import "components/button";
 @import "components/typography";
-@import "components/form";
 
 @import "components/grid";
 @import "components/tile";
-
 @import "components/visibility";
+
+@import "components/button";
+@import "components/form";
+@import "components/animate";
+
 @import "components/print";
 @import "components/code";

data/assets/sass/edge/_helpers.scss

@@ -1,19 +1,7 @@
 @import "helpers/sprites";
 @import "helpers/sticky-footer";
 
-// Disable the output, because we only want to enable the mixin
-$include-grid       : false;
-$include-tile       : false;
-$include-visibility : false;
-
-$include-button     : false;
-$include-form       : false;
-$include-typography : false;
-
-$include-normalize  : false;
-$include-print      : false;
-$include-code       : false;
-
-$external-call : true; // add extra feature to some Component's mixin
+$disable-output : true;
+$external-call  : true; // add extra feature to some Component's mixin
 
 @import "components";

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

@@ -0,0 +1,151 @@
+// ===============
+// EDGE ANIMATE
+// ===============
+// Based on animate.css [http://daneden.me/animate]
+// Copyright (c) 2013 Daniel Eden
+
+// -----------
+// KEYFRAMES
+//   Create keyframe animation
+// ----------------------------
+@mixin keyframes($name) {
+  @-webkit-keyframes #{$name} {
+    @content;
+  }
+  @keyframes #{$name} {
+    @content;
+  }
+}
+
+// ------------------------
+// ANIMATION NAME
+//   Assign the animation
+// ------------------------
+@mixin animation-name($name) {
+  -webkit-animation-name: $name;
+  animation-name: $name;
+}
+
+
+// -----------------------------------
+// ANIMATE
+//   Pair the animation and keyframes
+// -----------------------------------
+@mixin animate($name) {
+  .animated.#{$name} {
+    @include animation-name($name); 
+  }
+  @include keyframes($name) {
+    @content;
+  }
+}
+
+@if $include-animate and not $external-call {
+/* ---------------
+  EDGE Animate
+--------------- */
+
+[data-animate] {
+  visibility: hidden !important;
+}
+
+.animated {
+  visibility: visible !important;
+
+  -webkit-animation-duration: 1s;
+  animation-duration: 1s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+
+// FADEIN
+
+@include animate(fadein) {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+  @include animate(fadein-down) {
+    opacity: 0;
+    @include translateY(-20px);
+  }
+
+  @include animate(fadein-down-big) {
+    0% {
+      opacity: 0;
+      @include translateY(-2000px);
+    }
+
+    100% {
+      opacity: 1;
+      @include translateY(0);
+    }
+  }
+
+  @include animate(fadein-up) {
+    0% {
+      opacity: 0;
+      @include translateY(-2000px);
+    }
+
+    100% {
+      opacity: 1;
+      @include translateY(0);
+    }
+  }
+
+  @include animate(fadein-left) {
+    0% {
+      opacity: 0;
+      @include translateX(-20px);
+    }
+
+    100% {
+      opacity: 1;
+      @include translateX(0);
+    }
+  }
+
+  @include animate(fadein-left-big) {
+    0% {
+      opacity: 0;
+      @include translateX(-2000px);
+    }
+
+    100% {
+      opacity: 1;
+      @include translateX(0);
+    }
+  }
+
+  @include animate(fadein-right) {
+    0% {
+      opacity: 0;
+      @include translateX(20px);
+    }
+
+    100% {
+      opacity: 1;
+      @include translateX(0);
+    }
+  }
+
+  @include animate(fadein-right-big) {
+    0% {
+      opacity: 0;
+      @include translateX(2000px);
+    }
+
+    100% {
+      opacity: 1;
+      @include translateX(0);
+    }
+  }
+
+
+}  // include

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

@@ -1,50 +1,107 @@
-$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, 70%);
-	border     : none;
-	
-	$shadow-base  : 0 1px 0 darken($bg-color, 20%);
-	@include box-shadow($shadow-base );
-
-	@if $for-base {
-		display   : inline-block;
-		position  : relative;
-		cursor    : pointer;
-		padding   : $button-padding;
-		
-		&:hover {
-			// background: darken($bg-color, 10%);
-			@include box-shadow($shadow-base, $shadow-hover );
-		}
-
-		&:active {
-			top: 1px;
-			border: none;
-			@include box-shadow($shadow-hover );
-		}
-		&:focus {
-			outline: none;
-		}
-	}
+// =============
+// EDGE BUTTON
+// =============
+
+$button-full-style: true !default;
+$button-color: $main-color !default;
+$button-padding: 10px 20px !default;
+
+// ------------------------------
+// BUTTON Hover State
+// - Button styling for :hover
+// ------------------------------
+@mixin h-button-hover($color, $full: $button-full-style) {
+
+  &:hover {
+    // Darken background if background is light
+    @if contrast-color($color, is_light, is_dark, 70%) == is_light {
+      background-color: darken($color, 7.5%);
+    }
+    // Lighten background if background is dark
+    @else {
+      background-color: lighten($color, 7.5%);
+    }
+  }
+}
+
+// ------------------------------
+// BUTTON Active State
+// - Button styling for :active
+// ------------------------------
+@mixin h-button-active(
+  $color,
+  $full     : $button-full-style,
+  $for-base : false) {
+
+  &:active {
+    // Make it darker than hover state if background is light
+    @if contrast-color($color, is_light, is_dark, 70%) == is_light {
+      background-color: darken($color, 15%);
+    }
+    // Darken background if background is dark
+    @else {
+      background-color: darken($color, 7.5%);
+    }
+
+    @if $full and $for-base {
+      @include box-shadow(inset 1px 1px rgba(black, .1) );
+    }
+  }
+}
+
+// ------------------------------
+// BUTTON Focus State
+//   Button styling for :focus
+// ------------------------------
+@mixin h-button-focus($for-base: false) {
+  
+  @if $for-base {
+    &:focus {
+      outline: none;
+    }
+  }
+}
+
+// -----------------
+// BUTTON
+//   Create button
+// -----------------
+@mixin button(
+  $color    : $button-color,
+  $padding  : $button-padding,
+  $full     : $button-full-style,
+  $for-base : false) {
+  
+  @if $for-base {
+    display: inline-block;
+    cursor: pointer;
+    position: relative;
+    border: 1px solid rgba(black, .3);
+  }
+  
+  background-color: $color;
+  padding: $padding;
+  color: contrast-color($color, $body-font-color, white, 70%);
+  
+  @if $full and $for-base {
+    @include background-image(linear-gradient(top, rgba(white, .1), transparent ) );
+    @include transition($g-transition);
+    @include box-shadow(inset 1px 1px rgba(white, .1) );
+  }
+
+  @include h-button-hover($color:$color);
+  @include h-button-active($color:$color, $for-base:$for-base);
+  @include h-button-focus($for-base:$for-base);
 }
 
-@if $include-button {
-	
+@if $include-button and not $external-call {
+  
 /* ---------------
 EDGE Button
 --------------- */
 button,
-.button,
-input[type="button"],
-input[type="submit"],
-input[type="reset"] {
-	@include button($for-base:true);
+.button {
+  @include button($for-base:true);
 }
 
 } // $include-button