There have been significant changes in theming between Drupal 7 and 8. In this post we are going to look at some of the basics including a brief introduction to Twig, Drupal 8's new template engine.

A few starting points

• Drupal 8 uses HTML5 markup with tags like header, footer and article
• WAI-ARIA Roles have been added to assist in improved accessibility
• Drupal 8 has 75% less ID's than the Drupal 7 CSS
  
• Drupal 8 is responsive out of the box with "mobile in its DNA"
• Default settings target speed. e.g. page caching and CSS/JS aggregation are on by default
• New theme/template system: Twig
• Drupal 8 uses SVG instead of PNG to provide resolution independent icons in the admin UI
  
• CSS classes being moved from preprocess to Twig templates
  

So let's take a bit of a closer look at Twig

1. Twig is a templating system that allows you to print variables and perform simple logic functions in your HTML template. E.g.

<h1>Hello {{ name }}</h1>

Note: strings in the curly braces are escaped by default (autoescape = true)

2. You can apply filters to variables like this

<h1>Hello {{ name|capitalize }}</h1>

See more filters here.

3. You can use basic coding constructs like if statements, loops, etc. Also common patterns have shortcuts. e.g.

{% for user in users %}
    * {{ user.name }}
{% else %}
    No users have been found.
{% endfor %}

4. Twig supports template inheritance and blocks for powerful clean templates.

e.g.

{% extends "layout.html" %}

{% block content %}
    Content of the page...
{% endblock %}

Ok... that's it for now but more Drupal 8 theming coming soon.