edge_framework 1.2.9 → 1.3.0

data/.gitignore

@@ -1,6 +1,5 @@
 assets/css/
 assets/sass/for-test.scss
-config.rb
 
 #################
 ## Eclipse

data/README.md

@@ -264,7 +264,7 @@ EXAMPLE
     
 Sidebar hidden on mini screen
 
-    <aside hide-for-mini"></aside>
+    <aside class="hide-for-mini"></aside>
 
 Slider visible only on large screen
     

data/assets/kitchen-sink.html

@@ -132,8 +132,8 @@
         </div>
       </article>
     </div>
-  </div> 
- -->
+  </div>  -->
+
 <!--  <section class="row" data-page="animate">
     <div class="large-12 column">
       <div class="box1" data-animate="fadein 500"></div>

data/assets/sass/edge/_base.scss

@@ -16,8 +16,13 @@ $experimental-support-for-khtml : false;
 // ------------------
 // OUTPUT CONFIG
 // ------------------
-$responsive  : true !default;
-$user-mode   : false !default;
+
+// User modifiable
+$responsive : true !default;
+$adaptive   : false !default;
+
+// Shouldn't be modified by user
+$user-mode   : false !default; // check whether the mixin call is coming from framework or user
 $is-in-media : false !default; // check if the code is within @media block
 
 // Must be true
@@ -39,11 +44,11 @@ $include-code       : false !default;
 // ----------
 // COLOR
 // ----------
-
-// Two main colors of your site
 $main-color    : #2a71e3 !default;
 $sub-color     : #d7d7d7 !default;
 
+$link-color    : $main-color !default;
+
 $passive-color : #d7d7d7 !default;
 $blue-color    : #2a71e3 !default;
 $yellow-color  : #fac741 !default;
@@ -62,12 +67,9 @@ $g-transition : all .2s ease-out !default;
 $body-font-size   : 16px !default;
 $body-line-height : 1.5 !default;
 
-// --------------------------------
-// PIXEL --> EM CONVERTER
-//   How to use:
-//     font-size: em(14px);
-//     padding: em(10px 5px 20px);
-// --------------------------------
+// --------------
+// EM CONVERTER
+// --------------
 
 // Strips unit and return plain number
 @function stripUnit($num) {
@@ -103,13 +105,6 @@ $body-line-height : 1.5 !default;
 
 // -------------------
 // MEDIA QUERIES
-//   How to use:
-//     @include below(small)
-//     @include below(500px)
-//     @include above(retina)
-//     @include between(small, medium)
-//
-//     @media only screen and #{above(small)} and #{portrait}
 // -------------------
 $mini-screen  : 480px !default;
 $small-screen : 767px !default;
@@ -293,12 +288,9 @@ $default-opposite : right !default;
   $default-opposite : left;
 }
 
-// ----------------------------------------------------------
+// -------------
 // TRIANGLE
-//   Create a triangle
-//
-//   Don't specify the `height` to create equalateral triangle
-// ----------------------------------------------------------
+// -------------
 @mixin triangle(
   $width,
   $direction : top,

data/assets/sass/edge/_helpers.scss

@@ -2,6 +2,6 @@
 @import "helpers/sprites";
 @import "helpers/sticky-footer";
 
-$user-mode  : true; // add extra feature to some Component's mixin
+$user-mode  : true;
 
 @import "components";

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

@@ -5,12 +5,9 @@
 // @origin Tim Shedor
 //   https://github.com/tshedor/workshop-wp-theme
 
-$code-font-family   : "Consolas", Courier, "monospace" !default;
+$code-font-family   : Consolas, Courier, "monospace" !default;
 $code-theme         : light !default; // dark or light
-$code-margin-bottom : 1.5em !default;
-@if $include-typography {
-  $code-margin-bottom : $p-margin-bottom;
-}
+$code-margin-bottom : 1em !default;
 
 $code-markup-color  : $blue-color;
 $code-js-color      : #ff8f00; // orange

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

@@ -40,6 +40,18 @@ $column-gutter   : 20px !default;
       min-width: $width + $gutter;
     }
     @include clearfix;
+
+    @if $adaptive {
+      @if $collapse {
+        min-width: $width;
+      } @else {
+        min-width: $width + $gutter;
+      }
+
+      @include below(small) {
+        min-width: 0;
+      }
+    }
   }
 
   // Nested and collapsed

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

