edge_framework 2.0.0 → 2.1.0

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

@@ -0,0 +1,44 @@
+// ----------------------------------------------
+// CLEARING FLOAT
+// Make a container wraps floated element
+// ----------------------------------------------
+@mixin clearfix {
+  &::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 highlighting
+// -------------------------------
+
+@mixin user-select($value) {
+  -webkit-touch-callout: $value;
+  -webkit-user-select: $value;
+  -moz-user-select: $value;
+  user-select: $value;
+}

data/assets/sass/edge/{helpers → utility}/_sprites.scss

@@ -12,7 +12,7 @@
 // --------------------------
 // Loop through sprite-map
 // --------------------------
-@mixin loop-sprite-map(
+@mixin _loop-sprite(
   $map,
   $is-retina  : false ,
   $prefix     : "") {
@@ -58,7 +58,7 @@
   .#{$class} {
     background: $sprites;
     display: inline-block;
-    @include loop-sprite-map($sprites, false, $prefix);
+    @include _loop-sprite($sprites, false, $prefix);
 
     @content; // placeholder for retina sprites
   }
@@ -88,7 +88,7 @@
       }
       // If there's missing images in retina folder
       @else {
-        @include loop-sprite-map($sprites-2x, true, $prefix);
+        @include _loop-sprite($sprites-2x, true, $prefix);
       }
     }
   }

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

@@ -0,0 +1,83 @@
+
+// -------------
+// 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` must follow the formula
+    @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;
+  }
+
+  //            __
+  // 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;
+  }
+}

data/assets/sass/edgemail/_base.scss

@@ -13,7 +13,7 @@ $link-color : $main-color !default;
 
 // SIZING
 $row-max-width : 650px !default;
-$mini-screen   : 480px !default;
+$mini-size   : 480px !default;
 
 // BODY
 $body-background  : #ffffff !default;
@@ -24,10 +24,10 @@ $body-line-height : 1.5 !default;
 
 // TYPOGRAPHY
 $h1-font-size : 44px !default;
-$h2-font-size : 36px !default;
-$h3-font-size : 28px !default;
-$h4-font-size : 22px !default;
-$h5-font-size : 18px !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;

data/assets/sass/edgemail/_component.scss

@@ -0,0 +1,2 @@
+@import "component/normalize";
+@import "component/generic";

data/assets/test/kitchensink-email.scss

@@ -1,2 +1,2 @@
 @import "../sass/edgemail/base";
-@import "../sass/edgemail/helpers";
+@import "../sass/edgemail/user";

data/assets/test/kitchensink.scss

@@ -1,5 +1,4 @@
-@import "../sass/edge/base";
-@import "../sass/edge/helpers";
+@import "../sass/edge/user";
 
 .custom-grid {
   @include column(3);

data/lib/edge/message.rb

@@ -4,23 +4,33 @@ module Edge
 
     available_template =
 %Q{Currently these are the available templates:
-  html - Static HTML template
-  php - Standard PHP template}
+    html - Static HTML
+    wordpress - Plain WordPress theme with Timber
+    ghost - Plain Ghost theme}
 
     syntax_create = 
