Skip to content

Home

Jump to bottom
Henner R Setyono edited this page May 11, 2019 · 3 revisions

Edje Framework

TABLE OF CONTENTS

USEFUL LINKS

What is Edje?

Edje is a Functional Sass framework. Basically we provide many shorthand styles, so instead of writing padding: 1em, we just write p1.

Let's take a look at how we write CSS normally:

.page-thumbnail {
  background-color: red;
  border: 2px solid black;
  padding: 1em;
  color: white;
}

Using Edje framework, we will write it like this:

// Sass syntax
.page-thumbnail
  +h( bg-red  b2-solid  b-black  p1  c-white )

// or with SCSS syntax
.page-thumbnail {
  @include h( bg-red  b2  b-black50  p1  c-white );
}

Why use Edje?

Some benefits based on our experiences are:

  • Compact Codebase - Easier to skim through the code.

  • Fun. Yeah I know this is subjective. But if you enjoy writing CSS with Emmet, you are going to like this framework.

  • Instant Styleguide - All customizable variables are stored in _settings.scss, that automatically become a styleguide to your team.

How to Use Edje?

  1. Copy (1) sass/_settings.scss, (2) sass/edje/ directory, and (3) sass/edje.sass. Organize them to fit your project structure.
  2. Add @import "edje" at the top of the Sass files where you want to use Edje.
  3. Compile them. Done!

First time working with Sass? Here's a short guide on how to compile them.

Also this whole repository can actually be used as a simple boilerplate. Just delete /demo directory.

Note: If you want to use other framework like Bootstrap, no need to copy sass/edje.sass because that contains our Normalizer and Grid System.

Other Features

1. Grid System

We use the new CSS3 Grid. It is divided into 12 columns and you can define the portion using the class large-x and small-x.

Small column size is applied when the screen is below 767px (customizable in variable $size-s).

Read more about our Grid System

<h-grid>
  <div class="large-8 small-6">
    ...
  </div>
  <div class="large-4 small-6">
    ...
  </div>
</h-grid>

Result:

Edje Grid Sample

2. Media Query

We don't like using mixin for media query, instead we use variable within @media block like this:

.button
  +h( p1 )

  @media ($below-s)
    +h( p05 )

  @media ($above-m) and ($portrait)
    +h( p15 )

Those variables are defined in _settings.scss. Let me explain what those mean.

First thing first, there are 4 default breakpoints in Edje:

  • XS (extra xmall) is 480px
  • S (small) is 767px
  • M (medium) is 960px
  • and L (large) is 1120px.

So the variable $below-s means when the screen is below 767px or translated to max-width: 767px.

Same thing goes to $above-m which translated to min-width: 961px. For "$above", we add 1px to the breakpoint so it won't clash with "$below".

Read Media Query documentation here

What is the Difference with Functional CSS?

You might recognize Edje's concept from Functional CSS framework such as Tachyon. They write the shorthand syntax as HTML class like this:

<div class="bg-red b2 b-black50 p1 c-white">
  ...
</div>

It felt weird when I first saw that, but this article convinced me to give it a try. The idea is not having to write CSS and no need to think about class name.

But in practice, I still need to write CSS for Hover effect, Pseudoselector, Media query, and other advanced CSS like animation. I ended up going back and forth between my HTML and CSS which gets messy.

Edje framework solves that.

If you need Hover effect, Pseudoselector, or Media Query:

.button
  +h( bg-red p1 c-white )

  &:hover
    +h( bg-blue )

  @media ($below-s)
    +h( p05 ) // padding: 0.5rem

If you need advanced CSS, simply write it old-fashioned way:

.button
  +h( bg-red p1 c-white )

  animation: 1s fadeInUp both
  transform: rotate(5deg)

How to Compile Sass

  1. Install Node JS.

  2. Open CMD (or Terminal if you're using Mac) and run the command npm install -g node-sass.

  3. Open CMD inside your project directory and run the command npm run sass. That command is a shortcut we defined in package.json.

Credit

  • Mike CR for convincing me to give Functional CSS a try which turned into this framework.
  • Adam Moore - For making Tachyon CSS, which I used as basis of this framework.
Clone this wiki locally