PatternBolt

PatternBolt

Patternbolt is a fine selection of SVG pattern background,
packed in a single CSS or SCSS file.

select a pattern

class="ted pb-pattern o-lines-bold"

change the size

.ted:after { background-size: 20px ;}

select a color

.ted { background-color: #ffffff ;}

PatternBolt is a fine selection of SVG pattern background, packed in a single CSS or SASS (scss) file, just include the css file in your project and add a class to your element to insert a pattern.

You can change color palette changing the background-color of your element and the pattern size changing the background-size of the ':after' element. As the pattern is added in a ':after' level, you still can manipulate your DOM element as you want, adding a bg-color, a bg-picture, a gradient, or both.
As they are vectors they never pixelate, not even on retina screens ;)

PS: The pattern selection still be under development, go to the bottom to see the showcase.

SVG patterns over random picture:

(yes, you can use a pattern over images, with both the 'img' tag or the 'background-image' property)

All the available patterns:

(and more coming soon)
o-lines-light
o-lines-medium
o-lines-bold
h-lines-light
h-lines-medium
h-lines-bold
cross-light
cross-medium
cross-bold
cross-light-thin
cross-medium-thin
cross-bold-thin
buseca-1
candy-light
candy-medium
candy-bold