edge_framework 2.0.0 → 2.1.0

checksums.yaml

@@ -1,15 +1,15 @@
 ---
 !binary "U0hBMQ==":
   metadata.gz: !binary |-
-    OGExZTRhN2EwM2U1NzVhOTEwZmY3NGZiZTUxYWVkYWMxZTk2YWViZQ==
+    YTQ5MDVlZmU1M2FhODJhYTMwMzg5ZjE0ZmM4MzFlMGY3Y2Y4MDhmYQ==
   data.tar.gz: !binary |-
-    OGU0YjA3YzcwNDU1MTBhOGVmZmUyNmU5NDM0MDY1YmI5YzA1ZjdiMA==
+    Yzg4M2M2MTJmOTFjMWJjOTlkMjYxM2Y5NmQyYzllM2NmYmFiODQ2Mw==
 SHA512:
   metadata.gz: !binary |-
-    NWQ5YjRiNDBhMmYyZWIyYzIxZTUyOTBiNDVmZTE1ZjY4ZWE2NTJmNmI3NWYy
-    MmM5NzkyNmRkYWYxOWJkOWE2Yzk5YjBiNWZhODU1NWI1Zjk5MTY3NGJhNmU5
-    MzQ3OWNkMzQ2MzA2YTJiNWIxODkxYzRkN2MzOTdmZGE3YjU5YmI=
+    YzEyNTVlNDYzNTZmMTU3NjZlMjQzYTVkYmMxMDM0YWViNTc2NGRhOTRiMDVm
+    ODYxMmIwYzhjNzg1ZmE4NTlhZjc3ZDk3ODYxODM0NDU2NDY4MWM0YjhkZTBj
+    Y2JiMTkyMTllN2NlZGQzZjQ4MmYzMTdkM2NmMDk2MGZjMDYzY2Q=
   data.tar.gz: !binary |-
-    ZGIxNTVmMjFkMDVlM2UwNzViMjM3YmE5NmZlNzllYmY4YmI2YTlkNzFjNzkw
-    NWEzNmZmMTQ0MTQzYTU1OGIyMWRlM2IyZmIyNWMwMTU1ZDljZTg3MjJlZDRj
-    ZjE1YWZjMWI1NDdlMjkxYWZiYzJkNGY3ZTdkYTgyMmQ2YTQyMzY=
+    NWJlNDBiMWYwMDEzZmQ1NGNiMzNhN2M3ZDY3NTQzZDk5YjAyYzY4ZDU4NzRj
+    ODcxOGIwZTZmMzRlYjYyOGNkZTkyYjQ3MjE0ZDA2Y2E3YzgzYWQ3NDdhZGY3
+    NjUzNjcxNDYwNjljNWUzNmY5N2Q1NjQ3YjYxZjk1OGY2MTJlZDA=

data/README.md

@@ -173,8 +173,6 @@ Just like row, you can collapse it:
 
 **Convention**:
 
-- Don't name any of your class starting with `block`. It is reserved for tile.
-
 - Don't add your own styling to the tile or ti element.
 
 WORDPRESS
@@ -398,6 +396,22 @@ You can either use `$total` parameter or fraction:
       @include column($size: 7 / 15, $offset: 3 / 15);
     }
 
+ADAPTIVE GRID
+======================
+
+Normal Grid always expand to 100% at any screen size. This can be a nuisance for complex responsive site because we need to make sure nothing is misaligned on all size.
+
+Adaptive Grid sets a **fixed-width** and shrink to the next width when the screen size reaches the breakpoint.
+
+In setting, change the variable `$adaptive` to true.
+
+You may add more breakpoints in the variable `$adaptive-breakpoint`. You can mix variable and number in the comma-separated list.
+
+Example:
+
+    $adaptive-breakpoint: $medium-screen, 900px, $small-screen, 600px, $mini-screen;
+
+
 TILE - mixin
 ======================
 

data/assets/kitchensink.html

@@ -163,9 +163,9 @@
   </div>
 </div> -->
 
