Component Based Development with Drupal 8
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.
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.
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.
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?
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.