EDGE FRAMEWORK

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

It is based on Foundation by ZURB.

This is v2 docs, go here for v1.

BROWSER SUPPORT

All modern browsers:

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

INSTALLATION

PC

Install Ruby 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>

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

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>

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>

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>

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>

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>

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 add your own styling to the tile or ti element.

WORDPRESS

Our WordPress template requires Timber. It is a template engine that separates PHP and HTML into their own file.

So, download and include its plugin into your WordPress installation.

Custom Post Type

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

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

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

ADAPTIVE GRID

Normal Grid always expand to 100% at any screen size. This can be a nuisance for complex responsive site because we need to make sure nothing is misaligned on all size.

Adaptive Grid sets a fixed-width and shrink to the next width when the screen size reaches the breakpoint.

In setting, change the variable $adaptive to true.

You may add more breakpoints in the variable $adaptive-breakpoint. You can mix variable and number in the comma-separated list.

Example:

$adaptive-breakpoint: $medium-screen, 900px, $small-screen, 600px, $mini-screen;

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

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.

1. Is Edge a mobile-first framework?

No it is not.

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