pattern-book v1.1.6

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 detects the CSS Rules being applied, so you can put your entire site's CSS files on the page and then write HTML that uses them and Pattern-Book will only display the relevant CSS (no need to manually associate CSS with a particular <Book>). This means that it's hopefully a lot less effort to repurpose your existing CSS as a pattern library.

Unlike most Pattern Libaries, also known as Style Guides, there's no need to define components in the way that the framework understands. Instead Pattern-Book works with your existing components and it auto-detects the code being used.

Usage:

import React, { Component } from "react";
import Book from "pattern-book";
import "h6.css"; // contains h6 { color: red; }

class PatternLibrary extends Component {
  render() {
    return (
      <div>
        <h5>Heading Patterns</h5>
        <hr />
        <Book>
          <h6>My Heading 6</h6>
        </Book>
      </div>
    );
  }
}

Will look like

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 instead just use Create-React-App or, add <Book> tags to a new route in your existing app, or use whatever boilerplate you like.

Pattern-Book is very specifically targetting just the render and code preview of your components.

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

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

Code Preview Themes

Who's using it? / Demo

• LIC Pattern Library

You? Tweet me to be added.