edge_framework 1.1.0 → 1.2.0

data/assets/kitchen-sink.html

@@ -294,7 +294,7 @@
     </div>
   </div> -->
 
-<div class="row" data-page="code">
+<!-- <div class="row" data-page="code">
   <div class="large-12 columns">
     <h1>EDGE Code</h1>
     <h3>Markup</h3>
@@ -341,13 +341,13 @@
       end
     </code></pre>
   </div>
-</div>
+</div> -->
 
 <!-- <div class="row" data-page="tile">
   <div class="large-12 columns">
     <div class="demo-tile">
       <h1>Tile</h1>
-      <ul class="large-tile-7 small-tile-5">
+      <ul class="tile-7 small-tile-5">
         <li><p>1</p></li>
         <li><p>1</p></li>
         <li><p>1</p></li>
@@ -362,7 +362,7 @@
         <li><p>1</p></li>
       </ul>
       <h2>Tile Collapse</h2>
-      <ul class="large-tile-5 small-tile-3 collapse">
+      <ul class="tile-5 small-tile-3 collapse">
         <li><p>1</p></li>
         <li><p>1</p></li>
         <li><p>1</p></li>
@@ -432,7 +432,7 @@
   </div>
 </div> -->
 
-<!-- <div class="row" data-page="grid">
+<div class="row" data-page="grid">
   <div class="large-12 columns">
     <div class="demo-grid">
       <h1>Grid</h1>
@@ -563,7 +563,7 @@
         
     </div>
   </div>
-</div> -->
+</div>
 
 <!-- <section class="row" data-page="visibility">
   <div class="large-12 column">
@@ -674,26 +674,6 @@
   </div>
 </section>
  -->
-<!-- <div class="row collapse demo-grid" data-page="grid">
-  <h1>Collapse not nested</h1>
-  <div class="large-8 column">
-    <p>8</p>
-  </div>
-  <div class="large-4 column">
-    <p>4</p>
-  </div>
-</div> -->
-
-<!-- 
-<div class="row demo-grid" data-page="grid">
-  <h1>Not nested</h1>
-  <div class="large-8 column">
-    <p>8</p>
-  </div>
-  <div class="large-4 column">
-    <p>4</p>
-  </div>
-</div> -->
 
 <!-- <section class="row" data-page="custom-grid">
   <div class="large-12 column">
@@ -816,6 +796,21 @@
   </div>
 </section> -->
 
+<section class="row" data-page="design-grid">
+  <div class="large-12 column demo-grid">
+    <h1>Demo Design Custom Grid</h1>
+    <h3>325 (50) 175</h3>
+    <div class="dgrid-ar row">
+      <div class="dgrid-a1 column">
+        <p>325</p>
+      </div>
+      <div class="dgrid-a2 column">
+        <p>175</p>
+      </div>
+    </div>
+  </div>
+</section>
+
 <!-- <section class="row" data-page="button">
   <div class="large-4 column">
     <h1>Button</h1>
@@ -932,11 +927,10 @@
 <footer id="footer">
 </footer>
 
-
-<script type="text/javascript" src="js/vendor/jquery.min.js"></script>
+<!--
 <script type="text/javascript" src="js/edge.js"></script>
 <script type="text/javascript" src="js/edge/edge.prism.js"></script>
 <script type="text/javascript" src="js/edge/edge.animate.js"></script>
-
+-->
 </body>
 </html>

data/assets/sass/edge.scss

@@ -1,6 +1,6 @@
 /* ------------------------------------------
 - EDGE Framework - github.com/HennerS/Edge
-- v1.1.0 (Ezalor)
+- v1.2.0 (Ezalor)
 ------------------------------------------ */
 
 @import "edge/base";

data/assets/sass/edge/_base.scss

@@ -1,4 +1,3 @@
-// This module MUST be imported first before any other EDGE module
 @charset "UTF-8";
 @import "compass";
 
@@ -14,31 +13,25 @@ $experimental-support-for-microsoft    : false;
 $experimental-support-for-opera : false;
 $experimental-support-for-khtml : false;
 
-// -------------------------------------------------------
+// ------------------
 // OUTPUT CONFIG
-// Debug      : if true - add useful functionality for development
-// Responsive : add responsiveness to the output
-//
-// External call   : Add extra feature if calling Component's mixin externally
-// Include         : if false - no CSS output
-// -------------------------------------------------------
-$debug       : false !default;
+// ------------------
 $responsive  : true !default;
+$user-mode   : false !default;
+$is-in-media : false !default; // check if the code is within @media block
 
