pattern.css

CSS only library to fill your empty background with beautiful patterns.

See the full documentation

Features

• Only CSS. No JavaScript!
• < 1KB minified and gzipped!
• Supports all modern browsers
• Built Using SCSS.
• Full color control.

Installation

via npm

npm install pattern.css

via cdn

<link href="https://unpkg.com/pattern.css" rel="stylesheet">

download

<link href="dist/pattern.min.css" rel="stylesheet">

Usage

pattern.css can be used with any css framework.

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>

Pattern Classes

|small|medium|large|extra large| |--- |--- |--- |--- | |pattern-checks-sm|pattern-checks-md|pattern-checks-lg|pattern-checks-xl| |pattern-grid-sm|pattern-grid-md|pattern-grid-lg|pattern-grid-xl| |pattern-dots-sm|pattern-dots-md|pattern-dots-lg|pattern-dots-xl| |pattern-cross-dots-sm|pattern-cross-dots-md|pattern-cross-dots-lg|pattern-cross-dots-xl| |pattern-diagonal-lines-sm|pattern-diagonal-lines-md|pattern-diagonal-lines-lg|pattern-diagonal-lines-xl| |pattern-horizontal-lines-sm|pattern-horizontal-lines-md|pattern-horizontal-lines-lg|pattern-horizontal-lines-xl| |pattern-vertical-lines-sm|pattern-vertical-lines-md|pattern-vertical-lines-lg|pattern-vertical-lines-xl| |pattern-diagonal-stripes-sm|pattern-diagonal-stripes-md|pattern-diagonal-stripes-lg|pattern-diagonal-stripes-xl| |pattern-horizontal-stripes-sm|pattern-horizontal-stripes-md|pattern-horizontal-stripes-lg|pattern-horizontal-stripes-xl| |pattern-vertical-stripes-sm|pattern-vertical-stripes-md|pattern-vertical-stripes-lg|pattern-vertical-stripes-xl| |pattern-triangles-sm|pattern-triangles-md|pattern-triangles-lg|pattern-triangles-xl| |pattern-zigzag-sm|pattern-zigzag-md|pattern-zigzag-lg|pattern-zigzag-xl|

License

MIT