![Edge Framework](http://cdn.setyono.net/edge/logo.jpg)

EDGE FRAMEWORK
==========================

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).

**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
-----------------

    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).

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-8 small-6 column"></div>
      <div class="large-4 small-6 column"></div>
    </div>

![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 - 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.

![Edge Grid - Collapse](http://cdn.setyono.net/edge/grid-collapse.jpg)

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-7 small-7 large-centered column"></div>
    </div>

![Edge Grid - Centered](http://cdn.setyono.net/edge/grid-centered.jpg)

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>

![Edge Grid - Offset](http://cdn.setyono.net/edge/grid-offset.jpg)

Column Ordering
-----------------

    push-x
    pull-x

**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">
      <main class="large-8 push-4 column"></main>
      <aside class="large-4 pull-8 column"></aside>
    </div>

The snippet above will look like this:

![Edge Grid - Ordering](http://cdn.setyono.net/edge/grid-ordering.jpg)

GRID SYSTEM - TILE
=================

    ul.large-tile-x
    ul.small-tile-x

Evenly divides the list into block size.

    <ul class="large-tile-3 small-tile-2">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>

![Edge Grid - Tile](http://cdn.setyono.net/edge/grid-tile.jpg)

Without the small size, the tile will expand 100% on small screen.

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
==================

    .hide-for-<size>
    .show-for-<size>

    <size> = large / small / mini

**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

**VISIBILITY SCALE**

    0-----480-----768------------->

    |-mini-|

    |----small-----|

                   |----large----->

Notice that small size includes the mini portion too.

**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.

EXAMPLE
--------------
    
Sidebar hidden on mini screen

    <aside 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
====================

Generate basic template for your project. Run this command inside your project directory:

1. Static HTML

    `edge create html`

2. Static PHP (under construction)
    
    `edge create php`

3. Rails (run inside Rails project)

    `rails g edge:install`

4. Coming soon: Wordpress, Sinatra, and Flask

COMPASS
=================

![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. For example:

    // $column-gutter : 20px;

Become:

    $column-gutter : 30px;

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>

    // SCSS
    aside {
      @include column(2, 4, 12);
      // or
      @include column($large: 2, $small: 4, $mini: 12);
    }

    main {
      @include column(10, 8, 12);
      // or
      @include column($large: 10, $small: 8, $mini: 12);
    }

**GUTTER**

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>

    // SCSS
    .my-row {
      @include row($gutter: 50px);
    }

    aside {
      @include column($large: 2, $gutter: 50px);
    }

    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);
    }

    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
=================

![Edge Rails](http://cdn.setyono.net/edge/rails-edge.jpg)

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

Template generator:

    rails g edge:install

The command will give you Edge's SCSS files and append the pipeline.