An opinionated responsive grid system written in LESS.

Mobile-first responsive choreography

It is your job to create a layout. It is Emarald's job to be so flexible to let you do that. Emerald features globally-sized columns which are truly nestable. It is inline-block element based, meaning there are no floats, clears or rows.

Number of columns change by device. By default a line can accommodate 8 columns on mobile, 16 on tablet, and 25 on desktop. Of course, any number can be easily changed. Strict OOCSS and BEM approach ensures this grid system plays well with the others.

Quick start