Building a Drupal 8 theme with new fangled awesomeness

Timeslot: 
Saturday, 1:00pm - 2:00pm
Track: 
Design & Theming
Experience Level: 
Intermediate

Slides from presentation

About a year ago, I started feeling overwhelmed with all the changes to front-end development. I understood HTML and CSS, responsive design made sense, but then everybody started grunting and gulping, and frankly I got a little scared. Wasn't Bower the arch-enemy of Mario and Luigi?

Combine that with all the changes to Drupal 8, and it's pretty easy to feel overwhelmed. Everybody else knows what all these new things are, right? I'm the only one in the dark?

What made me most nervous was not even knowing what all these terms mean. Once I had a basic grasp of a concept, it felt a lot less intimidating.

So what I'd like to share with you is a Drupal 8 base theme I'm developing that uses some of these new techniques. I'm not going to explain to you the details of how to implement every single new technique out there, but will try to explain what some of these new tools are without making too many assumptions of what you might know. I will walk you through the structure of a Drupal 8 theme that makes use of new front end techniques, so you can see what does what and get some ideas of what you'd like to learn next.

My goal with this theme is to make use of Brad Frost's atomic design principles: essentially component based design. I'm setting up this theme to integrate with Pattern Lab, a prototyping tool that we'll also set up to work as a living style guide. Styles are managed with Sass and synced with Pattern Lab using Grunt, a task manager. The theme makes use of a number of great Sass tools like Breakpoint and the Susy grid framework. We'll also take a look at the Twig templates new to Drupal 8, as well as some of the other theme files specific to Drupal 8.

I hope that I'll learn from you too. If we have time during Q and A, you can share some modern techniques you'd like to see in a new Drupal theme. There's a good chance I'll be working on the theme during sprints, so if you'd like to help pitch in, I'd be glad for the assistance. This theme will be featured in my upcoming book: Drupal 8 Responsive Web Design.

My goal is for us all to leave the session feeling that while we may have to learn, we have a handle on what front end techniques look interesting and useful to investigate further.

Learning Objectives & Outcomes: 

When my session finishes, my goal is for attendees to leave the room more familiar with the files they are likely to see in a Drupal 8 theme, and what each of them does. Similarly, attendees should have a greater familiar with the some of the newer techniques and tools they might encounter in a Drupal 8 base theme.

Platinum Sponsors

Gold Sponsors