-$external-call : false !default; // user shouldn't modify this
-
-// Can't be overriden
+// Must be true
 $include-normalize  : true !default;
 $include-typography : true !default;
 $include-grid       : true !default;
 $include-form       : true !default;
 
-// Default true
+// Default is true
 $include-tile       : true !default;
 $include-visibility : true !default;
 $include-button     : true !default;
 
-// Default false
+// Default is false
 $include-animate    : false !default;
 $include-print      : false !default;
 $include-code       : false !default;
@@ -47,18 +40,16 @@ $include-code       : false !default;
 // COLOR
 // ----------
 
-// These 5 colors below should NEVER be used directly
-// Put it to other variable like $header-color: $blue-color;
+// Two main colors of your site
+$main-color    : #2a71e3 !default;
+$sub-color     : #d7d7d7 !default;
+
 $passive-color : #d7d7d7 !default;
 $blue-color    : #2a71e3 !default;
 $yellow-color  : #fac741 !default;
 $red-color     : #d35400 !default;
 $green-color   : #229e61 !default;
 
-// Two main colors of your site
-$main-color    : $blue-color !default;
-$sub-color     : $passive-color !default;
-
 // ---------------
 // GLOBAL VALUE
 // ---------------
@@ -71,49 +62,43 @@ $g-transition : all .2s ease-out !default;
 $body-font-size   : 16px !default;
 $body-line-height : 1.5 !default;
 
-// ------------------------
+// --------------------------------
 // PIXEL --> EM CONVERTER
-// ------------------------
-// It strips the unit of measure and returns it
+//   How to use:
+//     font-size: em(14px);
+//     padding: em(10px 5px 20px);
+// --------------------------------
+
+// Strips unit and return plain number
 @function stripUnit($num) {
   @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 not number, return it as is
   @if type-of($value) != number { @return $value; }
   
   $value: stripUnit($value) / stripUnit($context) * 1em;
-  // Turn 0em into 0
+  // turn 0em into 0
   @if ($value == 0em) {
     $value: 0;
   }
   @return $value;
 }
 
-// EXAMPLE USAGE
-//   width   : em(500px);
-//   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;
+  // if only contain single number, convert it directly
+  @if type-of($values) == number {
+    @return convertToEm($values, $context);
   }
-  // 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 contains multiple values, loop through it
+  $emValues   : ();
+  @each $val in $values {
+    $emValues: append($emValues, convertToEm($val, $context) );
   }
+  @return join((), $emValues, space );
 }
 
 // -------------------
@@ -123,7 +108,7 @@ $body-line-height : 1.5 !default;
 //     @include below(500px)
 //     @include above(retina)
 //     @include between(small, medium)
-
+//
 //     @media only screen and #{above(small)} and #{portrait}
 // -------------------
 $mini-screen  : 480px !default;
