UXScripts / patternbolt

A fine selection of SVG pattern background, packed in a single CSS or SCSS file. Add patterns just adding a class.

Home Page:http://buseca.github.io/patternbolt/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

PatternBolt

Patternbolt is a fine selection of SVG pattern background, packed in a single or SCSS (or CSS ) file.
Just put it in your project and add the right class to your elements. You can easily change pattern color and the pattern size changing the background css property, check the demo page to see how to do it. The pattern is added in a "after" element and your original element still be inalterate and ready for manipulations. As they are vectors they never pixelate, not even on retina screens ;) The pattern selection still be under development, to see the showcase, visit the demo page.

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

demo page: http://buseca.github.io/patternbolt/

Contributions are welcome! You can find me on twitter: @ruggeromotta

About

A fine selection of SVG pattern background, packed in a single CSS or SCSS file. Add patterns just adding a class.

http://buseca.github.io/patternbolt/

License:MIT License


Languages

Language:CSS 98.2%Language:JavaScript 1.8%