Examples in documentation are built using shorthand framework but this library works with most of the frameworks including bootstrap.

There are many possible designs that can be built with css to use as patterns but I have made only few styles that are commonly seen in many award winning website.



Any background pattern works with two or more colors. I made with library with considering two color patterns only.

Colors

pattern.css is built with two colors only transparent and currentColor .



currentColor is the current active text color inside a element. To change the color just change the text color property.



To change the another color just change the background color, and background color will be visible through transparent color

Example

With shorthand framework

<div class="pattern-checks-sm bg-blue white">...</div>

With bootstrap framework

<div class="pattern-checks-sm bg-primary text-white">...</div>

Size

Each pattern is available in 4 sizes sm , md , lg , and xl

.pattern-diagonal-stripes-sm .pattern-diagonal-stripes-md .pattern-diagonal-stripes-lg .pattern-diagonal-stripes-xl

Class