@@ -132,11 +117,11 @@ $large-screen  : 1440px !default;
 $retina-screen : 192dpi !default;
 
 @function translateSize($size) {
-  // If passed param is number, return it as it is
+  // if number, return it as it is
   @if type-of($size) == number {
     @return $size;
   }
-  // Else, return the size as requested
+  // if keyword, return the translated size
   @else if $size == mini {
     @return $mini-screen;
   }
@@ -188,6 +173,7 @@ $retina-screen : 192dpi !default;
 
 // Standalone mixin
 @mixin below($named-size) {
+  $is-in-media: true;
   $size: translateSize($named-size);
   @if $named-size == retina {
     @media only screen and (-webkit-max-device-pixel-ratio: 2), (max-resolution: $size) {
@@ -197,9 +183,11 @@ $retina-screen : 192dpi !default;
   @else {
     @media only screen and (max-width: $size) { @content; }
   }
+  $is-in-media: false;
 }
 
 @mixin above($named-size) {
+  $is-in-media: true;
   $size: translateSize($named-size) + 1px;
   @if $named-size == retina {
     @media only screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: $size) {
@@ -209,6 +197,7 @@ $retina-screen : 192dpi !default;
   @else {
     @media only screen and (min-width: $size) { @content; }
   }
+  $is-in-media: false;
 }
 
 @mixin between($smaller-size, $larger-size) {

data/assets/sass/edge/_helpers.scss

@@ -3,6 +3,6 @@
 @import "helpers/sticky-footer";
 
 $disable-output : true;
-$external-call  : true; // add extra feature to some Component's mixin
+$user-mode  : true; // add extra feature to some Component's mixin
 
 @import "components";

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

@@ -40,7 +40,7 @@
   }
 }
 
-@if $include-animate and not $external-call {
+@if $include-animate and not $user-mode {
 /* ---------------
   EDGE Animate
 --------------- */

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

@@ -77,7 +77,7 @@ $button-color: $main-color !default;
   @include button-active($color);
 }
 
-@if $include-button and not $external-call {
+@if $include-button and not $user-mode {
   
 /* ---------------
 EDGE Button

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

@@ -46,7 +46,7 @@ $code-python-color  : #376a94; // dark-blue
   }
 }
 
-@if $include-code and not $external-call {
+@if $include-code and not $user-mode {
 /* ----------------------
   EDGE CODE Highlighter
 ---------------------- */

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

@@ -84,7 +84,7 @@ $prefix-bg-color     : $passive-color;
   }
 }
 
-@if $include-form and not $external-call {
+@if $include-form and not $user-mode {
 
 /* ---------------
 EDGE Form

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

@@ -1,7 +1,6 @@
 // =============
 // EDGE GRID
 // =============
-// Based on Foundation 4 by ZURB
 
 $row-max-width   : 1140px !default;
 $total-columns   : 12 !default;
@@ -20,17 +19,18 @@ $column-gutter   : 20px !default;
 }
 
 // ---------------------------------
-// GRID ROW
-// - Create container for the grid
+// BASE ROW
+// - Styling for base framework
 // ---------------------------------
 
-@mixin row(
-  $gutter    : $column-gutter,
-  $width     : $row-max-width,
-  $nest      : false,
-  $collapse  : false,
-  $for-base  : false ) {
+@mixin base-row(
+  $nest     : false,
+  $collapse : false,
+  $for-base : false) {
 
+  $width  : $row-max-width;
+  $gutter : $column-gutter;
+  
   @if $for-base {
     margin: 0 auto;
     width: 100%;
@@ -41,16 +41,8 @@ $column-gutter   : 20px !default;
     }
     @include clearfix;
   }
-  
-  // If gutter is passed as param, calculate it
-  @if $gutter != $column-gutter {
-    max-width: $width + $gutter;
 
-    @if not $responsive {
-      min-width: $width + $gutter;
-    }
-  }
-  
+  // Nested and collapsed
   @if $nest and $collapse {
     margin: 0;
     padding-right: 0;
@@ -62,7 +54,7 @@ $column-gutter   : 20px !default;
       min-width: 0;
     }
   }
-
+  // Only nested
   @else if $nest {
     margin-right: -($gutter / 2);
     margin-left: -($gutter / 2);
@@ -73,7 +65,7 @@ $column-gutter   : 20px !default;
       min-width: 0;
     }
   }
-
+  // Only collapsed
   @else if $collapse {
     margin: 0 auto;
     width: 100%;
@@ -83,133 +75,79 @@ $column-gutter   : 20px !default;
       min-width: $width;
     }
   }
-
-  @if $external-call {
-    .row & {
-      margin-right: -($gutter / 2);
-      margin-left: -($gutter / 2);
-    }
-  }
 }
 
-// ----------------------------------------------
-// Calculate size for column created externally
-//-----------------------------------------------
-@mixin external-call-column(
-  $column : 0,
-  $total  : 0,
-  $offset : 0,
-  $parent-offset : 0) {
-  
-  @if $column > 0 {
-    width: gridCalc($column, $total);
-  } @else {
-    width: 100%;
-  }
+// -----------------------------------
+// ROW
+// - Styling for external mixin call
+// -----------------------------------
 
-  // 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;
-  }
-}
-
-// ----------------------------------
-// Prevent duplicate in column
-// ----------------------------------
-@mixin source-ordering-column(
-  $push  : 0,
-  $pull  : 0,
-  $total : 0) {
+@mixin row(
+  $gutter   : 0px,
+  $width    : $row-max-width,
+  $collapse : false) {
+  
+  // If gutter is passed as param, calculate it
+  @if $gutter != $column-gutter {
+    max-width: $width + $gutter;
 
-  @if $push > 0 {
-    #{$default-float}: gridCalc($push, $total);
-    #{$default-opposite}: auto;
-  }
-  @if $pull > 0 {
-    #{$default-opposite}: gridCalc($pull, $total);
-    #{$default-float}: auto;
+    @if not $responsive {
+      min-width: $width + $gutter;
+    }
   }
-}
 
-// --------------------------------------
-// Prevent duplicate in the base output
-// --------------------------------------
-@mixin source-ordering-output() {
-  @for $i from 1 through $total-columns - 1 {
-    .large-offset-#{$i} {
-      @include column($large-offset:$i);
-    }
-    .push#{-$i} {
-      @include column($push:$i);
-    }
-    .pull#{-$i} {
-      @include column($pull:$i);
-    }
+  @if $gutter > 0 {
+    margin-right: -($gutter / 2);
+    margin-left: -($gutter / 2);
   }
 }
 
-// ------------------------
-// GRID COLUMN
-// - Create the grid
-// ------------------------
-@mixin column(
-  $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,
-  $centered  : false,
-  $gutter    : $column-gutter,
-  $total     : $total-columns,
-  $for-base  : false ) {
+// ------------------------------
+// BASE COLUMN
+// - Styling for base framework
+// ------------------------------
 
+@mixin base-column(
+  $size   : 0,
+  $offset : 0,
+  $push   : 0,
+  $pull   : 0,
+  $collapse : false,
+  $centered : false,
+  $gutter : 0px,
+  $total  : $total-columns,
+  $for-base : false) {
+  
   @if $for-base {
     position: relative;
     float: $default-float;
-    padding-right: $gutter / 2;
-    padding-left: $gutter / 2;
-  }
-
-  // If gutter's value is different from default, it means it is passed as param
-  @if $gutter != $column-gutter {
-    padding-right: $gutter / 2;
-    padding-left: $gutter / 2;
+    padding-right: $column-gutter / 2;
+    padding-left: $column-gutter / 2;
   }
 
-  // If collapsed, get rid of distance padding
+  // Collapsed, no gutter
   @if $collapse {
     padding-right: 0;
     padding-left: 0;
   }
 
-  // If offset, calculate appropriate margins
-  @if $large-offset > 0 { 
-    margin-#{$default-float}: gridCalc($large-offset, $total);
+  // Offset, calculate margins
+  @if $offset > 0 { 
+    margin-#{$default-float}: gridCalc($offset, $total);
   }
-
-  // If a column number is given, calculate width
-  @if $large > 0 {
-    width: gridCalc($large, $total);
+  
+  // Size, calculate width
+  @if $size > 0 {
+    width: gridCalc($size, $total);
   }
 
-  // Source Ordering, adds left/right depending on which you use.
-  @if $external-call and $responsive {
-    @include above(small) {
-      @include source-ordering-column($push:$push, $pull:$pull, $total:$total);
-    }
-  } @else {
-    @include source-ordering-column($push:$push, $pull:$pull, $total:$total);
+  // Custom Gutter
+  @if $gutter > 0 {
+    padding-right: $gutter / 2;
+    padding-left: $gutter / 2;
   }
-
-  // If centered, get rid of float and add auto margin
+  
+  // Centered, add centered margin
   @if $centered {
     display: block;
     float: none;
@@ -217,60 +155,114 @@ $column-gutter   : 20px !default;
     margin-left: auto !important;
   }
   
-  // If external call and responsive is true
-  @if $external-call and $responsive {
-    // If small column is specified
+  // Source Ordering
+  @if $push > 0 {
+    #{$default-float}: gridCalc($push, $total);
+    #{$default-opposite}: auto;
+  }
+
+  @if $pull > 0 {
+    #{$default-opposite}: gridCalc($pull, $total);
+    #{$default-float}: auto;
+  } 
+}
+
+// -----------------------------------
+// COLUMN
+// - Styling for external mixin call
+// -----------------------------------
+
+@mixin column(
+  $size   : 0,
+  $small  : 0,
+  $mini   : 0,
+  $offset : 0,
+  $push   : 0,
+  $pull   : 0,
+  $collapse : false,
+  $centered : false,
+  $gutter : 0px,
+  $total  : $total-columns) {
+
+  // Sizing
+  @if $size > 0 {
+    @include base-column($size:$size, $total:$total);
+
     @if $small > 0 {
       @include below(small) {
-        @include external-call-column($column:$small, $total:$total, $offset:$small-offset, $parent-offset:$large-offset);
-      }
-      
-      @if $mini > 0  {
-        @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);
+        @include base-column($size:$small, $total:$total);
       }
     }
-  }
 
-  // Create notes when on debug
-  @if $debug and $external-call {
-    $notes: "large-#{$large}";
-    @if $large-offset > 0 {
-      $notes: $notes + " large-offset-#{$large-offset}";
-    }
-    @if $small > 0 {
-      $notes: $notes + " small-#{$small}";
-    }
-    @if $small-offset > 0 {
-      $notes: $notes + " small-offset-#{$small-offset}";
-    }
     @if $mini > 0 {
-      $notes: $notes + " mini-#{$mini}";
+      @include below(mini) {
+        @include base-column($size:$mini, $total:$total);
+      }
     }
-    @if $mini-offset > 0 {
-      $notes: $notes + " mini-offset-#{$mini-offset}";
+  }
+  
+  // Collapse and Centered behavior is the same as base column
+  @include base-column(
+    $collapse: $collapse,
+    $centered: $centered,
+    $gutter: $gutter,
+    $total: $total
+  );
+
+  // Source Ordering, follow base column
+  @if $responsive and not $is-in-media {
+    // make Offset not inherited in small screen
+    @include above(small) {
+      @include base-column($offset:$offset, $pull:$pull, $push:$push, $total:$total);
     }
-    @if $push > 0 {
-      $notes: $notes + " push-#{$push}";
+  } @else {
+    @include base-column($offset:$offset, $pull:$pull, $push:$push, $total:$total);
+  }
+}
+
+// ----------------------------------------------
+// COLUMN PIXEL
+// - Measured with pixel instead of grid portion
+// ----------------------------------------------
+
+@mixin column-px(
+  $size     : 0px,
+  $width    : 0px,
+  $gutter   : $column-gutter,
+  $centered : false ) {
+  
+  // Collapse and Centered behavior is the same as base column
+  @include base-column(
+    $centered: $centered
+  );
+  
+  width: percentage(($size + $gutter) / ($width + $gutter) );
+  
+  @if $gutter > 0 {
+    padding-right: $gutter / 2;
+    padding-left: $gutter / 2;
+  }
+}
+
+// ---------------------
+// SOURCE ORDERING
+// ---------------------
+@mixin source-ordering() {
+  @for $i from 1 through $total-columns - 1 {
+    .large-offset-#{$i},
+    .offset-#{$i} {
+      @include base-column($offset:$i);
     }
-    @if $pull > 0 {
-      $notes: $notes + " pull-#{$pull}";
+    .push#{-$i} {
+      @include base-column($push:$i);
     }
-    @if $centered {
-      $notes: $notes + " centered";
+    .pull#{-$i} {
+      @include base-column($pull:$i);
     }
-    h-column: $notes;
   }
 }
 
-@if $include-grid and not $external-call {
+@if $include-grid and not $user-mode {
 
 /* ------------
   EDGE Grid
@@ -278,22 +270,22 @@ $column-gutter   : 20px !default;
 
 // Normal row
 .row {
-  @include row($for-base:true);
+  @include base-row($for-base:true);
   
   // Collapsed row
   &.collapse {
-    @include row($collapse:true);
+    @include base-row($collapse:true);
     .column,
     .columns {
-      @include column($collapse:true);
+      @include base-column($collapse:true);
     }
   }
   
   // Nested-collapsed row
   .row {
-    @include row($nest:true);
+    @include base-row($nest:true);
     &.collapse {
-      @include row($nest:true, $collapse:true);
+      @include base-row($nest:true, $collapse:true);
     }
   }
 }
@@ -301,50 +293,56 @@ $column-gutter   : 20px !default;
 // Normal column
 .column,
 .columns {
-  @include column($large:$total-columns, $for-base:true);
+  @include base-column($size:$total-columns, $for-base:true);
 }
 
+// Large sizing
 @for $i from 1 through $total-columns {
-  .large#{-$i} { @include column($large:$i); }
+  .large#{-$i} { @include base-column($size:$i); }
 }
 
 // Centered column
 .column.large-centered,
-.columns.large-centered {
-  @include column($centered:true);
+.columns.large-centered,
+.column.centered,
+.columns.centered {
+  @include base-column($centered:true);
 }
 
-// Source Ordering
 @if $responsive {
   @include above(small) {
-    @include source-ordering-output();
+    @include source-ordering();
   }
-} @else {
-  @include source-ordering-output();
 }
+// Remove media query so when the window scaled down, the styling isn't gone.
+@else {
+  @include source-ordering();
+}
+
 
+// Small screen and below
 @if $responsive {
-  // Small screen and below
+  
   @include below(small) {
     .column,
     .columns {
-      @include column($large:$total-columns);
+      @include base-column($size:$total-columns);
     }
     @for $i from 1 through $total-columns {
       .small#{-$i} {
-        @include column($large:$i);
+        @include base-column($size:$i);
       }
     }
 
     @for $i from 0 through $total-columns - 2 {
       .small-offset-#{$i} {
-        @include column($large-offset:$i);
+        @include base-column($offset:$i);
       }
     }
 
     .column.small-centered,
     .columns.small-centered {
-      @include column($centered:true);
+      @include base-column($centered:true);
     }
   }