-<!-- <div class="row" data-page="tile">
-  <div class="large-12 column">
-    <div class="demo-tile">
+<section class="demo-tile" data-page="tile">
+  <h-row>
+    <h-column class="large-12">
       <h1>Tile</h1>
       <h-tile class="block-7 small-block-4">
         <h-ti><p>1</p></h-ti>
@@ -190,9 +190,9 @@
         <h-ti><p>1</p></h-ti>
         <h-ti><p>1</p></h-ti>
       </h-tile>
-    </div>
-  </div>
-</div> -->
+    </h-column>
+  </h-row>
+</section>
 
 <!-- <div class="row" data-page="custom-tile">
   <div class="large-12 column">
@@ -431,7 +431,7 @@
   </div>
 </section>
 
-<section class="demo-grid" data-page="custom-grid">
+<!-- <section class="demo-grid" data-page="custom-grid">
     
   <h1>Custom Grid</h1>
   <ul>
@@ -570,8 +570,7 @@
         <p>l4 50px - s6 20px</p>
       </h-column>
     </h-row>
-
-</section>
+</section> -->
 
 <!-- <section class="row" data-page="design-grid">
   <div class="large-12 column demo-grid">

data/assets/sass/_edge.scss

@@ -1,8 +1,9 @@
 /* --------------------
 - EDGE Framework
 - edge.thesyne.com
-- v2.0.0 (Gondar)
+- v2.1.0 (Gondar)
 --------------------- */
 
 @import "edge/base";
-@import "edge/components";
+@import "edge/utility";
+@import "edge/component";

data/assets/sass/_edgemail.scss

@@ -5,4 +5,4 @@
 ---------------------------- */
 
 @import "edgemail/base";
-@import "edgemail/components";
+@import "edgemail/component";

data/assets/sass/edge/_base.scss

@@ -26,9 +26,9 @@ $include-grid       : true !default;
 $include-tile       : true !default;
 
 // Default is false
-$include-animate    : false !default;
-$include-print      : false !default;
-$include-code       : false !default;
+$include-animate  : false !default;
+$include-print    : false !default;
+$include-code     : false !default;
 
 // ----------
 // COLOR
@@ -56,187 +56,22 @@ $g-transition : all .2s ease-out !default;
 $body-font-size   : 16px !default;
 $body-line-height : 1.5 !default;
 
-// --------------
-// EM CONVERTER
-// --------------
-
-// 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 type-of($value) != number { @return $value; }
-  
-  $value: stripUnit($value) / stripUnit($context) * 1em;
-  // turn 0em into 0
-  @if ($value == 0em) {
-    $value: 0;
-  }
-  @return $value;
-}
-
-@function em($values, $context: $body-font-size) {
-  // if only contain single number, convert it directly
-  @if type-of($values) == number {
-    @return convertToEm($values, $context);
-  }
-  
-  // if contains multiple values, loop through it
-  $emValues   : ();
-  @each $val in $values {
-    $emValues: append($emValues, convertToEm($val, $context) );
-  }
-  @return join((), $emValues, space );
-}
-
 // -------------------
 // MEDIA QUERIES
 // -------------------
