v1.0.0

.gitignore

@@ -0,0 +1,2 @@
+.DS_Store
+node_modules

README.MD

@@ -0,0 +1,72 @@
+# pattern.css
+
+CSS only library to fill your empty background with beautiful patterns.
+
+See the full [documentation](https://bansal.io/pattern-css)
+
+![Preview](preview.jpg)
+
+## Features
+
+- Only CSS. No JavaScript!
+- < 1KB minified and gzipped!
+- Supports all modern browsers
+- Built Using SCSS.
+- Full color control.
+
+## Installation
+
+### via npm
+
+```bash
+npm install pattern.css
+```
+
+### via cdn
+
+```html
+<link href="https://unpkg.com/pattern.css" rel="stylesheet">
+```
+
+### download
+
+```html
+<link href="dist/pattern.min.css" rel="stylesheet">
+```
+
+## Usage
+
+pattern.css can be used with any css framework.
+
+### With shorthand framework
+
+```html
+<div class="pattern-checks-sm bg-blue white">...</div>
+```
+
+### With bootstrap framework
+
+```html
+<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

dist/pattern.css

@@ -0,0 +1,282 @@
+.pattern-checks-sm {
+  background-image: repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor), repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor);
+  background-position: 0 0, 10px 10px;
+  background-size: calc(2 * 10px) calc(2 * 10px);
+}
+
+.pattern-checks-md {
+  background-image: repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor), repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor);
+  background-position: 0 0, 25px 25px;
+  background-size: calc(2 * 25px) calc(2 * 25px);
+}
+
+.pattern-checks-lg {
+  background-image: repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor), repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor);
+  background-position: 0 0, 50px 50px;
+  background-size: calc(2 * 50px) calc(2 * 50px);
+}
+
+.pattern-checks-xl {
+  background-image: repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor), repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor);
+  background-position: 0 0, 100px 100px;
+  background-size: calc(2 * 100px) calc(2 * 100px);
+}
+
+.pattern-grid-sm {
+  background-image: linear-gradient(currentColor 1px, transparent 1px), linear-gradient(to right, currentColor 1px, transparent 1px);
+  background-size: 10px 10px;
+}
+
+.pattern-grid-md {
+  background-image: linear-gradient(currentColor 1px, transparent 1px), linear-gradient(to right, currentColor 1px, transparent 1px);
+  background-size: 25px 25px;
+}
+
+.pattern-grid-lg {
+  background-image: linear-gradient(currentColor 1px, transparent 1px), linear-gradient(to right, currentColor 1px, transparent 1px);
+  background-size: 50px 50px;
+}
+
+.pattern-grid-xl {
+  background-image: linear-gradient(currentColor 1px, transparent 1px), linear-gradient(to right, currentColor 1px, transparent 1px);
+  background-size: 100px 100px;
+}
+
+.pattern-dots-sm {
+  background-image: radial-gradient(currentColor 0.5px, transparent 0.5px);
+  background-size: calc(10 * 0.5px) calc(10 * 0.5px);
+}
+
+.pattern-dots-md {
+  background-image: radial-gradient(currentColor 1px, transparent 1px);
+  background-size: calc(10 * 1px) calc(10 * 1px);
+}
+
+.pattern-dots-lg {
+  background-image: radial-gradient(currentColor 1.5px, transparent 1.5px);
+  background-size: calc(10 * 1.5px) calc(10 * 1.5px);
+}
+
+.pattern-dots-xl {
+  background-image: radial-gradient(currentColor 2px, transparent 2px);
+  background-size: calc(10 * 2px) calc(10 * 2px);
+}
+
+.pattern-cross-dots-sm {
+  background-image: radial-gradient(currentColor 0.5px, transparent 0.5px), radial-gradient(currentColor 0.5px, transparent 0.5px);
+  background-size: calc(20 * 0.5px) calc(20 * 0.5px);
+  background-position: 0 0, calc(10 * 0.5px) calc(10 * 0.5px);
+}
+
+.pattern-cross-dots-md {
+  background-image: radial-gradient(currentColor 1px, transparent 1px), radial-gradient(currentColor 1px, transparent 1px);
+  background-size: calc(20 * 1px) calc(20 * 1px);
+  background-position: 0 0, calc(10 * 1px) calc(10 * 1px);
+}
+
+.pattern-cross-dots-lg {
+  background-image: radial-gradient(currentColor 1.5px, transparent 1.5px), radial-gradient(currentColor 1.5px, transparent 1.5px);
+  background-size: calc(20 * 1.5px) calc(20 * 1.5px);
+  background-position: 0 0, calc(10 * 1.5px) calc(10 * 1.5px);
+}
+
+.pattern-cross-dots-xl {
+  background-image: radial-gradient(currentColor 2px, transparent 2px), radial-gradient(currentColor 2px, transparent 2px);
+  background-size: calc(20 * 2px) calc(20 * 2px);
+  background-position: 0 0, calc(10 * 2px) calc(10 * 2px);
+}
+
+.pattern-vertical-lines-sm {
+  background-image: repeating-linear-gradient(to right, currentColor, currentColor 1px, transparent 1px, transparent);
+  background-size: 10px 10px;
+}
+
+.pattern-horizontal-lines-sm {
+  background-image: repeating-linear-gradient(0deg, currentColor, currentColor 1px, transparent 1px, transparent);
+  background-size: 10px 10px;
+}
+
+.pattern-diagonal-lines-sm {
+  background-image: repeating-linear-gradient(45deg, currentColor 0, currentColor 1px, transparent 0, transparent 50%);
+  background-size: 10px 10px;
+}
+
+.pattern-vertical-lines-md {
+  background-image: repeating-linear-gradient(to right, currentColor, currentColor 1px, transparent 1px, transparent);
+  background-size: 25px 25px;
+}
+
+.pattern-horizontal-lines-md {
+  background-image: repeating-linear-gradient(0deg, currentColor, currentColor 1px, transparent 1px, transparent);
+  background-size: 25px 25px;
+}
+
+.pattern-diagonal-lines-md {
+  background-image: repeating-linear-gradient(45deg, currentColor 0, currentColor 1px, transparent 0, transparent 50%);
+  background-size: 25px 25px;
+}
+
+.pattern-vertical-lines-lg {
+  background-image: repeating-linear-gradient(to right, currentColor, currentColor 1px, transparent 1px, transparent);
+  background-size: 50px 50px;
+}
+
+.pattern-horizontal-lines-lg {
+  background-image: repeating-linear-gradient(0deg, currentColor, currentColor 1px, transparent 1px, transparent);
+  background-size: 50px 50px;
+}
+
+.pattern-diagonal-lines-lg {
+  background-image: repeating-linear-gradient(45deg, currentColor 0, currentColor 1px, transparent 0, transparent 50%);
+  background-size: 50px 50px;
+}
+
+.pattern-vertical-lines-xl {
+  background-image: repeating-linear-gradient(to right, currentColor, currentColor 1px, transparent 1px, transparent);
+  background-size: 100px 100px;
+}
+
+.pattern-horizontal-lines-xl {
+  background-image: repeating-linear-gradient(0deg, currentColor, currentColor 1px, transparent 1px, transparent);
+  background-size: 100px 100px;
+}
+
+.pattern-diagonal-lines-xl {
+  background-image: repeating-linear-gradient(45deg, currentColor 0, currentColor 1px, transparent 0, transparent 50%);
+  background-size: 100px 100px;
+}
+
+.pattern-vertical-stripes-sm {
+  background-image: linear-gradient(90deg, transparent 50%, currentColor 50%);
+  background-size: 10px 10px;
+}
+
+.pattern-horizontal-stripes-sm {
+  background-image: linear-gradient(0deg, transparent 50%, currentColor 50%);
+  background-size: 10px 10px;
+}
+
+.pattern-diagonal-stripes-sm {
+  background: repeating-linear-gradient(45deg, transparent, transparent 10px, currentColor 10px, currentColor calc(2 * 10px));
+}
+
+.pattern-vertical-stripes-md {
+  background-image: linear-gradient(90deg, transparent 50%, currentColor 50%);
+  background-size: 25px 25px;
+}
+
+.pattern-horizontal-stripes-md {
+  background-image: linear-gradient(0deg, transparent 50%, currentColor 50%);
+  background-size: 25px 25px;
+}
+
+.pattern-diagonal-stripes-md {
+  background: repeating-linear-gradient(45deg, transparent, transparent 25px, currentColor 25px, currentColor calc(2 * 25px));
+}
+
+.pattern-vertical-stripes-lg {
+  background-image: linear-gradient(90deg, transparent 50%, currentColor 50%);
+  background-size: 50px 50px;
+}
+
+.pattern-horizontal-stripes-lg {
+  background-image: linear-gradient(0deg, transparent 50%, currentColor 50%);
+  background-size: 50px 50px;
+}
+
+.pattern-diagonal-stripes-lg {
+  background: repeating-linear-gradient(45deg, transparent, transparent 50px, currentColor 50px, currentColor calc(2 * 50px));
+}
+
+.pattern-vertical-stripes-xl {
+  background-image: linear-gradient(90deg, transparent 50%, currentColor 50%);
+  background-size: 100px 100px;
+}
+
+.pattern-horizontal-stripes-xl {
+  background-image: linear-gradient(0deg, transparent 50%, currentColor 50%);
+  background-size: 100px 100px;
+}
+
+.pattern-diagonal-stripes-xl {
+  background: repeating-linear-gradient(45deg, transparent, transparent 100px, currentColor 100px, currentColor calc(2 * 100px));
+}
+
+.pattern-zigzag-sm {
+  background: linear-gradient(135deg, currentColor 25%, transparent 25%) -10px 0, linear-gradient(225deg, currentColor 25%, transparent 25%) -10px 0, linear-gradient(315deg, currentColor 25%, transparent 25%), linear-gradient(45deg, currentColor 25%, transparent 25%);
+  background-size: calc(2 * 10px) calc(2 * 10px);
+}
+
+.pattern-zigzag-md {
+  background: linear-gradient(135deg, currentColor 25%, transparent 25%) -25px 0, linear-gradient(225deg, currentColor 25%, transparent 25%) -25px 0, linear-gradient(315deg, currentColor 25%, transparent 25%), linear-gradient(45deg, currentColor 25%, transparent 25%);
+  background-size: calc(2 * 25px) calc(2 * 25px);
+}
+
+.pattern-zigzag-lg {
+  background: linear-gradient(135deg, currentColor 25%, transparent 25%) -50px 0, linear-gradient(225deg, currentColor 25%, transparent 25%) -50px 0, linear-gradient(315deg, currentColor 25%, transparent 25%), linear-gradient(45deg, currentColor 25%, transparent 25%);
+  background-size: calc(2 * 50px) calc(2 * 50px);
+}
+
+.pattern-zigzag-xl {
+  background: linear-gradient(135deg, currentColor 25%, transparent 25%) -100px 0, linear-gradient(225deg, currentColor 25%, transparent 25%) -100px 0, linear-gradient(315deg, currentColor 25%, transparent 25%), linear-gradient(45deg, currentColor 25%, transparent 25%);
+  background-size: calc(2 * 100px) calc(2 * 100px);
+}
+
+.pattern-triangles-sm {
+  background-image: linear-gradient(45deg, currentColor 50%, transparent 50%);
+  background-size: 10px 10px;
+}
+
+.pattern-triangles-md {
+  background-image: linear-gradient(45deg, currentColor 50%, transparent 50%);
+  background-size: 25px 25px;
+}
+
+.pattern-triangles-lg {
+  background-image: linear-gradient(45deg, currentColor 50%, transparent 50%);
+  background-size: 50px 50px;
+}
+
+.pattern-triangles-xl {
+  background-image: linear-gradient(45deg, currentColor 50%, transparent 50%);
+  background-size: 100px 100px;
+}
+
+.text-pattern {
+  -webkit-background-clip: text;
+          background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.pattern-w-sm {
+  width: 10px;
+}
+
+.pattern-h-sm {
+  height: 10px;
+}
+
+.pattern-w-md {
+  width: 25px;
+}
+
+.pattern-h-md {
+  height: 25px;
+}
+
+.pattern-w-lg {
+  width: 50px;
+}
+
+.pattern-h-lg {
+  height: 50px;
+}
+
+.pattern-w-xl {
+  width: 100px;
+}
+
+.pattern-h-xl {
+  height: 100px;
+}
+/*# sourceMappingURL=pattern.css.map */

dist/pattern.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../pattern.scss","pattern.css"],"names":[],"mappings":"AAiCQ;EACI,4PAEwH;EACxH,mCACiB;EACjB,8CAAsD;ACnClE;;AD6BQ;EACI,4PAEwH;EACxH,mCACiB;EACjB,8CAAsD;AC7BlE;;ADuBQ;EACI,4PAEwH;EACxH,mCACiB;EACjB,8CAAsD;ACvBlE;;ADiBQ;EACI,4PAEwH;EACxH,qCACiB;EACjB,gDAAsD;ACjBlE;;AD2BQ;EACI,kIAEgE;EAChE,0BAAkC;AC1B9C;;ADsBQ;EACI,kIAEgE;EAChE,0BAAkC;ACrB9C;;ADiBQ;EACI,kIAEgE;EAChE,0BAAkC;AChB9C;;ADYQ;EACI,kIAEgE;EAChE,4BAAkC;ACX9C;;ADsBQ;EACI,wEAA8E;EAC9E,kDAAwD;ACnBpE;;ADiBQ;EACI,oEAA8E;EAC9E,8CAAwD;ACdpE;;ADYQ;EACI,wEAA8E;EAC9E,kDAAwD;ACTpE;;ADOQ;EACI,oEAA8E;EAC9E,8CAAwD;ACJpE;;ADcQ;EACI,gIAC4D;EAC5D,kDAAwD;EACxD,2DACuC;ACbnD;;ADQQ;EACI,wHAC4D;EAC5D,8CAAwD;EACxD,uDACuC;ACPnD;;ADEQ;EACI,gIAC4D;EAC5D,kDAAwD;EACxD,2DACuC;ACDnD;;ADJQ;EACI,wHAC4D;EAC5D,8CAAwD;EACxD,uDACuC;ACKnD;;ADKQ;EACI,mHAIoB;EACpB,0BAAkC;ACN9C;;ADYQ;EACI,+GAIoB;EACpB,0BAAkC;ACb9C;;ADmBQ;EACI,oHAIwB;EACxB,0BAAkC;ACpB9C;;ADVQ;EACI,mHAIoB;EACpB,0BAAkC;ACS9C;;ADHQ;EACI,+GAIoB;EACpB,0BAAkC;ACE9C;;ADIQ;EACI,oHAIwB;EACxB,0BAAkC;ACL9C;;ADzBQ;EACI,mHAIoB;EACpB,0BAAkC;ACwB9C;;ADlBQ;EACI,+GAIoB;EACpB,0BAAkC;ACiB9C;;ADXQ;EACI,oHAIwB;EACxB,0BAAkC;ACU9C;;ADxCQ;EACI,mHAIoB;EACpB,4BAAkC;ACuC9C;;ADjCQ;EACI,+GAIoB;EACpB,4BAAkC;ACgC9C;;AD1BQ;EACI,oHAIwB;EACxB,4BAAkC;ACyB9C;;ADdQ;EACI,2EAA2E;EAC3E,0BAAkC;ACiB9C;;ADXQ;EACI,0EAA0E;EAC1E,0BAAkC;ACc9C;;ADRQ;EACI,2HAIoC;ACOhD;;AD5BQ;EACI,2EAA2E;EAC3E,0BAAkC;AC+B9C;;ADzBQ;EACI,0EAA0E;EAC1E,0BAAkC;AC4B9C;;ADtBQ;EACI,2HAIoC;ACqBhD;;AD1CQ;EACI,2EAA2E;EAC3E,0BAAkC;AC6C9C;;ADvCQ;EACI,0EAA0E;EAC1E,0BAAkC;AC0C9C;;ADpCQ;EACI,2HAIoC;ACmChD;;ADxDQ;EACI,2EAA2E;EAC3E,4BAAkC;AC2D9C;;ADrDQ;EACI,0EAA0E;EAC1E,4BAAkC;ACwD9C;;ADlDQ;EACI,8HAIoC;ACiDhD;;ADvCQ;EACI,yQAGyD;EACzD,8CAAsD;ACuClE;;AD5CQ;EACI,yQAGyD;EACzD,8CAAsD;AC4ClE;;ADjDQ;EACI,yQAGyD;EACzD,8CAAsD;ACiDlE;;ADtDQ;EACI,2QAGyD;EACzD,gDAAsD;ACsDlE;;AD5CQ;EACI,2EAEwB;EACxB,0BAAkC;AC6C9C;;ADjDQ;EACI,2EAEwB;EACxB,0BAAkC;ACkD9C;;ADtDQ;EACI,2EAEwB;EACxB,0BAAkC;ACuD9C;;AD3DQ;EACI,2EAEwB;EACxB,4BAAkC;AC4D9C;;ADtDA;EACI,6BAAqB;UAArB,qBAAqB;EACrB,oCAAoC;ACyDxC;;ADnDI;EACI,WAnMiB;ACyPzB;;ADnDI;EACI,YAvMiB;AC6PzB;;AD3DI;EACI,WAlMG;ACgQX;;AD3DI;EACI,YAtMG;ACoQX;;ADnEI;EACI,WAjMG;ACuQX;;ADnEI;EACI,YArMG;AC2QX;;AD3EI;EACI,YAhMI;AC8QZ;;AD3EI;EACI,aApMI;ACkRZ","file":"pattern.css"}

dist/pattern.min.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../pattern.scss"],"names":[],"mappings":"AAiCQ,mBACI,0PAEwH,CACxH,iCACiB,CACjB,6CAAsD,CAN1D,mBACI,0PAEwH,CACxH,iCACiB,CACjB,6CAAsD,CAN1D,mBACI,0PAEwH,CACxH,iCACiB,CACjB,6CAAsD,CAN1D,mBACI,0PAEwH,CACxH,mCACiB,CACjB,+CAAsD,CACzD,iBAUG,gIAEgE,CAChE,yBAAkC,CAJtC,iBACI,gIAEgE,CAChE,yBAAkC,CAJtC,iBACI,gIAEgE,CAChE,yBAAkC,CAJtC,iBACI,gIAEgE,CAChE,2BAAkC,CAErC,iBAUG,qEAA8E,CAC9E,+CAAwD,CAF5D,iBACI,mEAA8E,CAC9E,6CAAwD,CAF5D,iBACI,uEAA8E,CAC9E,iDAAwD,CAF5D,iBACI,mEAA8E,CAC9E,6CAAwD,CAC3D,uBAUG,0HAC4D,CAC5D,+CAAwD,CACxD,uDACuC,CAL3C,uBACI,sHAC4D,CAC5D,6CAAwD,CACxD,qDACuC,CAL3C,uBACI,8HAC4D,CAC5D,iDAAwD,CACxD,yDACuC,CAL3C,uBACI,sHAC4D,CAC5D,6CAAwD,CACxD,qDACuC,CAC1C,2BAUG,kHAIoB,CACpB,yBAAkC,CACrC,6BAMG,8GAIoB,CACpB,yBAAkC,CACrC,2BAMG,mHAIwB,CACxB,yBAAkC,CA9BtC,2BACI,kHAIoB,CACpB,yBAAkC,CACrC,6BAMG,8GAIoB,CACpB,yBAAkC,CACrC,2BAMG,mHAIwB,CACxB,yBAAkC,CA9BtC,2BACI,kHAIoB,CACpB,yBAAkC,CACrC,6BAMG,8GAIoB,CACpB,yBAAkC,CACrC,2BAMG,mHAIwB,CACxB,yBAAkC,CA9BtC,2BACI,kHAIoB,CACpB,2BAAkC,CACrC,6BAMG,8GAIoB,CACpB,2BAAkC,CACrC,2BAMG,mHAIwB,CACxB,2BAAkC,CACrC,6BAWG,0EAA2E,CAC3E,yBAAkC,CACrC,+BAMG,yEAA0E,CAC1E,yBAAkC,CACrC,6BAMG,0HAIoC,CArBxC,6BACI,0EAA2E,CAC3E,yBAAkC,CACrC,+BAMG,yEAA0E,CAC1E,yBAAkC,CACrC,6BAMG,0HAIoC,CArBxC,6BACI,0EAA2E,CAC3E,yBAAkC,CACrC,+BAMG,yEAA0E,CAC1E,yBAAkC,CACrC,6BAMG,0HAIoC,CArBxC,6BACI,0EAA2E,CAC3E,2BAAkC,CACrC,+BAMG,yEAA0E,CAC1E,2BAAkC,CACrC,6BAMG,6HAIoC,CACvC,mBAUG,qQAGyD,CACzD,6CAAsD,CAL1D,mBACI,qQAGyD,CACzD,6CAAsD,CAL1D,mBACI,qQAGyD,CACzD,6CAAsD,CAL1D,mBACI,uQAGyD,CACzD,+CAAsD,CACzD,sBAUG,0EAEwB,CACxB,yBAAkC,CAJtC,sBACI,0EAEwB,CACxB,yBAAkC,CAJtC,sBACI,0EAEwB,CACxB,yBAAkC,CAJtC,sBACI,0EAEwB,CACxB,2BAAkC,CACrC,cAML,4BAAqB,CAArB,oBAAqB,CACrB,mCAAoC,CACvC,cAMO,UAnMiB,CAoMpB,cAGG,WAvMiB,CAkMrB,cACI,UAlMG,CAmMN,cAGG,WAtMG,CAiMP,cACI,UAjMG,CAkMN,cAGG,WArMG,CAgMP,cACI,WAhMI,CAiMP,cAGG,YApMI","file":"pattern.min.css"}

index.html

@@ -0,0 +1,814 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://unpkg.com/shorthandcss@1.1.1/dist/shorthand.min.css">
+    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap" rel="stylesheet">
+    <link href="dist/pattern.css" rel="stylesheet">
+    <title>Background Patterns in CSS</title>
+    <meta name="description" content="CSS only library to fill your empty background with beautiful patterns.">
+    <style>
+        code{
+            font-family: monospace;
+            color: red;
+        }
+        aside{
+            width:250px;
+        }
+        .content{
+            left:280px;
+        }
+        @media screen and (max-width: 567px){
+            .content{
+            left:0;
+        }
+        }
+
+    </style>
+</head>
+
+<body class="h-100pc roboto bg-slategray-darkest">
+    <a href="#sidebar" id="sidebar-toggle"
+        class="fixed left-0 bottom-0 m-3 w-l2 h-l2 z-2000 flex justify-center items-center bg-black white br-0 after-menu no-underline after-scale-up-2 sm-hidden"></a>
+    <main class="block relative w-100vw h-100pc z-0">
+        <aside id="sidebar-container" class="fixed-left z-100 ml--100pc sm-ml-0 bg-slategray-darkest ease-500">
+            <nav id="nav" class="p-5 fixed h-100vh sm-w-30pc md-w-20pc overflow-scroll">
+                <div class="fs-s2 flex flex-column">
+                    <a href="#introduction"
+                        class="p-2 px-5 br-6 my-1 white opacity-70 no-underline hover-bg-white-10">Introduction</a>
+                    <a href="#installation"
+                        class="p-2 px-5 br-6 my-1 white opacity-70 no-underline hover-bg-white-10">Installation</a>
+                    <a href="#usage" class="p-2 px-5 br-6 my-1 white opacity-70 no-underline hover-bg-white-10">Usage</a>
+                    <a href="#browser-support" class="p-2 px-5 br-6 my-1 white opacity-70 no-underline hover-bg-white-10">Browser support</a>
+                </div>
+                <div class="fs-s2 fw-600 ls-5 green-light opacity-80 mt-5">EXAMPLES</div>
+                <div class="fs-s2 flex flex-column">
+                    <a href="#hero" class="p-2 px-5 br-6 my-1 white opacity-70 no-underline hover-bg-white-10">Hero
+                        Background</a>
+                    <a href="#separator" class="p-2 px-5 br-6 my-1 white opacity-70 no-underline hover-bg-white-10">Separator</a>
+                    <a href="#font" class="p-2 px-5 br-6 my-1 white opacity-70 no-underline hover-bg-white-10">Font</a>
+                    <a href="#image" class="p-2 px-5 br-6 my-1 white opacity-70 no-underline hover-bg-white-10">Image</a>
+                </div>
+                <div class="fs-s2 fw-600 ls-5 green-light opacity-80 mt-5">PATTERNS</div>
+                <div class="fs-s2 flex flex-column">
+                    <a href="#checks" class="p-2 px-5 br-6 my-1 white opacity-70 no-underline hover-bg-white-10">Checks</a>
+                    <a href="#grid" class="p-2 px-5 br-6 my-1 white opacity-70 no-underline hover-bg-white-10">Grid</a>
+                    <a href="#dots" class="p-2 px-5 br-6 my-1 white opacity-70 no-underline hover-bg-white-10">Dots</a>
+                    <a href="#cross-dots" class="p-2 px-5 br-6 my-1 white opacity-70 no-underline hover-bg-white-10">Cross
+                        Dots</a>
+                    <a href="#diagonal-lines"
+                        class="p-2 px-5 br-6 my-1 white opacity-70 no-underline hover-bg-white-10">Diagonal Lines</a>
+                    <a href="#vertical-lines"
+                        class="p-2 px-5 br-6 my-1 white opacity-70 no-underline hover-bg-white-10">Vertical Lines</a>
+                    <a href="#horizontal-lines"
+                        class="p-2 px-5 br-6 my-1 white opacity-70 no-underline hover-bg-white-10">Horizontal Lines</a>
+                    <a href="#diagonal-stripes"
+                        class="p-2 px-5 br-6 my-1 white opacity-70 no-underline hover-bg-white-10">Diagonal Stripes</a>
+                    <a href="#vertical-stripes"
+                        class="p-2 px-5 br-6 my-1 white opacity-70 no-underline hover-bg-white-10">Vertical Stripes</a>
+                    <a href="#horizontal-stripes"
+                        class="p-2 px-5 br-6 my-1 white opacity-70 no-underline hover-bg-white-10">Horizontal Stripes</a>
+                    <a href="#triangles"
+                        class="p-2 px-5 br-6 my-1 white opacity-70 no-underline hover-bg-white-10">Triangles</a>
+                    <a href="#zigzag" class="p-2 px-5 br-6 my-1 white opacity-70 no-underline hover-bg-white-10">Zigzag</a>
+                </div>
+            </nav>
+        </aside>
+        <section class="content absolute top-0 bottom-0 right-0">
+            <section id="introduction"
+                class="block w-100pc h-100vh pattern-vertical-lines-lg gray-lighter flex justify-center items-center bg-white br-16">
+                <div class="text-center">
+                    <h1 class="bg-green-light green-darkest pattern-diagonal-lines-sm text-pattern fs-l5 md-fs-xl3 fw-800">
+                        pattern.css
+                    </h1>
+                    <p class="green-darker">CSS only library to fill your empty background with beautiful patterns.                    </p>
+                    <div class="mt-5">
+                        <a href="https://github.com/bansal-io/pattern.css/master/dist/pattern.min.css" target="_blank"
+                            class="slategray-darker fs-s2">Download (&lt; 1kb gzip) </a>
+                    </div>
+                    <div class="mt-10">
+                        <a href="#installation"
+                            class="button-lg bg-green-light green-darkest br-0 no-underline ls-wide fs-s2 uppercase focus-green hover-opacity-100 hover-shift-t-4 ease-300">
+                            Get Start
+                        </a>
+                        <a href="https://github.com/bansal-io/pattern.css"
+                            class="button-lg bg-slategray-darkest green-lighter br-0 no-underline ls-wide fs-s2 uppercase focus-green hover-opacity-100 hover-shift-t-4 ease-300">
+                            View on Github
+                        </a>
+                    </div>
+                </div>
+            </section>
+            <section class="p-5 md-p-l5">
+                <div class="flex flex-wrap">
+                    <div class="w-25pc h-1by1 pattern-checks-md teal-light bg-teal-dark"></div>
+                    <div class="w-25pc h-1by1 pattern-grid-md red bg-white"></div>
+                    <div class="w-25pc h-1by1 pattern-dots-md yellow bg-indigo"></div>
+                    <div class="w-25pc h-1by1 pattern-cross-dots-md white bg-black"></div>
+                    <div class="w-25pc h-1by1 pattern-diagonal-lines-sm red bg-black"></div>
+                    <div class="w-25pc h-1by1 pattern-horizontal-lines-sm yellow bg-wine"></div>
+                    <div class="w-25pc h-1by1 pattern-vertical-lines-md indigo-dark bg-blue-light"></div>
+                    <div class="w-25pc h-1by1 pattern-diagonal-stripes-sm white bg-blue"></div>
+                    <div class="w-25pc h-1by1 pattern-horizontal-stripes-sm white bg-indigo"></div>
+                    <div class="w-25pc h-1by1 pattern-vertical-stripes-sm purple-darkest bg-red-light"></div>
+                    <div class="w-25pc h-1by1 pattern-triangles-lg yellow bg-indigo"></div>
+                    <div class="w-25pc h-1by1 pattern-zigzag-sm yellow bg-red"></div>
+                </div>
+            </section>
+            <section id="installation" class="p-10">
+                <div class="text-center">
+                    <h1 class="green-lighter fs-l3 fw-800 lh-1 my-10">Installation</h1>
+                    <div class=" bg-slategray-lightest p-5 br-8  fs-s2">
+                        <p class="mt-5 slategray-dark">1. pattern.css is available via <a class="green-dark"
+                                href="https://npmjs.com/">npm</a></p>
+                        <div class="br-6 bg-slategray-darker p-5 mt-5">
+                            <pre class="w-100pc overflow-scroll green-light">npm install pattern.css</pre>
+                        </div>
+                        <p class="mt-8 slategray-dark">2. Or you can use cdn <a class="green-dark"
+                                href="https://unpkg.com/shorthandcss">unpkg</a></p>
+                        <div class="br-6 bg-slategray-darker p-5 mt-5">
+                            <pre
+                                class="w-100pc overflow-scroll green-light">&#x3C;link href=&#x22;https://unpkg.com/pattern.css&#x22; rel=&#x22;stylesheet&#x22;&#x3E;</pre>
+                        </div>
+                        <p class="mt-8 slategray-dark">3. Or <a class="green-dark"
+                                href="https://unpkg.com/shorthandcss">Download</a> and include in head</p>
+                        <div class="br-6 bg-slategray-darker p-5 mt-5">
+                            <pre
+                                class="w-100pc overflow-scroll green-light">&#x3C;link href=&#x22;dist/pattern.min.css&#x22; rel=&#x22;stylesheet&#x22;&#x3E;</pre>
+                        </div>
+                    </div>
+                </div>
+            </section>
+            <section id="usage" class="p-10">
+                <div>
+                    <h1 class="green-lighter fs-l3 fw-800 lh-1 my-10 text-center">Usage</h1>
+                    <div class=" bg-slategray-lightest p-8 br-8  fs-s1 text-left">
+                        <div class="bg-indigo yellow px-5 py-3 br-3 border-l bw-6 bc-yellow">
+                            Examples in documentation are built using <a href="https://shorthandcss.com" class="white">shorthand framework</a> but this library works with most of the frameworks including bootstrap.
+                        </div>
+                        <p class="mt-5 slategray-dark">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.
+                            <br />
+                            <br />
+                            Any background pattern works with two or more colors. I made with library with considering two color patterns only.
+
+                        </p>
+                        <h2 class="mt-8">Colors</h2>
+                        <p class="mt-5 slategray-dark">
+                            pattern.css is built with two colors only <code>transparent</code> and <code>currentColor</code>.
+                            <br/>
+                            <br/>
+                            currentColor is the current active text color inside a element. To change the color just change the text color property.
+                            <br>
+                            <br>
+                            To change the another color just change the background color, and background color will be visible through transparent color
+                        </p>
+                        <h3 class="mt-8 mb-5">Example</h3>
+                        <small>With <a href="https://shorthandcss.com">shorthand framework</a></small>
+                        <div class="br-6 bg-slategray-darker p-5 mb-5">
+                            <pre class="w-100pc overflow-scroll green-light">&#x3C;div class=&#x22;pattern-checks-sm bg-blue white&#x22;&#x3E;...&#x3C;/div&#x3E;</pre>
+                        </div>
+                        <small class="mb-5">With <a href="https://shorthandcss.com">bootstrap framework</a></small>
+                        <div class="br-6 bg-slategray-darker p-5 mb-5">
+                            <pre class="w-100pc overflow-scroll green-light">&#x3C;div class=&#x22;pattern-checks-sm bg-primary text-white&#x22;&#x3E;...&#x3C;/div&#x3E;</pre>
+                        </div>
+                        <h2 class="mt-8 mb-5">Size</h2>
+                        <p class="mt-5 slategray-dark">Each pattern is available in 4 sizes <code>sm</code>, <code>md</code>, <code>lg</code>, and  <code>xl</code></p>
+                        <div class="flex flex-column">
+                            <div class="p-5 my-3 pattern-diagonal-stripes-sm red bg-orange text-center"> <span class="lh-5 black bg-white-40 px-3 py-2 br-3 mono">.pattern-diagonal-stripes-sm</span></div>
+                            <div class="p-5 my-3 pattern-diagonal-stripes-md red bg-orange text-center"> <span class="lh-5 black bg-white-40 px-3 py-2 br-3 mono">.pattern-diagonal-stripes-md</span></div>
+                            <div class="p-5 my-3 pattern-diagonal-stripes-lg red bg-orange text-center"> <span class="lh-5 black bg-white-40 px-3 py-2 br-3 mono">.pattern-diagonal-stripes-lg</span></div>
+                            <div class="p-5 my-3 pattern-diagonal-stripes-xl red bg-orange text-center"> <span class="lh-5 black bg-white-40 px-3 py-2 br-3 mono">.pattern-diagonal-stripes-xl</span></div>
+                        </div>
+                        <h2 class="mt-8 mb-5">Class</h2>
+
+                        <div class="table-container table-head cell-border overflow-scroll">
+                            <table>
+                                <thead class="slategray-darker fw-400">
+                                    <tr>
+                                        <td>small</td>
+                                        <td>medium</td>
+                                        <td>large</td>
+                                        <td>extra large</td>
+                                    </tr>
+                                </thead>
+                                <tbody class="fs-s3 opacity-60">
+                                    <tr>
+                                        <td><code>pattern-checks-sm</code></td>
+                                        <td><code>pattern-checks-md</code></td>
+                                        <td><code>pattern-checks-lg</code></td>
+                                        <td><code>pattern-checks-xl</code></td>
+                                    </tr>
+                                    <tr>
+                                        <td><code>pattern-grid-sm</code></td>
+                                        <td><code>pattern-grid-md</code></td>
+                                        <td><code>pattern-grid-lg</code></td>
+                                        <td><code>pattern-grid-xl</code></td>
+                                    </tr>
+                                    <tr>
+                                        <td><code>pattern-dots-sm</code></td>
+                                        <td><code>pattern-dots-md</code></td>
+                                        <td><code>pattern-dots-lg</code></td>
+                                        <td><code>pattern-dots-xl</code></td>
+                                    </tr>
+                                    <tr>
+                                        <td><code>pattern-cross-dots-sm</code></td>
+                                        <td><code>pattern-cross-dots-md</code></td>
+                                        <td><code>pattern-cross-dots-lg</code></td>
+                                        <td><code>pattern-cross-dots-xl</code></td>
+                                    </tr>
+                                    <tr>
+                                        <td><code>pattern-diagonal-lines-sm</code></td>
+                                        <td><code>pattern-diagonal-lines-md</code></td>
+                                        <td><code>pattern-diagonal-lines-lg</code></td>
+                                        <td><code>pattern-diagonal-lines-xl</code></td>
+                                    </tr>
+                                    <tr>
+                                        <td><code>pattern-horizontal-lines-sm</code></td>
+                                        <td><code>pattern-horizontal-lines-md</code></td>
+                                        <td><code>pattern-horizontal-lines-lg</code></td>
+                                        <td><code>pattern-horizontal-lines-xl</code></td>
+                                    </tr>
+                                    <tr>
+                                        <td><code>pattern-vertical-lines-sm</code></td>
+                                        <td><code>pattern-vertical-lines-md</code></td>
+                                        <td><code>pattern-vertical-lines-lg</code></td>
+                                        <td><code>pattern-vertical-lines-xl</code></td>
+                                    </tr>
+                                    <tr>
+                                        <td><code>pattern-diagonal-stripes-sm</code></td>
+                                        <td><code>pattern-diagonal-stripes-md</code></td>
+                                        <td><code>pattern-diagonal-stripes-lg</code></td>
+                                        <td><code>pattern-diagonal-stripes-xl</code></td>
+                                    </tr>
+                                    <tr>
+                                        <td><code>pattern-horizontal-stripes-sm</code></td>
+                                        <td><code>pattern-horizontal-stripes-md</code></td>
+                                        <td><code>pattern-horizontal-stripes-lg</code></td>
+                                        <td><code>pattern-horizontal-stripes-xl</code></td>
+                                    </tr>
+                                    <tr>
+                                        <td><code>pattern-vertical-stripes-sm</code></td>
+                                        <td><code>pattern-vertical-stripes-md</code></td>
+                                        <td><code>pattern-vertical-stripes-lg</code></td>
+                                        <td><code>pattern-vertical-stripes-xl</code></td>
+                                    </tr>
+                                    <tr>
+                                        <td><code>pattern-triangles-sm</code></td>
+                                        <td><code>pattern-triangles-md</code></td>
+                                        <td><code>pattern-triangles-lg</code></td>
+                                        <td><code>pattern-triangles-xl</code></td>
+                                    </tr>
+                                    <tr>
+                                        <td><code>pattern-zigzag-sm</code></td>
+                                        <td><code>pattern-zigzag-md</code></td>
+                                        <td><code>pattern-zigzag-lg</code></td>
+                                        <td><code>pattern-zigzag-xl</code></td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </section>
+            <h2 class="white fs-l1 fw-800 lh-1 mb-5 mt-10 text-center">Browser Support</h2>
+            <section id="browser-support" class="br-8 bg-white m-10 p-5 slategray-darker lh-5">
+                pattern.css library depend on four css properties <code>linear-gradient</code>, <code>radial-gradient</code>,
+                <code>repeating-linear-gradient</code> and <code>repeating-radial-gradient</code>
+                <br> which are supported by most browsers.
+                You can check <a href="https://caniuse.com/#search=linear-gradient">caniuse.com</a>
+            </section>
+            <section>
+            <h1 class="green-lighter fs-l3 fw-800 lh-1 my-10 text-center">Examples</h1>
+            <h2 class="white fs-l1 fw-800 lh-1 my-5 text-center">Hero</h2>
+            <section id="hero" class="h-100vh pattern-vertical-lines-md yellow-light bg-yellow flex justify-center items-center bg-fixed">
+                <div>
+                    <h1 class="fs-l5 text-center lh-2 black">Make Your Website <br><span class="border-b bc-blue bw-4"> More</span> Beautiful</h1>
+                    <p class="text-center black opacity-50 fw-600 my-10">by using these simple pattern</p>
+                    <div class="text-center"> 
+                        <div class="">
+                        <a href="#introduction" class="button-lg no-underline br-0 bg-black white fs-s3 ls-wider uppercase hover-opacity-100 focus-white hover-scale-up-1 ease-500" >
+                            <span>Learn More</span></a>
+                    </div>
+                    </div>
+                </div>
+            </section>
+            <h2 class="white fs-l1 fw-800 lh-1 mt-5 text-center">Separator</h2>
+
+            <section id="separator" class="flex flex-column">
+                <div class="pattern-dots-sm slategray h-5 my-5">
+                </div>
+                <div class="pattern-checks-sm slategray h-5 my-5">
+                </div>
+                <div class="pattern-diagonal-stripes-sm slategray h-5 my-5">
+                </div>
+                <div class="w-90pc mx-auto p-5">
+                    <div class="bg-slategray-lightest p-5 br-8">
+                        <p class="mt-5 slategray-dark">Use pattern class and set separator height. Example; pattern <code>.pattern-dots-sm</code>, height <code>.h-5</code> and color <code>.slategray</code></p>
+                        <div class="br-6 bg-slategray-darker p-5 mt-5">
+                            <pre class="w-100pc overflow-scroll green-light">&#x3C;div class=&#x22;pattern-dots-sm slategray h-5&#x22;&#x3E;&#x3C;/div&#x3E;</pre>
+                        </div>
+                </div>
+            </div>
+            </section>
+            <h2 class="white fs-l1 fw-800 lh-1 mb-5 mt-10 text-center">Text pattern</h2>
+
+            <section id="font" class="flex flex-column pattern-dots-sm gray-darker br-16 py-l5">
+                    <div class="w-90pc p-5 flex items-center justify-center">
+                        <h3 class="pattern-grid-sm bg-mint white text-pattern fw-800 fs-xl3 md-fs-xl4 lh-1 text-center">
+                            PLAY
+                        </h3>
+                    </div>
+                    <div class="w-90pc mx-auto p-5">
+                        <div class="bg-slategray-lightest p-5 br-8">
+                            <h3 class="fw-400 fs-s1">Fill text with pattern </h3>
+                            <p class="mt-5 slategray-dark">Use <code>.text-pattern</code> class with background
+                                patterns to set text color as pattern</p>
+                            <div class="br-6 bg-slategray-darker p-5 mt-5">
+                                <pre class="w-100pc overflow-scroll green-light">&#x3C;h3 class=&#x22;pattern-checks-sm bg-mint white text-pattern&#x22;&#x3E;PLAY&#x3C;/h3&#x3E;</pre>
+                            </div>
+                    </div>
+                </div>
+            </section>
+            <section class="flex flex-column gray-darker br-16 py-l5">
+
+                        <div class="w-90pc p-5 flex items-center justify-start">
+                            <div class="pattern-dots-md red px-l5 py-5 max-w-20pc overflow-visible ml-5 md-ml-l5">
+                                <h1 class="white fw-800 fs-l5 md-fs-xl3 lh-1">NEXT BEST TEXT </h1>
+                            </div>
+
+                        </div>
+                        <div class="w-90pc mx-auto p-5">
+                            <div class=" bg-slategray-lightest p-5 br-8 mt-10">
+                                <h3 class="fw-400 fs-s1">Text container pattern </h3>
+                                <div class="br-6 bg-slategray-darker p-5 mt-5">
+                                    <pre class="w-100pc overflow-scroll green-light">&#x3C;div class=&#x22;pattern-dots-md red text-pattern max-w-20pc overflow-visible&#x22;&#x3E;
+    &#x3C;h1 class=&#x22;white&#x22;&#x3E;NEXT BEST TEXT&#x3C;/h1&#x3E;
+&#x3C;/div&#x3E;</pre>
+                                </div>
+                            </div>
+                </div>
+            </section>
+            <h2 class="white fs-l1 fw-800 lh-1 mb-5 mt-10 text-center">Image Container</h2>
+
+            <section id="image"  class="flex flex-column gray-darker br-16 py-l5">
+                <div class="w-90pc flex justify-center">
+                    <div class="pattern-dots-md gray-light m-10">
+                        <img class="w-100pc" style="transform:translate(30px, -30px);"
+                            src="https://images.unsplash.com/photo-1488707872600-5507977fe355?auto=format&fit=crop&w=500&q=80"
+                            alt="">
+                    </div>
+                </div>
+                <div class="w-90pc mx-auto p-5">
+                    <div class=" bg-slategray-lightest p-5 br-8 mt-10">
+                        <h3 class="fw-400 fs-s1">Use with image</h3>
+                        <div class="br-6 bg-slategray-darker p-5 mt-5">
+                            <pre class="w-100pc overflow-scroll green-light">&#x3C;div class=&#x22;pattern-dots-md gray-light&#x22;&#x3E;
+&#x3C;img style=&#x22;transform:translate(10px, -10px);&#x22; src=&#x22;...&#x22;/&#x3E;
+&#x3C;/div&#x3E;
+</pre>
+                        </div>
+                    </div>
+            </div>
+            </section>
+            <section class="flex flex-column gray-darker br-16 py-l5">
+                <div class="w-75pc mx-auto flex justify-center m-5">
+                    <div class="pattern-diagonal-lines-sm gray">
+                        <img class="w-100pc" style="transform:translate(20px, -20px);"
+                            src="https://images.unsplash.com/photo-1488707872600-5507977fe355?auto=format&fit=crop&w=500&q=80"
+                            alt="">
+                    </div>
+                </div>
+                <div class="w-90pc mx-auto mt-10">
+                    <div class=" bg-slategray-lightest p-5 br-8">
+                        <h3 class="fw-400 fs-s1">Another pattern with image</h3>
+                        <div class="br-6 bg-slategray-darker p-5 mt-5">
+                            <pre class="w-100pc overflow-scroll green-light">&#x3C;div class=&#x22;pattern-diagonal-lines-sm gray-lighter&#x22;&#x3E;
+&#x3C;img style=&#x22;transform:translate(30px, 30px);&#x22; src=&#x22;...&#x22;/&#x3E;
+&#x3C;/div&#x3E;
+</pre>
+                        </div>
+                    </div>
+                </div>
+            </section>
+            <div class="text-center mt-10 mb-5">
+                <h1 class="green-lighter fs-l3 fw-800 lh-1 my-10 text-center">Patterns</h1>
+            </div>
+            <div class="pattern-checks-md p-2 my-5 slategray-darker">
+            <h2 class="text-center fs-s1 fw-600 white uppercase ls-wider">checks</h2>
+            </div>
+            <section id="checks" class="flex flex-wrap">
+                <div class="w-100pc md-w-50pc p-5">
+                    <div class="relative h-1by2 bg-white black pattern-checks-sm">
+                        <div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-checks-sm
+                        </div>
+                    </div>
+                </div>
+                <div class="w-100pc md-w-50pc p-5">
+                    <div class="relative h-1by2 bg-yellow-lighter-90 yellow-dark pattern-checks-md">
+                        <div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-checks-md
+                        </div>
+                    </div>
+                </div>
+                <div class="w-100pc md-w-50pc p-5">
+                    <div class="relative h-1by2 green-lighter pattern-checks-lg">
+                        <div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-checks-lg
+                        </div>
+
+                    </div>
+                </div>
+                <div class="w-100pc md-w-50pc p-5">
+                    <div class="relative h-1by2 slategray-darker pattern-checks-xl">
+                        <div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-checks-xl
+                        </div>
+
+                    </div>
+                </div>
+            </section>
+            <div class="pattern-diagonal-stripes-md p-2 my-5 slategray-darker">
+                <h2 class="text-center fs-s1 fw-600 white uppercase ls-wider">grid</h2>
+                </div>
+            <section id="grid" class="flex flex-wrap">
+                <div class="w-100pc md-w-50pc p-5">
+                    <div class="relative h-1by2 bg-white black pattern-grid-sm">
+                        <div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-grid-sm
+                        </div>
+
+                    </div>
+                </div>
+                <div class="w-100pc md-w-50pc p-5">
+                    <div class="relative h-1by2 bg-pink-lighter red pattern-grid-md">
+                        <div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-grid-md
+                        </div>
+
+                    </div>
+                </div>
+                <div class="w-100pc md-w-50pc p-5">
+                    <div class="relative h-1by2 slategray-darker pattern-grid-lg">
+                        <div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-grid-lg
+                        </div>
+
+                    </div>
+                </div>
+                <div class="w-100pc md-w-50pc p-5">
+                    <div class="relative h-1by2 bg-green-lighter slategray-darker pattern-grid-xl">
+                        <div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-grid-xl
+                        </div>
+
+                    </div>
+                </div>
+            </section>
+            <div class="pattern-diagonal-stripes-md p-2 my-5 slategray-darker">
+                <h2 class="text-center fs-s1 fw-600 white uppercase ls-wider">dots</h2>
+                </div>
+            <section id="dots" class="flex flex-wrap">
+                <div class="w-100pc md-w-50pc p-5">
+                    <div class="relative h-1by2 bg-white gray-light pattern-dots-sm">
+                        <div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-dots-sm
+                        </div>
+
+                    </div>
+                </div>
+                <div class="w-100pc md-w-50pc p-5">
+                    <div class="relative h-1by2 bg-yellow-lighter red pattern-dots-md">
+                        <div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-dots-md
+                        </div>
+
+                    </div>
+                </div>
+                <div class="w-100pc md-w-50pc p-5">
+                    <div class="relative h-1by2 red pattern-dots-lg">
+                        <div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-dots-lg
+                        </div>
+
+                    </div>
+                </div>
+                <div class="w-100pc md-w-50pc p-5">
+                    <div class="relative h-1by2 bg-white gray-light  pattern-dots-xl">
+                        <div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-dots-xl
+                        </div>
+
+                    </div>
+                </div>
+            </section>
+            <div class="pattern-diagonal-stripes-md p-2 my-5 slategray-darker">
+                <h2 class="text-center fs-s1 fw-600 white uppercase ls-wider">cross-dots</h2>
+                </div>
+            <section id="cross-dots" class="flex flex-wrap">
+                <div class="w-100pc md-w-50pc p-5">
+                    <div class="relative h-1by2 bg-white gray-light pattern-cross-dots-sm">
+                        <div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-cross-dots-sm
+                        </div>
+
+                    </div>
+                </div>
+                <div class="w-100pc md-w-50pc p-5">
+                    <div class="relative h-1by2 bg-yellow-lighter yellow-dark pattern-cross-dots-md">
+                        <div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-cross-dots-md
+                        </div>
+
+                    </div>
+                </div>
+                <div class="w-100pc md-w-50pc p-5">
+                    <div class="relative h-1by2 bg-mint-lighter mint pattern-cross-dots-lg">
+                        <div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-cross-dots-lg
+                        </div>
+
+                    </div>
+                </div>
+                <div class="w-100pc md-w-50pc p-5">
+                    <div class="relative h-1by2 bg-white gray-light pattern-cross-dots-xl">
+                        <div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-cross-dots-xl
+                        </div>
+
+                    </div>
+                </div>
+            </section>
+            <div class="pattern-diagonal-stripes-md p-2 my-5 slategray-darker">
+                <h2 class="text-center fs-s1 fw-600 white uppercase ls-wider">diagonal-lines</h2>
+                </div>
+            <section id="diagonal-lines" class="flex flex-wrap">
+                <div class="w-100pc md-w-50pc p-5">
+                    <div class="relative h-1by2 bg-white gray-light pattern-diagonal-lines-sm">
+                        <div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-diagonal-lines-sm
+                        </div>
+
+                    </div>
+                </div>
+                <div class="w-100pc md-w-50pc p-5">
+                    <div class="relative h-1by2 bg-white yellow-dark pattern-diagonal-lines-md">
+                        <div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-diagonal-lines-md
+                        </div>
+
+                    </div>
+                </div>
+                <div class="w-100pc md-w-50pc p-5">
+                    <div class="relative h-1by2 bg-black yellow-dark pattern-diagonal-lines-lg">
+                        <div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-diagonal-lines-lg
+                        </div>
+
+                    </div>
+                </div>
+                <div class="w-100pc md-w-50pc p-5">
+                    <div class="relative h-1by2 bg-white gray-light pattern-diagonal-lines-xl">
+                        <div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-diagonal-lines-xl
+                        </div>
+
+                    </div>
+                </div>
+            </section>
+            <div class="pattern-diagonal-stripes-md p-2 my-5 slategray-darker">
+                <h2 class="text-center fs-s1 fw-600 white uppercase ls-wider">vertical-lines</h2>
+                </div>
+            <section id="vertical-lines" class="flex flex-wrap">
+                <div class="w-100pc md-w-50pc p-5">
+                    <div class="relative h-1by2 bg-white gray-light pattern-vertical-lines-sm">
+                        <div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-vertical-lines-sm
+                        </div>
+
+                    </div>
+                </div>
+                <div class="w-100pc md-w-50pc p-5">
+                    <div class="relative h-1by2 bg-black yellow-dark pattern-vertical-lines-md">
+                        <div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-vertical-lines-md
+                        </div>
+
+                    </div>
+                </div>
+                <div class="w-100pc md-w-50pc p-5">
+                    <div class="relative h-1by2 bg-red-90 black pattern-vertical-lines-lg">
+                        <div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-vertical-lines-lg
+                        </div>
+
+                    </div>
+                </div>
+                <div class="w-100pc md-w-50pc p-5">
+                    <div class="relative h-1by2 bg-white gray-light pattern-vertical-lines-xl">
+                        <div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-vertical-lines-xl
+                        </div>
+
+                    </div>
+                </div>
+            </section>
+            <div class="pattern-diagonal-stripes-md p-2 my-5 slategray-darker">
+                <h2 class="text-center fs-s1 fw-600 white uppercase ls-wider">horizontal-lines</h2>
+                </div>
+            <section id="horizontal-lines" class="flex flex-wrap">
+                <div class="w-100pc md-w-50pc p-5">
+                    <div class="relative h-1by2 bg-white gray-light pattern-horizontal-lines-sm">
+                        <div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-horizontal-lines-sm
+                        </div>
+
+                    </div>
+                </div>
+                <div class="w-100pc md-w-50pc p-5">
+                    <div class="relative h-1by2 bg-yellow-70 yellow-darkest pattern-horizontal-lines-md">
+                        <div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-horizontal-lines-md
+                        </div>
+
+                    </div>
+                </div>
+                <div class="w-100pc md-w-50pc p-5">
+                    <div class="relative h-1by2 bg-orange white pattern-horizontal-lines-lg">
+                        <div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-horizontal-lines-lg
+                        </div>
+                    </div>
+                </div>
+                <div class="w-100pc md-w-50pc p-5">
+                    <div class="relative h-1by2 bg-white gray-light pattern-horizontal-lines-xl">
+                        <div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-horizontal-lines-xl
+                        </div>
+
+                    </div>
+                </div>
+            </section>
+            <div class="pattern-diagonal-stripes-md p-2 my-5 slategray-darker">
+                <h2 class="text-center fs-s1 fw-600 white uppercase ls-wider">diagonal-stripes</h2>
+                </div>
+            <section id="diagonal-stripes" class="flex flex-wrap">
+                <div class="w-100pc md-w-50pc p-5">
+                    <div class="relative h-1by2 bg-white gray-lightest pattern-diagonal-stripes-sm">
+                        <div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-diagonal-stripes-sm
+                        </div>
+
+                    </div>
+                </div>
+                <div class="w-100pc md-w-50pc p-5">
+                    <div class="relative h-1by2 bg-yellow-80 yellow-dark pattern-diagonal-stripes-md">
+                        <div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-diagonal-stripes-md
+                        </div>
+
+                    </div>
+                </div>
+                <div class="w-100pc md-w-50pc p-5">
+                    <div class="relative h-1by2 bg-white pink-lightest pattern-diagonal-stripes-lg">
+                        <div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-diagonal-stripes-lg
+                        </div>
+
+                    </div>
+                </div>
+                <div class="w-100pc md-w-50pc p-5">
+                    <div class="relative h-1by2 bg-yellow teal-dark pattern-diagonal-stripes-xl">
+                        <div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-diagonal-stripes-xl
+                        </div>
+
+                    </div>
+                </div>
+            </section>
+            <div class="pattern-diagonal-stripes-md p-2 my-5 slategray-darker">
+                <h2 class="text-center fs-s1 fw-600 white uppercase ls-wider">vertical-stripes</h2>
+                </div>
+            <section id="vertical-stripes" class="flex flex-wrap">
+                <div class="w-100pc md-w-50pc p-5">
+                    <div class="relative h-1by2 bg-white gray-lightest pattern-vertical-stripes-sm">
+                        <div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-vertical-stripes-sm
+                        </div>
+
+                    </div>
+                </div>
+                <div class="w-100pc md-w-50pc p-5">
+                    <div class="relative h-1by2 bg-yellow-lightest yellow pattern-vertical-stripes-md">
+                        <div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-vertical-stripes-md
+                        </div>
+
+                    </div>
+                </div>
+                <div class="w-100pc md-w-50pc p-5">
+                    <div class="relative h-1by2 bg-white indigo-lightest pattern-vertical-stripes-lg">
+                        <div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-vertical-stripes-lg
+                        </div>
+
+                    </div>
+                </div>
+                <div class="w-100pc md-w-50pc p-5">
+                    <div class="relative h-1by2 blue pattern-vertical-stripes-xl">
+                        <div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-vertical-stripes-xl
+                        </div>
+
+                    </div>
+                </div>
+            </section>
+            <div class="pattern-diagonal-stripes-md p-2 my-5 slategray-darker">
+                <h2 class="text-center fs-s1 fw-600 white uppercase ls-wider">horizontal-stripes</h2>
+                </div>
+            <section id="horizontal-stripes" class="flex flex-wrap">
+                <div class="w-100pc md-w-50pc p-5">
+                    <div class="relative h-1by2 bg-white gray-lightest pattern-horizontal-stripes-sm">
+                        <div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-horizontal-stripes-sm
+                        </div>
+
+                    </div>
+                </div>
+                <div class="w-100pc md-w-50pc p-5">
+                    <div class="relative h-1by2 bg-white yellow pattern-horizontal-stripes-md">
+                        <div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-horizontal-stripes-md
+                        </div>
+
+                    </div>
+                </div>
+                <div class="w-100pc md-w-50pc p-5">
+                    <div class="relative h-1by2 bg-indigo-lightest white pattern-horizontal-stripes-lg">
+                        <div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-horizontal-stripes-lg
+                        </div>
+
+                    </div>
+                </div>
+                <div class="w-100pc md-w-50pc p-5">
+                    <div class="relative h-1by2 bg-yellow teal-dark pattern-horizontal-stripes-xl">
+                        <div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-horizontal-stripes-xl
+                        </div>
+
+                    </div>
+                </div>
+            </section>
+            <div class="pattern-diagonal-stripes-md p-2 my-5 slategray-darker">
+                <h2 class="text-center fs-s1 fw-600 white uppercase ls-wider">triangles</h2>
+                </div>
+
+            <section id="triangles" class="flex flex-wrap">
+                <div class="w-100pc md-w-50pc p-5">
+                    <div class="relative h-1by2 bg-white gray-lightest pattern-triangles-sm">
+                        <div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-triangles-sm
+                        </div>
+
+                    </div>
+                </div>
+                <div class="w-100pc md-w-50pc p-5">
+                    <div class="relative h-1by2 bg-yellow-80 yellow-dark pattern-triangles-md">
+                        <div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-triangles-md
+                        </div>
+
+                    </div>
+                </div>
+                <div class="w-100pc md-w-50pc p-5">
+                    <div class="relative h-1by2 bg-pink-lighter pink pattern-triangles-lg">
+                        <div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-triangles-lg
+                        </div>
+
+                    </div>
+                </div>
+                <div class="w-100pc md-w-50pc p-5">
+                    <div class="relative h-1by2 bg-yellow teal-dark pattern-triangles-xl">
+                        <div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-triangles-xl
+                        </div>
+
+                    </div>
+                </div>
+            </section>
+            <div class="pattern-diagonal-stripes-md p-2 my-5 slategray-darker">
+                <h2 class="text-center fs-s1 fw-600 white uppercase ls-wider">zigzag</h2>
+                </div>
+            <section id="zigzag" class="flex flex-wrap">
+                <div class="w-100pc md-w-50pc p-5">
+                    <div class="relative h-1by2 bg-white gray-lightest pattern-zigzag-sm">
+                        <div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-zigzag-sm
+                        </div>
+
+                    </div>
+                </div>
+                <div class="w-100pc md-w-50pc p-5">
+                    <div class="relative h-1by2 bg-yellow-80 yellow-dark pattern-zigzag-md">
+                        <div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-zigzag-md
+                        </div>
+
+                    </div>
+                </div>
+                <div class="w-100pc md-w-50pc p-5">
+                    <div class="relative h-1by2 bg-yellow-70 yellow-dark pattern-zigzag-lg">
+                        <div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-zigzag-lg
+                        </div>
+
+                    </div>
+                </div>
+                <div class="w-100pc md-w-50pc p-5">
+                    <div class="relative h-1by2 bg-white gray-lightest pattern-zigzag-xl">
+                        <div class="absolute-center inline-block br-6 p-2 bg-indigo white fw-300 fs-s2 ls-wider">.pattern-zigzag-xl
+                        </div>
+
+                    </div>
+                </div>
+            </section>
+
+            </section>
+        </section>
+    </main>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/cferdinandi/smooth-scroll@15/dist/smooth-scroll.polyfills.min.js"></script>
+    <script type="text/javascript">
+        $(document).ready(function(){
+            var scroll = new SmoothScroll('a[href*="#"]');
+        });
+        // Sidebar toggle
+        $('#sidebar-toggle').on('click', function () {
+            $('#sidebar-container').toggleClass('ml--100pc');
+            return false;
+        });
+
+        $(document).on('click', function (e) {
+            if ($(e.target).closest('#sidebar-container').length == 0) {
+                $('#sidebar-container').addClass('ml--100pc');
+            }
+        });
+    </script>
+
+</body>

package.json

@@ -0,0 +1,27 @@
+{
+  "name": "pattern.css",
+  "version": "1.0.0",
+  "description": "CSS library of modern background patterns",
+  "main": "pattern.scss",
+  "unpkg": "dist/pattern.min.css",
+  "scripts": {
+    "build-autoprefix": "postcss -u autoprefixer --no-map.inline --autoprefixer.browsers \"cover 99.5%\" -r dist/*.css",
+    "build-dist": "node-sass --output-style expanded --source-map true pattern.scss dist/pattern.css && node-sass --source-map true --output-style compressed pattern.scss dist/pattern.min.css",
+    "build": "npm run build-dist && npm run build-autoprefix"
+  },
+  "author": "bansal-io <hello@bansal.io>",
+  "license": "MIT",
+  "keywords": [
+    "css",
+    "scss",
+    "framework",
+    "ui",
+    "frontend",
+    "pattern"
+  ],
+  "devDependencies": {
+    "autoprefixer": "^9.7.6",
+    "node-sass": "^4.13.1",
+    "postcss-cli": "^7.1.0"
+  }
+}

pattern.scss

@@ -0,0 +1,204 @@
+$pattern-prefix : 'pattern' !default;
+
+$pattern-sizes : (sm:10px,
+    md:25px,
+    lg:50px,
+    xl:100px,
+) !default;
+
+$pattern-list: ('checks',
+    'grid',
+    'grid',
+    'dots',
+    'cross-dots',
+    'vertical-lines',
+    'horizontal-lines',
+    'diagonal-lines',
+    'vertical-stripes',
+    'horizontal-stripes',
+    'diagonal-stripes',
+    'triangles',
+    'zigzag'
+) !default;
+
+$dots : (sm:.5px,
+    md:1px,
+    lg:1.5px,
+    xl:2px) !default;
+
+// .bg-checks-{sm, md, lg, xl}
+@if index($pattern-list, 'checks') {
+
+    @each $name,
+    $size in $pattern-sizes {
+        .#{$pattern-prefix}-checks-#{$name} {
+            background-image:
+                repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor),
+                repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor);
+            background-position: 0 0,
+            #{$size} #{$size};
+            background-size: calc(2 * #{$size}) calc(2 * #{$size});
+        }
+    }
+}
+
+// .bg-grid-{sm, md, lg, xl}
+@if index($pattern-list, 'grid') {
+
+    @each $name,
+    $size in $pattern-sizes {
+        .#{$pattern-prefix}-grid-#{$name} {
+            background-image:
+                linear-gradient(currentColor 1px, transparent 1px),
+                linear-gradient(to right, currentColor 1px, transparent 1px);
+            background-size: #{$size} #{$size};
+            // background-position: calc(-0.5 * #{$size}) calc(-0.5 * #{$size});
+        }
+    }
+}
+
+// .bg-dots-{sm, md, lg, xl}
+@if index($pattern-list, 'dots') {
+
+    @each $name,
+    $size in $dots {
+        .#{$pattern-prefix}-dots-#{$name} {
+            background-image: radial-gradient(currentColor #{$size}, transparent #{$size});
+            background-size: calc(10 * #{$size}) calc(10 * #{$size});
+        }
+    }
+}
+
+// .bg-cross-dots-{sm, md, lg, xl}
+@if index($pattern-list, 'cross-dots') {
+
+    @each $name,
+    $size in $dots {
+        .#{$pattern-prefix}-cross-dots-#{$name} {
+            background-image: radial-gradient(currentColor #{$size}, transparent #{$size}),
+            radial-gradient(currentColor #{$size}, transparent #{$size});
+            background-size: calc(20 * #{$size}) calc(20 * #{$size});
+            background-position: 0 0,
+            calc(10 * #{$size}) calc(10 * #{$size});
+        }
+    }
+}
+
+@each $name,
+$size in $pattern-sizes {
+
+    // .bg-vertical-lines-{sm, md, lg, xl}
+    @if index($pattern-list, 'vertical-lines') {
+        .#{$pattern-prefix}-vertical-lines-#{$name} {
+            background-image: repeating-linear-gradient(to right,
+                    currentColor,
+                    currentColor 1px,
+                    transparent 1px,
+                    transparent);
+            background-size: #{$size} #{$size};
+        }
+    }
+
+    // .bg-horizontal-lines-{sm, md, lg, xl}
+    @if index($pattern-list, 'horizontal-lines') {
+        .#{$pattern-prefix}-horizontal-lines-#{$name} {
+            background-image: repeating-linear-gradient(0deg,
+                    currentColor,
+                    currentColor 1px,
+                    transparent 1px,
+                    transparent);
+            background-size: #{$size} #{$size};
+        }
+    }
+
+    // .bg-diagonal-lines-{sm, md, lg, xl}
+    @if index($pattern-list, 'diagonal-lines') {
+        .#{$pattern-prefix}-diagonal-lines-#{$name} {
+            background-image: repeating-linear-gradient(45deg,
+                    currentColor 0,
+                    currentColor 1px,
+                    transparent 0,
+                    transparent 50%);
+            background-size: #{$size} #{$size};
+        }
+    }
+}
+
+
+@each $name,
+$size in $pattern-sizes {
+
+    // .bg-vertical-stripes-{sm, md, lg, xl}
+    @if index($pattern-list, 'vertical-stripes') {
+        .#{$pattern-prefix}-vertical-stripes-#{$name} {
+            background-image: linear-gradient(90deg, transparent 50%, currentColor 50%);
+            background-size: #{$size} #{$size};
+        }
+    }
+
+    // .bg-horizontal-stripes-{sm, md, lg, xl}
+    @if index($pattern-list, 'horizontal-stripes') {
+        .#{$pattern-prefix}-horizontal-stripes-#{$name} {
+            background-image: linear-gradient(0deg, transparent 50%, currentColor 50%);
+            background-size: #{$size} #{$size};
+        }
+    }
+
+    // .bg-diagonal-stripes-{sm, md, lg, xl}
+    @if index($pattern-list, 'diagonal-stripes') {
+        .#{$pattern-prefix}-diagonal-stripes-#{$name} {
+            background: repeating-linear-gradient(45deg,
+                transparent,
+                transparent #{$size},
+                currentColor #{$size},
+                currentColor calc(2 * #{$size}));
+        }
+    }
+}
+
+// .bg-zigzag-{sm, md, lg, xl}
+@if index($pattern-list, 'zigzag') {
+
+    @each $name,
+    $size in $pattern-sizes {
+        .#{$pattern-prefix}-zigzag-#{$name} {
+            background: linear-gradient(135deg, currentColor 25%, transparent 25%) -#{$size} 0,
+            linear-gradient(225deg, currentColor 25%, transparent 25%) -#{$size} 0,
+            linear-gradient(315deg, currentColor 25%, transparent 25%),
+            linear-gradient(45deg, currentColor 25%, transparent 25%);
+            background-size: calc(2 * #{$size}) calc(2 * #{$size});
+        }
+    }
+}
+
+// .bg-triangles-{sm, md, lg, xl}
+@if index($pattern-list, 'triangles') {
+
+    @each $name,
+    $size in $pattern-sizes {
+        .#{$pattern-prefix}-triangles-#{$name} {
+            background-image: linear-gradient(45deg,
+                    currentColor 50%,
+                    transparent 50%);
+            background-size: #{$size} #{$size};
+        }
+    }
+}
+
+// .text-pattern
+.text-pattern {
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+// Width and Height
+@each $name,
+$size in $pattern-sizes {
+    .#{$pattern-prefix}-w-#{$name} {
+        width: $size;
+    }
+
+    .#{$pattern-prefix}-h-#{$name} {
+        height: $size;
+    }
+}