edge_framework 1.4.1 → 2.0.0.a

data/assets/test/kitchensink.scss

@@ -1,6 +1,25 @@
 @import "../sass/edge/base";
 @import "../sass/edge/helpers";
 
+@mixin crow(
+  $gutter: 0,
+  $collapse: 0,
+  $width: 0
+) {
+  
+}
+
+@mixin ccolumn(
+  $size: 0,
+  $small: 0,
+  $mini: 0,
+  $offset: 0,
+  $gutter: 0,
+  $collapse: false,
+  $centered: false
+) {
+
+}
 
 .custom-grid {
   @include column(3);
@@ -24,105 +43,14 @@
   }
 }
 
-[data-page="visibility"] {
-
-  .visibility-class,
-  .visibility-mixin {
-    p:nth-child(1) {
-      color: $red-color;
-    }
-    p:nth-child(2) {
-      color: $blue-color;
-    }
-    p:nth-child(3) {
-      color: $green-color;
-    }
-    p:nth-child(4) {
-      color: $yellow-color;
-    }
-    p:nth-child(5) {
-      color: #333;
-    }
-    p:nth-child(6) {
-      color: #bbb;
-    }
-  }
-
-  .visibility-table {
-    table:nth-child(1) td {
-      color: $red-color;
-    }
-    table:nth-child(2) td {
-      color: $blue-color;
-    }
-    table:nth-child(3) td {
-      color: $green-color;
-    }
-    table:nth-child(4) td {
-      color: $yellow-color;
-    }
-    table:nth-child(5) td {
-      color: #333;
-    }
-    table:nth-child(6) td {
-      color: #bbb;
-    }
-  }
-
-  .visibility-td {
-    table:nth-child(1) td {
-      color: $red-color;
-    }
-    table:nth-child(2) td {
-      color: $blue-color;
-    }
-    table:nth-child(3) td {
-      color: $green-color;
-    }
-    table:nth-child(4) td {
-      color: $yellow-color;
-    }
-    table:nth-child(5) td {
-      color: #333;
-    }
-    table:nth-child(6) td {
-      color: #bbb;
-    }
-    table td[class*="-for-"] {
-      color: #222;
-    }
-  }
-
-  .visibility-span {
-    p:nth-child(1) span {
-      color: $red-color;
-    }
-    p:nth-child(2) span {
-      color: $blue-color;
-    }
-    p:nth-child(3) span {
-      color: $green-color;
-    }
-    p:nth-child(4) span {
-      color: $yellow-color;
-    }
-    p:nth-child(5) span {
-      color: #333;
-    }
-    p:nth-child(6) span {
-      color: #bbb;
-    }
-  }
-}
-
 .demo-grid {
   @include transition($g-transition);
   p {
     text-align : center;
     margin     : 0;
   }
-  .column,
-  .columns {
+
+  h-column {
     p {
       margin-bottom  : em(15px);
       padding-top    : em(10px);
@@ -131,14 +59,12 @@
       text-align     : center;
     }
 
-    .column,
-    .columns {
+     h-column {
       p {
         background    : #ddd;
       }
       
-      .column,
-      .columns {
+       h-column {
         p {
           background    : #ccc;
         }
@@ -148,6 +74,12 @@
 }
 
 .demo-tile {
+  @include tile(2);
+  
+  @include below(small) {
+    @include tile(3);
+  }
+
   p {
     background     : #eee;
     margin-bottom  : em(15px);
@@ -159,28 +91,22 @@
 
 
 /* Custom Grid */
-.cgrid-1 {
-  @include column($size:5);
-}
-.cgrid-2 {
-  @include column($size:7);
-}
 
-.cgrid-a1 {
-  @include column($size:5, $small:10);
-}
-.cgrid-a2 {
-  @include column($size:7, $small:2);
-}
+.cgrid-l1 { @include column(5); }
+.cgrid-l2 { @include column(7); }
+
+.cgrid-ls1 { @include column(5, 10); }
+.cgrid-ls2 { @include column(7, 2); }
 
 .cgrid-center {
-  @include column($size: 8, $centered: true);
+  @include column(8, $centered: true);
+
   @include below(small) {
-    @include column($size: 6, $centered: false);
+    @include column(6, $centered: false);
   }
 }
 
-.cgrid-b1 {
+.cgrid-losom1 {
   @include column(10, $offset: 2);
 
   @include below(small) {
@@ -188,88 +114,52 @@
   }
 
   @include below(mini) {
-    @include column(4, $offset: 1)
+    @include column(4);
   }
 }
-.cgrid-b2 {
-  @include column($size:2, $small:4, $mini:6);
-}
 
-.cgrid-c1 {
-  @include column($size:6, $offset:4, $small:6);
-}
-.cgrid-c2 {
-  @include column($size:2, $small:6);
-}
+.cgrid-lsm1 { @include column(4, 6, 8); }
+.cgrid-lsm2 { @include column(8, 6, 4); }
 
-.cgrid-d1 {
-  @include column($size:3, $offset:6);
+.cgrid-los1 { @include column(6, 6, $offset:4); }
+.cgrid-los2 { @include column(2, 6); }
 
-  @include below(small) {
-    @include column($size:4, $offset:6);
-  }
-}
-.cgrid-d2 {
-  @include column($size:3, $small:4);
-}
+// Nesting
 
-// .cgrid-e1 {
-//   @include column($size:3, $offset:6, $small:4, $small-offset:4, $mini:6);
-// }
-// .cgrid-e2 {
-//   @include column($size:3, $small:4, $mini:6);
-// }
-
-// .cgrid-f1 {
-//   @include column($size:3, $offset:6, $small:4, $small-offset:4, $mini:5);
-// }
-// .cgrid-f2 {
-//   @include column($size:3, $small:4, $mini:6);
-// }
-
-.cgrid-g1 {
-  @include column($size:4, $push:8);
-}
-.cgrid-g2 {
-  @include column($size:8, $pull:4);
-}
+.cgrid-nest1 { @include column(6, 6); }
+  .cgrid-nest1-1 { @include column(8, 8); }
+  .cgrid-nest1-2 { @include column(4, 4); }
+.cgrid-nest2 { @include column(4, 4); }
+.cgrid-nest3 { @include column(2, 2); }
+.cgrid-c { @include row($collapse: true); }
 
-.cgrid-h1 {
-  @include column($size:8, $small:8);
-}
-  .cgrid-h1-1 {
-    @include column($size:5, $small:5);
-  }
-  .cgrid-h1-2 {
-    @include column($size:7, $small:7);
-  }
-.cgrid-h2 {
-  @include column($size:4, $small:4);
-}
-  .cgrid-h2-1 {
-    @include column($size:6, $small:6, $centered:true);
-  }
+// Gutter
 
-.cgrid-i0 {
-  @include row($gutter:50px);
-}
-.cgrid-i1 {
-  @include column($size:6, $gutter:50px);
+.cgrid-gutter-r1 {
+  @include row($gutter: 50px, $width: 960px);
 }
-.cgrid-i2 {
-  @include column($size:6, $gutter:50px);
+
+.cgrid-gutter-r2 {
+  @include row($gutter: 10px);
 }
 
+.cgrid-gutter1 { @include column(8, 6); }
+.cgrid-gutter2 { @include column(4, 6); }
+
 /* Custom Tile */
-.custom-tile-1 {
-  @include tile($size:5);
+.ctile-1 {
+  @include tile(5, $gutter: 5px);
 }
 
-.custom-tile-2 {
-  @include tile($size:5, $small:3, $collapse:true);
+.ctile-2 {
+  @include tile(5, $collapse: true);
+
+  @include below(small) {
+    @include tile(3);
+  }
 }
 
-.custom-tile-3 {
+.ctile-3 {
   @include tile(5, 3, 2);
 }
 
@@ -303,42 +193,4 @@
   .triangle1 {
     @include triangle($color:$main-color, $width:100px, $direction:right);
   }
-}
-
-[data-page="button"] {
-  .button {
-    margin-top: 20px;
-
-    &.blue-button {
-      @include button($blue-color);
-    }
-
-    &.red-button {
-      @include button($red-color);
-    }
-
-    &.green-button {
-      @include button($green-color);
-    }
-
-    &.yellow-button {
-      @include button($yellow-color);
-    }
-
-    &.white-button {
-      @include button(#f0f0f0);
-    }
-
-    &.grey-button {
-      @include button(#bbb);
-    }
-
-    &.darkgrey-button {
-      @include button(#777);
-    }
-
-    &.black-button {
-      @include button(#333);
-    }
-  }
 }

data/edge.gemspec

@@ -5,9 +5,10 @@ Gem::Specification.new do |s|
   s.name          = "edge_framework"
   s.version       = Edge::VERSION
   s.authors       = ["Henner Setyono"]
-  s.email         = ["henner@setyono.net"]
-  s.description   = %q{Minimalist SASS Framework}
-  s.summary       = %q{Minimalist SASS Framework for creating website from scratch}
+  s.email         = ["henner.renardi@gmail.com"]
+  s.description   = %q{Lightweight SASS Framework}
+  s.summary       = %q{Lightweight SASS Framework for creating website from scratch}
+
   s.homepage      = "http://edge.setyono.net"
   s.license       = "MIT"
 
@@ -16,7 +17,7 @@ Gem::Specification.new do |s|
   s.test_files    = `git ls-files -- {test,spec,features}/*`.split("\n")
   s.require_paths = ["lib"]
 
-  s.add_dependency "sass", "~> 3.2"
+  s.add_dependency "sass", "~> 3.4"
   s.add_dependency "compass", "~> 1.0"
   s.add_dependency "premailer", "~> 1.8"
 

data/lib/edge/version.rb

@@ -1,4 +1,4 @@
 module Edge
-  VERSION = "1.4.1"
-  CODENAME = "Furion"
-end
+  VERSION = "2.0.0.a"
+  CODENAME = "Gondar"
+end

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

@@ -0,0 +1,20 @@
+/*
+  Edge Framework JS
+  - temporary until organized better
+*/
+
+var edgeFramework = {
+  init: function() {
+    webComponent();
+  },
+  webComponent: function() {
+    if("registerElement" in document) {
+      document.createElement("h-row");
+      document.createElement("h-column");
+      document.createElement("h-tile");
+      document.createElement("h-ti");
+    }
+  }
+};
+
+edgeFramework.init();