Drupal 8 Theming

by Christian Ziegler / @crizzirc

Christian Ziegler

Drupal seit 2005
acolono GmbH Geschäftsführer
Drupal Austria Obmann

c.ziegler@drupal-austria.at @crizzirc

Was ist neu in Drupal 8?

Mehr HTML5
WAI-ARIA Roles
75% weniger IDs
```
<div id="BAD-PRACTICE">...</div>
```
Alles responsive
Neue Theme-engine (TWIG)

Was ist neu in Drupal 8?

Keine JavaScript Library Vorgaben
SVG-Icons statt PNGs
Kein Support für IE6, IE7 und IE8
Neues Core-Theme Classy
CSS Vorgaben (SMACSS & BEM)

Drupal 8 Core Themes

Seven

Admin Theme (für das Backend). Voll responsive inkl. Menus. Überarbeitete node-edit-pages u.v.m. Eigenes Styleguide. Baut auf das Base-Theme Classy auf.

Bartik

Beispieltheme für das Frontend. Mit vernünftigen Vorgaben für CSS Klassen und etwas Styling. Baut auf das Base-Theme Classy auf.

Stark

Nacktes Beispieltheme für das Frontend. Nur das wirklich nötige HTML und etwas Layout. Ohne Klassen! Müssen bei Bedarf selber hinzugefügt werden. Ausgangsbasis für die Entwicklung von Themes ohne Vorgaben bzgl. Markup. Baut nicht auf das Base-Theme Classy auf.

Übersicht inklusive neuen Classy und Stable Themes.

Wie erstelle ich ein neues Theme?

1) THEME-NAME.info.yml anlegen und befüllen

name: THEME-NAME
  description: 'A short description for the theme.'
  package: Custom
  type: theme
  version: 1.0
  core: 8.x

Datei: THEME-NAME.info.yml

2) Regionen definieren

Was sind Regionen?

regions:
  header: 'Header'
  content: 'Content'
  sidebar_first: 'Sidebar first'
  sidebar_second: 'Sidebar second'
  footer: 'Footer'
regions_hidden:
- sidebar_first

Datei: THEME-NAME.info.yml

3) CSS anlegen und definieren

stylesheets:
  all:
    - css/base.css
    - css/layout.css
    - css/components.css
  print:
    - css/print.css

Datei: THEME-NAME.info.yml

CSS-Dateien entfernen oder überschreiben

# Overwrite a CSS file:
stylesheets-overwrite:
  - normalize.css
# Remove a CSS file:
stylesheets-remove:
  - normalize.css

Datei: THEME-NAME.info.ymlChange record: https://www.drupal.org/node/1876600

4) Javascript (libraries) hinzufügen

Anlegen einer neuen Datei: THEME-NAME.libraries.yml

base:
  version: 1.x
  js:
    js/custom.js: {}
  dependencies:
    - core/drupal
    - core/jquery
    - core/jquery.once

Datei: THEME-NAME.libraries.yml

In THEME-NAME.info.yml muss diese Library noch eingebunden werden:

libraries:
  - THEME-NAME/base

Datei: THEME-NAME.info.yml

Wie inkludiere ich eine externe Library? Beispiel flexslider:

flexslider:
  version: 2.2.2
  license:
    name: gpl2
    url: http://www.gnu.org/licenses/gpl-2.0.html
    gpl-compatible: true
  remote: https://github.com/woothemes/FlexSlider
  js:
    lib/flexslider/js/jquery.flexslider-min.js: {}
  css:
    theme:
    lib/flexslider/css/flexslider.css: {}
  dependencies:
    - core/jquery

Datei: THEME-NAME.libraries.yml

Wie inkludiere ich eine externe Library? Beispiel flexslider:

libraries:
  - THEME-NAME/flexslider

Datei: THEME-NAME.info.yml

Wie erstelle ich ein neues Theme auf Basis eines vorhandenen?

In THEME-NAME.info.yml das "base theme" definieren:

