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 chunks, then into pages

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

Jekyll Patternbot—Your pompous and persnickety patterning robot. A system for making pattern libraries, integrated with Jekyll for amazing static site generation. Jekyll Patternbot »

  1.  my-pattern-lib
  2.  index.html Your standard homepage—but Jekyll-ified
  3.  _config.yml Customization & details about the brand
  4.  css
  5.  modules.css
  6.  grid.css
  7.  type.css
  8.  theme.css For shared CSS, common tags, colours & fonts
  9.  main.css Automatically combines all the CSS into one big file
  10.  images
  11.  _patterns For each different pattern—Patternbot will add some defaults
  12.  buttons Each pattern gets its own folder…
  13.  buttons.html & HTML file (or many HTML files)
  14.  buttons.css & CSS file
  15.  config.yml Used to document 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.