edge_framework 0.9.10 → 0.9.11

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

@@ -2,63 +2,46 @@
 // 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) {
 
+// ---------------
+// BUTTON :hover
+// ---------------
+@mixin button-hover($color) {
   &:hover {
     // Darken background if background is light
-    @if contrast-color($color, is_light, is_dark, 70%) == is_light {
-      background-color: darken($color, 7.5%);
+    @if is_light($color) {
+      background-color: darken($color, 5%);
     }
     // Lighten background if background is dark
     @else {
-      background-color: lighten($color, 7.5%);
+      background-color: lighten($color, 5%);
     }
   }
 }
 
-// ------------------------------
-// BUTTON Active State
-// - Button styling for :active
-// ------------------------------
-@mixin h-button-active(
-  $color,
-  $full     : $button-full-style,
-  $for-base : false) {
-
+// -----------------
+// BUTTON :active
+// -----------------
+@mixin button-active($color) {
   &: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%);
+    @if is_light($color) {
+      background-color: darken($color, 10%);
     }
     // 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) );
+      background-color: darken($color, 5%);
     }
   }
 }
 
-// ------------------------------
-// BUTTON Focus State
-//   Button styling for :focus
-// ------------------------------
-@mixin h-button-focus($for-base: false) {
-  
-  @if $for-base {
-    &:focus {
-      outline: none;
-    }
+// ---------------
+// BUTTON :focus
+// ---------------
+@mixin button-focus() {
+  &:focus {
+    outline: none;
   }
 }
 
@@ -68,30 +51,34 @@ $button-padding: 10px 20px !default;
 // -----------------
 @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);
+    border: 1px solid transparent;
+    
+    padding: 10px 20px;
+    text-transform: uppercase;
+    font-weight: 700;
+    letter-spacing: 1px;
   }
   
   background-color: $color;
-  padding: $padding;
   color: contrast-color($color, $body-font-color, white, 70%);
   
-  @if $full and $for-base {
+  @if $for-base {
+    @include border-radius($g-radius);
     @include background-image(linear-gradient(top, rgba(white, .1), transparent ) );
     @include transition($g-transition);
     @include box-shadow(inset 1px 1px rgba(white, .1) );
+
+    @include button-focus();
   }
 
-  @include h-button-hover($color:$color);
-  @include h-button-active($color:$color, $for-base:$for-base);
-  @include h-button-focus($for-base:$for-base);
+  @include button-hover($color);
+  @include button-active($color);
 }
 
 @if $include-button and not $external-call {
@@ -100,8 +87,10 @@ $button-padding: 10px 20px !default;
 EDGE Button
 --------------- */
 button,
-.button {
-  @include button($for-base:true);
+.button,
+input[type="submit"],
+input[type="reset"] {
+  @include button($for-base: true);
 }
 
 } // $include-button

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

@@ -18,10 +18,10 @@ $column-gutter   : 20px !default;
 // ---------------------------------
 
 @mixin row(
+  $gutter    : $column-gutter,
+  $width     : $row-max-width,
   $nest      : false,
   $collapse  : false,
-  $width     : $row-max-width,
-  $gutter    : $column-gutter,
   $for-base  : false ) {
 
   @if $for-base {
@@ -159,7 +159,7 @@ $column-gutter   : 20px !default;
   $push  : 0,
   $pull  : 0,
   $collapse  : false,
-  $center    : false,
+  $centered  : false,
   $gutter    : $column-gutter,
   $total     : $total-columns,
   $for-base  : false ) {
@@ -203,7 +203,7 @@ $column-gutter   : 20px !default;
   }
 
   // If centered, get rid of float and add auto margin
-  @if $center {
+  @if $centered {
     display: block;
     float: none;
     margin-right: auto !important;
@@ -256,7 +256,7 @@ $column-gutter   : 20px !default;
     @if $pull > 0 {
       $notes: $notes + " pull-#{$pull}";
     }
-    @if $center {
+    @if $centered {
       $notes: $notes + " centered";
     }
     h-column: $notes;
@@ -304,7 +304,7 @@ $column-gutter   : 20px !default;
 // Centered column
 .column.large-centered,
 .columns.large-centered {
-  @include column($center:true);
+  @include column($centered:true);
 }
 
 // Source Ordering
@@ -337,7 +337,7 @@ $column-gutter   : 20px !default;
 
     .column.small-centered,
     .columns.small-centered {
-      @include column($center:true);
+      @include column($centered:true);
     }
   }
 

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

@@ -39,12 +39,14 @@ $tile-gutter : 15px !default;
 @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;
@@ -74,23 +76,36 @@ $tile-gutter : 15px !default;
 
         @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);
+        }
+      }
     }
