Edge Framework

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>

Edge Grid - Large only

<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

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

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

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

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

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

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

Edge Wordpress

Our WordPress template requires Timber. It is a template engine that separates PHP and HTML into their own file, reducing the amount of "spaghetti" code.

CPT - Custom Post Type

Wordpress Custom Type

add_post_type( $name, <$args_array> )

Note: The $name must be one-word, singular, and titleized case. Example:

add_post_type( "Product" );
add_post_type( "Event" );

Optional arguments list:

icon - Icon names are listed here melchoyce.github.io/dashicons/. Exclude the "dashicons-".

taxonomy - The custom category term. The naming convention is the same as CPT's name.

columns - Array of columns shown in admin panel. Possible values are: title, author, date, thumbnail, and any custom field.

Example:

add_post_type( "Product" , array(
  "icon" => "cart",
  "taxonomy" => "Brand",
  "columns" => array("thumbnail", "title^", "price^", "date")
) );

Notice the ^ at the end of column's name? That indicates that the column is sortable.

COMPASS

Edge 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

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