Gridlines is a Sass mixin that generates image-less grid backgrounds with ease. This eliminates having to create and recreate a bitmap image every time you want to experiment with a new set of measurements or viewport dimensions.
Install with Bower (bower install sass-gridlines) or manually download the _gridlines.scss file to your project’s directory.
-
Import the Sass partial.
-
Configure the mixin.
body {
@include gridlines(60px, 20px, 5px, 24px);
}- Save countless hours!
The gridlines mixin takes four arguments. They are all optional—although, either $width-column or $line-height must be present—and in order, they are:
$width-column$width-gutter$width-padding$line-height
$gl-vendor-prefix: Sets the vendor prefix on linear-gradients. By default, this iswebkit.