Getting started

with Drupal 8 Theming

About

twitter.com/digitaldonkey09

thorsten.krug@donkeymedia.eu

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
    projects)

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 https://getcomposer.org/installer | php
  • Use composer to install drush
    mkdir ~/drush8
    cd ~/drush8
    composer require drush/drush:dev-master
  • Read more:
    https://www.lullabot.com/articles/switching-drush-versions

Theming

Once upon a time...

Today ...

SMACSS

BEM

KSS

Package manager

Package manager

PHP

JS/Frontend for node.js

CSS preprocessors

CSS Grid Systems

Build Tools 

CSS Coding standards

SMACSS

BEM

Auto generated Styleguides

KSS

Build tools for build tools ....

Limit yourself!

KSS

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

* http://sassbreak.com/ruby-sass-libsass-differences/

SASS EXAMPLE

Singularity Grid

  • the grid system I know (using Omega4)
    http://singularity.gs
  • which worked with libsass (mostly)
  • depends on breakpoint
    http://breakpoint-sass.com
  • 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.

http://warpspire.com/kss/

// 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 {
    ...
  }
}

Demo

KSS

Theming in browser

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

BrowserSync

  • Improved live reloading
  • Works with Drupal only when using the link_css module.
    https://www.drupal.org/project/link_css

http://www.browsersync.io

Drupal 8

Theming

Outlook

  • 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

  • mytheme.info → mytheme.info.yml
    • 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.
libraries:
  - digitaldonkey/global-styling

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

# Regions
# Default Regions see:
# https://api.drupal.org/api/drupal/core/modules/system/templates/page.html.twig/8
regions:
  header: Header
  content: Content
  sidebar_first: 'Sidebar first'
  footer: Footer

mytheme.info.yml

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

# For external libraries see:
# https://www.drupal.org/theme-guide/8/assets#external

mytheme.libraries.yml

TWIG

TWIG example

Which template?

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

    # 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 singularity.gs
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

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

Demo

The project on Drupal

https://www.drupal.org/sandbox/digitaldonkey/2599668

 https://www.drupal.org/project/issues/2599668

  • Infos and links are in  the README.md
  • Provide feedback in the drupal issues

Feedback

twitter.com/digitaldonkey09

thorsten.krug@donkeymedia.eu