Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Drupal 8 theming basics

Drupal 8 theming basics

You know…
- How to create a sub-theme?
- What are the new file formats in a Drupal 8 theme and what we use them for?
- What is new in CSS file formatting, architecture, management?
- How to use Twig in our templates?
- How to add CSS / JS (libraries) to our theme?
- How to find information about theme related changes in Drupal 8?

Slides from my session at Drupal Developer Days, Szeged, Hungary, 2014.
http://szeged2014.drupaldays.org/program/sessions/drupal-8-theming-basics

Tamás Hajas

March 29, 2014
Tweet

More Decks by Tamás Hajas

Other Decks in Technology

Transcript

  1. key_name: value colon ':' (not equals sign) # comment: hashmark

    '#' (not semicolon) structure: by indentation Change record: https://drupal.org/node/1935708 YAML syntax
  2. ! description: Sub-theme of Gratis version: VERSION ! ! !

    ! screenshot: images/screenshot.png Creating a D8 sub-theme: https://drupal.org/node/2165673 type: theme name: My sub-theme ! ! core: 8.x base theme: gratis # engine: twig mysubtheme.info.yml
  3. # Stylesheets override ! ! # Remove not used stylesheets

    Change record: https://drupal.org/node/1876600 stylesheets-override: - system.theme.css ! ! stylesheets-remove: - node.module.css mysubtheme.info.yml
  4. {# Content links #} Twig coding standards: https://drupal.org/node/1823416 {% if

    content.links %} 
 ! {% endif %} <footer class="
 ! </footer> <span> </span> {{ content.links }} {{ attributes.class }}
 link-wrapper" {{ attributes }}> {{ 'Click?'|t }} *.html.twig
  5. // Render the main scripts file. $local_js = array( '#attached'

    => array( 'js' => array( $path . '/js/scripts.js', ), ), ); drupal_render($local_js); Change record: https://drupal.org/node/2169605 Original code: 
 http://drupalcode.org/project/gratis.git/blob/refs/heads/8.x-1.x:/gratis.theme mysubtheme.theme
  6. • https://drupal.org/theme-guide/8 • Change records (theme): http://j.mp/1qFSKXq • http://drupaltwig.org •

    Twig Coding Standards: https://drupal.org/node/ 1823416 • CSS CS: https://drupal.org/node/1886770 • JS CS: https://drupal.org/node/172169 • https://api.drupal.org/api/drupal/core!modules! system!theme.api.php/8 some resources