The way companies are developing their products is changing. That’s because more people are accessing websites in more ways than ever before. To create and innovate at a faster pace, developers are leveraging reusable components. Pattern Lab is one such front-end framework that uses atomic design architecture to execute the component-based design. Reusability and portability of components are the prime reasons for its fast-gaining popularity.
In this blog, we’ll cover what Pattern Lab is, and how developers can use it with Drupal to create their own frontend library and accelerate their product development.
What is Pattern Lab?
Pattern Lab is based on Brad Frost’s Atomic Design concept. Pattern Lab proves to be one of the best dynamic prototyping and organization tools for professionals. It is easily available for download on GitHub and can be used as part of existing or new projects.
It helps in transforming pattern templates, authored by developers, into a full-featured, static site. Easy to learn, it can be used in different types of projects. In fact, it can also be used as a front-end style guide, a rapid prototyping tool, and the actual templates powering one or more live sites. It uses atomic design for accelerating the process of creating modular designs.
Now, let’s break down the above visual building blocks:
- Atoms: They are the basic building blocks of design. For example, UI elements such as buttons, search fields, form elements, and labels.
- Molecules: These are groups of atoms that work together for performing a particular action. For example, search navigation involves a combination of atoms such as a search button, a search field, and a label.
- Organisms: These are molecules and atoms grouped together to define sections of the application. They’re more complex and also have more interactions. For example, a footer a header, or a related blog post section.
- Templates: Groups of organisms form Templates. They are placeholders for organisms. For example, a login page template, a blog page template, or a shopping cart page template.
- Pages: When we combine a template with real content, we get a page.
Pattern Lab with Drupal
Pattern Lab has become popular in the Drupal community, since the release of Drupal 8 with Twig. The combination of Pattern Lab and Drupal leads to better performance of Drupal websites that are complex in nature. Pattern Lab ensures that its Twig templates and CSS can be consumed like a service by Drupal.
Contributed theme such as Emulsify Drupal that comes with inbuilt the Pattern Lab architecture. Emulsify is basically a component-driven prototyping tool that uses atomic design principles and modern frontend practices in order to build a living style guide. It can be executed easily into any CMS for rendering twig files since it adopts the methodology where the smallest components are atoms, which are assembled into organisms, molecules, templates, and pages.
Emulsify authorizes us to manage and assemble components in a way that improves the workflow by integrating Pattern Lab. So, the Emulsify-based project works with custom template names that are very particular to the project, clients, and developers. This helps in segregating the category-wise patterns (modules) and also increases the expertise of the process.
When the templates are ready for production, Emulsify then connects them to Drupal in a non-complex way as a Twig function (include, extend, or embed) and connects the Drupal templates to the component files.
Emulsify prioritizes a "living style guide" approach where the style guide components are basically the same ones in use on the live websites. And we do not need to worry about the components becoming outdated or more unusual than the normal style guide.
Why should we use Pattern Lab?
Let’s now look at why should we use Pattern Lab.
- Dynamic Data: Patterns are supposed to be authored to work with dynamic data. Example data files are easily customizable, included, and available to templates. Also, we will find a global set of data and the capability to customize per component, and variant. This will further encourage writing templates in such a manner that they can also be used outside of the pattern lab, with real data.
- Organization and Presentation: A high-level structure, or groups, based on "Atomic Design" principles is offered in Pattern Lab. We can choose to work within that structure or change the terminology to whatever fits our wants by directly renaming file system directories. These groups happen to turn into dropdown menus, that expands in order to show all the pattern templates in that group and also allow navigating to them. This indeed makes it very simple for the team members to browse and discover what patterns actually exist.
- Proper documentation: Documentation can be easily added at group and component levels, as wished, by simply adding a markdown file, with the same name. This documentation happens to be exposed in the static site, along with the source code of the template.
- Variants: It’s very common to have several variants of a pattern. For instance, in a typical "Hero" pattern we might just have a "light" and "dark" version. So, basically, Pattern Lab supports variants, which it calls "Pseudo Patterns" and displays them very clearly in the static build.
Conclusion
By implementing Pattern Lab, teams can quickly prototype and iterate without multiple rounds of expensive redesigns with the help of traditional design flats. It enables us to be more efficient when it comes to multi-device testing and cross-browser and also makes the job of a front-end developer a lot easier and more fun.
Pattern Lab supports keeping designers, developers, and stakeholders on track in regard to visual decisions. So, if we prioritize brand consistency, and value design, and wish to have a website that works in a very effective way both on the front-end and the back-end then Pattern Lab is the right choice.
Articles
Off