A tool to add design patterns into your code base that follow a highly opinionated directory structure and encourage standardized patterns. No more copy pasta. As an added benefit you get a living styleguide that genuinely reflects the use of your design patterns.

We got our ideas for rendering design patterns using a method from Mountain View, and the notion for pre-made design patterns from Refills.

Generating the patterns

Scaffolding via a command line tool that pulls (maybe via curl) patterns from a library into your code base:

  $ patterns import card

  # app/views/patterns/card.html
  # app/assets/scripts/patterns/card.js
  # app/assets/styles/patterns/card.scss

Rendering the pattern

We use a simple method to render a design pattern into your markup. You pass locales to populate the content of the pattern:

  object.each do
    render_pattern(:card,
      title: object.title,
      body_text: object.body_text
    );
  end

  render_pattern(:card,
    title: "Title"
    body_text: "Body Text"
  );

Styleguide

Generate the routes for the style guide with a command line command:

  $ patterns generate styleguide

  # app/controllers/patterns_controller.rb
  # app/views/patterns/styleguide.html

  # routes.rb ... modified

To Do:

• Taxonomy of patterns (maybe via directory structure)
• Add typography etc.
• Repo/website of design patterns made by contributors