A pattern library designed to be easier to maintain
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.
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.
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.
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!
You? Tweet me to be added
Use pattern-book from NPM.
See readme.md for usage.
The background book tile graphic designed by Freepik