A pattern library designed to be easier to maintain

Q. What is a Pattern Library?

A pattern library, also known as a style guide, is a way of showing example usage of HTML and CSS for components (React components, or plain HTML).

When sites comprise different technologies or are very large then having this example usage can help achieve design consistency.

Q. How can I make patterns for an existing website?

One of the advantages of Pattern-Book is that it autodetects the CSS Rules being applied to your HTML, so you can put your production site's CSS files on the page and then write HTML to use them and Pattern-Book will do the rest. It will only display the relevant CSS (no need to manually associate CSS with a particular component). This means that it's hopefully a lot less effort to repurpose your existing CSS as a pattern library.

Pattern-Book supports whitelists and blacklists of CSS to help show the relevant styles.

Q. This is a pattern library so where's the dev webserver?

Great question.

pattern-book doesn't include a dev server because other projects do it better.

So just use Create-React-App or, add <Book>` tags to a new page in your app, or use whatever boilerplate you like.

Q. How does pattern-book arrange the page of patterns... with headings, accordions, tabs, or what?

Imagine if your pattern library had 5 components then it probably should be designed quite differently to another library with 1000 components, so this software is intentionally unopinionated about organisation. pattern-book just renders the component preview itself so decide for yourself how to organise them (do try react-accessible-accordion though!).

It doesn't organise them, so design it however you want!

Features

• Minimal
• CSS Autodetection, so there's no need to manually associate CSS with a pattern
• HTML beautifier
• CSS Beautifier
• CSS Rule blacklist and whitelist per-book (filter by stylesheet filename, media, or rule)
• Render props to support templating

Who's using it? / Demo

• LIC Pattern Library

You? Tweet me to be added

Usage

Use pattern-book from NPM.

See readme.md for usage.

ToDo

• ZIP download of particular components (including assets, eg backgrounds images and fonts).
• ...and show prop types, somehow? (`prop-types` or Flow/TS?). Sadly I'm not sure how we could support FlowType/TypeScript types because those are removed at compile-time.
• Detect basic JSX React Components... this is almost working
• support interactive components (eg accumulating CSS across these multiple states).
• Make the `<Book>` not render until it scrolls into view (pattern libraries are notorious for having hundreds of compnents on a long page, so this is hopefully an easy optimisation).
• Parse SourceMaps to derive Sass (etc) if possible.

Credits

The background book tile graphic designed by Freepik

The software by Matt Holloway ( @hollowaynz) thanks to Springload.co.nz.