Design Pattern Gem Idea

design-pattern-gem.md

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

I love the styleguide build, and I think there's a lot of room to do something better than a gem like Hologram. I've never really used Refills, but mostly because I wish it was something more like this.

The only thing I'm worried about is being able to make a library that is as customizable as possible. For your card example, you could allow for capture blocks (like <%= capture(&block) %>) would let you either feed in simple text like <%= render_pattern :card, title: t(".title"), body_text: t(".body") %>, or something like this:

<%= render_pattern :card, title: t(".title") do %>
  <%= image_tag(...) %>
  <p class="whatever">Text</p>
  ...
<% end %>

If there were options to add css classes, and maybe a configuration file for other customization options, this could be really powerful. I also like that it would only need to include the styles/scripts that you need, following in the Bourbon tradition.

I also like that this would be pretty simple to mirror with a node package for those folks using javascript systems since it seems like we have a lot of Bourbon fans these days that are entirely JS now.

*I forgot to mention that my customization options idea was thinking around how to possibly hide the html/css/js away rather than just putting into the views and assets directories. Of course if that's the plan, then you can customize whatever you want. Just thinking of options.

I echo Josh’s concern around customizing content within a pattern and making that aspect as flexible as possible. Otherwise, as I mentioned, this is a really neat idea and I think we should start building it!