Hands-on Workshop: Component Driven Drupal Theming - Part 1


Please setup your local environment prior to arriving.
Instructions can be found here: https://github.com/mariohernandez/d8_components

Modern web 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 training 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.

I will introduce you to KSS Node, a modern documentation syntax for CSS, 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.

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 material, we'll touch on BEM, SMACSS, KSS Node, Twig Templates, preprocess, and more. Don't worry if you haven't heard about these terminology before, you will have a good understanding of what they are when you are done with this workshop.

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

What you need to bring for this class:
In order to follow along on this training session, you need to bring your own laptop (mac preferable), along with your text editor of choice.
Node.js, NVM, Gulp, and NPM are required and should be installed and working normally. In addition, the latest Drupal 8 should be installed and ready to go.

Laptop computer, mac preferred, running Drupal 8 locally.
The following software must be installed and functional prior to arriving: Node.js & Gulp.
Please add the Paragraphs module and its dependencies if you can.

Here are a couple of resources that walk you through the process of installing the above software:
Install Homebrew on OSX.
Install NodeJS in OSX.
Install NVM on OSX.
Install Gulp on OSX.

Note: Mediacurrent nor DrupalCamp LA are responsible for any issues that may arise from installing this software.


Get a head start by watching a talk I did at Drupal 8 Day.

Front End
One hour
Session Tags: