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.
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.
About the Trainers:
Mario Hernandez, Front-End Developer and Head of Learning
Mario is a Senior Front End Developer with over 10 years of Drupal experience. He is a regular speaker and trainer at tech conferences including Drupal Camps in Los Angeles, San Diego, San Francisco, DC and others. Mario is a co-host of the Mediacurrent podcast where guest speakers discuss the latest in the web industry.
Prior to Mediacurrent, Mario worked as the lead front-end developer for the U.S. District Court in Los Angeles, the largest federal court in the country. His work there was awarded the Administration of Justice Award from the Federal Government. As an active member of the Drupal community, Mario conducts private and community-driven workshops and webinars on all things Drupal and front-end development.
Melissa Bent, Senior Drupal Developer
Melissa brings a strong web development background and 10 years of Drupal experience to her role as Drupal Developer at Mediacurrent.
Melissa taught herself to code when she was working for a non-profit. After a very brief foray into the world of .NET, she decided she wanted to work with open-source projects and Drupal had the best architecture to deal with large amounts of data and robust feature sets. Prior to Mediacurrent, she worked for a small Drupal agency where she learned a lot and gained a few more "hats" such as Solr configuration, data architecture, and quality assurance.
Becky Cierpich, UX/UI Designer
Complemented by an academic background in computer science and communication, Becky brings 15 years of web and graphic design experience to her role as a UX/UI designer at Mediacurrent. Driven by her belief that design has the power to make the world a better place, Becky tackles digital challenges with creativity, innovation, and a user-centered design approach.
Trainers
