Getting started

with Drupal 8 Theming


State of Drupal 8

  • Many known Issues have been solved
  • We passed two years of API changes
  • Release candidate 8.0.0-rc1 since 7.10.2015
  • Contrib modules are developed now
  • Now is the time to get started with
    Drupal 8 (at least for smaller

Changes for themers

  • HTML5
  • responsive Mobile First by default
  • Template Engine TWIG
  • New CSS philosophy (SMACSS & BEM)
  • ie8 not supported
  • CSS classes not in Core
  • jQuery 2.x
  • No JQuery by default

Learnings for themers

  • No disabled Modules (uninstall)
  • YML files 
    • Deployable configuration
    • E.g: hook_menu
  • TWIG
  • Lots of changes in writing modules 
  • OOP is harder to debug

Fortune Cookies

  • HTML5/mobile first without extra effort
  • Views, Breakpoints, RESTful Web Services  are in Core
  • Viewmodes everywhere by default
  • TWIG templates replace theme_functions
  • Built in debugging functions
  • Improved multilingual integration

Get ready for D8

  • Check the requirements
    • PHP 5.5.9 or higher
    • MySQL 5.5.3/MariaDB 5.5.20
  • Check if you can rely on core with your first project features (for now)
  • Get a PHP debugger
    (e.g Xdebug / PHP-Storm)
  • Use git and git submodules to keep your code base up to date
  • Install drush 8

Drush 8

  • You can install multiple versions of drush in parallel
  • Install composer
    curl -sS | php
  • Use composer to install drush
    mkdir ~/drush8
    cd ~/drush8
    composer require drush/drush:dev-master
  • Read more:


Once upon a time...

Today ...




Package manager

Package manager


JS/Frontend for node.js

CSS preprocessors

CSS Grid Systems

Build Tools 

CSS Coding standards



Auto generated Styleguides


Build tools for build tools ....

Limit yourself!


Gulp ...

  • is a "task runner"
  • is a command line tool for frontend preprocessing
  • enables live editing with multiple devices using browser sync
  • let you generate a Styleguide with KSS-Node

Gulp example

SASS ...

  • is a CSS preprocessor
    • enables you to organize your (S)CSS code in multiple files
    • makes it easy to use coding standards like SMACSS and BEM
  • Lib-Sass
    • libsass is "up to 4000% faster!"*
    • use it for new projects

Syntactically Awesome StyleSheets



Singularity Grid

  • the grid system I know (using Omega4)
  • which worked with libsass (mostly)
  • depends on breakpoint
  • just use your favorite and make sure it will run with libsass

KSS-Node styleguides

  • Organize your and maintain style components
  • Let your team and product owner know about the components
  • Prototype with SCSS and a little chunk of HTML before implementing in backend.

Documentation for any flavor of CSS that you’ll love to write. Human readable, machine parsable, and easy to remember.

// Button
// Your standard button suitable for clicking.
// :hover    - Highlights when hovering.
// :disabled - Dims the button when disabled.
// .primary  - Indicates button is the primary action.
// .smaller  - A little bit smaller now.
// Markup:
// <button class="button {{modifier_class}}">
// :hover - Highlight the button when hovered.
// Styleguide 1.1

.button {
  &.primary {
  &.smaller {
  &:hover {
  &:disabled {



Theming in browser

  • Control over details and responsive behavior
  • Consistency and reusability
  • Testing
    • Transitions and animations
    • Early testing
    • User interaction testing


  • Improved live reloading
  • Works with Drupal only when using the link_css module.

Drupal 8



  • The base themes and CSS Classes
  • Creating a theme
  • Twig
  • Gulp workflow & Demo

Good to know

  • Theme function are gone!
  • The admin_menu module will break your site
    • Use Toolbar and Admin toolbar tools
  • drush cc = drush cr 
  • jQuery is not loaded by default
  • You need drush 8

D8 Themes

  • no stable themes for d8 (I found yet), but the core ones
  • Classy is a theme in Drupal 8 core that is used as a base theme for Bartik and Seven
  • Classy provides the well known Drupalish css classes.

Create your own theme

  • →
    • declarations "=" → ":"
    • comments ";" → "#"
    • Watch your blanks in yml files
  • type: theme                                                                
  • CSS&JS → mytheme.libraries.yml
name: mytheme
description: 'Custom classy based theme.'
type: theme
core: 8.x
package: Custom

# Defines the base theme.
base theme: classy

# Add libraries.
  - digitaldonkey/global-styling

#  - '@classy/css/layout.css'
#  - core/assets/vendor/normalize-css/normalize.css

# Regions
# Default Regions see:
  header: Header
  content: Content
  sidebar_first: 'Sidebar first'
  footer: Footer

  version: 1.x
      css/main.css: {}
      js/behaviors.js: { scope: footer }
    - core/jquery
    - core/drupal
    - core/jquery-once

# For external libraries see:



TWIG example

Which template?

  • copy sites/default/ to sites/default/services.yml 
  • Change the following variables in services.yml 

    # Twig debugging:
    # @default false
    debug: true

    # Twig auto-reload:
    # Automatically recompile Twig templates whenever the source code changes.
    # If you don't provide a value for auto_reload, it will be determined
    # based on the value of debug.
    # Not recommended in production environments
    # @default null
    auto_reload: true

Which template?

e.g: {{ dump(page.content) }}

Twig debug dump([var]) 

e.g: {{ kint() }}

Twig debug kint([var]) 

Getting started with gulp

  • No ruby required, but libsass
  • install npm
  • Install bower for
cd [theme-folder]

npm install --save-dev gulp gulp-sass gulp-filter browser-sync gulp-sourcemaps gulp-shell compass-mixins  breakpoint-sass gulp-util gulp-plumber gulp-uglify gulp-rename kss

bower install --save singularity

  • enable theme
  • See styleguide in :
/sites/all/themes/_custom/[theme name]/styleguide/


The project on Drupal

  • Infos and links are in  the
  • Provide feedback in the drupal issues


Creating Drupal 8 Theme

By Thorsten Krug

Creating Drupal 8 Theme

Creating Drupal 8 Theme based on gulp with browSersync

  • 7,011