Chapter 1
Chapter 2
Chapter 4
Chapter 5
Chapter 6
Chapter 7
Welcome!
This is a hands-on training workshop which will walk you through the process of building components and integrate those components with Drupal 8. Component based development is typically broken down in 3 parts:
- Building stand-alone components with Twig using Pattern Lab.
- Building Drupal's back-end.
- Integrating Components with Drupal.
What are Components?
Components are portions of reusable code within your system and they serve as the building blocks of your application’s interface. Components range in complexity. Reducing components to a single atom, like a button or a drop down increases flexibility, making them more reusable. More complex components, like tables for specific types of data, can serve their use cases well, but this complexity limits the number of applicable scenarios. The more reusable your components are, the less you need to maintain, and the easier scale becomes.
Why Components?
Building a website using the component-based approach can dramatically improve collaboration among teams, making code more reusable, flexibility, and long term maintenance of your website becomes easier. We will work on building a living style guide which will become the single source of truth for markup, styles and javascript behaviors. Components promote re-usability which in turn eliminates code repetition. Think of components as building blocks or legos which you will build once and be able to use them over and over throughout your website.
Topics this training covers
Components
Contrary to the top-to-bottom theming we have been doing for years, components allow us to build and theme our websites by breaking it down into pieces. This presents several advantages over traditional theming including reusability, better CSS structure, limited CSS nesting, less risk of regressions and more.
Style-guide
Style-guides are nothing new, they have been around for years, but now they are essential for documenting your component building process and showcasing your component's library. In this training we will use Pattern Lab, a modern design system, to create a living style guide which we will use to catalog components. These components will be the single source of truth for markup, styles and javascript behaviors which later Drupal will use to render the site's content.
Twig
Drupal 8's new templating system is a themer's best friend. Twig's easy to read and learn syntax can be leveraged to write powerful logic in your theme without resorting to traditional PHP templates.
BEM and SMACSS
While building components we are given the opportunity to architecture markup in the best way possible to ensure our components are as flexible and lightweight as possible. By using BEM to name our CSS classes and SMACSS for structuring our theme we can achieve tremendous control and organization of our themes, markup and styles.
NPM, Node and Gulp
Front-End tooling has evolved and has become a complex combination of plugins, libraries and dependencies which can add overhead to our projects.
In the process of this training you will be exposed to tools such as Node, Node Package Manager (NPM), Gulp, Node Version Manager (NVM), and several other libraries and plugins essential for an advanced and modern front-end environment. No worries though, these tools are already integrated in our custom front-end workflow so you don't have to install these tools
Who is this training for?
This training is intended for front and back-end developers who are building websites in Drupal 8. However, it also benefits those who want to have a better understanding of component based development such as project managers, managers and site builders. A good understanding of HTML, Twig, CSS/Sass and command line is recommended. After this training, you will have a solid understanding of how to build and theme components in a living style guide and be able to integrate those components with Drupal with a single source of truth for markup, styles, and javascript.
Training requirements
- Laptop computer with latest versions of your favorite browser
- Text editor of your choice
- Basic knowledge of HTML and CSS is required
- Good understanding of Twig is helpful but not required
Last modified 2yr ago