edge_framework 0.9.9 → 0.9.10

checksums.yaml

@@ -0,0 +1,15 @@
+---
+!binary "U0hBMQ==":
+  metadata.gz: !binary |-
+    MDVlNDM5NDIzMzAwMmE4OTNkNTk3Mjk2ODZhNjBlNjgyZjc5ZmY5Mw==
+  data.tar.gz: !binary |-
+    Y2FjZmFmOWE3MGYyNjlmYmEyZTY1YzhkMzExMzVmOGUzYmVkMjhlMQ==
+SHA512:
+  metadata.gz: !binary |-
+    ZDRjOTRmMTZmMzZhYzIwYjQxZGRlMGFiYTI0MGIwODVmMzVjNjBmMjg3NGQ2
+    NDQ5N2FhZDVlMmY1ZTgzYWQ2YjViZWJkYTVkMjIyYmEzZTUwMDNmZWU4YjZl
+    OGRlMTZlMTU4ZTUyZjc4YjU4ZGU0OGEwYmEyN2I0NmFkNGRhYzU=
+  data.tar.gz: !binary |-
+    Y2YwYTZjZTZlYTdkYmI0YWU2ZTMxM2M5MzA1MTQ0NTA3MjM0Y2FhYWU1NzQ4
+    MDZmYzI4MTAzZGY4NzgzODYzMzgyYWQ1ZmI3ZWZiNDdlYTljMmFmODhlNTQw
+    NTIzMTE5YWZiYWQyODBkMGY4MGVkZTgxOTQ2NjZmNzkzZDI5MGE=

data/README.md

@@ -1,23 +1,189 @@
-Welcome to Edge Framework
+EDGE FRAMEWORK
 ==========================
 
