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