Академический Документы
Профессиональный Документы
Культура Документы
Pattern Lab
Componentization has become a growing consideration in most of the web application
development firms. The reasons are obvious, instead of reinventing the wheels again and again,
why don’t we re-use them. This article will help you to understand the importance of
componentizing your Drupal front end and how you can achieve that using Pattern Lab.
So what is Componentization?
In front end perspective, components are a collection of HTML, CSS and JS that combines
together to form a display element and Component-Driven Development (CDD), a development
methodology by which the web pages are build from the bottom up. 'Componentization' is the
process of breaking things down into small and easily identifiable pieces, a practice used by
developers and designers alike to solve complex problems.
Before installing Emulsify, there are certain prerequisites which needs to be met:
1. Node
2. Gulp
3. Composer
4. Components Module:
Installing Emulsify:
1. Emulsify can either be installed using composer or you can directly download Emulsify and
place it in your themes directory.
For installation using composer: composer require fourkitchens/Emulsify.
2. You can rename the downloaded Emulsify theme to suit your project if needed.
3. Run Composer Install from your Emulsify theme
4. Move the Unified Twig Extension module from ‘themes/emulsify/vendor//drupal-pattern-
lab/unified-twig-extensions’ to modules/unified-twig-extensions.
5. Enable the Emulsify theme, unified-twig-extensions and components module.
6. Run ‘npm install’ from the Emulsify theme directory
7. Run ‘composer install’ from the Emulsify theme directory
Certain components are built within Emulsify by default. Let's create a view that will display article
teasers. We will be using the card component which is in the Emulsify theme.
Step 2.3 Override the view template for our articles-list view
Here we are extending the card-grid organism for the necessary wrapper div.
Now clear the cache and view the article list view page. You will be able to see a nice gird card with
the contents you added for the article.
So now you know how to isolate front end workflow in Drupal using Pattern Lab. If you have any
suggestions or queries please comment down let me try to answer.