Baseline Grid

dabblet.css

/**
 * Baseline Grid
 * 
 * A Baseline Grid in the browser to aid with column-based layouts and vertical rhythm.
 * 
 * Built entirely with CSS3 gradient patterns, set in em units.
 * Scales with users' default text size.
 * 
 * Combines the concepts outlined here:
 * http://www.teehanlax.com/blog/designing-faster-with-a-baseline-grid/
 * http://lea.verou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/
 * http://www.alistapart.com/articles/fluidgrids/
 * 
 * Inspired by:
 * http://dabblet.com/gist/1560717
 */
 
html {
	background-color: white;
	background-image: linear-gradient(transparent 50%, rgba(255,0,0,0.1) 50%), 
		linear-gradient(0, white 12.5%, #FDD 12.5%, #FDD 37.5%, #FEE 37.5%, #FEE 62.5%, #FDD 62.5%, #FDD 87.5%, white 87.5%);
	background-size:5em 0.75em;
	background-position: top center;
}

settings.json

{"view":"split","seethrough":"","prefixfree":"1","page":"css"}