-  } // li
+  }
 
   @if $debug and $external-call {
     $notes: "large-tile-#{$large}";
     @if $small > 0 {
       $notes: $notes + " small-tile-#{$small}";
     }
+    @if $mini > 0 {
+      $notes: $notes + " mini-tile-#{$mini}";
+    }
     h-tile: $notes;
   }
 }
 
 @if $include-tile and not $external-call {
 
-/* -----------------
-  EDGE Block Grid
------------------ */
+/* --------------
+  EDGE Tile
+-------------- */
 
 [class*="-tile-"] {
   @include tile();
@@ -100,7 +115,7 @@ $tile-gutter : 15px !default;
   }
 }
 
-@for $i from 2   through $max-tiles {
+@for $i from 1 through $max-tiles {
   .large-tile-#{$i} {
     @include tile($large:$i);
   }

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

@@ -28,7 +28,7 @@ $header-font-color  : $body-font-color !default;
 $header-font-weight : 700 !default;
 
 // PARAGRAPH
-$p-margin-bottom    : 1.5em !default;
+$p-margin-bottom  : 1em !default;
 
 // LIST
 $ul-parent-style  : disc !default;
@@ -138,11 +138,6 @@ a {
     &:last-child {
       margin-bottom: 0;
     }
-
-    + ul,
-    + ol {
-      margin-bottom: $p-margin-bottom;
-    }
   }
 }
 

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

@@ -6,7 +6,7 @@
 // VISIBLE ON
 // - Set the display of special element
 // ------------------------------------
-@mixin visible-on($size, $display: inherit) {
+@mixin visibility($size, $display: inherit) {
   @if $size == large {
     &.hide-for-large,
     &.show-for-small,
@@ -24,8 +24,7 @@
     &.hide-for-large { display: $display !important; }
   }
   @else if $size == mini {
-    &.hide-for-mini,
-    &.show-for-small { display: none !important; }
+    &.hide-for-mini { display: none !important; }
     
     &.show-for-mini { display: $display !important; }
   }
@@ -37,22 +36,22 @@
 // --------------------------------------------
 @mixin special-display($size) {
   table {
-    @include visible-on($size, table);
+    @include visibility($size, table);
   }
   thead {
-    @include visible-on($size, table-header-group);
+    @include visibility($size, table-header-group);
   }
   tbody {
-    @include visible-on($size, table-row-group);
+    @include visibility($size, table-row-group);
   }
   tr {
-    @include visible-on($size, table-row);
+    @include visibility($size, table-row);
   }
   td, th {
-    @include visible-on($size, table-cell);
+    @include visibility($size, table-cell);
   }
-  span, b, em, strong, .bold, .italic {
-    @include visible-on($size, inline-block);
+  img, span, em, strong, sub, sup, big, small {
+    @include visibility($size, inline-block);
   }
 }
 
@@ -114,52 +113,33 @@
 
 .hide-for-large,
 .show-for-small,
-.show-for-mini {
-  display: none !important;
-}
+.show-for-mini { display: none !important; }
 
 .hide-for-small,
 .hide-for-mini,
-.show-for-large {
-  display: inherit !important;
-}
+.show-for-large { display: inherit !important; }
 
 @include special-display(large);
 
 @include below(small) {
-  // .hide-for-mini VISIBLE
-  // .show-for-mini NONE
 
   .hide-for-small,
-  .show-for-large {
-    display: none !important;
-  }
+  .show-for-large { display: none !important; }
 
   .show-for-small,
-  .hide-for-large {
-    display: inherit !important;
-  }
+  .hide-for-large { display: inherit !important; }
 
   @include special-display(small);
 }
 
 @include below(mini) {
-  // .hide-for-large VISIBLE
-  // .show-for-large NONE
-  // .hide-for-small NONE
 
-  .hide-for-mini,
-  .show-for-small {
-    display: none !important;
-  }
+  .hide-for-mini { display: none !important; }
 
-  .show-for-mini {
-    display: inherit !important;
-  }
+  .show-for-mini { display: inherit !important; }
 
   @include special-display(mini);
 }
 
-
 } // include-visibility
 

data/assets/sass/edge.scss

@@ -1,6 +1,6 @@
 /* ----------------------------------
 - EDGE Framework - edge.setyono.net
-- v0.9.10 (Crixalis)
+- v0.9.11 (Crixalis)
 ------------------------------------- */
 
 @import "edge/base";

data/assets/sass/for-test.scss

@@ -105,15 +105,15 @@
   }
 
   .hfl {
-    @include hide-for(large);
+    @include hide-for("large");
   }
 
   .hfs {
-    @include hide-for(small);
+    @include hide-for("small");
   }
 
   .hfm {
-    @include hide-for(mini);
+    @include hide-for("mini");
   }
 
   .sfl {
@@ -242,7 +242,7 @@
   @include column($large:4, $small:4);
 }
   .cgrid-h2-1 {
-    @include column($large:6, $small:6, $center:true);
+    @include column($large:6, $small:6, $centered:true);
   }
 
 .cgrid-i0 {
@@ -264,6 +264,10 @@
   @include tile($large:5, $small:3, $collapse:true);
 }
 
+.custom-tile3 {
+  @include tile(5, 3, 2);
+}
+
 [data-page="form"] {
   input, textarea, select {
     margin-bottom: 20px;
@@ -277,6 +281,10 @@
 
   .has-vr {
     @include vertical-rhythm();
+
+    blockquote {
+      @include trailer(1);
+    }
   }
 }
 
@@ -324,5 +332,4 @@
       @include button(#333);
     }
   }
-}
-
+}

