edge_framework 2.0.0 → 2.1.0

data/assets/sass/edge/_component.scss

@@ -0,0 +1,12 @@
+@import "component/normalize";
+@import "component/typography";
+
+@import "component/grid";
+@import "component/tile";
+
+@import "component/button";
+@import "component/form";
+@import "component/animate";
+
+@import "component/print";
+@import "component/code";

data/assets/sass/edge/_helpers.scss

@@ -1,7 +1 @@
-@import "base";
-@import "helpers/sprites";
-@import "helpers/sticky-footer";
-
-$user-mode  : true;
-
-@import "components";
+@import "user";

data/assets/sass/edge/_user.scss

@@ -0,0 +1,5 @@
+$user-mode  : true; // disable the ouput from component
+
+@import "base";
+@import "utility";
+@import "component";

data/assets/sass/edge/_utility.scss

@@ -0,0 +1,7 @@
+@import "utility/em";
+@import "utility/media";
+@import "utility/triangle";
+@import "utility/other";
+
+@import "utility/sprites";
+@import "utility/sticky-footer";

data/assets/sass/edge/{components → component}/_grid.scss

@@ -2,12 +2,6 @@
 // EDGE GRID
 // =============
 
-$row-max-width   : $medium-screen !default;
-$total-columns   : 12 !default;
-$column-gutter   : 20px !default;
-
-$adaptive-breakpoints : $medium-screen, $small-screen !default;
-
 // Calculate percentages for grid
 @function gridCalc($colNumber, $totalColumns) {
   // If column specified is not fraction
@@ -226,15 +220,21 @@ $adaptive-breakpoints : $medium-screen, $small-screen !default;
 
   // Sizing
   @if $size > 0 {
-    @include base-column($size, $total:$total);
+    @include base-column($size, $offset:$offset, $total:$total);
+    
+    // Reset offset if more than 0
+    $reset-offset: $offset;
+    @if $offset {
+      $reset-offset: 0;
+    }
 
     @if $small > 0 {
       @include below(small) {
-        @include base-column($small, $total:$total);
+        @include base-column($small, $offset:$reset-offset, $total:$total);
       }
-    } @else if $responsive and not $in-media { // else, become 100% width on small screen (if responsive)
+    } @else if not $in-media { // else, become 100% width on small screen
       @include below(small) {
-        @include base-column($total, $total:$total);
+        @include base-column($total, $offset:$reset-offset, $total:$total);
       }
     }
 
@@ -252,16 +252,6 @@ $adaptive-breakpoints : $medium-screen, $small-screen !default;
     $gutter: $gutter,
     $total: $total
   );
-
-  // Source Ordering, follow base column
-  @if $responsive and not $in-media {
-    // make Offset not inherited in small screen
-    @include above(small) {
-      @include base-column($offset:$offset, $total:$total);
-    }
-  } @else {
-    @include base-column($offset:$offset, $total:$total);
-  }
 }
 
 // ----------------------------------------------
@@ -314,11 +304,11 @@ $adaptive-breakpoints : $medium-screen, $small-screen !default;
   EDGE Grid
 ------------ */
 
