Training

PLEASE SETUP YOUR LOCAL ENVIRONMENT PRIOR TO TRAINING.

Follow these instructions: https://github.com/mariohernandez/component-based-development

=====================

With the component-based approach becoming the standard for Drupal 8 develpment 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 much closer to reality.

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 project. We will work on building a living style guide which will become the single source of truth for markup, styles and javascript behaviors.

Topics we will cover
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.

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

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.

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:
Laptop computer (mac preferred)
Drupal 8 installed and running
Modules: Components Libraries, Paragraphs, Devel
NOTE: BADCamp nor Mediacurent are not liable for any issues that may arise from installing the software above.