data/assets/test.html

@@ -135,13 +135,13 @@
     </div>
   </div> 
  -->
-<!--   <section class="row" data-page="animate">
+<!--  <section class="row" data-page="animate">
     <div class="large-12 column">
       <div class="box1" data-animate="fadein 500"></div>
     </div>
   </section> -->
 
-<!--   <div class="row" data-page="typography">
+<!--  <div class="row" data-page="typography">
     <div class="large-12 columns">
       <article>
         <div class="row">
@@ -224,7 +224,7 @@
     </div>
   </div> -->
 
-<!--   <div class="row" data-page="vr-comparison">
+<!--  <div class="row" data-page="vr-comparison">
     <div class="large-6 column">
       <article class="baseline-comparison">
         <h1>Lorem ipsum dolor sit amet.</h1>
@@ -381,7 +381,7 @@
   </div>
 </div> -->
 
-<!-- <div class="row" data-page="custom-tile">
+ <div class="row" data-page="custom-tile">
   <div class="large-12 columns">
     <div class="demo-tile">
       <h1>Custom Tile</h1>
@@ -414,9 +414,24 @@
         <li><p>1</p></li>
         <li><p>1</p></li>
       </ul>
+      <h2>Custom Tile Mini</h2>
+      <ul class="custom-tile3">
+        <li><p>1</p></li>
+        <li><p>1</p></li>
+        <li><p>1</p></li>
+        <li><p>1</p></li>
+        <li><p>1</p></li>
+        <li><p>1</p></li>
+        <li><p>1</p></li>
+        <li><p>1</p></li>
+        <li><p>1</p></li>
+        <li><p>1</p></li>
+        <li><p>1</p></li>
+        <li><p>1</p></li>
+      </ul>
     </div>
   </div>
-</div> -->
+</div>
 
 <!-- <div class="row" data-page="grid">
   <div class="large-12 columns">
@@ -551,8 +566,7 @@
   </div>
 </div> -->
 
-
-<section class="row" data-page="visibility">
+<!-- <section class="row" data-page="visibility">
   <div class="large-12 column">
     <h2>Using the Class</h2>
     <div class="visibility-class">
@@ -588,38 +602,32 @@
     <div class="visibility-table">
       <table border="1" class="hide-for-large">
         <tr>
