Patternbolt is a fine selection of SVG pattern background, packed in a single CSS or SCSS file. Just put it in your project and add the right class to your elements. You can change pattern color changing the color variables and the pattern size changing the background-size. The pattern is added in a different level, so you can manipulate your DOM element as you want, adding a background picture, a gradient, or both. As they are vectors they never pixelate, not even on retina screens ;) The pattern selection still be under development and will be updated constantly.
HOW TO USE IT:
Patternbolt is a sort of library of inline SVG pattern, to use one of the pattern as background you have to include de CSS file in your webpage.
To do it just add this line in the <head> section:
<link rel="stylesheet" href="css/patternbolt.css" />
after that you are able to insert pattern in your markup justin adding the right class to an element. Here come the list of CSS classes to use the pattern in the library:
.buseca-1
.h-lines-bold
.h-lines-medium
.h-lines-light
.o-lines-bold
.o-lines-medium
.o-lines-light
.cross-bold
.cross-medium
.cross-light
.cross-bold-thin
.cross-medium-thin
.cross-light-thin
other patterns and other classes will be added soon.
demo page: http://buseca.github.io/patternbolt/
Contributions are welcome! You can find me on twitter: @ruggeromotta