-@if not $responsive {
-  body {
-    min-width: $row-max-width + ($column-gutter * 2);
-  }
-}
+// @if not $responsive {
+//   body {
+//     min-width: $row-max-width + ($column-gutter * 2);
+//   }
+// }
 
 // normal row
 h-row {
@@ -355,13 +345,7 @@ h-column {
 }
 
 @include h-sizing("large");
-
-@if $responsive {
-  @include above(small) { @include h-offset("offset"); }
-} @else {
-  // Not inside media query. So when it reach the breakpoint, the offset isn't gone.
-  @include h-offset("offset");
-}
+@include h-offset("offset");
 
 // centered column
 .centered {
@@ -370,8 +354,16 @@ h-column {
 
 // small screen and below
 @include below(small) {
-  [class^="large-"] {
-    @include base-column($total-columns);
+  // reset large sizing
+  %large-reset { @include base-column($total-columns); }
+  @for $i from 1 through $total-columns {
+    .large-#{$i} { @extend %large-reset; }
+  }
+  
+  // reset large offset
+  %offset-reset { @include base-column($offset: 0); }
+  @for $i from 1 through ($total-columns - 1) {
+    .offset-#{$i} { @extend %offset-reset; }
   }
   
   @include h-sizing("small");

data/assets/sass/edge/{components → component}/_normalize.scss

@@ -23,10 +23,6 @@
   padding: 0;
 }
 
-body {
-  height: 100%;
-}
-
 // Chrome Sibling Selector Fix
 body { -webkit-animation: bugfix infinite 1s; }
 @-webkit-keyframes bugfix { 
@@ -35,7 +31,6 @@ body { -webkit-animation: bugfix infinite 1s; }
 }
 
 html {
-  height: 100%;
   font-family: sans-serif;
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
@@ -176,12 +171,6 @@ table {
 
 /* Miscellaneous useful HTML classes */
 
-.left         { float: left !important; }
-.right        { float: right !important; }
-.text-left    { text-align: left !important; }
-.text-right   { text-align: right !important; }
-.text-center  { text-align: center !important; }
-.text-justify { text-align: justify !important; }
 .hide         { display: none !important; visibility: hidden !important; }
 .visual-hide  {
   border: 0 !important;

data/assets/sass/edge/{components → component}/_print.scss

@@ -4,48 +4,52 @@
 
 @if $include-print and not $user-mode {
   
-/* --------------
+/* ---------------------
   EDGE Print
--------------- */
+  - HTML5 Boilerplate
+--------------------- */
 
 @include print {
   * {
-    background: transparent !important;
-    color: #000 !important; // Black prints faster: h5bp.com/s
+    @if $override-color {
+      color: #000 !important;  
+    }
     box-shadow: none !important;
     text-shadow: none !important;
   }
 
   a,
   a:visited {
-    color: #000 !important;
+    @if $override-color {
+      color: #000 !important;
+    }
     text-decoration: underline;
   }
 
-  a[href]:after {
+  a[href]::after {
     content: " (" attr(href) ")";
   }
 
-  abbr[title]:after {
+  abbr[title]::after {
     content: " (" attr(title) ")";
   }
 
   // Don't show links for images, or javascript/internal links
 
-  .ir a:after,
-  a[href^="javascript:"]:after,
-  a[href^="#"]:after {
+  .ir a::after,
+  a[href^="javascript:"]::after,
+  a[href^="#"]::after,
+  .button::after {
     content: "";
   }
 
   pre,
   blockquote {
-    border: 1px solid #999;
     page-break-inside: avoid;
   }
 
   thead {
-    display: table-header-group; /* h5bp.com/t */
+    display: table-header-group;
   }
 
   tr,
@@ -71,6 +75,16 @@
   h2,
   h3 {
     page-break-after: avoid;
+  }
+  
+  // set the page size
+  
+  h-row {
+    min-width: $row-max-width + $column-gutter;
+
+    h-row {
+      min-width: 0;
+    }
   } 
 }
 

data/assets/sass/edge/{components → component}/_tile.scss

@@ -2,9 +2,6 @@
 // EDGE TILE
 // ==============
 
-$max-tiles   : 12 !default;
-$tile-gutter : 20px !default;
-
 // ------------------------------
 // BASE TILE
 // - Styling for base framework
@@ -26,6 +23,8 @@ $tile-gutter : 20px !default;
   @if $collapse {
     margin-right: 0;
     margin-left: 0;
+    padding-right: 0; // override grid's .collapse
+    padding-left: 0;
   }
   
   @if $gutter > 0 {
@@ -121,9 +120,10 @@ h-tile {
 }
 
 @include below(small) {
-  // Make large-tile 100% width
-  [class^="block-"] {
-    @include base-tile(1, $clear:true);
+  // reset large block
+  %block-reset { @include base-tile(1, $clear:true); }
+  @for $i from 1 through $max-tiles {
+    .block-#{$i} { @extend %block-reset; }
   }
 
   @for $i from 1 through $max-tiles {

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

@@ -0,0 +1,98 @@
+// ==================
+// EDGE TYPOGRAPHY
+// ==================
+
+// ------------------------------
+// BASELINE
+// - Create notebook-like row
+// ------------------------------
+@mixin baseline($lh : $body-line-height) {
+
+  @include background(
+    linear-gradient(to bottom, rgba(black, 0) 95%, rgba(black, .1) 100%)
+  );
+  background-size: 100% ($lh * 1em);
+}
+
+// ----------------------
+// Create Inline List
+// ----------------------
+@mixin inline-list() {
+  @include clearfix();
+
+  > li {
+    display: inline-block;
+    float: left;
+    vertical-align: top;
+  }
+}
+
+@if $include-typography and not $user-mode {
+
+/* -----------------
+  EDGE Typography
+----------------- */
+
+body {
+  position: relative;
+  background: $body-background;
+  font-size: $body-font-size;
+  font-family: $body-font-family;
+  font-weight: $body-font-weight;
+  line-height: $body-line-height;
+  color: $body-font-color;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  color: $header-font-color;
+  font-family: $header-font-family;
+  font-weight: $header-font-weight;
+  line-height: $header-line-height;
+}
+
+a {
+  color: $link-color;
+}
+
+h1 { font-size: em($h1-font-size); }
+h2 { font-size: em($h2-font-size); }
+h3 { font-size: em($h3-font-size); }
+h4 { font-size: em($h4-font-size); }
+h5 { font-size: em($h5-font-size); }
+h6 { font-size: em($h6-font-size); }
+
+p {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+// -----------
+// LIST
+// -----------
+
+ul {
+  list-style-type: $ul-parent-style;
+  padding-left: 20px;
+
+  ul {
+    list-style-type: $ul-child-style;
+  }
+}
+
+ol {
+  list-style-type: $ol-parent-style;
+  padding-left: 25px;
+
+  ol {
+    list-style-type: $ol-child-style;
+  }
+}
+
+blockquote {
+  cite {
+    display: block;
+    font-style: italic;
+  }
+}
+
+} // include-typography

data/assets/sass/edge/utility/_em.scss

@@ -0,0 +1,35 @@
+// --------------
+// 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, hConvertToEm($val, $context) );
+  }
+  @return join((), $emValues, space );
+}

data/assets/sass/edge/utility/_media.scss

@@ -0,0 +1,70 @@
+// ---------------
+// MEDIA QUERY
+// ---------------
+
+@function _translateSize($size) {
+  // if number, return it as it is
+  @if type-of($size) == number {
+    @return $size;
+  }
+  // if keyword, translate from the map
+  @else {
+    @return map-get($_media-sizes, $size);
+  }
+}
+
+@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 (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;
+  }
+}