Emerald is a responsive grid system written in LESS
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.
So this element is supposed to be a grid item? Tell it to Emerald by adding
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.
.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.
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).
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.
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.
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).