multipliers:

- 1x LIBRARY-, CSS-, JS-HOOKS

hook_library_info_alter(&$libraries, $module)
LIBRARIES (THEME.libraries.yml) hook_js_settings_alter(&$settings, $assets)
hook_js_alter(&$javascript, $assets)
global-styling:
hook_css_alter(&$css, $assets)
Drupal 8 Theming version: VERSION
css: hook_library_info_build()
theme:
INFO FILE (THEME.info.yml) css/style.css: {}
css/ie8.css: { IE: 'lte IE 8', !IE:
SCHEMA (THEME.schema.yml)
name: Example false } example.settings:
type: theme js: type: theme_settings
base theme: classy js/vendor/mondernizr.min/js label: 'Example settings'
description: 'An example theme.' { minified: true } example.breakpoints:
package: Custom dependencies: type: theme_breakpoints_default
core: 8.x - core/jquery label: 'Example breakpoints'
version: 8.x-1.0
screenshot: example_screenshot.png maintenance-page:
libraries:
- example/global-styling
version: VERSION TWIG
css: <a href="{{ path('node.type_add') }}">
stylesheets-override: theme: {{ ... }} Does output. {{ path('user.register') }}
- css/normalize.css css/theme/maintenance-page.css: {} {% ... %} Does control. {{ path('user.register', {}, {'fragment':
stylesheets-remove: 'bottom' }) }}
Library name (1st level, e.g. 'global-styling') must {# ... #} Does nothing (= comment).
- system.theme.css
match the library definition in THEME.info.yml. ~ Concatenates strings See: UrlGeneratorInterface::generateFromRoute()
regions:
header: Header {{ title }} {{ link(item.title, item.url) }}
primary_menu: 'Primary menu' example-styling:
version: 12.34.5 {{ content.links }} See: LinkGeneratorInterface::generate()
secondary_menu: 'Secondary menu' <h2{{ title_attributes }}>{{ label }}</h2>
help: Help header: true
{% if node.isPromoted() %} {% endif %}
highlighted: Highlighted css: Drupal Twig functions:
js: {% set classes = [ 'message', 'message--' ~
breadcrumb: Breadcrumb type ] %}
content: Content dependencies:
{% set args = { '@login': user_login_url }
footer: Footer version Library version. TWIG FILTERS {{ ...|example }}
%}
regions_hidden: header false, true. JS is placed in header. {% set tag = header ? 'th' : 'td' %} {{ data.degrees|abs }}
- sidebar_first: 'Sidebar first' dependencies Array of required libraries. See <div{{ attributes.addClass(classes) }}> {{ items.first.text|default(' first'|t) }}
- sidebar_second: 'Sidebar second' *.libraries.yml for library names. {{ data.width|e }}, {{ data.width|escape }}
stylesheets-remove: The filename of the css file to be css: {{ items|join(', ') }}
removed. Do not include a path. base: TWIG FUNCTIONS {{ example(...) }} {% if messages|length > 1 %}
stylesheets-override: The filename must match the layout: {{ item.id|replace({'/': '-'}) }}
component: <section{{ attributes.addClass(classes) }}>
overridden file. Path to the css file is {% if status is constant('MARK_NEW') %}
http://twig.sensiolabs.org/doc/filters/index.html
state:
relative to the theme path. striping ? cycle(['odd', 'even'],
theme:
regions_hidden: Always hidden regions (in the Blocks loop.index0)
CSS groups according to SMACCS categories. DRUPAL TWIG FILTERS
interface): page_top, page_bottom. parent()
<li{{item.attributes.removeClass('leaf')}}>
file.ext { type: external, weight: -1, \Drupal\Core\Template\TwigExtension
every_page: true, media: print, http://twig.sensiolabs.org/doc/functions/index.html \Drupal\Core\Template\TwigExtension::getFilters
BREAKPOINTS (THEME.breakpoints.yml)
preprocess: false, browsers: { IE: 'lte
example.mobile: IE 8', '!IE': false }, minified: true } 'field-type-' ~ field_type|clean_class
DRUPAL TWIG FUNCTIONS
label: mobile type file, external 'view-' ~ id|clean_class,
mediaQuery: '(min-width: 0em)' weight -100 (first) 0 100 (last) \Drupal\Core\Template\Attribute See: Html::getClass($class)
weight: 0 every_page false, true. Is loaded on every page.
multipliers:
\Drupal\Core\Template\TwigExtension::getFunctions
media all, print, etc. attributes.id ~ '-menu'|clean_id
- 1x 'show-'~ attributes.id|clean_id
example.wide: preprocess true, false. Asset file aggregation. <a href="{{ url('<front>') }}">
browsers Browser condition strings. {{ url('user.register') }} See: Html::getId
label: wide
mediaQuery: 'all and (min-width: 40em)' minified false, true url('user.register', {}, {'fragment':
weight: 1 'bottom' })
See: UrlGeneratorInterface::generateFromRoute()

March 2015 Drupal 8 beta 7 www.wizzlern.nl/drupal/cheat-sheets

drupal_escape core/drupal.active-link
{{ date|passthrough }} {# File: block--system-branding- core/drupal.ajax
See: twig_raw_filter($string) block.html.twig #}
core/drupal.announce
{% extends "@block/block.html.twig" %}
core/drupal.autocomplete
{{ descriptions|safe_join('<br />') }}
{% block content %} core/drupal.batch
{% set list = modules|safe_join(', ') %}
{# Custom block content #} core/drupal.collapse
See: twig_drupal_join_filter($value, $glue = '')
... core/drupal.debounce
{{ 'Topics'|t }}
{% endblock %} core/drupal.dialog
<span>{% trans %}By {{ author }} {{ time }} core/drupal.dialog.ajax
ago{% endtrans %}</span> core/drupal.displace
DEBUGGING
{{ 'Go to page @key'|t({'@key': key}) }} core/drupal.dropbutton
See: t($string, $args = array(), $options = array()) {{ dump(title) }} core/drupal.form
{{ dump(node) }} core/drupal.machine-name
{{ content|without('links') }} {{ dump(_context|keys) }} core/drupal.progress
{{ content|without('comment', 'links') }} {{ kint() }} {# Requires Kint module #}
core/drupal.states
See: twig_without($element) core/drupal.tabbingmanager
# File: THEME.services.yml
twig.config
core/drupal.tabledrag
core/drupal.tableheader
TWIG CONTROL debug: true
auto-reload: null core/drupal.tableresponsive core/jquery.ui.effects.transfer
{% if primary or secondary %} cache: true core/drupal.tableselect core/jquery.ui.menu
... debug false, true. Enables debugging. core/drupal.timezone core/jquery.ui.mouse
{% else %}
auto-reload null, true, false. Reloads when core/drupal.vertical-tabs core/jquery.ui.position
...
{% endif %} template sources changes. core/html5shiv core/jquery.ui.progressbar
cache true, false. Saves template as PHP. core/jquery core/jquery.ui.resizable
{% for item in breadcrumb %} core/jquery.cookie core/jquery.ui.selectable
... core/jquery.farbtastic core/jquery.ui.selectmenu
{% if loop.last %} PHP CODE (THEME.theme) core/jquery.form core/jquery.ui.slider
... THEME_preprocess(&$variables) core/jquery.intrinsic core/jquery.ui.sortable
{% endfor %} THEME_preprocess_HOOK(&$variables) core/jquery.joyride core/jquery.ui.spinner
loop.index, loop.index0, loop.revindex, loop.revindex0, THEME_preprocess_ELEMENT(&$vars) core/jquery.once core/jquery.ui.tabs
loop.first, loop.last, loop.length, loop.parent. THEME_theme_suggestions_HOOK($variables) core/jquery.ui core/jquery.ui.tooltip
THEME_theme_suggestions_HOOK_alter( core/jquery.ui.accordion core/jquery.ui.touch-punch
<figure class="caption caption-{{ tag }}{%- &$suggestions, $variables)
core/jquery.ui.autocomplete core/jquery.ui.widget
if classes %} {{ classes }}{%- endif %}"> THEME_theme_suggestions_alter(&
$suggestions, $variables, $hook) core/jquery.ui.button core/matchmedia
{{- item -}}, {{- item }}, {{ item -}}, {%- ... -%}, etc. core/jquery.ui.datepicker core/matchmedia.addListener
{% spaceless %} ... {% endspaceless %} core/jquery.ui.dialog core/modernizr
example_preprocess_page(&$variables) {
$variables['hello'] = 'Hello World!'; core/jquery.ui.draggable core/normalize
TWIG TRANSLATION } core/jquery.ui.droppable core/picturefill
HOOK Base name of template. e.g. 'page' core/jquery.ui.effects.core core/underscore
{{ 'Skip to main content'|t }} is base name of page.html.twig. core/jquery.ui.effects.blind
{% trans %}Submitted by {{ author_name|
ELEMENT Base name of form or render core/jquery.ui.effects.bounce
passthrough }} on {{ date|passthrough }}
element. e.g. 'datetime_form' is base core/jquery.ui.effects.clip DOCUMENTATION
{% endtrans %}
name of datetime-form.html.twig. core/jquery.ui.effects.drop Theming Drupal 8: https://www.drupal.org/theme-
core/jquery.ui.effects.explode guide/8
TWIG BLOCKS core/jquery.ui.effects.fade Twig: http://twig.sensiolabs.org/documentation
CORE LIBRARIES
core/jquery.ui.effects.fold
{# File: block.html.twig #}
<div> core/backbone core/jquery.ui.effects.highlight
... core/classList core/jquery.ui.effects.puff
{% block content %} core/ckeditor core/jquery.ui.effects.pulsate
{{ content }} core/domready core/jquery.ui.effects.scale
{% endblock %} core/drupal core/jquery.ui.effects.shake
</div> core/jquery.ui.effects.size
core/drupalSettings
core/jquery.ui.effects.slide

March 2015 Drupal 8 beta 7 www.wizzlern.nl/drupal/cheat-sheets