Skip to content
CSS only library to fill empty background with beautiful patterns.
HTML CSS
Branch: master
Clone or download

Latest commit

Latest commit cc010b9 Apr 18, 2020

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist v1.0.0 Apr 18, 2020
.gitignore v1.0.0 Apr 18, 2020
README.MD v1.0.0 Apr 18, 2020
index.html v1.0.0 Apr 18, 2020
package-lock.json v1.0.0 Apr 18, 2020
package.json v1.0.0 Apr 18, 2020
pattern.scss v1.0.0 Apr 18, 2020
preview.jpg v1.0.0 Apr 18, 2020

README.MD

pattern.css

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

See the full documentation

Preview

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

You can’t perform that action at this time.