A concept which combines Harry Roberts "MindBEMding" with a collection of reusable SCSS helper.

What?

You use emwaw.me to

The Bad Example

┌∩┐(◣_◢)┌∩┐

The Bad Example shows how you shouldn't use SCSS variables, extensions and mixins inside your project.

You want to use a SCSS variable to save the background-color of your body? You probably end up with a variable name like this...

$body-background-color: #fff;
// OR  
$body-color: #fff;
// OR  
$my-color-1: #fff;
// OR  
$background: #fff;

So you mastered to control the background-color of your body, but what happens if you want to use the same color on an anchor?

body {
  background: $body-background-color;
}

a {
  color: darken($body-background-color, 20%);
}

This makes no sense at all. But I'm trying to fix that with emwaw.me

The Basic Concept

__̴ı̴̴̡̡̡ ̡͌l̡̡̡ ̡͌l̡*̡̡ ̴̡ı̴̴̡ ̡̡͡|̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡ı̴̡̡ ̡͌l̡̡̡̡.___

emwaw.me gives you predefined names based on the greek alphabet, so that you can put your values inside them:

//  Colors 
$emw--color-alpha: #fff;
$emw--color-beta: darken($emw--color-alpha, 30%);
$emw--color-gamma: #cc0;

// Units
$emw--unit-alpha: 1em;
$emw--unit-beta: 1.5em;
$emw--unit-gamma: 10%;

// Lists
$emw--list-alpha: $emw--color-alpha, $emw--color-beta 40%;

// Elements (class)
.emw__element-alpha {
  margin-bottom: $emw--unit-epsilon / 4 !important;
  color: $emw--color-delta;
}

// Modifier (extension)
%emw__modifier-alpha {
  margin: $emw--unit-gamma / 2 $emw--unit-gamma;
}

%emw__modifier-beta {
  margin-top: $emw--unit-beta;
  margin-bottom: $emw--unit-alpha;
}

// Mixins
@mixin emw__mixin-alpha($alpha, $beta) {
  padding-left: $alpha;
  padding-right: $alpha;

  @include breakpoint(medium) {
    padding-left: $beta;
    padding-right: $beta;
  }
}

Only use the project specific $emw SCSS helper from now on.

body {
  @extend %emw__modifier-alpha;
  
  font: $emw--unit-alpha sans-serif;
  color: $emw--color-gamma;
  
  @include emw__mixin-alpha($emw--unit-beta, $emw--unit-alpha);
  @include background(
    linear-gradient(to bottom, $emw--list-alpha)
  );
}

h1 {
  @extend %emw__modifier-beta;

  font-size: $emw--unit-beta * 2;
  color: $emw--color-beta;
}

a {
  color: $emw--color-beta;
}

footer {
  padding-top: $emw--unit-gamma;
  border-top: $emw--unit-alpha solid darken($emw--color-alpha, 20%);
}

The Extended Concept

(。◕‿◕。)

Instead of using $emw inside our project, we declare individual names that make sense. But first of all: let's create our colors and units.

// Colors
$emw--color-alpha: #fff;
$emw--color-beta: darken($emw--color-alpha, 30%);

// Units
$emw--unit-alpha: 1em;

And now we add our project specific SCSS variables (with a meaning ;D).

$background-color: $emw--color-alpha;
$link-color: $emw--color-beta;
$footer-unit-alpha: $emw--unit-alpha;
$border-color: $emw--color-beta;

╚(ಠ_ಠ)=┐

body {
  background-color: $background-color;
}

a {
  color: $link-color;
}

footer {
  padding-top: $footer-unit-alpha;
  border-top: $footer-unit-alpha / 2 solid $border-color;
}

How to add this to your project?

Get the parts of emwaw.me that are useful to you, put them inside a _emwaw.me.scss and import that file into your SCSS.

@import "emwaw.me";

Generate your SCSS helper!

龴ↀ◡ↀ龴

/** 
 * Colors 
 */
$emw--color-alpha: 0;
$emw--color-beta: 0;
$emw--color-gamma: 0;
$emw--color-delta: 0;



/** 
 * Units 
 */
$emw--unit-alpha: 0;
$emw--unit-beta: 0;
$emw--unit-gamma: 0;
$emw--unit-delta: 0;



/** 
 * Lists 
 */
$emw--list-alpha: 0;
$emw--list-beta: 0;
$emw--list-gamma: 0;
$emw--list-delta: 0;



/** 
 * Elements 
 */
.emw__element-alpha {}
.emw__element-beta {}
.emw__element-gamma {}
.emw__element-delta {}



/** 
 * Modifier 
 */
%emw__modifier-alpha {}
%emw__modifier-beta {}
%emw__modifier-gamma {}
%emw__modifier-delta {}



/** 
 * Mixins 
 */
@mixin emw__mixin-alpha() {}
@mixin emw__mixin-beta() {}
@mixin emw__mixin-gamma() {}
@mixin emw__mixin-delta() {}

Demos

Alien Warpgate

This older example of the emwaw.me concept creates an infinite CSS animation.

3D Music Note

Lucas Bonomi improved his Music Note with emwaw.me and created the 3D Music Note!

Pricing Table

A responsive Webs Pricing Table with CSS transformations.

interweb★s

The logo of the interweb★s.

Fork me on GitHub