Creating a Lean, Mean Drupal 8 Theme

Posted on Tue, 5/10/2016
3 minutes read

I figured I should learn the proper way to make a Drupal 8 theme so I can make other people do that! See the thing on the Drupalcon site

Drupal Themes Can be Complicated!

  • Why are Drupal themes complex?
  • Looking at our Drupal 8 theming toolset
  • Manging and limiting the complexity

Where does the complexity come from?

  • Drupal theming is very flexable
    • "of course Drupal can do this!"
    • Need lots of different layouts
    • We can add templates!
    • Need to add display logic
  • configuration interacts with the themes
  • implimenting a design (and designers suck!) ;)
    • Specific Design Specs?
    • We can write tons of CSS & JavaScript

Drupal Configuration is Powerful

We don't want to hard code everything in the theme.

  • Display content on the site in varying ways. View Modes
  • Layout Variations
  • Panels or Display Suite

Designers... yuck

Not all designers take into consideration the need for consitancy... for real!

  • Designers like inconsitent buttons
  • lots of random layouts
  • site have different layouts for the same type of content
  • specific page on the site will impliment the design slightly differently.

Enter Drupal 8

  • Libraries for loading CSS/JS
  • Twig Templating
  • More Templates!
  • Core Base themes: Calssy and Stable
  • Breakpoints
  • No Javascript by default
  • ...

So all our problems are solved!? No... you can still really screw things up if you suck at life.

Using your Frontend toolkit

  • Stable & Classy themes
    • Stable -
  • Libraries
    • `{{ attach_library('mytheme/search-styling') }}
    • Contextual CSS
      • global CSS
      • search css & js
      • store css & js
      • but don't go overboard
      • you already only loading that CSS on a single page or whatever there is no reason to be too specific
  • CSS + Sass
    • don't nest your selectors when you don't have to (like I've been saying you fools)
    • never use IDs you idiot
    • name your variables like a real person
    • review the CSS that gets generated to figure out how you could simplify your Sass
  • Templates
    • More templates than ever before!
      • mo' templates mo' problems. You of all people should understand that Stanley.
    • Don't create so many templates
    • Use Twig Blocks
      • Twig looks nice {{ content.links }} me like
  • Preprocess functions
    • Transform content before it gets rendered in templates
    • link one field to another
    • bad ways
      • formatting fields types
      • overrides that depend on a node ID
      • database calls to style past events and 'on tour' events differently
      • commerce line item calculations for currencies
      • hiding results of a view
    • preprocess
      • adding logic
      • adding new variables
      • when the output dependson the context
    • templates
      • adding classes
      • changing markup
  • View Modes
    • now in core
    • don't use view modes as a switch
      • are you a flipping idiot?
  • Theme settings
  • Regions
    • There are always extra ghost regions that never get used (guilty)
    • turn off regions that aren't being used

Closing

  • Be consistent
  • recognize complexity
    • Adding template suggestions to create more templates
    • adding a lot of classes and IDs
    • a libray for every page
  • How had will this be to maintain?
    • how much work will it be to apply this to a new content type?
    • what if the branding changes?
  • Documentation
    • regions that don't get displayed everywhere
    • preprocess functions that are complex
    • templates that are weird
    • comment you libraries to say why you added them
  • Refactor
    • if you come across a theme that's very complex, refactor it before it's too late
    • tools