-Edge is a unobtrusive Sass framework.
+**ABOUT EDGE**
+
+Edge is a light-weight responsive Sass framework. No gimmick, just the basic necessity to build modern website.
 
 It is based on [Foundation by ZURB](http://www.zurb.com).
 
-Edge is MIT-licensed and absolutely free to use.
+**OUR PHILOSOPHY**
+
+My personal preference is to have a framework not do something and implement it myself than have a framework do something and figure out how to do the opposite.
+
 
-Installation
+INSTALLATION
 =============
 
     gem install edge_framework
 
-Windows PC doesn't come with Ruby pre-installed, so you can follow [this Ruby installation guide](https://docs.google.com/document/d/155e-Dx4SnQj_bMrM24kI4_ZEmBp-TQ_tuinhMvZsIhM/edit?usp=sharing) we wrote. After you installed Ruby, type in the command above on `cmd` (command prompt).
+Windows PC doesn't come with Ruby pre-installed, so you can follow [this Ruby installation guide](https://docs.google.com/document/d/155e-Dx4SnQj_bMrM24kI4_ZEmBp-TQ_tuinhMvZsIhM/edit?usp=sharing) we wrote.
+
+After you installed Ruby, type in the command above on `cmd` (command prompt).
+
+GRID SYSTEM - COLUMN
+==================
+
+    <div class="row">
+      <div class="large-4 small-6 column"></div>
+      <div class="large-8 small-6 column"></div>
+    </div>
+
+Our Grid is divided into **12 columns**. Start with row followed by column and its width.
+
+The tag doesn't have to be div, it can be section, article, header, etc.
+
+Sizing:
+
+- Large - above 768px
+
+- Small (optional) - below or equal to 768px, width will be 100% if not specified.
+
+The snippets above is `4 - 8` on Large screen and `6 - 6` on Small screen.
+
+Centering
+-----------
+
+    .large-centered
+    .small-centered
+
+You can make a column **horizontally centered** on your screen by adding the class above. Large centering is inherited on small screen.
+
+    <div class="row">
+      <div class="large-8 large-centered column"></div>
+    </div>
+
+Feel free to nest the row if you want more than two columns to be centered:
+
+    <section class="row">
+      <div class="large-8 large-centered column">
+        <div class="row">
+          <div class="large-6 column"></div>
+          <div class="large-6 column"></div>
+        </div>
+      </div>
+    </section>
+
+Offset
+-----------
+
+    .large-offset-x
+    .small-offset-x
+
+Offset is used to leave a **gap** before the column. Large offset is ignored on small screen.
+
+    <div class="row">
+      <div class="large-2 column"></div>
+      <div class="large-6 large-offset-4 column"></div>
+    </div>
+
+The snippets below only has offset on small screen:
+
+    <div class="row">
+      <div class="large-2 small-4 column"></div>
+      <div class="large-10 small-6 small-offset-2 column"></div>
+    </div>
+
+Column Ordering
+-----------------
+
+    push-x
+    pull-x
+
+Sometimes you want a column to be on the right for Large screen but left-side for Small screen.
+
+**Push** pushes the column to the right, while **Pull** pulls it to the left.
+
+Push and Pull is ignored on small screen.
+
+    <div class="row">
+      <aside class="large-4 small-4 push-4 column"></aside>
+      <main class="large-8 small-8 pull-8 column"></main>
+    </div>
+
+The snippet above will look like this:
+
+    // on Large screen
+    |---main---||aside|
+
+    // on Small screen
+    |aside||---main---|
+
+GRID SYSTEM - TILE
+=================
+
+    ul.large-tile-x
+    ul.small-tile-x
+
+Tile evenly divides the list into column-like size.
+
+    <ul class="large-tile-4">
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+    </ul>
+
+In the example above, there are 4 list-items per row, 25% width each.
+
+Without small sizing, each item will be 100% width. Here's how you can control the responsiveness:
+
+    <ul class="large-tile-6 small-tile-3">
+    </ul>
+
+VISIBILITY
+==================
+
+    .hide-for-<size>
+    .show-for-<size>
 
-CLI - Template Generator
+Hide or show element on specific screen size. This class is applicable to any elements.
+
+**Hide** means hidden only on that size. **Show** means visible only on that size.
+
+Sizing:
+
+- Large - above 768px
+
+- Small - below or equal to 768px
+
+- Mini - below or equal to 480px
+
+Note that small size is below 768px which means it includes mini size.
+
+**VISIBILITY TABLE**
+    
+    ✓ = visible
+
+                       Large  Small  Mini
+
+    .hide-for-large      -      ✓     ✓
+    .hide-for-small      ✓      -     -
+    .hide-for-mini       ✓      ✓     -
+
+    .show-for-large      ✓      -     -
+    .show-for-small      -      ✓     ✓
+    .show-for-mini       -      -     ✓
+
+From the table, we can see that some classes like `.hide-for-large` and `.show-for-small` have same result. It is up to your preference on which word makes more sense.
+
+**EXAMPLES**
+    
+Sidebar hidden on mini screen
+
+    <aside class="sidebar hide-for-mini"></aside>
+
+Slider visible only on large screen
+    
+    <div role="banner" class="show-for-large"></div>
+    // or
+    <div role="banner" class="hide-for-small"></div>
+
+TEMPLATE GENERATOR
 ====================
 
-Edge can generate basic template for your project. Open `cmd` or `terminal` in your project directory and type in one of these commands:
+Edge can generate basic template for your project. Run this command inside your project directory:
 
 1. Static HTML
 
@@ -33,3 +199,65 @@ Edge can generate basic template for your project. Open `cmd` or `terminal` in y
 
 4. Coming soon: Rails, Sinatra, Django, Flask
 
+COMPASS
+=================
+
+Inside the generated template, go to `assets/sass/` and you will see `_settings.scss`. This file overrides the default styling like primary color or column's gutter.
+
+Just uncomment the variable and change the value:
+
+    // $column-gutter : 20px;
+    
+Become:
+
+    $column-gutter : 30px;
+
+**STARTING FROM SCRATCH**
+
+Here's the guide if you decided not to use the template generator.
+
+There are two main imports:
+
+- **edge** - output all of the framework's styling. Used in conjunction with your own generic style that can be re-used in other project.
+
+    `@import "edge";`
+
+- **edge/helpers** - allow the use of Edge's mixin, doesn't output anything. Used in conjunction with site-specific style
+
+   `@import "edge/helpers";`
+
+Then at the top of **config.rb**, add this line:
+
+    require "edge_framework"
+
+RAILS
+=================
+
+You can use Edge by including this in your Gemfile:
+
+    gem 'sass', '= 3.2.14'
+    gem 'sass-rails', '~> 4.0.0'
+    gem 'compass-rails'
+    gem 'edge_framework'
+
+The latest version of Sass (3.3.x) is not compatible with latest Compass (0.12.x). So until they fixed it, use Sass version 3.2.14
+
+If you're not planning to override any variables, include `require edge` in your assets pipeline (application.css)
+   
+    /*
+    *= require_self
+    *= require edge
+    *= require_tree .
+    */
+
+Otherwise, use the generator to get the starter kit which includes Setting file.
+
+    rails g edge:install  (COMING SOON)
+
+The Rails generator is not ready yet. Alternatively, copy all the Sass files from any of the Template generator and put it on `assets/stylesheets` directory. Then in your application.css:
+
+    /*
+    *= require_self
+    *= require framework
+    *= require_tree .
+    */

data/assets/sass/edge.scss

@@ -1,6 +1,6 @@
 /* ----------------------------------
 - EDGE Framework - edge.setyono.net
-- v0.9.9 (Crixalis)
+- v0.9.10 (Crixalis)
 ------------------------------------- */
 
 @import "edge/base";

data/assets/sass/edge/_helpers.scss

@@ -1,3 +1,4 @@
+@import "base";
 @import "helpers/sprites";
 @import "helpers/sticky-footer";
 

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

@@ -16,7 +16,8 @@ $column-gutter   : 20px !default;
 // GRID ROW
 // - Create container for the grid
 // ---------------------------------
-@mixin grid-row(
+
+@mixin row(
   $nest      : false,
   $collapse  : false,
   $width     : $row-max-width,
@@ -110,7 +111,7 @@ $column-gutter   : 20px !default;
 }
 
 // ----------------------------------
-// Prevent duplicate in grid-column
+// Prevent duplicate in column
 // ----------------------------------
 @mixin source-ordering-column(
   $push  : 0,
@@ -133,13 +134,13 @@ $column-gutter   : 20px !default;
 @mixin source-ordering-output() {
   @for $i from 1 through $total-columns - 1 {
     .large-offset-#{$i} {
-      @include grid-column($large-offset:$i);
+      @include column($large-offset:$i);
     }
     .push#{-$i} {
-      @include grid-column($push:$i);
+      @include column($push:$i);
     }
     .pull#{-$i} {
-      @include grid-column($pull:$i);
+      @include column($pull:$i);
     }
   }
 }
