A Sass mixin for generating grid backgrounds with ease
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.gitignore
LICENSE.txt
README.md
_gridlines.scss
bower.json
grid.png
sache.json

README.md

Gridlines

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.

940px

Installation

Install with Bower (bower install sass-gridlines) or manually download the _gridlines.scss file to your project’s directory.

Usage

  1. Import the Sass partial.

  2. Configure the mixin.

body {
  @include gridlines(60px, 20px, 5px, 24px);
}
  1. Save countless hours!

Arguments

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:

  1. $width-column
  2. $width-gutter
  3. $width-padding
  4. $line-height

Variables

  1. $gl-vendor-prefix: Sets the vendor prefix on linear-gradients. By default, this is webkit.