Emerald v1.2.0

Emerald is a responsive grid system written in LESS

The philosophy

Columns and gutters are the same fixed width

Designers love to work with fixed sizes and you will too.

By default Emerald uses for both column and gutter widths 6vw (what is this?) on mobile and 20px on tablets and above. In result, a line can accomodate 16 .e-1 columns on tablet (or one big .e-16 - you know how it works, right?), 8 on mobile, and 25 on desktop.

Mobile-first responsive choreography with OOCSS and BEM

So this element is supposed to be a grid item? Tell it to Emerald by adding .grid__item class.

It should occupy 8 columns on tablet, 12 on desktop? And it should be pushed a little bit to the right on mobile and onward? OK, .e-8 .e-12--desk .e-push-2--palm classes will do the trick.

Want the .grid to be centered? Just add .grid--center class to it. Want it to be centered but not on desktop? Just add .grid--center .grid--left--desk classes to it.

Heavy configurability

Any number you will see (e.g. the width of a column on desktop) can be easily changed at one predictable place - variables.less. Every device mode has its own set of varibles, that means you can have different measurements on different devices (just be a little cautious).

Independence & flexibility

Emerald is a grid system. Sure, a great one, but just a part of the whole design. Therefore it is important it plays well with the others.

Most frameworks will not have a problem at all. For example, it is extremely simple to replace Bootstrap's grid with Emerald - yet continue to use the rest.

It is your job to create a layout. It is Emarald's job to be so flexible to let you do that. This grid system will not push you any particular way.

Rigorousness, i.e., scrupulous accurateness

Or you may call it consistency and desire for high quality.

Every line of code is well-thought-out. No compromises were made, no out-of-scope features added.

As pure as pure mathematics. And equally beautiful.

Grid showcase


























Grid modifications

Default (.grid--obv.grid--left.grid--top)












More documentation to come

We are developing a new site with a Getting Started section, description of all features, and a lot of examples. Encourige us with a tweet (we also accept questions and critisism).