Drupal 8 Frontend Cheat Sheet Copy

multipliers:
 - 1x

LIBRARY-, CSS-, JS-HOOKS

LIBRARIES (THEME.libraries.yml)

Drupal 8 Theming INFO FILE (THEME.info.yml) name: Example type: theme base theme: classy description: 'An example theme.' package: Custom core: 8.x version: 8.x-1.0 screenshot: example_screenshot.png libraries:
 - example/global-styling stylesheets-override:
 - css/normalize.css stylesheets-remove:
 - system.theme.css regions:
 header: Header
 primary_menu: 'Primary menu'
 secondary_menu: 'Secondary menu'
 help: Help
 highlighted: Highlighted breadcrumb: Breadcrumb
 content: Content
 footer: Footer regions_hidden:
 - sidebar_first: 'Sidebar first'
 - sidebar_second: 'Sidebar second'

stylesheets-remove: The filename of the css file to be removed. Do not include a path. stylesheets-override: The filename must match the overridden file. Path to the css file is relative to the theme path. regions_hidden: Always hidden regions (in the Blocks interface): page_top, page_bottom. BREAKPOINTS (THEME.breakpoints.yml) example.mobile:
 label: mobile
 mediaQuery: '(min-width: 0em)'
 weight: 0
 multipliers:
 - 1x example.wide:
 label: wide
 mediaQuery: 'all and (min-width: 40em)'
 weight: 1




March 2015

global-styling:
 version: VERSION
 css:
 theme:
 css/style.css: {}
 css/ie8.css: { IE: 'lte IE 8', !IE: false }
 js:
 js/vendor/mondernizr.min/js { minified: true }
 dependencies:
 - core/jquery maintenance-page:
 version: VERSION
 css:
 theme:
 css/theme/maintenance-page.css: {}

Library name (1st level, e.g. 'global-styling') must match the library definition in THEME.info.yml. example-styling: version: 12.34.5 header: true css: js: dependencies:

version header dependencies

Library version. false, true. JS is placed in header. Array of required libraries. See *.libraries.yml for library names.

css: base: layout: component: state: theme:

SCHEMA (THEME.schema.yml) example.settings:
 type: theme_settings
 label: 'Example settings' example.breakpoints:
 type: theme_breakpoints_default
 label: 'Example breakpoints'

