« Back to the Middleman Patterns GitHub Repo

Let's build some patterns!

First, we create some directories in our patterns directory:

Next, let's create an atom that we know we'll be using throughout our site. In our atoms directory, let's create text-input.haml. And, inside of it, let's write some Haml markup that we think an input field will need.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
---
input_type: text
input_id:
input_classes:
input_placeholder:
input_maxlength:
---

- attrs = {type: input_type}
- attrs[:class] = input_classes if input_classes
- attrs[:id] = input_id if input_id
- attrs[:placeholder] = input_placeholder if input_placeholder
- attrs[:maxlength] = input_maxlength if input_maxlength

%input{attrs}

What we're saying above is that, ultimately, we want to render an input in our markup, but at any time, it could possibly have many optional attributes added to it.

By default, we set our input_type to "text", because typically, we're going to render text fields for this example. Then, we set up our other possible attributes to accept values when they're passed in our other pages and partials.

Here's how we render that text input atom in one of our pages using Haml:

1
2
3
4
5
6
%form
  %label
    First Name:
  = atom 'text-input', input_classes: "input--text", input_placeholder: "Cindy Crosby"

Which will render a lovely input field like so:

And the markup for that will look like:

1
2
3
4
5
6
<form>
  <label>First Name:</label>
  <input type="text" class="input--text" placeholder="Cindy Crosby" />
</form>

You can include atoms inside of molecules inside of organisms inside of templates, just like you can with Pattern Lab.