@@ -1,7 +1,6 @@
 // ==============
 // EDGE TILE
 // ==============
-// Based on Foundation 4 by ZURB
 
 $max-tiles   : 12 !default;
 $tile-gutter : 15px !default;

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

@@ -13,8 +13,8 @@ $base-font-size   : $body-font-size;
 $base-line-height : $body-line-height;
 
 // FONT FAMILY
-$header-font-family : "Helvetica Neue", "Helvetica", Helvetica, Arial, "sans-serif" !default;
-$body-font-family   : "Helvetica", Helvetica, Arial, "sans-serif" !default;
+$header-font-family : Helvetica, Arial, "sans-serif" !default;
+$body-font-family   : Helvetica, Arial, "sans-serif" !default;
 
 // HEADER
 $h1-font-size : 44px !default;
@@ -27,9 +27,6 @@ $h6-font-size : 16px !default;
 $header-font-color  : $body-font-color !default;
 $header-font-weight : 700 !default;
 
-// PARAGRAPH
-$p-margin-bottom  : 1em !default;
-
 // LIST
 $ul-parent-style  : disc !default;
 $ul-child-style   : circle !default;
@@ -89,6 +86,19 @@ $ol-child-style   : lower-alpha !default;
   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 {
 
 /* -----------------
@@ -112,7 +122,7 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 a {
-  color: $main-color;
+  color: $link-color;
 }
 
 
@@ -125,7 +135,7 @@ h6 { font-size: em($h6-font-size); }
 
 p {
   margin-top: 0;
-  margin-bottom: $p-margin-bottom;
+  margin-bottom: 0;
 }
 
 // -----------
@@ -133,13 +143,7 @@ p {
 // -----------
 
 .inline-list {
-  @include clearfix();
-
-  > li {
-    display: inline-block;
-    float: left;
-    vertical-align: top;
-  }
+  @include inline-list();
 }
 
 ul {
@@ -166,8 +170,6 @@ ol {
 }
 
 blockquote {
-  margin-bottom: $p-margin-bottom;
-  
   cite {
     display: block;
     font-style: italic;

data/assets/sass/edge.scss

@@ -1,7 +1,8 @@
-/* ------------------------------------------
-- EDGE Framework - github.com/HennerS/Edge
-- v1.2.9 (Ezalor)
------------------------------------------- */
+/* --------------------
+- EDGE Framework
+- edge.setyono.net
+- v1.3.0 (Furion)
+--------------------- */
 
 @import "edge/base";
 @import "edge/components";

data/assets/sass/edgemail/_base.scss

@@ -0,0 +1,34 @@
+@charset "UTF-8";
+@import "compass";
+
+// FONT
+$header-font-family : Helvetica, Arial, "sans-serif" !default;
+$body-font-family   : Helvetica, Arial, "sans-serif" !default;
+
+// COLORS
+$main-color : #2a71e3 !default;
+$sub-color  : #d7d7d7 !default;
+
+$link-color : $main-color !default;
+
+// SIZING
+$row-max-width : 650px !default;
+$mini-screen   : 480px !default;
+
+// BODY
+$body-background  : #ffffff;
+$body-font-color  : #222222;
+$body-font-weight : 400;
+$body-font-size   : 16px;
+$body-line-height : 1.5;
+
+// 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;
+$h6-font-size : 16px !default;
+
+$header-font-color  : $body-font-color !default;
+$header-font-weight : 700 !default;

data/assets/sass/edgemail/_components.scss

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

data/assets/sass/edgemail/_helpers.scss

@@ -0,0 +1 @@
+@import "base";

data/assets/sass/edgemail/components/_generic.scss

@@ -0,0 +1,60 @@
+// ====================
+// EDGEMAIL GENERIC
+// ====================
+
+/* ----------------
+  GENERIC STYLING
+---------------- */
+
+#background-table {
+  background-color: $body-background;
+  width: $row-max-width !important;
+  margin: 0 auto;
+  padding: 0;
+  font-size: $body-font-size;
+  font-family: $body-font-family;
+  line-height: 100% !important;
+
+  @include box-shadow(1px 1px 5px 2px rgba(black, .3) );
+}
+
+table {
+  width: 100%;
+  -premailer-cellspacing: 0;
+  -premailer-cellpadding: 0;
+}
+
+// LINK
+%link-style {
+  color: $link-color;
+
+  &:active {
+    color: darken($link-color, 10%);
+  }
+
+  &:visited {
+    color: lighten($link-color, 10%);
+  }
+}
+
+a {
+  @extend %link-style;
+}
+
+// HEADER
+h1, h2, h3, h4, h5, h6 {
+  color: $header-font-color;
+  font-family: $header-font-family !important;
+  font-weight: $header-font-weight;
+
+  a {
+    @extend %link-style;
+  }
+}
+
+h1 { font-size: $h1-font-size; }
+h2 { font-size: $h2-font-size; }
+h3 { font-size: $h3-font-size; }
+h4 { font-size: $h4-font-size; }
+h5 { font-size: $h5-font-size; }
+h6 { font-size: $h6-font-size; }

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

