- Intermediate MLK Student Union - East Pauley Ballroom
Trainer: Mediacurrent with Mario Hernandez

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 outdated.

In this training we will put into practice one of the latest trends in development, 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. We will work on building a living styleguide which will become the single source of truth for markup, styles and javascript behaviors.

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


KSS Node is a modern documentation syntax for CSS (link 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.  These components will be the single source of markup, styles and javascript behaviors which Drupal will use when rendering our website.

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.

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.  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.

Theme Generator:
Thanks to the hard work Mediacurrent has put into creating a theme generator system that provides a scaffold for a theme with all the latest tools, plugins and automation, we can create a brand new custom theme in matter of minutes.  This theme complies with today’s standards and best practices to easily integrate with Drupal.
It’s worth noting that the scaffold provided by the theme generator can also be used in a non-drupal project.

NPM, Node and Gulp:
The theme generator is built on Node and offers the latest plugins for today’s front-end applications including Drupal themes.  NPM allows us to easily install packages or dependencies as needed and Gulp makes it easy to automate the repetitive task we perform while building websites (i.e. sass compile, image compression, js/css minifying, etc.).

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 training 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 is recommended but not required. After this training you will have a solid understanding of how to 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.


Training requirements:

NOTE:  BADCamp nor Mediacurent are not liable for any issues that may arise from installing the software above.

Codebase and Exercises (work in progress)

Download a sample codebase which we will use during the training. In addition, get a preview of some of the exercises we will be working with

Grab the code and exercises

Login to Register