Patterner

Patterner is a compass extension that contains a library of customizable patterns for use as background images. Images are outputted as base64 data url png using the chunky_png library. The png images outputted are transparent so where there is no pattern the background color will show through, the patterns themselves can also be transparent when setting the color of the pattern using an hsla or rgba color. You can see a quick demo of the patterns here

Installation

From the command like

(sudo) gem install patterner --pre

Adding to an existing compass project

#Edit the project configuration file
require 'patterner'

#From command line
compass install patterner

Creating a new project based on patterner

#From command line
compass create <project_name> -r patterner --using patterner

Patterner usage

Patterner currently has a library of 8 customizable patterns (checkers, crosshatch, diamond, dots [normal and offset], grids [grid and blueprint], plus, stripes [horizontal, vertical, forwards, and backwards], and zigzag)

To use a pattern you call the pattern function on a css selector's background property and declare what pattern you would like to use and the color of the pattern. Below is an example of creating checker pattern for a div

div {
	background: pattern(checker, black);
}

Most patterns have optional arguments that let you customize the pattern including the size, spacing, and some have an optional secondary color. Below is an example of calling the checker pattern with the optional arguments

#checker pattern with optional arguments: pattern(checker, color, size of squares, optional second color)

div {
	background: pattern(checker, #333, 50, #ccc);
}

Full pattern argument listings

Only pattern style and color are required, all other arguments are optional and used for customizing the pattern

Checker

pattern(checker, color, square size, second color)	

Crosshatch

pattern(crosshatch, line color, line size, secondary line color)

Diamond

pattern(diamond, color, height, width)

Dots

# Normal
pattern(dots, color, dot size, dot spacing)

# Offset
pattern(offset-dots, color, dot size, dot spacing)

Grid

# Grid
pattern(grid, color, size)

# Blueprint
pattern(blueprint, color, size)

Plus

# Plus
pattern(plus, color, size, spacing)

Stripes

# Horizontal
pattern(horizontal-stripe, color, stripe width, spacing) 
- or -
pattern(h-stripe, color, stripe width, spacing)

# Vertical
pattern(vertical-stripe, color, stripe width, spacing) 
- or -
pattern(v-stripe, color, stripe width, spacing)

# Forward diagonal
pattern(forward-stripe, color, stripe width, spacing) 
- or -
pattern(f-stripe, color, stripe width, spacing)

# Backward diagonal
pattern(backward-stripe, color, stripe width, spacing) 
- or -
pattern(b-stripe, color, stripe width, spacing)

Zigzag

# Zigzag
pattern(zigzag, height, width, spacing)