What is Patternbolt?
Patternbolt is a fine selection of SVG pattern backgrounds, packed in a single or SCSS (or CSS) file.
The pattern is added in the ::after element and your original DOM's element still be inalterate and ready for manipulations.
As .svg they weigh much less than .png or .jpg and they are also really easy to manipulate by CSS rules. As they are vectors they never pixelate, not even on a 4k display.
As .svg they weigh much less than .png or .jpg and they are also really easy to manipulate by CSS rules. As they are vectors they never pixelate, not even on a 4k display.
Are you a Designer?
The pattern selection still be under development, if you want to contribute to the project, you can vote the patterns proposals on the Trello board with just a click.
Of course you can also submit your own pattern just requesting an invitation for the board. Just a small raster preview of the pattern is needed for the vote, but it's important for the original version of the pattern to be vector graphics (.svg, .ai, .pdf,...) otherwise it will not be compatible with PatternBolt. To request a board invitation write me a mail at ruggero.motta at gmail dot com, or tweet at my Twitter account, I'll reply you quickly.
If you can code you can also join the Github Repository and make pull requests: contributions are really appreciated.
Of course you can also submit your own pattern just requesting an invitation for the board. Just a small raster preview of the pattern is needed for the vote, but it's important for the original version of the pattern to be vector graphics (.svg, .ai, .pdf,...) otherwise it will not be compatible with PatternBolt. To request a board invitation write me a mail at ruggero.motta at gmail dot com, or tweet at my Twitter account, I'll reply you quickly.
If you can code you can also join the Github Repository and make pull requests: contributions are really appreciated.
Example on images
PatternBolt can also be used as overlay on image:
How to use it?
Detailed instruction are in the SCSS file, but here are the 2 easy steps:
1 - Add the Scss file in your main Scss or Sass file:
2 - Use the basic mixin to activate a pattern on an spacific element:
If you want to be able to maniuplate sizes, colors and opacity, use the complete mixin:
1 - Add the Scss file in your main Scss or Sass file:
@import '../patternbolt.scss';
2 - Use the basic mixin to activate a pattern on an spacific element:
.item {
@include pb('china-a');
}
If you want to be able to maniuplate sizes, colors and opacity, use the complete mixin:
.item {
@include pb('china-a', 25px, #f00, #0f0, 0.5, 'none');
}
Credits
- lines-45-a by Ruggero Motta
- lines-45-b by Ruggero Motta
- lines-45-c by Ruggero Motta
- lines-a by Ruggero Motta
- lines-b by Ruggero Motta
- lines-c by Ruggero Motta
- china-a by Ruggero Motta
- feather by Martin Iturrieta
- candy-a by Ruggero Motta
- candy-b by Ruggero Motta
- cross-a by Ruggero Motta
- cross-b by Ruggero Motta
- cross-c by Ruggero Motta
- cross-thin-a by Ruggero Motta
- cross-thin-b by Ruggero Motta
- cross-thin-c by Ruggero Motta