A better front-end from the ground up in Drupal 8

As front-end developers one of the issues that we can encounter when working on a drupal site is that drupal outputs a lot of extra markup, and a lot of common classes that have no specificity. This is often our challenge because the excessive markup gets in the way of building a clean and manageable website. Excessive and many times unnecessary wrapper divs with common css classes can become problematic when theming a project.

Starting from the ground up with a project is the key to front end success. Having control of our HTML structure allows us to build lean and effective code that can make the project easier to manage at later stages.

In this talk we will cover how to take this very approach on producing the best markup possible from the ground up.  After this talk those in attendance will have a solid understanding on how to produce better markup on their Drupal 8 site by taking advantage of view modes, views, manipulating twig templates and writing better CSS using the BEM approach.  

Who is this presentation for:

This will be a highly technical discussion and demonstration intended for front-end developers and advanced site builders with strong drupal experience.

What this talk will cover:

During this talk, we will examine what making these adjustments to your workflow look like. We examine various processes and procedures. And we look at the benefits that are gained.  We will be working on a Drupal 8 system where we’ll be able to manipulate twig templates.

• We will start by analyzing the requirements for what we are building.

• As part of proof of concept we will work with a custom content type with specific fields.

• We will create custom Twig template suggestions for our content type where we will go through a markup clean up process by eliminating extra markup Drupal uses.  In addition, this is where we will be able to customize the markup we do want including wrappers, labels and custom css classes.

• We will build custom view modes or refine the teaser and full content view modes so they only output the date we want to display.

• We will build views that output our data using the view modes above.

• Finally, we will take to Sass to build a robust yet manageable set of styles using the BEM Methodology to produce CSS rules that are easy to work with and manage long term.

Level of this talk:  

• Intermediate to advanced.  Basic understanding of the topics above is recommended in order to follow along.