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

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

Edge is a light-weight Sass framework. It specializes in making a website from scratch.

It is based on [Foundation by ZURB](http://www.zurb.com).

This is **v2 docs**, [go here for v1](https://github.com/hrsetyono/edge/wiki/v1-Docs).

BROWSER SUPPORT
------------------

All modern browsers:

- Chrome, Firefox, Safari, Opera
- Android 4.0 and above
- IE 9 and above

INSTALLATION
-----------------

**PC**

[Install Ruby](https://docs.google.com/document/d/155e-Dx4SnQj_bMrM24kI4_ZEmBp-TQ_tuinhMvZsIhM/edit?usp=sharing) and type this command in your *cmd* (command prompt):

    gem install edge_framework

**MAC**

Open your *terminal* and type:

    sudo gem install edge_framework

GETTING STARTED
------------------

Generate the template files by running this command in your project directory:

    edge create <type>

Available types are: `html`, `wordpress`, `email`, and `ghost`.

To compile the Sass, run this command:

    compass watch

GRID SYSTEM
==================
    
    <h-row>
    <h-column>

Our Grid is divided into **12 columns**. Start with `<h-row>` followed by `<h-column>`.

    <h-row>
      <h-column class="large-8"></h-column>
      <h-column class="large-4"></h-column>
    </h-row>

![Edge Grid - Large only](http://cdn.setyono.net/edge/grid-large.jpg)

    <h-row>
      <h-column class="large-8 small-6"></h-column>
      <h-column class="large-4 small-6"></h-column>
    </h-row>

![Edge Grid - Large and Small](http://cdn.setyono.net/edge/grid-large-small.jpg)

**Note**:

- `h-row` must be followed by `h-column`. Nothing in between!

- Don't add your own styling to the row or column element.

- Large is above 768px by default.

- Small is below or equal to 768px. If not specified, column will become 100% width.

Nesting
-----------

    <h-row>
      <h-column class="large-8">
        <h-row>
          <h-column class="large-2"></h-column>
          <h-column class="large-10"></h-column>
        </h-row>
      </h-column>
      <h-column class="large-4"></h-column>
    </h-row>

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

Collapse
-----------

    .collapse

Remove the gutter.

    <h-row class="collapse">
      <h-column class="large-9 small-6"></h-column>
      <h-column class="large-3 small-6"></h-column>
    </h-row>

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

**Note**:

- Normal row that is nested inside collapsed row will maintain its gutter.

Centering
-----------

    .centered
    .small-centered

Horizontally centering a column.

It is inherited on small screen.

    <h-row>
      <h-column class="large-7 small-7 centered"></h-column>
    </h-row>

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

Offset
-----------

    .offset-x
    .small-offset-x

Offset leaves a **gap** before the column.

It is ignored on small screen unless the small sizing is specified.

    <h-row>
      <h-column class="large-2 column"></h-column>
      <h-column class="large-6 offset-4 column"></h-column>
    </h-row>

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


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

    <h-tile>
    <h-ti>
    .block-x
    .small-block-x

Evenly divides the list into block size.

    <h-tile class="block-3 small-block-2">
      <h-ti> 1 </h-ti>
      <h-ti> 2 </h-ti>
      <h-ti> 3 </h-ti>
      <h-ti> 4 </h-ti>
      <h-ti> 5 </h-ti>
    </h-tile>

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

Each tile will expand 100% on small screen when the small size is not specified.

Just like row, you can collapse it:

    <h-tile class="block-7 collapse"> ... </h-tile>

**Convention**:

- Don't name any of your class starting with `block`. It is reserved for tile.

- Don't add your own styling to the tile or ti element.

WORDPRESS
====================

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

Our WordPress template requires [Timber](http://upstatement.com/timber/). It is a template engine that separates PHP and HTML into their own file.

So, download and include [its plugin](https://wordpress.org/plugins/timber-library/) into your WordPress installation.

Custom Post Type
--------------------

![Wordpress Custom Type](http://cdn.setyono.net/edge/wp-post-type.jpg)

    add_post_type( $name, <$icon>, <$taxonomy> )

Inside `functions.php`, add these codes:

    add_post_type("Product", "cart", "Brand");
    add_post_type("Event", "calendar");

The icon name is taken from [melchoyce.github.io/dashicons/](http://melchoyce.github.io/dashicons/).

**Note**:

- If you want pagination to work, the `$name` cannot be the same as any page's slug.

- All type's name and taxonomy's name must be **singular** and no special character except space.

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

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

The generated template includes **config.rb** for Compass. So, we can compile it using the command:

    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;

EM Converter
===============
    
    .post p {
      font-size: em(14px);  
    }

    // Result
    .post p {
      font-size: 0.875em;
    }

The default em size is 16px. It is defined in variable `$body-font-size`.

If the base size is not default, pass it as second parameter:
    
    <h1 class="title">
      Hello <em>World</em>
    </h1>

    .title {
      font-size: em(40px);

      em {
        font-size: em(45px, 40px);
      }
    }

MEDIA QUERY - mixin
=========================

    below($size)
    above($size)
    between($smaller-size, $larger-size)
    
    $size = large / small / mini

**Below** means less than or equal to (`<=`).

**Above** means more than (`>`).

**Between** is inclusive to both (`>= smaller-size` and `<= larger-size`).

    p {
      color: black;

      @include above(small) {
        color: blue;
      }

      @include below(small) {
        color: yellow;
      }
    }

You can use pixel too:

    p {
      color: black;
      
      @include above(850px) {
        color: pink;
      }

      @include between(300px, 400px) {
        color: green;
      }
    }

GRID - mixin
======================
  
    row()
      $gutter   : px    - Gutter for columns inside this row
      $width    : px    - The row's max width.
      $collapse : bool

    column()
      $size    : int    - The large sizing
      $small   : int    - The small sizing
      $mini    : int    - The mini sizing (below 480px)
      $offset  : int
      $centered : bool
      $total    : int   - Total number of columns
      

Custom grid makes the markup cleaner and easier to change.

    // HTML
    <h-row>
      <h-column class="sidebar"></h-column>
      <h-column class="content"></h-column>
    </h-row>


    // SCSS
    .sidebar {
      @include column($size: 2, $small: 4, $mini: 12);
      // or
      @include column(2, 4, 12);
    }

    .main {
      @include column(10, 8, 12);
    }

**Note**:

- Custom column MUST be applied to `h-column` element. The same rule goes to custom row.

### GUTTER

Custom gutter is applied to the row

    // HTML
    <h-row class="my-row">
      <h-column class="large-3"></h-column>
      <h-column class="large-9"></h-column>
    </h-row>


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

## GUTTER on large and small

Unlike the column's sizing. There's no parameter called `small-gutter` or `mini-gutter`.

So, the workaround is to use media query:

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

      @include below(small) {
        @include row($gutter: 20px);
      }
    }

**Note**:

- Use the same workaround for column's `offset`.

### COLLAPSE

Collapse is applied to the row
    
    // HTML
    <h-row class="my-row">
      ...
    </h-row>


    // SCSS
    .my-row {
      @include row($collapse: true);
    }

### TOTAL COLUMNS

You can either use `$total` parameter or fraction:
      
    .content {
      @include column($size: 7, $offset: 3, $total: 15);
    }

    // or

    .content {
      @include column($size: 7 / 15, $offset: 3 / 15);
    }

TILE - mixin
======================

    tile()
      $size     : int
      $small    : int
      $mini     : int
      $gutter   : px,
      $collapse : bool

Mini sizing is available for tile's mixin too.

    <h-tile class="products">
      ...
    </h-tile>

    .products {
      @include tile(7, 4, 2);
    }

RAILS
=================

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

Add this chunk to your gemfile (some already came in default Rails project):

    gem 'sass'
    gem 'sass-rails', '~> 4.0.0'
    gem 'compass-rails'
    gem 'edge_framework', '~> 1.2'

Template generator:

    rails g edge:install

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

FAQ
===============

1. Why should I use Edge over leading frameworks like Boostrap or Foundation?

  Edge leans toward those who create website based on designer's wireframe/mockup.

  Bootstrap and Foundation offer ready-to-use elements. Trying to match a designer's work with it will just end up in you overriding most of them. And that may result in unexpected style and bloated code.

2. Is Edge a mobile-first framework?

  No it is not.

3. What's changed from v1?

Major changes are:

- Grid and Tile now use Web Component.

- Visibility class is removed.

- Source Ordering (pull and push) is removed.