Emerald v1.2.2

lmc-eu.github.io/emerald/

Emerald is a pragmatic responsive grid system in LESS

• Responsive
• OOCSS
• BEM sytax
• Nestable
• Mobile-first
• Tablet-come-from
• Block-element based
• (= no floats, clears or rows)
• Configurable
• 1.2 kB (minified and gzipped)

How to use

Install via Bower

$ bower install emerald

Either include source LESS files into your project (recommended) or use compiled CSS.

// main.less
@import "emerald/less/emerald";

Browser support

Emerald grid system is tested in the latest versions of the major browsers on the major desktop and mobile platforms.

Support for vw units

Android browser does not support vw units. Load emerald.js at the bottom of the page:

<script src="js/emerald.js"></script>

Internet Explorer 8

Legacy browser are supported by grunt-legacssy.

The name

Please note that the name Emerald does not refer to the gemstone of that name but to a diamond cut "originally developed for the cutting of emeralds."

Does it really matter? No.

Credit

This grid system was inspired by:

• csswizardry/csswizardry-grids
• twbs/bootstrap
• yui/pure

Changelog

• v1.2.1 Fix .e-0 classes (fixes #4)
• v1.2.0 Code refactoring, fix typos, remove legacy and minimised CSSs
• v1.1.3 Fix a bug with .e-0 classes overwriting on higher devices
• v1.1.2 Fix a printing problem in FF
• v1.1.1 Hiding .grid__item in print
• v1.1.0 Add print styles (fixes #6)
• v1.0.0 Initial release, production ready