Emerald is an opinionated responsive grid system written in LESS
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
js
less
.gitignore
Gruntfile.js
LICENSE
README.md
bower.json
package.json

README.md

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:

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

Bitdeli Badge Dependency Status