Edje is a faster way to write Sass by using shorthand syntaxes.
For example, we have a normal CSS below:
.page-thumbnail {
display: flex;
background-color: red;
border: 2px solid black;
padding: 1.5rem;
color: white;
}
With Edje framework, we can convert it like this:
// SCSS
.page-thumbnail {
@include h( d-flex bg-red b2-solid bc-black p1_5 c-white );
}
// or use Sass syntax (recommended)
.page-thumbnail
+h( d-flex bg-red b2-solid bc-black p1_5 c-white )
TABLE OF CONTENTS
-
Compact Codebase - Easier to skim through.
-
Act as Styleguide - Easier to limit what colors and values your team can use.
-
Flexible - Unlike Functional CSS, we can still write normal CSS, pseudo-selector, and media query.
-
Fun. Yeah I know this is subjective. But give it a try and you will understand how fresh this framework is.
One-time setup:
- Install Node JS.
- Open command prompt and install Sass compiler by running:
npm install -g node-sass
.
For play-testing:
- Clone this repository.
- Open command prompt in this folder and type
npm run sass
. It will compile the Sass files whenever there's changes. - Open
sass/app.sass
and try changing it. Checkcss/app.css
for the result.
For use in existing project:
- Clone this repository.
- Copy the whole
/sass
folder into your project. - If you want to use the
h
mixin in your existing Sass file, simply add@import "settings";
at the top.
We used the new CSS3 Grid for our grid system. It is divided into 12 columns just like most libraries out there.
The wrapper uses custom element <h-grid>
and the column size defined using the class large-[num]
and small-[num]
(Small column is applied when the screen is below 767px).
EXAMPLE
<h-grid>
<div class="large-8 small-6">
...
</div>
<div class="large-4 small-6">
...
</div>
</h-grid>
Result:
Read more about our Grid System
There are 4 breakpoints in Edje:
Name | Description | Default Size |
---|---|---|
xs |
Extra Small (Mobile) | 480px |
s |
Small | 767px |
m |
Medium | 960px |
l |
Large | 1120px |
We have prepared variables named $below-[size]
and $above-[size]
for use in @media
block like this:
.button
+h( p1 )
@media ($below-s)
+h( p0_5 )
@media ($above-m) and ($portrait)
+h( p1_5 )
$below-s
translates to(max-width:767px)
.$above-m
translates to(min-width:961px)
. We added 1px so it doesn't clash with$below-m
.$portrait
translates toorientation: portrait
. We have the variable$landscape
too!
CLEARFIX
.my-wrapper
+clearfix()
// Compiled
.my-wrapper::before,
.my-wrapper::after {
content: "";
display: table;
}
.my-wrapper::after {
clear: both;
}
INPUT PLACEHOLDER
input[type="text"]
+placeholder
Here are some websites that use this CSS framework:
- WordPress Tips - Advanced Tutorial
- Angela Chung - Fashion Designer
- Briliant Glass - Glassware Factory
- Fitnation - Premium Gym
- Istana Mie - Restaurant Franchise
- LTL School - Learn Mandarin in China
- GES13 - Refrigeration Distributor
- Paritama - Garden Architecture
- Pandarin - Mandarin Learning Center
- Pixel Studio - Web Designer
- Premiera Skincare
- 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.