-          <td>hide-for</td>
-          <td>large</td>
+          <td>hide-for-large</td>
         </tr>
       </table>
       <table border="1" class="hide-for-small">
         <tr>
-          <td>hide-for</td>
-          <td>small</td>
+          <td>hide-for-small</td>
         </tr>
       </table>
       <table border="1" class="hide-for-mini">
         <tr>
-          <td>hide-for</td>
-          <td>mini</td>
+          <td>hide-for-mini</td>
         </tr>
       </table>
       <table border="1" class="show-for-large">
         <tr>
-          <td>show-for</td>
-          <td>large</td>
+          <td>show-for-large</td>
         </tr>
       </table>
       <table border="1" class="show-for-small">
         <tr>
-          <td>show-for</td>
-          <td>small</td>
+          <td>show-for-small</td>
         </tr>
       </table>
       <table border="1" class="show-for-mini">
         <tr>
-          <td>show-for</td>
-          <td>mini</td>
+          <td>show-for-mini</td>
         </tr>
       </table>
     </div>
@@ -628,51 +636,45 @@
     <div class="visibility-td">
       <table border="1">
         <tr>
-          <td class="hide-for-large">This is</td>
-          <td>hide-for</td>
-          <td>large</td>
+          <td>This is</td>
+          <td class="hide-for-large">hide-for-large</td>
         </tr>
       </table>
       <table border="1">
         <tr>
-          <td class="hide-for-small">This is</td>
-          <td>hide-for</td>
-          <td>small</td>
+          <td>This is</td>
+          <td class="hide-for-small">hide-for-small</td>
         </tr>
       </table>
       <table border="1">
         <tr>
-          <td class="hide-for-mini">This is</td>
-          <td>hide-for</td>
-          <td>mini</td>
+          <td>This is</td>
+          <td class="hide-for-mini">hide-for-mini</td>
         </tr>
       </table>
       <table border="1">
         <tr>
-          <td class="show-for-large">This is</td>
-          <td>show-for</td>
-          <td>large</td>
+          <td>This is</td>
+          <td class="show-for-large">show-for-large</td>
         </tr>
       </table>
       <table border="1" >
         <tr>
-          <td class="show-for-small">This is</td>
-          <td>show-for</td>
-          <td>small</td>
+          <td>This is</td>
+          <td class="show-for-small">show-for-small</td>
         </tr>
       </table>
       <table border="1" >
         <tr>
-          <td class="show-for-mini">This is</td>
-          <td>show-for</td>
-          <td>mini</td>
+          <td>This is</td>
+          <td class="show-for-mini">show-for-mini</td>
         </tr>
       </table>
     </div>
     
   </div>
 </section>
-
+ -->
 <!-- <div class="row collapse demo-grid" data-page="grid">
   <h1>Collapse not nested</h1>
   <div class="large-8 column">
@@ -815,7 +817,7 @@
   </div>
 </section> -->
 
-<!-- <section class="row" data-page="button">
+<section class="row" data-page="button">
   <div class="large-4 column">
     <h1>Button</h1>
     <a href="" class="button">Hello World</a>
@@ -838,7 +840,7 @@
     <br>
     <a href="" class="button black-button">Hello World</a>
   </div>
-</section> -->
+</section>
     
 <!-- <div class="row" data-page="form">
   <div class="large-6 columns">
@@ -937,10 +939,5 @@
 <script type="text/javascript" src="js/edge/edge.prism.js"></script>
 <script type="text/javascript" src="js/edge/edge.animate.js"></script>
 
-
-  <script>
-    //$(".box1").addClass("animated");
-  </script>
-
 </body>
 </html>

data/bin/edge

@@ -1,14 +1,14 @@
 #!/usr/bin/env ruby
 
-require 'edge_framework'
+require "edge_framework"
 
 command = ARGV[0]
 type    = ARGV[1]
 name    = ARGV[2]
 
-if command == nil || command == 'help' || command == '-h'
+if command == nil || command == "help" || command == "-h"
 	Edge.help()
-elsif command == 'create'
+elsif command == "create"
 	if ARGV.length >= 4
 		Edge.command_too_long()
 	else