Skip to content

Instantly share code, notes, and snippets.

@MikeAM
MikeAM / gist:8995741
Created February 14, 2014 04:21
Using foundation gem
gem install foundation
foundation new myproject
foundation new myproject2 --libsass
@MikeAM
MikeAM / baseline-grid.scss
Last active May 12, 2017 17:58
Pure-CSS baseline grid with easily-customizable column count and baseline size (using Sass). No more uploading background images!
/* Sass Mixin that generates a Baseline Grid */
/* by: Mike Morrison, Soholaunch.com */
/* You don't have to leave this credit comment in, but it would be nice of you. */
// Set your grid dimensions here
$body-width: 960px;
$baseline: 22px;
@mixin baseline-grid {
$columns: 16;
$column-color: rgba(200,0,0,.2);
/* CSS gradient backgrounds that generate a Baseline Grid */
/* by: Mike Morrison, Soholaunch.com */
/* You don't have to leave this credit comment in, but it would be nice of you. */
/* Based on a 16col/22px baseline grid with 960px overall width */
.baseline-grid {
background-image: -webkit-linear-gradient(0deg, rgba(200,0,0,.2) 40px, transparent 40px),
-webkit-linear-gradient(top, rgba(0,0,0,0) 95%, rgba(56,255,255,.8) 100%);
background-image: -moz-linear-gradient(0deg, rgba(200,0,0,.2) 40px, transparent 40px),
-moz-linear-gradient(top, rgba(0,0,0,0) 95%, rgba(56,255,255,.8) 100%);