EDGE FRAMEWORK

Edge is a light-weight responsive Sass framework. No gimmick, just the barebone to build modern website.

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

<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

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

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.

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

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

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

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

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:

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

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:

Static HTML

edge create html
Static PHP (under construction)

edge create php
Rails (run inside Rails project)

rails g edge:install
Coming soon: Wordpress, Sinatra, and Flask

COMPASS

Edge Compass

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

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.