@@ -148,7 +149,7 @@ $column-gutter   : 20px !default;
 // GRID COLUMN
 // - Create the grid
 // ------------------------
-@mixin grid-column(
+@mixin column(
   $large  : 0,
   $small  : 0, // For external call only, small size screen
   $mini   : 0, // For external call only, mini size screen
@@ -270,22 +271,22 @@ $column-gutter   : 20px !default;
 
 // Normal row
 .row {
-  @include grid-row($for-base:true);
+  @include row($for-base:true);
   
   // Collapsed row
   &.collapse {
-    @include grid-row($collapse:true);
+    @include row($collapse:true);
     .column,
     .columns {
-      @include grid-column($collapse:true);
+      @include column($collapse:true);
     }
   }
   
   // Nested-collapsed row
   .row {
-    @include grid-row($nest:true);
+    @include row($nest:true);
     &.collapse {
-      @include grid-row($nest:true, $collapse:true);
+      @include row($nest:true, $collapse:true);
     }
   }
 }
@@ -293,17 +294,17 @@ $column-gutter   : 20px !default;
 // Normal column
 .column,
 .columns {
-  @include grid-column($large:$total-columns, $for-base:true);
+  @include column($large:$total-columns, $for-base:true);
 }
 
 @for $i from 1 through $total-columns {
-  .large#{-$i} { @include grid-column($large:$i); }
+  .large#{-$i} { @include column($large:$i); }
 }
 
 // Centered column
 .column.large-centered,
 .columns.large-centered {
-  @include grid-column($center:true);
+  @include column($center:true);
 }
 
 // Source Ordering
@@ -320,23 +321,23 @@ $column-gutter   : 20px !default;
   @include below(small) {
     .column,
     .columns {
-      @include grid-column($large:$total-columns);
+      @include column($large:$total-columns);
     }
     @for $i from 1 through $total-columns {
       .small#{-$i} {
-        @include grid-column($large:$i);
+        @include column($large:$i);
       }
     }
 
     @for $i from 0 through $total-columns - 2 {
       .small-offset-#{$i} {
-        @include grid-column($large-offset:$i);
+        @include column($large-offset:$i);
       }
     }
 
     .column.small-centered,
     .columns.small-centered {
-      @include grid-column($center:true);
+      @include column($center:true);
     }
   }
 

data/assets/sass/for-test.scss