name: THEME-NAME
description: 'An awesome D8 theme based on classy.'
base theme: classy
package: Custom
type: theme
version: 1.0
core: 8.x

Datei: THEME-NAME.info.yml

Das "Sub theme" überschreibt das "Base theme".
Funktioniert auch mit dem Entfernen (stylesheets-remove) und Überschreibungen (stylesheets-overwrite) von CSS Dateien. Beispiele: https://www.drupal.org/node/1876600

Breakpoints

Hierzu wird eine THEME_NAME.breakpoints.yml Datei angelegt.

THEME-NAME.mobile:
  label: mobile
  mediaQuery: '(min-width: 0px)'
  weight: 0
  multipliers:
    - 1x
THEME-NAME.narrow:
  label: narrow
  mediaQuery: 'all and (min-width: 480px) and (max-width: 959px)'
  weight: 1
  multipliers:
    - 1x
    - 1.5x
    - 2x  // For mac retina displays.

Datei: THEME-NAME.breakpoints.yml

In diesem Fall ist die Breakpoint Gruppe der THEME-NAME
Noch kein UI hierfür in Drupal 8 Core
Definierte Breakpoints sind systemweit vorhanden
Auch Module können Breakpoints definieren
Benutzt von zB: responsive_images Modul in Core
!= SASS breakpoints http://breakpoint-sass.com
DrupalCon Amsterdam Session zum Thema: https://amsterdam2014.drupal.org/node/438

ImageStyles

Möglich durch Drupal 8 Configuration Management System
Konfigurationsdateien in Ordner THEME/config/install
Export der Konfiguration: admin/config/development/configuration/single/export
Theme install: Konfiguration wird übernommen

This slide has fragments which are also stepped through in the notes window.

Beispiel config/install/image.style.slider_mobile.yml

uuid: 4dacc686-1f91-48af-bb01-1c765f5410a1
langcode: en
status: true
dependencies: {  }
name: slider_mobile
label: 'Slider mobile'
effects:
  6d437f0f-0ff1-4736-9537-55e26f9ec57d:
    uuid: 6d437f0f-0ff1-4736-9537-55e26f9ec57d
    id: image_scale
    weight: 1
    data:
      width: 480
      height: null
      upscale: false
third_party_settings: {  }

Datei image.style.slider_mobile.yml

Debugging

CSS und js Aggregation deaktivieren

Standardmässig aktiviert: drupal.org/node/2259531
1) example.settings.local.php in den Seitenordner kopieren und Datei-Namen ändern: "settings.local.php".

2) In der settings.php folgenden code aktivieren:

#if (file_exists(__DIR__ . '/settings.local.php')) {
#  include __DIR__ . '/settings.local.php';
#}

Devel Modul und Kint Modul installieren

Devel Modul:
```
$ drush dl devel
$ drush en devel
```
Kint ist Krumo für Drupal 8: raveren.github.io/kint/
```
$ drush en kint
```
```
{{ kint($data); }}
```

KINT: var_dump() on steroids. Zeigt Daten fürs Debugging in übersichtlicher Form an.

Template debugging

Welches Template wird für das ausgegebene HTML verwendet?
TWIG debugging aktivieren: In der services.yml (Seitenordner) folgende Werte aktivieren:
```
parameters:
  twig.config:
    debug: true
    auto_reload: true
    twig_cache: false
```
Datei: services.yml

Mehr Infos: drupal.org/node/1903374

Template debugging

-> Zusätzl. Informationen im HTML ersichtlich: X: bedeutet dieses Template wird verwendet. *: Weitere mögliche Template Dateinamen, die für das Überschreiben verwendet werden können.

ESLint

nodejs Modul: http://eslint.org/
Überprüft JavaScript auf Fehler und Coding Style
Konfigurationsdatei .eslintrc in Drupal Core

Installieren:

 $ npm i -g eslint

Ausführen (zB in Drupal Root):
```
$ eslint .
                            
```

