Exercise 6

Building the Quote pattern

The quote pattern is similar to the other single item patters we have built with the exception that the quote has two fields, the quote text itself and the quote author name. This means our data and markup files will be a little more complex than previous patterns.

Quote Data

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

quote.ui_patterns.yml

quote:
  label: Quote
  description: A simple quote pattern
  fields:
    quote_text:
      type: text
      label: Title field
      description: Title field for quote pattern
      preview: Surfing is the most blissful experience you can have on this planet, a taste of heaven.
    quote_author:
      type: text
      label: Author name
      description: Name of quote author
      preview: John McCarthy
  libraries:
    - quote:
        css:
          component:
            quote.css: {}

Quote Markup

pattern-quote.html.twig

<blockquote class="quote">
  <div class="quote__text">
    {{ quote_text }}
  </div>
  <cite class="quote__author">{{ quote_author }}</cite>
</blockquote>

Quote Styles

quote.css

.quote {
  padding: 30px 0;
  text-align: center;
}

.quote__text,
.quote__author {
  max-width: 750px;
  margin: 0 auto;
}

.quote__text,
.quote__text .body-text {
  font-family: "Merriweather", Georgia, serif;
  font-size: 1.5rem;
  line-height: 1.5;
  margin-bottom: 15px;
  font-style: italic;
}

.quote__author {
  display: block;
  padding-bottom: 70px;
  position: relative;
}

.quote__author::after {
  background-color: #5da8ef;
  bottom: 0;
  content: '';
  display: block;
  left: calc(50% - 1px);
  position: absolute;
  width: 2px;
  height: 50px;
}

.quote__author,
.quote__author .eyebrow {
  font-size: 1rem;
  font-style: normal;
  font-weight: bold;
  line-height: 1.3;
  text-transform: uppercase;
}

Improving the Quote pattern

The quote pattern is pretty simple and there is nothing wrong with how we built it. However, going back to the Atomic design concept, we can use pre-built patterns to make the quote pattern. This may seem as an extreme for a pattern so simple as the quote, but it's mainly an exercise to lean how to build more flexible and reusable patterns.

Let's modify the Quote's .yml file so it looks like this:

quote:
  label: Quote
  description: A simple quote pattern
  fields:
    quote_text:
      type: text
      label: Title field
      description: Title field for quote pattern
      preview:
        type: pattern_preview
        id: body
    quote_author:
      type: text
      label: Author name
      description: Name of quote author
      preview:
        type: pattern_preview
        id: eyebrow
  libraries:
    - quote:
        css:
          component:
            quote.css: {}