Emerald v1.2.2
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.
vw
units
Support for 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