Pattern libraries

An introduction to pattern libraries, how to use them, what they’re for, and a tool, Patternbot, that we can use to generate a pattern library.

Go fullscreen: ⌃⌥F

Pattern libraries

Pattern libraries

A common approach to designing websites

  • Break everything down into the smallest components
  • Write all the CSS individually
  • Combine the smaller components together into larger pieces

Create a library to showcase all the pieces together

Many individual files

We’ll have lots of different HTML & CSS files

  • Buttons: buttons.html, buttons.css

  • Cards: link-card.html, image-card.html, cards.css

  • etc.

Shared CSS

Some CSS will be shared, but only the most basic stuff:

  • modules.css
  • grid.css
  • type.css
  • theme.css

The theme.css will contain the common fonts, colours & basic typography & CSS variables

Class everything!

Unless you’re working in the theme.cssdo not target HTML elements

Absolutely everything will have a class on it—to avoid conflicts

The theme.css is the only place you’ll target <h1> or <dl>, etc.

Pattern library generator

We don’t want to—and shouldn’t have to—write all the CSS to make the library display website

It’s much better to use a tool to generate the page

We can then concentrate on making the patterns—not on making the layout

Pattern library generators

Patternbot—Your pompous and persnickety patterning robot.

  1.  my-pattern-lib
  2.  index.html Generated by Patternbot
  3.  README.md Details about the brand & company
  4.  common
  5.  modules.css
  6.  grid.css
  7.  type.css
  8.  theme.css For shared CSS, common tags, colours & fonts
  9.  images
  10.  patterns For each different pattern—Patternbot will add some defaults
  11.  buttons Each pattern gets its own folder…
  12.  buttons.html & HTML file (or many HTML files)
  13.  buttons.css & CSS file
  14.  README.md Used to describe the pattern
Start

Pattern libraries

An introduction to pattern libraries, how to use them, what they’re for, and a tool, Patternbot, that we can use to generate a pattern library.