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
Creating Drupal 8 Theme
By Thorsten Krug
Creating Drupal 8 Theme
Creating Drupal 8 Theme based on gulp with browSersync
- 7,112