-$mini-screen  : 480px !default;
-$small-screen : 767px !default;
-$medium-screen : 1120px !default;
-$large-screen  : 1440px !default;
-$retina-screen : 192dpi !default;
-
-@function translateSize($size) {
-  // if number, return it as it is
-  @if type-of($size) == number {
-    @return $size;
-  }
-  // if keyword, return the translated size
-  @else if $size == mini {
-    @return $mini-screen;
-  }
-  @else if $size == small {
-    @return $small-screen;
-  }
-  @else if $size == medium {
-    @return $medium-screen;
-  }
-  @else if $size == large {
-    @return $large-screen;
-  }
-  @else if $size == retina {
-    @return $retina-screen;
-  }
-}
-
-// Standalone mixin
-
-@mixin below($named-size) {
-  @if $responsive {
-    $in-media: true !global;
-    $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; }
-    }
-
-    $in-media: false !global;
-  }
-}
-
-@mixin above($named-size) {
-  @if $responsive {
-    $in-media: true !global;
-    $size: translateSize($named-size) + 1px;
-
-    @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; }
-    }
-
-    $in-media: false !global;
-  }
-}
-
-@mixin between($smaller-size, $larger-size) {
-  @if $responsive {
-    $in-media: true !global;
-    $smaller-size: translateSize($smaller-size);
-    $larger-size: translateSize($larger-size);
-
-    @media only screen and (min-width: $smaller-size) and (max-width: $larger-size) {
-      @content;
-    }
-
-    $in-media: false !global;
-  }
-}
-
-@mixin print {
-  @media only print {
-    @content;
-  }
-}
-
-// ----------------------------------------------
-// CLEARING FLOAT
-//   Make a container wraps floated element
-// ----------------------------------------------
-@mixin clearfix {
-  zoom:  1;
-  &::before, &::after {
-    content: " ";
-    display: table;
-  }
-  &::after {
-    clear: both;
-  }
-}
-
-// --------------------------------
-// SELECTION
-//   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;
-  }
-
-  ::selection {
-    background: $background-color;
-    text-shadow: none !important;
-    color: $color !important;
-  }
-}
-
-// ------------------------------------------------------
-// DISABLE SELECTION
-//   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;
-}
-
-@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;
-}
+$mini-size  : 480px !default;
+$small-size : 767px !default;
+$medium-size : 1120px !default;
+$large-size  : 1440px !default;
+$retina-size : 192dpi !default;
+
+$_media-sizes: (
+  mini: $mini-size,
+  small: $small-size,
+  medium: $medium-size,
+  large: $large-size,
+  retina: $retina-size
+);
 
 // ---------------------
 // TEXT DIRECTION
@@ -253,105 +88,61 @@ $default-opposite : right !default;
   $default-opposite : left;
 }
 
-// -------------
-// 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 == up or
-      $direction == right or
-      $direction == left or
-      $direction == bottom or 
-      $direction == down {
-      $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 or $direction == up {
-    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 or $direction == down {
-    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;
-  }
+// ------------
+// c/GRID
+// ------------
 
-  //            __
-  // 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;
-  }
-}
+$row-max-width   : $medium-size !default;
+$total-columns   : 12 !default;
+$column-gutter   : 20px !default;
+
+$adaptive-breakpoints : $medium-size, $small-size, $mini-size !default;
+
+// ----------
+// c/TILE
+// ----------
 
-// ------------------------------------------------
-// CSS3 - VENDOR PREFIX
-// 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) {
+$max-tiles   : 12 !default;
+$tile-gutter : 20px !default;
+
+// -----------
+// c/PRINT
+// -----------
+
+$override-color: true !default;
+
+// -------------
+// c/TYPOGRAPHY
+// -------------
 
-  @if $webkit { -webkit-#{$property}: $value; }
-  @if $khtml { -khtml-#{$property}: $value; }
-  @if $moz { -moz-#{$property}: $value; }
-  @if $ms { -ms-#{$property}: $value; }
-  @if $o { -o-#{$property}: $value; }
-  @if $official { #{$property}: $value; }
-}
+// BODY
+$body-background  : #fff !default;
+$body-font-color  : #222 !default;
+$body-font-weight : 400 !default;
+
+// Compass VERTICAL RHYTM
+$base-font-size   : $body-font-size;
+$base-line-height : $body-line-height * $body-font-size;
+
+// FONT FAMILY
+$header-font-family : Helvetica, Arial, "sans-serif" !default;
+$body-font-family   : Helvetica, Arial, "sans-serif" !default;
+
+// HEADER
+$h1-font-size : 44px !default;
+$h2-font-size : 38px !default;
+$h3-font-size : 30px !default;
+$h4-font-size : 24px !default;
+$h5-font-size : 20px !default;
+$h6-font-size : 16px !default;
+
+$header-font-color  : $body-font-color !default;
+$header-font-weight : 700 !default;
+$header-line-height : 1 !default;
+
+// LIST
+$ul-parent-style  : disc !default;
+$ul-child-style   : circle !default;
+
+$ol-parent-style  : decimal !default;
+$ol-child-style   : lower-alpha !default;