edge_framework 0.9.10 → 0.9.11

checksums.yaml

@@ -1,15 +1,15 @@
 ---
 !binary "U0hBMQ==":
   metadata.gz: !binary |-
-    MDVlNDM5NDIzMzAwMmE4OTNkNTk3Mjk2ODZhNjBlNjgyZjc5ZmY5Mw==
+    YjAyMmQwYTdjODRkYzczOTMzMzIwNjQ5YjQ1YjY0NDk0YWY3Mzg3ZA==
   data.tar.gz: !binary |-
-    Y2FjZmFmOWE3MGYyNjlmYmEyZTY1YzhkMzExMzVmOGUzYmVkMjhlMQ==
+    NjhhZjdiNTMyMjIxMDMyZmY3ZDQ5YWJmOTUzOGRjMmI0NWIxN2M4YQ==
 SHA512:
   metadata.gz: !binary |-
-    ZDRjOTRmMTZmMzZhYzIwYjQxZGRlMGFiYTI0MGIwODVmMzVjNjBmMjg3NGQ2
-    NDQ5N2FhZDVlMmY1ZTgzYWQ2YjViZWJkYTVkMjIyYmEzZTUwMDNmZWU4YjZl
-    OGRlMTZlMTU4ZTUyZjc4YjU4ZGU0OGEwYmEyN2I0NmFkNGRhYzU=
+    ODY1YzkwMWNmZjA2MWJiZDU3OGI2ZjU5OTQxOGFkOGZkYzgwODliYjc3MjAw
+    MWY2NzAzZWJhOThhOTZhY2FiNmZmMzA1MjllZDY5ZTUzNjY4NjY2ZjdhYzQ5
+    ODgwZDI0MzI5MDJlMDVkZTY3NDU0N2RkNmU3YjRkN2NkODk1ZDI=
   data.tar.gz: !binary |-
-    Y2YwYTZjZTZlYTdkYmI0YWU2ZTMxM2M5MzA1MTQ0NTA3MjM0Y2FhYWU1NzQ4
-    MDZmYzI4MTAzZGY4NzgzODYzMzgyYWQ1ZmI3ZWZiNDdlYTljMmFmODhlNTQw
-    NTIzMTE5YWZiYWQyODBkMGY4MGVkZTgxOTQ2NjZmNzkzZDI5MGE=
+    Yzc4NTE5YzNhMTZjNDdjYTY0NTM5NzVlNDJhYTNiYzRjZThhYzAwNTk5NTk4
+    MmU1YTBmYzk0OWIyN2NkYTVhOThhMDVhNjg0ZDAwZWY3MDY3YzhjNmZkZGEy
+    ZTU2ZWM1YjQ4NzA5ODRmNTlmOWZiZDI0NTA4N2M4ZGNlMDE4OTE=

data/README.md

