Exercise 2

Building the eyebrow pattern

We will build the eyebrow pattern using the file structure in the previous chapter.

Eyebrow Data

Let's start by building the data that will populate the eyebrow pattern. This data is provided in .yml format.

1. Inside src/components/ create a new folder called eyebrow
2. Inside the eyebrow folder, create a new file called eyebrow.ui_patterns.yml
3. Copy the snippet below inside eyebrow.ui_patterns.yml (indentation is important)

eyebrow:
  label: Eyebrow
  description: Basic eyebrow pattern
  fields:
    eyebrow:
      type: text
      label: Eyebrow
      description: field for eyebrow pattern
      preview: Mark Casias
  libraries:
    - eyebrow:
        css:
          component:
            eyebrow.css: {}

Eyebrow Markup

Now that the data source for the eyebrow pattern is ready, we can create the markup which will print the eyebrow to the screen. The markup for a pattern is written in combination of HTML and Twig. This makes creating patterns extremely efficient and powerful as twig offers so many advantages over plain html.

1. Inside the eyebrow directory create a new file called pattern-eyebrow.html.twig
2. Paste the snippet below into the new file

<p class="eyebrow">{{ eyebrow }}</p>

From the markup example above, we are passing the eyebrow field from the .yml file as a twig variable ( ), then we are wrapping the title variable in a <p> tag.

Eyebrow Styles

It is recommended to create each pattern's styles as individual stylesheets so we can ensure the styles only address the target pattern. This can save from styles leaking or regressions.

1. Inside the eyebrow folder create a new file called eyebrow.css
2. Copy the snippet below into the new file

eyebrow.css

.eyebrow {
  color: #1469a3;
  font-size: 1rem;
  font-weight: bold;
  margin: 0;
  text-transform: uppercase;
}

Previewing your patterns

UI Patterns provides a patterns preview page where you can take a look at your patterns as you build them. This is the equivalent of a styleguide.

1. Before previewing your patterns, you need to clear your site's cache
2. On your site, navigate to /patterns
3. You will see a menu that includes all the patterns you have built. Each pattern shows the metadata we added to the pattern's .yml file.
4. To view a pattern on its own for proper testing and preview, you can click the link just below the pattern and you will be directed to a separate page where you will only see that pattern.