edge_framework 1.1.0 → 1.2.0

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

@@ -3,7 +3,7 @@
 // =================
 // Based on git.io/normalize
 
-@if $include-normalize and not $external-call {
+@if $include-normalize and not $user-mode {
   
 /* ----------------
   EDGE Normalize
@@ -31,6 +31,7 @@ body { -webkit-animation: bugfix infinite 1s; }
 }
 
 html {
+  height: 100%;
   font-family: sans-serif;
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;

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

@@ -2,7 +2,7 @@
 // EDGE PRINT
 // =============
 
-@if $include-print and not $external-call {
+@if $include-print and not $user-mode {
   
 /* --------------
   EDGE Print

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

@@ -6,125 +6,130 @@
 $max-tiles   : 12 !default;
 $tile-gutter : 15px !default;
 
-// -----------------------------
-// TILE CALCULATOR
-// - Calculate the size of tile
-// -----------------------------
-@mixin tile-calc (
-  $per-row  : 0,
-  $gutter   : $tile-gutter,
-  $collapse : false ) {
+// ------------------------------
+// BASE TILE
+// - Styling for base framework
+// ------------------------------
+
+@mixin base-tile(
+  $size     : 0,
+  $gutter   : 0,
+  $collapse : false,
+  $for-base : false,
+  $reset-clearing : false) {
   
-  @if $external-call or $per-row == 0 {
-    @if $collapse {
-      padding: 0;
-    } @else {
-      padding: 0 ($gutter / 2);
+  @if $for-base {
+    display: block;
+    @include clearfix();
+    
+    > li {
+      display: block;
+      position: relative;
+      float: $default-float;
     }
   }
 
-  @if $per-row > 0 {
-    width: 100% / $per-row;
+  // Collapse, reduce all margin and padding to 0
+  @if $collapse {
+    margin-right: 0;
+    margin-left: 0;
 
-    &:nth-of-type(#{$per-row}n+1) {
-      clear: both;
+    > li {
+      padding: 0;
     }
   }
-}
-
-// --------------------
-// TILE
-// - Create tile list
-// --------------------
-@mixin tile (
-  $large  : 0,
-  $small  : 0,
-  $mini   : 0,
-  $gutter   : $tile-gutter,
-  $collapse : false ) {
   
-  // For <ul> styling
-  @if $external-call or $large == 0 {
-    display : block;
-
-    @if $collapse {
-      margin-right: 0;
-      margin-left: 0;
-    } @else {
-      margin-right: -($gutter / 2);
-      margin-left: -($gutter / 2);
-    }
-    @include clearfix;
+  // if gutter is not specified, use the default gutter.
+  @if $gutter == 0 and $for-base and not $collapse {
+    $gutter: $tile-gutter;
   }
+  
+  @if $gutter > 0 {
+    margin-right: -($gutter / 2);
+    margin-left: -($gutter / 2);
 
-  // For <li> styling
-  > li {
-    @if $external-call or $large == 0 {
-      display: block;
-      position: relative;
-      float: $default-float;
-      height: auto;
+    > li {
+      padding-right: ($gutter / 2); 
+      padding-left: ($gutter / 2);
     }
-    
-    @include tile-calc($per-row:$large, $gutter:$gutter, $collapse:$collapse);
-
-    @if $small > 0 and $responsive {
-      @include below(small) {
+  }
+  
+  // Number of tiles per row
+  @if $size > 0 {
+    > li {
+      width: 100% / $size;
+      
+      @if $reset-clearing {
         &:nth-of-type(n) {
           clear: none;
         }
-
-        @include tile-calc($per-row:$small, $gutter:$gutter, $collapse:$collapse);
       }
 
-      @if $mini > 0 {
-        @include below(mini) {
-          &:nth-of-type(n) {
-            clear: none;
-          }
-
-          @include tile-calc($per-row:$mini, $gutter:$gutter, $collapse:$collapse);
-        }
+      &:nth-of-type(#{$size}n+1) {
+        clear: both;
       }
     }
   }
 
-  @if $debug and $external-call {
-    $notes: "large-tile-#{$large}";
-    @if $small > 0 {
-      $notes: $notes + " small-tile-#{$small}";
+}
+
+// -----------------------------------
+// TILE
+// - Styling for external mixin call
+// -----------------------------------
+
+@mixin tile (
+  $size   : 0,
+  $small  : 0,
+  $mini   : 0,
+  $gutter : 0,
+  $collapse : false) {
+
+  @include base-tile(
+    $size: $size,
+    $gutter: $gutter,
+    $collapse: $collapse,
+    $for-base: true
+  );
+
+  @if $small > 0 {
+    @include below(small) {
+      @include base-tile($size: $small, $reset-clearing: true); 
     }
-    @if $mini > 0 {
-      $notes: $notes + " mini-tile-#{$mini}";
+  }
+
+  @if $mini > 0 {
+    @include below(mini) {
+      @include base-tile($size: $mini, $reset-clearing: true);
     }
-    h-tile: $notes;
   }
 }
 
-@if $include-tile and not $external-call {
+@if $include-tile and not $user-mode {
 
 /* --------------
   EDGE Tile
 -------------- */
 
-[class*="-tile-"] {
-  @include tile();
+[class*="tile-"] {
+  @include base-tile($for-base: true);
   
   &.collapse {
-    @include tile($collapse:true);
+    @include base-tile($collapse:true);
   }
 }
 
 @for $i from 1 through $max-tiles {
-  .large-tile-#{$i} {
-    @include tile($large:$i);
+  .large-tile-#{$i},
+  .tile-#{$i} {
+    @include base-tile($size:$i);
   }
 }
 
 @if $responsive {
   @include below(small) {
-    // Make large-tie 100% width
-    [class*="large-tile-"] > li {
+    // Make large-tile 100% width
+    [class*="tile-"] > li {
       width: 100%;
     }
     [class*="small-tile-"] > li:nth-child(n) {
@@ -132,7 +137,7 @@ $tile-gutter : 15px !default;
     }
     @for $i from 1 through $max-tiles {
       .small-tile-#{$i} {
-        @include tile($large:$i);
+        @include base-tile($size:$i);
       }
     }
   }

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

@@ -89,7 +89,7 @@ $ol-child-style   : lower-alpha !default;
   background-size: 100% em($font-size * $line-height, $font-size);
 }
 
-@if $include-typography and not $external-call {
+@if $include-typography and not $user-mode {
 
 /* -----------------
   EDGE Typography

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

@@ -55,57 +55,7 @@
   }
 }
 
-// ---------------------------------
-// HIDE FOR
-// - Hide the element on that screen size
-// - hide-for(small) is still hidden on mini
-// ------------------------------------------
-@mixin hide-for($size) {
-  @if $size == large {
-    @include above(small) {
-      display: none;
-    }
-  }
-
-  @else if $size == small {
-    @include below(small) {
-      display: none;
-    }
-  }
-
-  @else if $size == mini {
-    @include below(mini) {
-      display: none;
-    }
-  }
-}
-
-// ---------------------------------
-// SHOW FOR
-// - Show the element only on that size
-// - show-for(small) is still visible on mini
-// -------------------------------------------
-@mixin show-for($size) {
-  @if $size == large {
-    @include below(small) {
-      display: none;
-    }
-  }
-
-  @else if $size == small {
-    @include above(small) {
-      display: none;
-    }
-  }
-
-  @else if $size == mini {
-    @include above(mini) {
-      display: none;
-    }
-  }
-}
-
-@if $include-visibility and not $external-call {
+@if $include-visibility and not $user-mode {
   
 /* -----------------
   EDGE Visibility

data/assets/sass/kitchen-sink.scss

@@ -3,7 +3,7 @@
 
 
 .custom-grid {
-  @include column($large:3);
+  @include column(3);
 }
 
 [data-page="animate"] {
@@ -103,30 +103,6 @@
       color: #bbb;
     }
   }
-
-  .hfl {
-    @include hide-for("large");
-  }
-
-  .hfs {
-    @include hide-for("small");
-  }
-
-  .hfm {
-    @include hide-for("mini");
-  }
-
-  .sfl {
-    @include show-for(large);
-  }
-
-  .sfs {
-    @include show-for(small);
-  }
-
-  .sfm {
-    @include show-for(mini);
-  }
 }
 
 .demo-grid {
@@ -174,100 +150,124 @@
 
 /* Custom Grid */
 .cgrid-1 {
-  @include column($large:5);
+  @include column($size:5);
 }
 .cgrid-2 {
-  @include column($large:7);
+  @include column($size:7);
 }
 
 .cgrid-a1 {
-  @include column($large:5, $small:10);
+  @include column($size:5, $small:10);
 }
 .cgrid-a2 {
-  @include column($large:7, $small:2);
+  @include column($size:7, $small:2);
 }
 
 .cgrid-b1 {
-  @include column($large:10, $small:8, $mini:6);
+  @include column($size:10, $small:8, $mini:6);
 }
 .cgrid-b2 {
-  @include column($large:2, $small:4, $mini:6);
+  @include column($size:2, $small:4, $mini:6);
 }
 
 .cgrid-c1 {
-  @include column($large:6, $large-offset:4, $small:6);
+  @include column($size:6, $offset:4, $small:6);
 }
 .cgrid-c2 {
-  @include column($large:2, $small:6);
+  @include column($size:2, $small:6);
 }
 
 .cgrid-d1 {
-  @include column($large:3, $large-offset:6, $small:4, $small-offset:4);
+  @include column($size:3, $offset:6);
+
+  @include below(small) {
+    @include column($size:4, $offset:6);
+  }
 }
 .cgrid-d2 {
-  @include column($large:3, $small:4);
+  @include column($size:3, $small:4);
 }
 
-.cgrid-e1 {
-  @include column($large:3, $large-offset:6, $small:4, $small-offset:4, $mini:6);
-}
-.cgrid-e2 {
-  @include column($large:3, $small:4, $mini:6);
-}
+// .cgrid-e1 {
+//   @include column($size:3, $offset:6, $small:4, $small-offset:4, $mini:6);
+// }
+// .cgrid-e2 {
+//   @include column($size:3, $small:4, $mini:6);
+// }
 
-.cgrid-f1 {
-  @include column($large:3, $large-offset:6, $small:4, $small-offset:4, $mini:5, $mini-offset:1);
-}
-.cgrid-f2 {
-  @include column($large:3, $small:4, $mini:6);
-}
+// .cgrid-f1 {
+//   @include column($size:3, $offset:6, $small:4, $small-offset:4, $mini:5);
+// }
+// .cgrid-f2 {
+//   @include column($size:3, $small:4, $mini:6);
+// }
 
 .cgrid-g1 {
-  @include column($large:4, $push:8);
+  @include column($size:4, $push:8);
 }
 .cgrid-g2 {
-  @include column($large:8, $pull:4);
+  @include column($size:8, $pull:4);
 }
 
 .cgrid-h1 {
-  @include column($large:8, $small:8);
+  @include column($size:8, $small:8);
 }
   .cgrid-h1-1 {
-    @include column($large:5, $small:5);
+    @include column($size:5, $small:5);
   }
   .cgrid-h1-2 {
-    @include column($large:7, $small:7);
+    @include column($size:7, $small:7);
   }
 .cgrid-h2 {
-  @include column($large:4, $small:4);
+  @include column($size:4, $small:4);
 }
   .cgrid-h2-1 {
-    @include column($large:6, $small:6, $centered:true);
+    @include column($size:6, $small:6, $centered:true);
   }
 
 .cgrid-i0 {
   @include row($gutter:50px);
 }
 .cgrid-i1 {
-  @include column($large:6, $gutter:50px);
+  @include column($size:6, $gutter:50px);
 }
 .cgrid-i2 {
-  @include column($large:6, $gutter:50px);
+  @include column($size:6, $gutter:50px);
 }
 
 /* Custom Tile */
 .custom-tile1 {
-  @include tile($large:7, $small:5);
+  @include tile($size:7, $small:5, $gutter: 50px);
 }
 
 .custom-tile2 {
-  @include tile($large:5, $small:3, $collapse:true);
+  @include tile($size:5, $small:3, $collapse:true);
 }
 
 .custom-tile3 {
   @include tile(5, 3, 2);
 }
 
+/* --------------------
+  DESIGN CUSTOM GRID
+-------------------- */
+
+[data-page="design-grid"] {
+  .dgrid-ar {
+    @include row($gutter: 50px, $width: 500px);
+  }
+
+  .dgrid-a1 {
+    @include column-px($size: 325px, $width: 500px, $gutter: 50px);
+  }
+
+  .dgrid-a2 {
+    @include column-px($size: 125px, $width: 500px, $gutter: 50px);
+  }
+}
+
+/* ----- FORM ----- */
+
 [data-page="form"] {
   input, textarea, select {
     margin-bottom: 20px;