Lightweight and nestable grid system.
CSS
Switch branches/tags
Nothing to show
Clone or download
Latest commit 0b404c2 May 24, 2016
Permalink
Failed to load latest commit information.
grid.css shorten file names Dec 4, 2013
grid.min.css shorten file names Dec 4, 2013
grid.scss Update grid.scss Dec 14, 2013
readme.md update readme content May 24, 2016

readme.md

Lan Grid System Logo

Lan Grid System

Lightweight & Nestable

Website: http://joshnh.com/langrid

Live demo: http://joshnh.com/grid-demo

Blog post: http://joshnh.com/weblog/creating-lightweight-grid-system/


Usage:
  1. Set an element as a container by using the grid class.
  2. Declare columns using BEM syntax (grid__col--{width}).
  3. You're all done!

Notes:
  • You need to use block-level elements when declaring containers and columns.
  • White space between columns needs to be commented out in your markup.
  • To nest columns, simply use the grid class on each parent column.
  • Keep your grid abstracted by using dedicated elements to avoid style conflicts.
  • Read more about this grid system here.

Example:
<div class="grid">
	<div class="grid  grid__col--67">
		<div class="grid__col--50">
			…
		</div><!--
	 --><div class="grid__col--50">
			…
		</div>
	</div><!--
 --><div class="grid__col--33">
		…
	</div>
</div>