Um sicher zu gehen dass Komprimierung problemlos erfolgen kann. Integration in vielen IDEs und Editoren (zB PHPStorm). Konfigurationsdatei in Drupal Root wird automatisch erkannt und verwendet wenn ESLint benutzt wird. Beispiel ist Benutzung mit dem "Command Line Interface". npm: Node Package Manager.

CSSLint

nodejs Modul: http://csslint.net/
Überprüft CSS auf Fehler und Coding Style
Konfigurationsdatei .csslintrc in Drupal Core

Installieren:

$ npm install -g csslint

Ausführen (zB im Theme Ordner):

$ csslint .

Wie ESLInt nur für CSS. Integration in vielen IDEs und Editoren (zB PHPStorm). Auch grunt oder gulp tasks vorhanden. Konfigurationsdatei in Drupal Root wird automatisch erkannt und verwendet wenn CSSLint benutzt wird. Beispiel ist Benutzung mit dem "Command Line Interface".

Coding Standards

CSS Struktur (SMACCS)

SMACCS: Scalable and Modular Architecture for CSS
https://smacss.com/
System für die Organisation und Kategorisierung der CSS-Regeln

CSS Struktur (SMACCS)

base.css layout.css modules.css components.css states.css theme.css

CSS Klassen (BEM)

BEM: Block Element Modifier
https://bem.info/method/definitions/
Namenskonvention für CSS Klassen
Modular, konsistent, skalierbar, wartbar
Visualisierung: http://johnalbin.github.io/flower-power/

CSS Klassen (BEM)

.block__element--modifier

Block: Eigenständige Einheit oder Komponente einer Seite. Z.B. kleines Kontakformular auf Startseite
Element: Bestandteile des Blocks. z.B Überschrift, Beschreibung
Modifier: Konkrete Ausprägung des Blocks. z.B. eine Version mit hervorgehobenen Farben.

CSS Klassen (BEM)

Beispiel:

<div class="contact contact--small">
  <div class="contact__title">TITLE</div>
  <div class="contact__form">...</div>
</div>

Mehr Infos zu Coding Standards

CSS Coding standards: https://www.drupal.org/node/1886770
Javascript Coding standards: https://www.drupal.org/node/172169
Twig Coding standards: https://www.drupal.org/node/1823416

Templates (Twig)

Was ist Twig?

Moderne, schnelle und flexible PHP Template Engine
Seit 2009 Bestandteil von Symfony Framework
Wird weiterentwickelt von SensioLabs.
Ersetzt phptemplate theme engine in Drupal 8
twig.sensiolabs.org/

Wird vorangetrieben von Fabien Potencier. Twig templates werden intern in php templates kompiliert.

Vorteile von Twig

Mehr Sicherheit: Kein PHP mehr in den Templates!
```
db_query('DROP TABLE {users}');
```
Mehr Sicherheit: Autoescape
Keine Mischung von Logik und Darstellung.
Konsistente und einfache Syntax
Viele Vereinfachungen für den Themer: zB Wegfall von "theming functions"
Sehr gute Dokumentation: twig.sensiolabs.org/documentation
Chance auf Theme-System Neustart in Drupal

Arbeiten mit Twig

Variable ausgeben

{{ VARIABLE }}

Kommentieren