@@ -3,7 +3,7 @@
 
 
 .custom-grid {
-  @include grid-column($large:3);
+  @include column($large:3);
 }
 
 [data-page="animate"] {
@@ -174,85 +174,85 @@
 
 /* Custom Grid */
 .cgrid-1 {
-  @include grid-column($large:5);
+  @include column($large:5);
 }
 .cgrid-2 {
-  @include grid-column($large:7);
+  @include column($large:7);
 }
 
 .cgrid-a1 {
-  @include grid-column($large:5, $small:10);
+  @include column($large:5, $small:10);
 }
 .cgrid-a2 {
-  @include grid-column($large:7, $small:2);
+  @include column($large:7, $small:2);
 }
 
 .cgrid-b1 {
-  @include grid-column($large:10, $small:8, $mini:6);
+  @include column($large:10, $small:8, $mini:6);
 }
 .cgrid-b2 {
-  @include grid-column($large:2, $small:4, $mini:6);
+  @include column($large:2, $small:4, $mini:6);
 }
 
 .cgrid-c1 {
-  @include grid-column($large:6, $large-offset:4, $small:6);
+  @include column($large:6, $large-offset:4, $small:6);
 }
 .cgrid-c2 {
-  @include grid-column($large:2, $small:6);
+  @include column($large:2, $small:6);
 }
 
 .cgrid-d1 {
-  @include grid-column($large:3, $large-offset:6, $small:4, $small-offset:4);
+  @include column($large:3, $large-offset:6, $small:4, $small-offset:4);
 }
 .cgrid-d2 {
-  @include grid-column($large:3, $small:4);
+  @include column($large:3, $small:4);
 }
 
 .cgrid-e1 {
-  @include grid-column($large:3, $large-offset:6, $small:4, $small-offset:4, $mini:6);
+  @include column($large:3, $large-offset:6, $small:4, $small-offset:4, $mini:6);
 }
 .cgrid-e2 {
-  @include grid-column($large:3, $small:4, $mini:6);
+  @include column($large:3, $small:4, $mini:6);
 }
 
 .cgrid-f1 {
-  @include grid-column($large:3, $large-offset:6, $small:4, $small-offset:4, $mini:5, $mini-offset:1);
+  @include column($large:3, $large-offset:6, $small:4, $small-offset:4, $mini:5, $mini-offset:1);
 }
 .cgrid-f2 {
-  @include grid-column($large:3, $small:4, $mini:6);
+  @include column($large:3, $small:4, $mini:6);
 }
 
 .cgrid-g1 {
-  @include grid-column($large:4, $push:8);
+  @include column($large:4, $push:8);
 }
 .cgrid-g2 {
-  @include grid-column($large:8, $pull:4);
+  @include column($large:8, $pull:4);
 }
 
 .cgrid-h1 {
-  @include grid-column($large:8, $small:8);
+  @include column($large:8, $small:8);
 }
   .cgrid-h1-1 {
-    @include grid-column($large:5, $small:5);
+    @include column($large:5, $small:5);
   }
   .cgrid-h1-2 {
-    @include grid-column($large:7, $small:7);
+    @include column($large:7, $small:7);
   }
 .cgrid-h2 {
-  @include grid-column($large:4, $small:4);
+  @include column($large:4, $small:4);
 }
   .cgrid-h2-1 {
-    @include grid-column($large:6, $small:6, $center:true);
+    @include column($large:6, $small:6, $center:true);
   }
 
 .cgrid-i0 {
-  @include grid-row($gutter:50px);
+  @include row($gutter:50px);
 }
 .cgrid-i1 {
-  @include grid-column($large:6, $gutter:50px);
+  @include column($large:6, $gutter:50px);
 }
 .cgrid-i2 {
-  @include grid-column($large:6, $gutter:50px);
+  @include column($large:6, $gutter:50px);
 }
 
 /* Custom Tile */

data/assets/test.html

@@ -224,7 +224,7 @@
     </div>
   </div> -->
 
-  <div class="row" data-page="vr-comparison">
+<!--   <div class="row" data-page="vr-comparison">
     <div class="large-6 column">
       <article class="baseline-comparison">
         <h1>Lorem ipsum dolor sit amet.</h1>
@@ -293,7 +293,7 @@
         </p>
       </article>
     </div>
-  </div>
+  </div> -->
 
 <!-- <div class="row" data-page="code">
   <div class="large-12 columns">
@@ -552,7 +552,7 @@
 </div> -->
 
 
-<!-- <section class="row" data-page="visibility">
+<section class="row" data-page="visibility">
   <div class="large-12 column">
     <h2>Using the Class</h2>
     <div class="visibility-class">
@@ -671,7 +671,7 @@
     </div>
     
   </div>
-</section> -->
+</section>
 
 <!-- <div class="row collapse demo-grid" data-page="grid">
   <h1>Collapse not nested</h1>

data/lib/edge/version.rb

@@ -1,4 +1,4 @@
 module Edge
-  VERSION = "0.9.9"
+  VERSION = "0.9.10"
   CODENAME = "Crixalis"
 end

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

@@ -1,6 +1,3 @@
-@charset "UTF-8";
-@import "edge/base";
-
 // Override EDGE variables here
 // To override, uncomment the variable and set the new value
 

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

@@ -1,8 +1,10 @@
 @import "setting";
 @import "edge";
 
-// If you have idea to improve EDGE, write it here temporarily
-// And if you are willing, pass it to henner@setyono.net
+// Put your generic style that can be re-used in other project here
+
+// And if you are willing, share it to me at henner.renardi@gmail.com
 //
 // Thanks,
-// - Henner S
+// Henner RS
+// - EDGE Author

data/template/base/config.rb

@@ -1,4 +1,4 @@
-gem "edge_framework", "= 0.9.9" # Remove this line to use the latest EDGE, beware of incompatibility
+gem "edge_framework", "= 0.9.10" # Remove this line to use the latest EDGE, beware of incompatibility
 require "edge_framework"
 
 http_path       = "/"

metadata

@@ -1,20 +1,18 @@
 --- !ruby/object:Gem::Specification
 name: edge_framework
 version: !ruby/object:Gem::Version
-  version: 0.9.9
-  prerelease: 
+  version: 0.9.10
 platform: ruby
 authors:
 - Henner Setyono
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-03-12 00:00:00.000000000 Z
+date: 2014-03-16 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
   requirement: !ruby/object:Gem::Requirement
-    none: false
     requirements:
     - - ! '>='
       - !ruby/object:Gem::Version
@@ -22,7 +20,6 @@ dependencies:
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
-    none: false
     requirements:
     - - ! '>='
       - !ruby/object:Gem::Version
@@ -30,7 +27,6 @@ dependencies:
 - !ruby/object:Gem::Dependency
   name: compass
   requirement: !ruby/object:Gem::Requirement
-    none: false
     requirements:
     - - ! '>='
       - !ruby/object:Gem::Version
@@ -38,7 +34,6 @@ dependencies:
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
-    none: false
     requirements:
     - - ! '>='
       - !ruby/object:Gem::Version
@@ -46,7 +41,6 @@ dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
   requirement: !ruby/object:Gem::Requirement
-    none: false
     requirements:
     - - ~>
       - !ruby/object:Gem::Version
@@ -54,7 +48,6 @@ dependencies:
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
-    none: false
     requirements:
     - - ~>
       - !ruby/object:Gem::Version
@@ -62,7 +55,6 @@ dependencies:
 - !ruby/object:Gem::Dependency
   name: rake
   requirement: !ruby/object:Gem::Requirement
-    none: false
     requirements:
     - - ! '>='
       - !ruby/object:Gem::Version
@@ -70,7 +62,6 @@ dependencies:
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
-    none: false
     requirements:
     - - ! '>='
       - !ruby/object:Gem::Version
@@ -78,7 +69,6 @@ dependencies:
 - !ruby/object:Gem::Dependency
   name: rspec
   requirement: !ruby/object:Gem::Requirement
-    none: false
     requirements:
     - - ! '>='
       - !ruby/object:Gem::Version
@@ -86,7 +76,6 @@ dependencies:
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
-    none: false
     requirements:
     - - ! '>='
       - !ruby/object:Gem::Version
@@ -173,26 +162,25 @@ files:
 homepage: http://edge.setyono.net
 licenses:
 - MIT
+metadata: {}
 post_install_message: 
 rdoc_options: []
 require_paths:
 - lib
 required_ruby_version: !ruby/object:Gem::Requirement
-  none: false
   requirements:
   - - ! '>='
     - !ruby/object:Gem::Version
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
-  none: false
   requirements:
   - - ! '>='
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 1.8.28
+rubygems_version: 2.2.2
 signing_key: 
-specification_version: 3
+specification_version: 4
 summary: Minimalist SASS Framework that utilize Compass to its full extend
 test_files: []