https://github.com/beardedstudio/middleman-patterns

An implementation of Pattern Lab (http://patternlab.io) for middleman.
https://github.com/beardedstudio/middleman-patterns

Last synced: 5 days ago
JSON representation

An implementation of Pattern Lab (http://patternlab.io) for middleman.

• Host: GitHub
• URL: https://github.com/beardedstudio/middleman-patterns
• Owner: beardedstudio
• License: mit
• Created: 2015-01-12T20:36:35.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2015-01-28T21:38:13.000Z (almost 10 years ago)
• Last Synced: 2024-08-02T12:49:12.590Z (3 months ago)
• Language: Ruby
• Size: 535 KB
• Stars: 63
• Watchers: 9
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-starred - beardedstudio/middleman-patterns - An implementation of Pattern Lab (http://patternlab.io) for middleman. (others)

README

        
# Pattern Man

A middleman extension that implements [Pattern Lab-style](http://patternlab.io) patterns.

[![Build Status](https://travis-ci.org/beardedstudio/middleman-patterns.svg?branch=develop)](https://travis-ci.org/beardedstudio/middleman-patterns)

[![Coverage Status](https://coveralls.io/repos/beardedstudio/middleman-patterns/badge.svg?branch=develop)](https://coveralls.io/r/beardedstudio/middleman-patterns?branch=develop)

### Installation

You'll need to install this gem first.

* put `gem 'middleman-patterns'` in the Gemfile of your middleman project

* run `bundle install`

* add `activate :patterns` to your `config.rb` file outside the `configure :build` block

You're up and running! This gem supports whatever templating engines middleman supports, but you do need to put the template files for patterns where this extension can find them. The expected default directory structure looks like the following (filenames are examples):

```

source/

  patterns/

    templates/

      user-information.html.erb

    organisms/

      address-input.html.erb

    molecules/

      labeled-input.html.erb

    atoms/

      button.html.erb

```

### Using Patterns

Put some HTML in your patterns:

```html+ruby

# patterns/molecules/labeled-input.html.erb

---

input_class: 'input'

---



  

    <%= label_text %>

  

  <%= atom 'input' %>



```


```html+ruby

# patterns/atoms/input.html.erb

---

input_type: text

---

 id="<%= input_id %>" <% end %>>

```

Then use the appropriate helper method in your middleman view:

```html+ruby

# source/index.html.erb



  <%= molecule 'labeled-input', input_id: 'some_input', label_text: "Fill me out!" %>



```


And your output will be:

```html



  


    

      Fill me out!

    

    

  



```


### Demo Site

We put a little [demo](http://beardedstudio.github.io/middleman-patterns/) up online!

### Config options

You can customize the patterns directory by passing `patterns_directory: 'other_directory'` when activating the extension.

By default, this extension ignores everything in the `patterns` directory when building the site, so you don't end up with pages with URLs like `/patterns/atoms/button.html`. You can override this so that the site *does* build these pages if you want, by passing the `build_patterns` option.

`activate :patterns, build_patterns: true`