TWIG {{ ... }} {% ... %} {# ... #} ~

Does output. Does control. Does nothing (= comment). Concatenates strings

{{ title }} {{ content.links }} {{ label }} {% if node.isPromoted() %} … {% endif %} {% set classes = [ 'message', 'message--' ~ type ] %} {% set args = { '@login': user_login_url } %} {% set tag = header ? 'th' : 'td' %}

TWIG FUNCTIONS {{ example(...) }}

CSS groups according to SMACCS categories. file.ext { type: external, weight: -1, every_page: true, media: print, preprocess: false, browsers: { IE: 'lte IE 8', '!IE': false }, minified: true }

type weight every_page media preprocess browsers minified

hook_library_info_alter(&$libraries, $module) hook_js_settings_alter(&$settings, $assets) hook_js_alter(&$javascript, $assets) hook_css_alter(&$css, $assets) hook_library_info_build()

file, external -100 (first) … 0 … 100 (last) false, true. Is loaded on every page. all, print, etc. true, false. Asset file aggregation. Browser condition strings. false, true

{% if status is constant('MARK_NEW') %} striping ? cycle(['odd', 'even'], loop.index0) parent()

http://twig.sensiolabs.org/doc/functions/index.html DRUPAL TWIG FUNCTIONS \Drupal\Core\Template\Attribute \Drupal\Core\Template\TwigExtension::getFunctions ') }}"> {{ url('user.register') }} url('user.register', {}, {'fragment': 'bottom' })

{{ path('user.register') }} {{ path('user.register', {}, {'fragment': 'bottom' }) }}

See: UrlGeneratorInterface::generateFromRoute() {{ link(item.title, item.url) }}

See: LinkGeneratorInterface::generate() Drupal Twig functions: 
 TWIG FILTERS {{ ...|example }} {{ {{ {{ {{ {% {{

data.degrees|abs }} items.first.text|default('« first'|t) }} data.width|e }}, {{ data.width|escape }} items|join(', ') }} if messages|length > 1 %} item.id|replace({'/': '-'}) }}

http://twig.sensiolabs.org/doc/filters/index.html DRUPAL TWIG FILTERS \Drupal\Core\Template\TwigExtension \Drupal\Core\Template\TwigExtension::getFilters 'field-type-' ~ field_type|clean_class 'view-' ~ id|clean_class,

See: Html::getClass($class) attributes.id ~ '-menu'|clean_id 'show-'~ attributes.id|clean_id

See: Html::getId

See: UrlGeneratorInterface::generateFromRoute()
 Drupal 8 beta 7

www.wizzlern.nl/drupal/cheat-sheets

drupal_escape {{ date|passthrough }}

See: twig_raw_filter($string) {{ descriptions|safe_join('
') }} {% set list = modules|safe_join(', ') %}

See: twig_drupal_join_filter($value, $glue = '') {{ 'Topics'|t }} {% trans %}By {{ author }} {{ time }} ago{% endtrans %} {{ 'Go to page @key'|t({'@key': key}) }}

See: t($string, $args = array(), $options = array()) {{ content|without('links') }} {{ content|without('comment', 'links') }}

{# File: block--system-brandingblock.html.twig #} {% extends "@block/block.html.twig" %} {% block content %} {# Custom block content #} ... {% endblock %}

DEBUGGING {{ {{ {{ {{

dump(title) }} dump(node) }} dump(_context|keys) }} kint() }} {# Requires Kint module #}

See: twig_without($element) TWIG CONTROL {% if primary or secondary %} ... {% else %} ... {% endif %} {% for item in breadcrumb %} ... {% if loop.last %} ... {% endfor %}

loop.index, loop.index0, loop.revindex, loop.revindex0, loop.first, loop.last, loop.length, loop.parent.

{{- item -}}, {{- item }}, {{ item -}}, {%- ... -%}, etc. {% spaceless %} ... {% endspaceless %} TWIG TRANSLATION {{ 'Skip to main content'|t }} {% trans %}Submitted by {{ author_name| passthrough }} on {{ date|passthrough }} {% endtrans %}

TWIG BLOCKS {# File: block.html.twig #}

... {% block content %}
 {{ content }} {% endblock %}






March 2015

# File: THEME.services.yml twig.config debug: true auto-reload: null cache: true

debug auto-reload cache

false, true. Enables debugging. null, true, false. Reloads when template sources changes. true, false. Saves template as PHP.

PHP CODE (THEME.theme) THEME_preprocess(&$variables) THEME_preprocess_HOOK(&$variables) THEME_preprocess_ELEMENT(&$vars) THEME_theme_suggestions_HOOK($variables) THEME_theme_suggestions_HOOK_alter(
 &$suggestions, $variables) THEME_theme_suggestions_alter(& $suggestions, $variables, $hook) example_preprocess_page(&$variables) { $variables['hello'] = 'Hello World!'; }

HOOK ELEMENT

Base name of template. e.g. 'page' is base name of page.html.twig. Base name of form or render element. e.g. 'datetime_form' is base name of datetime-form.html.twig. CORE LIBRARIES

core/backbone core/classList core/ckeditor core/domready core/drupal core/drupalSettings

core/drupal.active-link core/drupal.ajax core/drupal.announce core/drupal.autocomplete core/drupal.batch core/drupal.collapse core/drupal.debounce core/drupal.dialog core/drupal.dialog.ajax core/drupal.displace core/drupal.dropbutton core/drupal.form core/drupal.machine-name core/drupal.progress core/drupal.states core/drupal.tabbingmanager core/drupal.tabledrag core/drupal.tableheader core/drupal.tableresponsive core/drupal.tableselect core/drupal.timezone core/drupal.vertical-tabs core/html5shiv core/jquery core/jquery.cookie core/jquery.farbtastic core/jquery.form core/jquery.intrinsic core/jquery.joyride core/jquery.once core/jquery.ui core/jquery.ui.accordion core/jquery.ui.autocomplete core/jquery.ui.button core/jquery.ui.datepicker core/jquery.ui.dialog core/jquery.ui.draggable core/jquery.ui.droppable core/jquery.ui.effects.core core/jquery.ui.effects.blind core/jquery.ui.effects.bounce core/jquery.ui.effects.clip core/jquery.ui.effects.drop core/jquery.ui.effects.explode core/jquery.ui.effects.fade core/jquery.ui.effects.fold core/jquery.ui.effects.highlight core/jquery.ui.effects.puff core/jquery.ui.effects.pulsate core/jquery.ui.effects.scale core/jquery.ui.effects.shake core/jquery.ui.effects.size core/jquery.ui.effects.slide


Drupal 8 beta 7

core/jquery.ui.effects.transfer core/jquery.ui.menu core/jquery.ui.mouse core/jquery.ui.position core/jquery.ui.progressbar core/jquery.ui.resizable core/jquery.ui.selectable core/jquery.ui.selectmenu core/jquery.ui.slider core/jquery.ui.sortable core/jquery.ui.spinner core/jquery.ui.tabs core/jquery.ui.tooltip core/jquery.ui.touch-punch core/jquery.ui.widget core/matchmedia core/matchmedia.addListener core/modernizr core/normalize core/picturefill core/underscore DOCUMENTATION Theming Drupal 8: https://www.drupal.org/themeguide/8 Twig: http://twig.sensiolabs.org/documentation

www.wizzlern.nl/drupal/cheat-sheets