Components Based Design in Drupal

Step 1: Defining patterns
To use a pattern, we need to define it first! Pattern definitions contain metadata about the pattern. Let’s create a pattern called basic_card. Start by creating the following file:
Note: Any changes to this YML file will only take effect after clearing Drupal’s cache.

THEME/patterns/basic_card/basic_card.patterns.yml

 

basic_card:
  label: 'Basic Card'
  description: Basic Card Example.
  variants:
    default:
      label: Default card
      description: Default basic card example.
    highlighted:
      label: Highlighted basic card
      description: Highlighted Basic Card.
  fields:
    title:
      type: text
      label: Card Title
      description: Basic Card title .
      preview: 'Basic Card Title'
    body:
      type: text
      label: Card Body
      preview: This is description of basic card body.
    image:
      type: image
      label: card Image
      description: Image of the Basic Card.
      preview: <img src="https://mdbootstrap.com/img/Photos/Others/images/43.jpg"/>
    author:
      type: text
      label: Author By
      description: Basic Card Author
      preview: Admin
    date:
      type: date
      label: Author On
      description: Publish date and time
      preview: 18 may
    url:
      type: url
      label: link
      description: link to content
  libraries:
    -
      basic_card:
        css:
          component:
            css/basic-card.css: {}

Here’s a description of some of the noteworthy elements of the definition.

Fields

Definition of fields supported by this pattern, keyed by field IDs. Each field must have:

• label: A human-readable label.
• description: A description.
• type: The type of data expected by the field. Example: text|numeric|uri|boolean|collection|mixed.
• preview: A string or a Drupal renderable array. This is used to generate previews on the pattern library page your-site/patterns.

Libraries
Define Drupal libraries for your pattern. This makes your UI pattern self-contained as these libraries are automatically loaded whenever you use the associated pattern.
 
Loading UI pattern libraries globally
What if we want to have the CSS / JS for the blockquote on all pages, even the ones where the pattern is not used? You can do this by referring to the pattern’s library from your THEME.libraries.yml as follows:

global-styling:
  # ...
  dependencies:
    - ui_patterns/basic_card.basic_card
    # ...

In this way, you can style all block basic-card on the site without repeating the CSS elsewhere.

Variants

The UI Patterns also support component variants. Variants are different versions of the same UI pattern. Say, we want to have 2 types of block quotes:
1.  Default version
2.  Highlighted version
You can do this by including the variants key in your pattern definition as follows:

 

variants:
    default:
      label: Default card
      description: Default basic card example.
    highlighted:
      label: Highlighted basic card
      description: Highlighted Basic Card.

Step 1: Pattern templates

Once you’ve defined the pattern, create a basic_card.html.twig in your pattern’s directory. This will contain a template for the blockquote.

 

      <div class="card" style="width: 18rem;">
      {{ image }}
	{% if author or date %}
	<div class="pl-4 pt-1">
	<span class="pr-5"><i class="fa fa-user"></i>
	{{ author}}</span>
	<span class="pr-5"><i class="fas fa-calendar-  alt"></i>
	{{ date }}</span>
	</div>
	{% endif %}
       <div class="card-body">
    <div class="">
    </div>
    <h5 class="card-title">{{ title }}</h5>
    {% if body %}
	<p class="card-text">{{ body }}</p>
	{% endif %}
	{% if url %}    
<a href="{{ url|striptags }}" class="btn btn-primary">
	Read more..</a>
	{% endif %}
  </div>
</div>

Here is the preview of the basic card on /patterns page

 

Step 2: Organizing patterns

 

It is quite possible to dump all the patterns in a single directory. However, once you start creating a bunch of patterns, it is highly recommended that you organize them nicely. One such approach is to organize them into directories as per Atomic Design principles.

As per atomic design principles, we can arrange the patterns as follows:

• Atoms: Basic building-blocks or the smallest of patterns. Example: A title, an image, a button.
• Molecules: Patterns that use one or more atoms. Example: A hero that comprises of a title, an image, and a button.
• Organisms: Patterns that use a combination of one or more molecules. Example: The page header comprising of a logo, a navbar, and a hero.
• Templates: Groups of organisms and smaller patterns, stitched together to form pages. Example: A standard page that has a header and a footer.
• Pages : Are “specific instances of templates” and they are “the most tangible”. Example: The home page or the contact page.

I like this school of thought and I use it in my projects like many other developers. However, you can organize your templates as per your team’s preferences.
Using UI Patterns with Views
Most Drupal sites need to provide pages with lists of content, for example, a blog page, a search results page, etc. With the UI Patterns Views module, you can render the items of these list pages consistently as UI patterns.

First, choose the row style as Pattern, then click on Settings to map the views fields to pattern fields.

To render Views rows as UI patterns, do the following:

Edit the View and in the Show field under the format section, choose Pattern.

Now, in the row style options dialog, choose a pattern — each row in the View will be rendered using this pattern.

Next, add some fields to the View — these fields will provide data to the UI pattern.

When all required fields are added to the view, click the Settings link for the Show field and map the View fields to the correct UI pattern fields.

Now, when you save the View and visit the page containing the View, each row will appear as a UI pattern.

 Thanks.