-%Q{edge create <project_type>}
+%Q{> edge create <template>}
 
     help = 
 %Q{--------------------------------------------------------
-Welcome to Edge Framework v-#{ Edge::VERSION } (#{ Edge::CODENAME })
+    Welcome to Edge Framework v#{ Edge::VERSION } (#{ Edge::CODENAME })
 --------------------------------------------------------
-Creating Template
-  #{ syntax_create } }
+
+List of available commands:
+
+1. Create Template
+    #{ syntax_create }
+    
+    #{ available_template }
+
+2. Rails Template Generator
+    Run this command inside your Rails' directory:
+    > rails g edge:install }
 
     create_wrong_syntax =
 %Q{WRONG SYNTAX
 The correct syntax is:
-#{ syntax_create } }
+    #{ syntax_create } }
 
     MESSAGES = {
       :available_template => available_template,

data/lib/edge/version.rb

@@ -1,4 +1,4 @@
 module Edge
-  VERSION = "2.0.0"
+  VERSION = "2.1.0"
   CODENAME = "Gondar"
 end

data/template/base/assets/js/vendor/edge.js

@@ -5,7 +5,7 @@
 
 var edgeFramework = {
   init: function() {
-    webComponent();
+    this.webComponent();
   },
   webComponent: function() {
     if("registerElement" in document) {

data/template/base/assets/sass/_setting.scss

@@ -19,22 +19,18 @@ $sub-color  : #d7d7d7;
 // -------------------
 // MEDIA QUERIES
 // -------------------
-// $mini-screen   : 480px;
-// $small-screen  : 767px;
-// $medium-screen : 1120px;
-// $large-screen  : 1440px;
-// $retina-screen : 192dpi;
+// $mini-size   : 480px;
+// $small-size  : 767px;
+// $medium-size : 1120px;
+// $large-size  : 1440px;
+// $retina-size : 192dpi;
 
 // ----------------
-// OUTPUT CONFIG
+// RESPONSIVE
 // ----------------
 // $responsive : true;
 // $adaptive   : false;
-// $adaptive-breakpoints : $medium-screen, $small-screen;
-
-// $include-animate : false;
-// $include-print   : false;
-// $include-code    : false;
+// $adaptive-breakpoints : $medium-size, $small-size, $mini-size;
 
 // ---------------
 // GLOBAL VALUE
@@ -45,7 +41,7 @@ $sub-color  : #d7d7d7;
 // --------
 // GRID
 // --------
-// $row-max-width : $medium-screen;
+// $row-max-width : $medium-size;
 // $total-columns : 12;
 // $column-gutter : 20px;
 
@@ -69,17 +65,23 @@ $sub-color  : #d7d7d7;
 // TYPOGRAPHY
 // ---------------
 // $h1-font-size : 44px;
-// $h2-font-size : 36px;
-// $h3-font-size : 28px;
-// $h4-font-size : 22px;
-// $h5-font-size : 18px;
+// $h2-font-size : 38px;
+// $h3-font-size : 30px;
+// $h4-font-size : 24px;
+// $h5-font-size : 20px;
 // $h6-font-size : 16px;
 
 // $header-font-color  : $body-font-color;
 // $header-font-weight : 700;
 // $header-line-height : 1;
 
+// ---------
+// PRINT
+// ---------
+// $include-print  : false;
+// $override-color : true;   // Override all text color to #000 black
+
 // ------------------
 // TEXT DIRECTION
 // ------------------
-// $text-direction   : ltr;  // Controls default global text direction, 'rtl' or 'ltr'
+// $text-direction   : ltr;  // Global text direction, 'rtl' or 'ltr'

data/template/base/assets/sass/app.scss

@@ -1,4 +1,4 @@
 @import "setting";
-@import "edge/helpers";
+@import "edge/user";
 
 // Your app-specific style here

data/template/base/config.rb

@@ -1,4 +1,4 @@
-gem "edge_framework", "~> 2.0"
+gem "edge_framework", "~> 2.1"
 require "edge_framework"
 
 http_path       = "/"

data/template/email/assets/sass/app.scss

@@ -1,4 +1,4 @@
 @import "setting";
-@import "edgemail/helpers";
+@import "edgemail/user";
 
 // Your app-specific style here

data/template/wordpress/views/layout.twig

@@ -11,6 +11,7 @@
     <nav class="main-menu">
       {% for item in menu.get_items %}
         <div class="item">
+          
           <a href="{{ item.get_link }}"
             {% if "current-menu-item" in item.classes %}
               class="active"

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: edge_framework
 version: !ruby/object:Gem::Version
-  version: 2.0.0
+  version: 2.1.0
 platform: ruby
 authors:
 - Henner Setyono
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-01-19 00:00:00.000000000 Z
+date: 2015-01-30 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -116,24 +116,30 @@ files:
 - assets/sass/_edge.scss
 - assets/sass/_edgemail.scss
 - assets/sass/edge/_base.scss
-- assets/sass/edge/_components.scss
+- assets/sass/edge/_component.scss
 - assets/sass/edge/_helpers.scss
-- assets/sass/edge/components/_animate.scss
-- assets/sass/edge/components/_button.scss
-- assets/sass/edge/components/_code.scss
-- assets/sass/edge/components/_form.scss
-- assets/sass/edge/components/_grid.scss
-- assets/sass/edge/components/_normalize.scss
-- assets/sass/edge/components/_print.scss
-- assets/sass/edge/components/_tile.scss
-- assets/sass/edge/components/_typography.scss
-- assets/sass/edge/helpers/_sprites.scss
-- assets/sass/edge/helpers/_sticky-footer.scss
+- assets/sass/edge/_user.scss
+- assets/sass/edge/_utility.scss
+- assets/sass/edge/component/_animate.scss
+- assets/sass/edge/component/_button.scss
+- assets/sass/edge/component/_code.scss
+- assets/sass/edge/component/_form.scss
+- assets/sass/edge/component/_grid.scss
+- assets/sass/edge/component/_normalize.scss
+- assets/sass/edge/component/_print.scss
+- assets/sass/edge/component/_tile.scss
+- assets/sass/edge/component/_typography.scss
+- assets/sass/edge/utility/_em.scss
+- assets/sass/edge/utility/_media.scss
+- assets/sass/edge/utility/_other.scss
+- assets/sass/edge/utility/_sprites.scss
+- assets/sass/edge/utility/_sticky-footer.scss
+- assets/sass/edge/utility/_triangle.scss
 - assets/sass/edgemail/_base.scss
-- assets/sass/edgemail/_components.scss
-- assets/sass/edgemail/_helpers.scss
-- assets/sass/edgemail/components/_generic.scss
-- assets/sass/edgemail/components/_normalize.scss
+- assets/sass/edgemail/_component.scss
+- assets/sass/edgemail/_user.scss
+- assets/sass/edgemail/component/_generic.scss
+- assets/sass/edgemail/component/_normalize.scss
 - assets/test/edge.scss
 - assets/test/edgemail.scss
 - assets/test/kitchensink-email.scss

data/assets/sass/edge/_components.scss

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

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

@@ -1,171 +0,0 @@
-// ==================
-// EDGE TYPOGRAPHY
-// ==================
-
-// BODY
-$body-background  : #fff !default;
-$body-font-color  : #222 !default;
-$body-font-weight : 400 !default;
-
-// Compass' VERTICAL RHYTM
-// note: variable for $body-font-size and $body-line-height is in _base.scss due to it being used in em conversion
-$base-font-size   : $body-font-size;
-$base-line-height : $body-line-height;
-
-// 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 : 36px !default;
-$h3-font-size : 28px !default;
-$h4-font-size : 22px !default;
-$h5-font-size : 18px !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;
-
-// ------------------------------------------------
-// VERTICAL RHYTHM
-// - Apply vertically-aligned paragraph and header
-// ------------------------------------------------
-@mixin vertical-rhythm(
-  $font-size   : $base-font-size,
-  $line-height : $base-line-height,
-  $for-base    : false) {
-
-  $base-font-size   : $font-size;
-  $base-line-height : $font-size * $line-height;
-  
-  @if not $for-base {
-    font-size: em($font-size);
-    line-height: $line-height;
-  }
-  
-  h1 { @include adjust-font-size-to($h1-font-size); }
-  h2 { @include adjust-font-size-to($h2-font-size); }
-  h3 { @include adjust-font-size-to($h3-font-size); }
-  h4 { @include adjust-font-size-to($h4-font-size); }
-  h5 { @include adjust-font-size-to($h5-font-size); }
-  h6 { @include adjust-font-size-to($h6-font-size); }
-  
-  p {
-    @include trailer(1);
-
-    &:last-child {
-      @include trailer(0);
-    }
-  }
-
-  ul,
-  ol {
-    @include trailer(1);
-  }
-}
-
-// ------------------------------
-// BASELINE
-// - Create notebook-like row
-// ------------------------------
-@mixin baseline(
-  $font-size   : $base-font-size,
-  $line-height : $base-line-height) {
-
-  @include background(
-    linear-gradient(to bottom, rgba(black, 0) 95%, rgba(black, .1) 100%)
-  );
-  background-size: 100% em($font-size * $line-height, $font-size);
-}
-
-// ----------------------
-// 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: $base-font-size;
-  font-family: $body-font-family;
-  font-weight: $body-font-weight;
-  line-height: $base-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