Update for Drupal 8 themes
- Updating themes to Drupal 8 #1 – Main changes
- Updating themes to Drupal 8 #2 – Folder structure and Twig
- Updating themes to Drupal 8 #3 – Libraries and assets
- Updating themes to Drupal 8 #4 – Using classy as a base theme
Drupal 8’s beta version was released a few month ago and now it is time to start porting themes. In this series we are going to discuss the most noteworthy changes in Drupal 8 about theming. Quite significant changes were introduced in the theme system between Drupal 8 and 7. This guide contains information that applies to Drupal 8 and refers sometimes to Drupal 7 in order to explain new concepts and approaches.
Theming differences between Drupal 7 & 8
- Drupal 8 outputs semantic HTML5 markup by default (see Drupal 8 HTML5 Initiative), compared to 7.
- Besides jQuery v2.x Drupal 8 now includes more front-end libraries such as Modernizr, Underscore.js and Backbone.js.
- Drupal 8’s core RDFa module outputs schema.org markup.
- Drupal 8 has improved accessibility making extensive use of WAI-ARIA attributes.
- Drupal 8 introduces Twig, which replaces PHPTemplate as the default theme engine. This means the
theme_*functions and PHP-based
*.tpl.phpfiles have been replaced by
- Drupal 8 ships with new UI elements that you use in your own admin screens, including modal dialogs and drop buttons.
- Drupal 8 ships with responsive features such as responsive themes, toolbar, images, and tables.
- In 7 if you wanted to add CSS or JS to a particular page, you’d use the drupal_add_css() and drupal_add_js() functions, respectively. This is now replaced by insert any JS/CSS assets in the #attached property of a render array.
- Drupal 8 drops support for IE 6, 7 and 8, enabling the use of jQuery 2.0 and other code that assumes modern HTML5/CSS3 browser support.
- Drupal 8 does not support browsers that do not support SVG (including IE8 and Android Browser 2.3)
- Drupal 8 contains less IDs than Drupal 7’s CSS.
- Drupal 8’s CSS (file) structure is based on SMACSS & BEM.
- Drupal 8’s CSS uses CSS3 pseudo selectors.
- Drupal 8 ships with Classy, a core base theme that injects classes into markup, and includes corresponding CSS. In progress: This will replace many preprocess functions and CSS files which were previously included in core modules.
- Drupal 8 moves CSS classes from preprocess functions to Twig templates.
- Drupal 8 uses breakpoint media queries to control how the site looks on different devices
Behind the scenes
- Views allows site-builders to create lists, posts, galleries, tables, maps, graphs, menu items, blocks, reports, forum posts and more.
- Views is now built into the core CMS and it is deeply integrated.
- The front page listing is now a view, as are several administration pages.
- Easily customize the front page, listing blocks, and more. It also means you can simply create custom admin pages, customize filters and actions.
- There are now more fields available (entity reference, link, date, e-mail, telephone, etc.)
- Take comments on products
- You can also now attach fields to forms to create custom forms
- More collaborations on external libraries such as: Composer, PHPUnit, Guzzle, Zend Feed Component, Assetic and more.
In this short post we looked at the principal changes that Drupal 8 brings for us. In the next chapters we are going to make a look about more specific things like Twig, Folder Structure, Libraries and more.