Component-based Development Workshop

Speaker(s):

With the component-based approach becoming the standard for Drupal 8 development we’re beginning to see some slick front-end environments show up in Drupal themes. The promise that talented front-enders with little Drupal knowledge can jump right in is now a reality and we at Mediacurrent are experiencing this firsthand already.

In this training, we will put into practice one of the latest trends in development: components. Building a website using a component-based approach can help make code more reusable, dramatically improve collaboration among teams, while improving flexibility and long-term maintenance of your project. We will work on building a living style guide which will become the single source of truth for markup, styles, and javascript behaviors./p>

Topics we will cover

The component-based approach

Contrary to the top-to-bottom theming we have been doing for years, the component-based approach enables us to build websites by breaking down the UI into self-contained, reusable parts. This presents several advantages over traditional theming including faster development time, more sane CSS structures, less risk of regressions, and more!

A living styleguide

A living styleguide is a powerful tool to add to your project because it gives you a quick look at the components you are building and most importantly it becomes the single source of truth for your markup, styles and javascript code. In some instances, a style guide can become the preferred way for clients to perform quality assurance testing as well as being able to see how the project is progressing. Pattern Lab will be used to generate this styleguide.

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

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

Who should attend this class?

This training is intended for front and back-end developers who are building websites in Drupal 8 as well as site builders and designers who often have to work across disciplines or collaborate with other departments and/or vendors to manage, update, and improve their websites. A good understanding of HTML, Twig, CSS/Sass and command line is recommended but not required.

 

What will attendees gain from this workshop?

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.

 

Prerequisites

  • Basic understanding of Twig and Drupal Theming is helpful.

  • Component based theming experience is helpful but not required.

  • Site building experience is helpful but not required.

  • Basic familiarity with Terminal and command line

  • Code editor installed on your machine. We recommend VS Code (its free!), but any code editor will do.

 

 

Session Track: Training
Experience Level: Intermediate
Date: Wednesday June 26
Time: 9:00 - 4:00
Room: 32-124