Component-driven Development

Presenters: mariohernandez

Session Recording:

Modern development has become a complicated mix of fast-moving technologies. The challenge for developers is trying to keep up with the latest changes. How do you find and learn about the best tools and techniques? And even after we've learned a new tool, it can feel like our skills are soon out-dated.

This session will expose you to the latest trends in development and in particular, Drupal development. We talk about how building components vs. pages in a Drupal site can dramatically improve usability, flexibility and long term maintenance of your website. By building components through the use of living style guides you can turn a large complicated project into a more manageable project.

Topics we will cover:


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 (components). This presents several advantages over traditional theming including reusability, better css structure, less risk of regressions and more.


We will introduce you to KSS Node, a modern documentation syntax for CSS ( is external)), which is intended to be readable by humans and machines. KSS Node allows us to create a living styleguide which we will use to catalog components built on a website.


Drupal 8's new templating system is a themer's best friend. Its easy to read and learn syntax can be leverage to write powerful logic in your theme without resorting to traditional php templates.

NPM, Node and Gulp

In going through the setup we'll touch on BEM, KSS Node, Twig Templates, preprocess, and more.

Benefits of Component Driven Development:

  • Front and Back-end developers can work side by side without one blocking the other
  • Client can have an early preview of development process via the living styleguide
  • Less development by building reusable components

... and more.

Who should attend this class?

This class is intended for front and back-end developers who are building websites in Drupal 8. A good understanding of HTML, Twig, CSS/Sass and command line usage is recommended. After this session you will have a solid understanding of how build and theme site components in a living style guide and be able to integrate those components into drupal with a single source of truth for markup, styles and javascript.


Get a head start by watching a talk we did at Drupal 8 Day:

Experience Level
Schedule Info
Conference Year
Date / Time
Room E1
Session Track
Design, UX, and Accessibility