Patterns

Link one pattern

Each pattern has its own stylesheet at css/patterns/<slug>.min.css, and its class is dp-<slug>. Put the class on any block element.

<link rel="stylesheet" href="https://cdn.htmltool.io/patterns/1.0.0/css/patterns/seigaiha.min.css">

<section class="dp-seigaiha">…</section>

Or import it from your own stylesheet:

@import url("https://cdn.htmltool.io/patterns/1.0.0/css/patterns/seigaiha.min.css");

Recolor with custom properties

Set the properties on the element or any ancestor. The pattern redraws in the new colors with no regeneration and no new file.

.hero {
  --dp-ink: #0b7285;      /* main color */
  --dp-paper: #fff9db;    /* background (any color, or transparent) */
  --dp-accent: #fab005;   /* second color, where the pattern has one */
  --dp-size: 48px;        /* zooms the tile; strokes scale with it */
  --dp-opacity: 0.6;      /* 0 to 1, multiplies ink and accent alpha */
  --dp-angle: 30deg;      /* rotating gradient patterns */
}

Each pattern lists the properties its CSS honours in the customProperties field of index.json, and on its detail page.

CSS and SVG kinds

Patterns come in two kinds, and they behave slightly differently in a layout.

• Gradient patterns (57, kind: "css") are pure background-* gradients that read the properties directly, like dp-dots. They don't touch positioning.
• SVG patterns (186, kind: "svg") paint the paper color plus one masked color layer per role, on ::before (ink) and ::after (accent). The class therefore sets position: relative and isolation: isolate and uses both pseudo-elements. Content inside stays on top.

Multi-color tiles

6 patterns use more colors than the three knobs, so their CSS is the tile at its default colors and only --dp-paper and --dp-size apply. Recolor them with the JS generator or the custom element, which recolor every pattern:

• stained-glass
• de-stijl-blocks
• memphis
• sprinkles
• bunting
• donuts

JavaScript generator

pattern(name, params) returns ready-to-use CSS, the seamless SVG tile and a data URI. Import the index, or one pattern to keep it small.

import { pattern } from "https://cdn.htmltool.io/patterns/1.0.0/js/index.mjs";

const { css, svg, dataURI } = pattern("seigaiha", { ink: "#0b7285", paper: "#fff9db", size: 48, angle: 30 });
element.style.cssText = css; // background-color, -image and -size

// one pattern only (small)
import { pattern as seigaiha } from "https://cdn.htmltool.io/patterns/1.0.0/js/patterns/seigaiha.mjs";
seigaiha({ ink: "rebeccapurple" });

Params: ink, paper (or "transparent"), accent, size (px), opacity (0 to 1) and angle (degrees). Types ship in js/index.d.ts; PatternName is the union of every slug. A classic script, js/devops-patterns.min.js, defines window.DevOpsPatterns with the same API.

Custom element

<script type="module" src="https://cdn.htmltool.io/patterns/1.0.0/elements/index.mjs"></script>

<dp-pattern name="seigaiha" ink="#0b7285" paper="#fff9db" size="48" style="min-height: 240px">
  <h1>Slotted content sits on top</h1>
</dp-pattern>
<dp-pattern name="isometric-cubes" accent="crimson" angle="30" opacity="0.8"></dp-pattern>

The element is display: block and paints itself through a :host rule, so your own dp-pattern CSS still wins. It fires dp-render and dp-error events.

SVG tiles and data URIs

Every pattern also ships as a seamless SVG tile at its default colors, plus a 2x PNG. Use them anywhere a URL works, such as emails or tools that can't load a stylesheet.

.hero {
  background: url("https://cdn.htmltool.io/patterns/1.0.0/svg/seigaiha.svg") repeat;
}

To inline a recolored tile with no request at all, take dataURI from the generator and paste it into background-image: url(…). The detail pages' Data URI tab does this for you.

Stylus and SCSS

Each file has a mixin whose arguments are the custom properties' fallbacks, plus the class by default. Download the folder first; preprocessors can't import over HTTP.

dp-emit-classes = false   // optional, before the import: mixins only
@import 'devops-patterns/styl/patterns/seigaiha'

.hero
  dp-seigaiha(ink: #0b7285, paper: #fff9db, size: 48px)

Tailwind

Tailwind v4: import the utilities (download the tailwind/ folder). bg-dp-<slug> draws the pattern and the knob utilities recolor it from your theme or arbitrary values.

@import "tailwindcss";
@import "./devops-patterns/tailwind/devops-patterns.css";
/* or tailwind/categories/<category>.css, tailwind/patterns/<slug>.css */

Knob utilities: dp-ink-*, dp-paper-*, dp-accent-*, dp-size-*, dp-opacity-* and dp-angle-*. In v3 the gradient patterns still follow --dp-*; SVG patterns use their tile at the default colors.

Full reference

The CSS uses color-mix() and mask-image: Chrome and Edge 120+, Safari 16.4+, Firefox 113+. The README covers Sass, Less, every file in the package and the element API in full. Read the patterns README(opens in a new tab).