{# COMMENT #}

Mit Datenstrukturen arbeiten

Einfacher Zugang zu hierarchisch angeordneten Daten.

{{ items.first.href }}

{{ items.second.nid }}

Filter

Übergabe der Variable einer Funktion / einem Filter.

{{ VARIABLE|filter }}

Wie zB t() für Übersetzungen:

{{ String|t }}

IF

{% if foo %}
  <div>{{ foo }}</div>
{% endif %}

Wir brauchen "is_defined" nicht.

Loops/Schleifen

{% for item in navigation %}
  <li><a href="{{ item.href }}">{{ item.caption }}</a></li>
{% endfor %}

oder

{% for value, key in items %}
    <div class="{{ key }}">{{ value }}</div>
  {% endfor %}

Bei zweitem Loop wollen wir key und value ausgeben.

Loops/Schleifen

{{ loop.length }}
{{ loop.first}}
{{ loop.last }}
{{ loop.index }}

{% if loop.first %}
  ...
{% elseif loop.index == 2 %}
  ...
{% elseif loop.last %}
  ...
{% endif %}

Volle Kontrolle über die Position der Values in der Schleife.

Variablen setzen

{% set foo=“BAR” %}

{{ foo }}

Gibt "BAR" aus.

Mehrsprachigkeit

{% trans %}
  Submitted by {{ author_name|passthrough }}
  on {{ date|passthrough }}
{% endtrans %}

Beispiele

Menu template
Pager template

Conclusio

Weiterführende Links und Quellen

Drupal 8 theme file structure: https://www.drupal.org/node/1887922
Replace drupal.base with normalize: https://www.drupal.org/node/2168417
Drush 7 commands: http://www.drushcommands.com/drush-7x
Disable css and js aggregation for development: https://www.drupal.org/node/2259531
Breakpoint added to Drupal 8: https://www.drupal.org/node/1813914

Weiterführende Links und Quellen

Working with breakpoints in Drupal 8: https://www.drupal.org/node/1803874
ESLint settings: https://www.drupal.org/node/1955232
DrupalCon Amsterdam 2014: Twig and the new Drupal 8 Theme System: http://www.youtube.com/watch?v=koNJEyRLwKk
DrupalCon Amsterdam 2014: Managing Complex Projects With Design Components: https://www.youtube.com/watch?v=0ulC_UiObS0
DrupalCon Amsterdam 2014: Drupal 8 Breakpoints and Responsive images: https://www.youtube.com/watch?v=xY9Kkm5wBUg

Weiterführende Links und Quellen

Drupal 8 Theming Guide: https://github.com/sqndr/d8-theming-guide
Drupal 8 CSS Coding standards: https://www.drupal.org/node/1886770
Drupal 8 Javascript Coding standards: https://www.drupal.org/node/172169
Twig Coding standards: https://www.drupal.org/node/1823416
Twig Documentation: http://twig.sensiolabs.org/documentation

Danke für die Aufmerksamkeit

Drupal 8 Theming – Was ist neu in Drupal 8? – Drupal 8 Core Themes

criz

Drupal 8 Theming – Was ist neu in Drupal 8? – Drupal 8 Core Themes

0 0 (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/platform.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();

drupal8-theming

Drupal 8 Theming

Christian Ziegler

Was ist neu in Drupal 8?

Was ist neu in Drupal 8?

Was ist neu in Drupal 8?

Drupal 8 Core Themes

Seven

Bartik

Stark

Wie erstelle ich ein neues Theme?

1) THEME-NAME.info.yml anlegen und befüllen

2) Regionen definieren

3) CSS anlegen und definieren

CSS-Dateien entfernen oder überschreiben

4) Javascript (libraries) hinzufügen

Wie erstelle ich ein neues Theme auf Basis eines vorhandenen?

Breakpoints

ImageStyles

Debugging

CSS und js Aggregation deaktivieren

Devel Modul und Kint Modul installieren

Template debugging

Template debugging

ESLint

CSSLint

Coding Standards

CSS Struktur (SMACCS)

CSS Struktur (SMACCS)

CSS Klassen (BEM)

CSS Klassen (BEM)

CSS Klassen (BEM)

Mehr Infos zu Coding Standards

Templates (Twig)

Was ist Twig?

Vorteile von Twig

Arbeiten mit Twig

Variable ausgeben

Kommentieren

Mit Datenstrukturen arbeiten

Filter

IF

Loops/Schleifen

Loops/Schleifen

Variablen setzen

Mehrsprachigkeit

Beispiele

Conclusio

Weiterführende Links und Quellen

Weiterführende Links und Quellen

Weiterführende Links und Quellen

Weiterführende Links und Quellen

Danke für die Aufmerksamkeit

Gibt es Fragen?

0 0