@@ -0,0 +1,98 @@
+// =======================
+// EDGEMAIL NORMALIZE
+// =======================
+// Based on htmlemailboilerplate.com/
+
+/* -------------------
+  EDGEMAIL NORMALIZE
+------------------- */
+
+// Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design.
+body {
+  width: 100% !important;
+  margin: 0;
+  padding: 0;
+
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+}
+
+// Some sensible defaults for images
+img {
+  display: block;
+  outline: none;
+  text-decoration: none;
+  -ms-interpolation-mode: bicubic;
+}
+
+a img {
+  border:none;
+}
+
+// Yahoo paragraph fix
+p {
+  margin: 1em 0;
+}
+
+// Remove spacing around Outlook 07, 10 tables
+table {
+  border-collapse:collapse;
+  mso-table-lspace: 0pt;
+  mso-table-rspace: 0pt;
+}
+
+// ------------
+// PHONE
+// ------------
+
+@media only screen and (max-width: 480px) {
+  #background-table {
+    width: 100%;
+  }
+
+  // Part one of controlling phone number linking for mobile.
+  a[href^="tel"],
+  a[href^="sms"] {
+    text-decoration: none;
+    color: $link-color;
+    pointer-events: none;
+    cursor: default;
+  }
+
+  .mobile_link a[href^="tel"],
+  .mobile_link a[href^="sms"] {
+    text-decoration: default;
+    color: orange !important;
+    pointer-events: auto;
+    cursor: default;
+  }
+}
+
+@media only screen and (max-width: 360px) {
+  #background-table {
+    width: 360px;
+  }
+}
+
+// ------------
+// TABLET
+// ------------
+
+@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
+
+  a[href^="tel"],
+  a[href^="sms"] {
+    cursor: default;
+    pointer-events: none;
+    text-decoration: none;
+    color: $link-color;
+  }
+
+  .mobile_link a[href^="tel"],
+  .mobile_link a[href^="sms"] {
+    cursor: default;
+    pointer-events: auto;
+    text-decoration: default;
+    color: $link-color;
+  }
+}

data/assets/sass/edgemail.scss

@@ -0,0 +1,8 @@
+/* ----------------------------
+- EDGEMAIL Boilerplate
+- edge.setyono.net/email
+- v1.0.0 (Arc Warden)
+---------------------------- */
+
+@import "edgemail/base";
+@import "edgemail/components";

data/assets/sass/kitchen-sink-email.scss

@@ -0,0 +1,2 @@
+@import "edgemail/base";
+@import "edgemail/helpers";

data/config.rb

@@ -0,0 +1,13 @@
+http_path       = "/"
+css_dir         = "assets/css"
+images_dir      = "assets/img"
+sass_dir        = "assets/sass"
+javascripts_dir = "assets/js"
+fonts_dir       = "assets/fonts"
+output_style    = :nested
+# output_style = :expanded or :nested or :compact or :compressed
+
+relative_assets = true
+
+# To disable debugging comments that display the original location of your selectors. Uncomment:
+line_comments = false

data/lib/edge/install_generator.rb

@@ -6,23 +6,46 @@ module Edge
       source_root File.join(File.dirname(__FILE__), "../../template/rails")
       argument :layout_name, type: :string, default: "application", banner: "layout_name"
 