@@ -1,9 +1,9 @@
+![Edge Framework](http://cdn.setyono.net/edge/logo.jpg)
+
 EDGE FRAMEWORK
 ==========================
 
-**ABOUT EDGE**
-
-Edge is a light-weight responsive Sass framework. No gimmick, just the basic necessity to build modern website.
+Edge is a light-weight responsive Sass framework. No gimmick, just the barebone to build modern website.
 
 It is based on [Foundation by ZURB](http://www.zurb.com).
 
@@ -11,9 +11,8 @@ It is based on [Foundation by ZURB](http://www.zurb.com).
 
 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
-=============
+-----------------
 
     gem install edge_framework
 
@@ -21,25 +20,69 @@ Windows PC doesn't come with Ruby pre-installed, so you can follow [this Ruby in
 
 After you installed Ruby, type in the command above on `cmd` (command prompt).
 
-GRID SYSTEM - COLUMN
+GRID SYSTEM
 ==================
+    .row
+    .column
+    .large-x
+    .small-x
+
+Our Grid is divided into **12 columns**. Start with "row" followed by "column" used in conjunction with its width.
+
+    <div class="row">
+      <div class="large-8 column"></div>
+      <div class="large-4 column"></div>
+    </div>
+
+![Edge Grid - Large only](http://cdn.setyono.net/edge/grid-large.jpg)
 
     <div class="row">
-      <div class="large-4 small-6 column"></div>
       <div class="large-8 small-6 column"></div>
+      <div class="large-4 small-6 column"></div>
     </div>
 
-Our Grid is divided into **12 columns**. Start with row followed by column and its width.
+![Edge Grid - Large and Small](http://cdn.setyono.net/edge/grid-large-small.jpg)
 
 The tag doesn't have to be div, it can be section, article, header, etc.
 
+Never style either row or column, you might see unexpected behavior.
+
 Sizing:
 
 - Large - above 768px
 
-- Small (optional) - below or equal to 768px, width will be 100% if not specified.
+- Small - below or equal to 768px, width will be 100% if not specified.
+
+Nesting
+-----------
+
+    <div class="row">
+      <div class="large-8 column">
+        <div class="row">
+          <div class="large-2 column"></div>
+          <div class="large-10 column"></div>
+        </div>
+      </div>
+      <div class="large-4 column"></div>
+    </div>
+
+![Edge Grid - Nesting](http://cdn.setyono.net/edge/grid-nesting.jpg)
+
+Collapse
+-----------
+
+    .row.collapse
+
+Remove the gutter.
+
+    <div class="row collapse">
+      <div class="large-9 small-6 column"></div>
+      <div class="large-3 small-6 column"></div>
+    </div>
+
+All nested rows inside collapsed one will be collapsed too.
 
-The snippets above is `4 - 8` on Large screen and `6 - 6` on Small screen.
+![Edge Grid - Collapse](http://cdn.setyono.net/edge/grid-collapse.jpg)
 
 Centering
 -----------
@@ -50,19 +93,10 @@ Centering
 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 class="large-7 small-7 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>
+![Edge Grid - Centered](http://cdn.setyono.net/edge/grid-centered.jpg)
 
 Offset
 -----------
@@ -77,12 +111,7 @@ Offset is used to leave a **gap** before the column. Large offset is ignored on
       <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>
+![Edge Grid - Offset](http://cdn.setyono.net/edge/grid-offset.jpg)
 
 Column Ordering
 -----------------
@@ -90,24 +119,20 @@ 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.
 
+Let's say you want a sidebar to be on the right for large screen; but on the bottom for 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>
+      <main class="large-8 push-4 column"></main>
+      <aside class="large-4 pull-8 column"></aside>
     </div>
 
 The snippet above will look like this:
 
-    // on Large screen
-    |---main---||aside|
-
-    // on Small screen
-    |aside||---main---|
+![Edge Grid - Ordering](http://cdn.setyono.net/edge/grid-ordering.jpg)
 
 GRID SYSTEM - TILE
 =================
@@ -115,22 +140,55 @@ GRID SYSTEM - TILE
     ul.large-tile-x
     ul.small-tile-x
 
-Tile evenly divides the list into column-like size.
+Evenly divides the list into block size.
 
-    <ul class="large-tile-4">
-      <li></li>
-      <li></li>
-      <li></li>
-      <li></li>
-      <li></li>
+    <ul class="large-tile-3 small-tile-2">
+      <li>1</li>
+      <li>2</li>
+      <li>3</li>
+      <li>4</li>
+      <li>5</li>
     </ul>
 
-In the example above, there are 4 list-items per row, 25% width each.
+![Edge Grid - Tile](http://cdn.setyono.net/edge/grid-tile.jpg)
 
-Without small sizing, each item will be 100% width. Here's how you can control the responsiveness:
+Without the small size, the tile will expand 100% on small screen.
 
-    <ul class="large-tile-6 small-tile-3">
-    </ul>
+Just like row, you can collapse tile too:
+
+    <ul class="large-tile-7 collapse"></ul>
+
+TYPOGRAPHY
+======================
+
+Outside of CSS reset, we don't offer much feature regarding Typography.
+
+Default Unordered list (ul) has bullet point, but most of the time we don't need it. So, we made a convention on how to write `ul`.
+
+Without class
+
+    <ul>...<ul>
+    
+    Result:
+    • List 1
+    • List 2
+    • List 3
+
+With any class
+
+    <ul class="something">...</ul>
+  
+    Result:
+    List 1
+    List 2
+    List 3
+
+If you want horizontal list, add `.inline-list` class.
+
+    <ul class="inline-list">...</ul>
+    
+    Result:
+    List 1 List 2 List 3
 
 VISIBILITY
 ==================
@@ -138,7 +196,7 @@ VISIBILITY
     .hide-for-<size>
     .show-for-<size>
 
-Hide or show element on specific screen size. This class is applicable to any elements.
+    <size> = large / small / mini
 
 **Hide** means hidden only on that size. **Show** means visible only on that size.
 
@@ -150,10 +208,20 @@ Sizing:
 
 - Mini - below or equal to 480px
 
-Note that small size is below 768px which means it includes mini size.
+**VISIBILITY SCALE**
+
+    0-----480-----768------------->
+
+    |-mini-|
+
+    |----small-----|
+
+                   |----large----->
+
+Notice that small size includes the mini portion too.
 
 **VISIBILITY TABLE**
-    
+
     ✓ = visible
 
                        Large  Small  Mini
@@ -168,11 +236,12 @@ Note that small size is below 768px which means it includes mini size.
 
 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**
+EXAMPLE
+--------------
     
 Sidebar hidden on mini screen
 
-    <aside class="sidebar hide-for-mini"></aside>
+    <aside hide-for-mini"></aside>
 
 Slider visible only on large screen
     
@@ -183,57 +252,210 @@ Slider visible only on large screen
 TEMPLATE GENERATOR
 ====================
 
-Edge can generate basic template for your project. Run this command inside your project directory:
+Generate basic template for your project. Run this command inside your project directory:
 
 1. Static HTML
 
     `edge create html`
 
-2. Standard PHP
-
+2. Static PHP (under construction)
+    
     `edge create php`
 
-3. Wordpress
-    
-    `edge create wordpress`
+3. Rails (run inside Rails project)
+
+    `rails g edge:install`
 
-4. Coming soon: Rails, Sinatra, Django, Flask
+4. Coming soon: Wordpress, Sinatra, and 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.
+![Edge Compass](http://cdn.setyono.net/edge/compass-edge.jpg)
+
+The generated template includes **config.rb** for Compass. So, we can directly compile it using:
+
+    compass watch
+
+Inside the 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:
+Just uncomment the variable and change the value. For example:
 
     // $column-gutter : 20px;
-    
+
 Become:
 
     $column-gutter : 30px;
 
-**STARTING FROM SCRATCH**
+GRID - mixin
+======================
+  
+    row()
+      $gutter   : px
+      $width    : px
+      $collapse : bool
+
+    column()
+      $large        : int
+      $small        : int
+      $mini         : int
+      $large-offset : int
+      $small-offset : int
+      $mini-offset  : int
+      $push         : int
+      $pull         : int
+      $centered     : bool
+      $collapse     : bool
+      $gutter       : px
+      $total        : int  // total columns
+
+Custom grid makes the markup cleaner and less duplication.
+
+It allows one additional sizing: **mini** which is below 480px on default. You can only set mini size when small size is specified.
+
+Base class ("row" and "column") must be explicitly written.
+
+    // HTML
+    <div class="row">
+      <aside class="column"></aside>
+      <main class="column"></main>
+    </div>
 
-Here's the guide if you decided not to use the template generator.
+    // SCSS
+    aside {
+      @include column(2, 4, 12);
+      // or
+      @include column($large: 2, $small: 4, $mini: 12);
+    }
 
-There are two main imports:
+    main {
+      @include column(10, 8, 12);
+      // or
+      @include column($large: 10, $small: 8, $mini: 12);
+    }
 
-- **edge** - output all of the framework's styling. Used in conjunction with your own generic style that can be re-used in other project.
+**GUTTER**
 
-    `@import "edge";`
+If you want to modify the global gutter, change it in Setting file.
+
+But if you want it only on specific set of columns, apply it in both row and column.
+
+    // HTML
+    <div class="my-row row">
+      <aside class="column"></aside>
+      <main class="column"></main>
+    </div>
 
-- **edge/helpers** - allow the use of Edge's mixin, doesn't output anything. Used in conjunction with site-specific style
+    // SCSS
+    .my-row {
+      @include row($gutter: 50px);
+    }
 
-   `@import "edge/helpers";`
+    aside {
+      @include column($large: 2, $gutter: 50px);
+    }
 
-Then at the top of **config.rb**, add this line:
+    main {
+      @include column($large: 10, $gutter: 50px);
+    }
+
+**TOTAL COLUMNS**
+
+    aside {
+      @include column($large: 20, $total: 100);
+    }
+
+    main {
+      @include column($large: 80, $total: 100);
+    }
+
+**COLLAPSE**
+
+Collapse must be applied to both custom row and column.
+    
+    .my-row {
+      @include row($collapse: true);
+    }
 
-    require "edge_framework"
+    main {
+      @include column($large: 10, $collapse: true);
+    }
+
+TILE - mixin
+======================
+
+    tile()
+      $large    : int
+      $small    : int
+      $mini     : int
+      $gutter   : px,
+      $collapse : bool
+
+Just like column's mixin, you can set mini size.
+
+    <ul class="products"></ul>
+
+    .products {
+      @include tile(4, 2, 1);
+      // or
+      @include tile($large: 4, $small: 2, $mini: 1);
+    }
+
+VISIBILITY - mixin
+========================
+
+    hide-for($size)
+    show-for($size)
+
+      $size = large / small / mini
+
+It has the same behavior with using the class.
+
+    <aside>...</aside>
+
+    aside {
+      @include hide-for(large);
+    }
+
+MEDIA QUERY - mixin
+=========================
+
+    below($size)
+    above($size)
+    between($smaller-size, $larger-size)
+    
+    $size = px / large / small / mini
+
+**Below** means less than or equal to (`<=`).
+
+**Above** means more than (`>`).
+
+**Between** is inclusive to both (`>= smaller-size` and `<= larger-size`).
+
+Other than the usual "large" or "small", you can also use pixel on this mixin.
+
+    p {
+      color: black;
+
+      @include below(small) {
+        color: blue;
+      }
+
+      @include below(500px) {
+        color: red;
+      }
+
+      @include between(100px, small) {
+        color: green;
+      }
+    }
 
 RAILS
 =================
 
-You can use Edge by including this in your Gemfile:
+![Edge Rails](http://cdn.setyono.net/edge/rails-edge.jpg)
+
+Gemfile:
 
     gem 'sass', '= 3.2.14'
     gem 'sass-rails', '~> 4.0.0'
@@ -242,22 +464,8 @@ You can use Edge by including this in your Gemfile:
 
 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)
+Template generator:
 
-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:
+    rails g edge:install
 
-    /*
-    *= require_self
-    *= require framework
-    *= require_tree .
-    */
+The command will give you Edge's SCSS files and append the pipeline.

data/assets/sass/edge/_base.scss

@@ -28,40 +28,43 @@ $vertical-rhythm : false !default;
 
 $external-call : false !default; // user shouldn't modify this
 
+// Can't be overriden
 $include-normalize  : true !default;
 $include-typography : true !default;
-
 $include-grid       : true !default;
+$include-form       : true !default;
+
+// Default true
 $include-tile       : true !default;
 $include-visibility : true !default;
-
 $include-button     : true !default;
-$include-form       : true !default;
-$include-animate    : true !default;
 
+// Default false
+$include-animate    : false !default;
 $include-print      : false !default;
 $include-code       : false !default;
 
 // ----------
 // COLOR
 // ----------
-// Two main colors of your site
-$main-color    : #0173bc !default;
-$sub-color     : #e9e9e9 !default;
 
 // These 5 colors below should NEVER be used directly
 // Put it to other variable like $header-color: $blue-color;
-$passive-color : #e9e9e9 !default;
-$blue-color    : #0173bc !default;
-$yellow-color  : #dba924 !default;
-$red-color     : #da2e18 !default;
-$green-color   : #2cae34 !default;
+$passive-color : #d7d7d7 !default;
+$blue-color    : #2a71e3 !default;
+$yellow-color  : #fac741 !default;
+$red-color     : #d35400 !default;
+$green-color   : #229e61 !default;
+
+// Two main colors of your site
+$main-color    : $blue-color !default;
+$sub-color     : $passive-color !default;
 
 // ---------------
 // GLOBAL VALUE
 // ---------------
-$g-radius : 5px !default;
-$g-transition : all 0.2s ease-out !default;
+$g-radius : 3px !default;
+$g-transition : all .2s ease-out !default;
 
 // ----------------------------
 // BASE FONT and LINE-HEIGHT
@@ -217,6 +220,18 @@ $retina-screen : 192dpi !default;
   }
 }
 
+// ------------
+// CONTRAST
+// ------------
+
+@function is_dark($color) {
+  @return contrast-color($color, false, true, 70%);
+}
+
+@function is_light($color) {
+  @return not is_dark($color);
+}
+
 // ----------------------------------------------
 // CLEARING FLOAT
 //   Make a container wraps floated element