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

Pattern library examples

Previous year pattern libraries

For content sites

For ecommerce websites

For ecommerce websites
(with sample pages)

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.css—do 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 »

my-pattern-lib
index.html Your standard homepage—but Jekyll-ified
_config.yml Customization & details about the brand
css
modules.css
grid.css
type.css
theme.css For shared CSS, common tags, colours & fonts
main.css Automatically combines all the CSS into one big file
images
_patterns For each different pattern—Patternbot will add some defaults
buttons Each pattern gets its own folder…
buttons.html & HTML file (or many HTML files)
buttons.css & CSS file
config.yml Used to document the pattern