-      def add_assets
-        # rails_ujs breaks, need to incorporate rails-behavior plugin for this to work seamlessly
-        # gsub_file "app/assets/javascripts/application#{detect_js_format[0]}", /\/\/= require jquery\n/, ""
+      # Copy the template to Rails' assets directory
+      def create_assets
+        files_list = {
+          sass: ["_setting.scss", "framework.scss", "app.scss"],
+          img: ["favicon.png", "favicon-big.png"],
+          js: ["app.js"]
+        }
+        
+        template_path = File.join(File.dirname(__FILE__), "..", "..", "template", "base", "assets")
 
-        settings_file = File.join(File.dirname(__FILE__), "..", "..", "template", "base", "assets", "sass", "_setting.scss")
-        create_file "app/assets/stylesheets/_setting.scss", File.read(settings_file)
+        # loop each file type
+        files_list.each do |type, files|
+          case type
+          when :sass
+            src_dir = "sass"
+            dest_dir = "stylesheets"
+          when :img
+            src_dir = "img"
+            dest_dir = "images"
+          when :js
+            src_dir = "js"
+            dest_dir = "javascripts"
+          end
 
-        framework_file = File.join(File.dirname(__FILE__), "..", "..", "template", "base", "assets", "sass", "framework.scss")
-        create_file "app/assets/stylesheets/framework.scss", File.read(framework_file)
-
-        style_file = File.join(File.dirname(__FILE__), "..", "..", "template", "base", "assets", "sass", "app.scss")
-        create_file "app/assets/stylesheets/app.scss", File.read(style_file)
+          # loop each file
+          files.each do |f|
+            f_path = File.join(template_path, src_dir, f)
+            create_file(
+              File.join("app", "assets", dest_dir, f),
+              File.binread(f_path)
+            )
+          end
+        end
+      end
 
-        script_file = File.join(File.dirname(__FILE__), "..", "..", "template", "rails", "app.js")
-        create_file "app/assets/javascripts/app.js", File.read(script_file)
+      def append_assets
+        # rails_ujs breaks, need to incorporate rails-behavior plugin for this to work seamlessly
+        # gsub_file "app/assets/javascripts/application#{detect_js_format[0]}", /\/\/= require jquery\n/, ""
 
-        insert_into_file "app/assets/stylesheets/application#{detect_css_format[0]}", "#{detect_css_format[1]} require framework\n", after: "require_self\n"
+        insert_into_file "app/assets/stylesheets/application#{detect_css_format[0]}", "#{ detect_css_format[1] } require framework\n", before: "#{ detect_css_format[1] } require_tree"
       end
 
       def detect_js_format
@@ -55,5 +78,6 @@ module Edge
         layout_name.underscore.downcase
       end
     end
+
   end
 end

data/lib/edge/version.rb

@@ -1,4 +1,4 @@
 module Edge
-  VERSION = "1.2.9"
-  CODENAME = "Ezalor"
+  VERSION = "1.3.0"
+  CODENAME = "Furion"
 end

data/lib/edge_framework.rb

@@ -30,12 +30,13 @@ module Edge
       return false
     end
 
-    # Gem home directory
+    # gem home directory
     home = File.expand_path( "..", File.dirname(__FILE__) )
     template = File.join( home, "template" )
 
-    # Copy template files
+    # get the target type
     template_type = File.join( template, type )
+    
     # If directory doesn't exist
     if !File.directory?(template_type)
       puts "[error] \t Template not found"
@@ -44,9 +45,16 @@ module Edge
     end
     FileUtils.cp_r( Dir["#{template_type}/*"], destination )
 
-    # Copy base files
-    base = File.join( template, "base" )
-    FileUtils.cp_r( Dir["#{base}/*"], destination )
+    # Copy base files, except if email
+    unless type == "email"
+      base = File.join( template, "base" )
+      source = Dir.entries("#{base}/").reject { |e|
+        e == '.' || e == '..'
+      }.map{ |e|
+        "#{base}/#{e}"
+      }
+      FileUtils.cp_r( source, destination )
+    end
 
     # Copy javascript files
     # js_source = File.join( home, "assets", "js" )

data/template/base/{gitignore → .gitignore}

@@ -52,4 +52,5 @@ $RECYCLE.BIN/
 /log/*.log
 /tmp
 
-.sass-cache/
+.sass-cache/
+.esproj/

data/template/base/assets/js/app.js

@@ -7,6 +7,11 @@ var app = {
   doSomething2: function(e) {},
 };
 
-$(document).ready(function() {
+
+
+function start() {
   app.init();
-});
+}
+
+$(document).ready(start);
+$(document).on("page:load", start);