Theming differences between Drupal 6, 7 & 8

Last updated on
27 February 2017

This is a list of some of the most noteworthy changes in Drupal 8 that affect theming.

More information

  1. Drupal 8 outputs semantic HTML5 markup by default (see Drupal 8 HTML5 Initiative), compared to XHTML in Drupal 6 and 7.
  2. Besides jQuery v2.x Drupal 8 now includes more front-end libraries such as Modernizr, Underscore.js and Backbone.js.
  3. Drupal 8's core RDFa module outputs markup.
  4. Drupal 8 has improved accessibility making extensive use of WAI-ARIA attributes.
  5. Drupal 8 introduces Twig, which replaces PHPTemplate as the default theme engine. This means the theme_* functions and PHP-based *.tpl.php files have been replaced by *.html.twig templates ().
  6. Drupal 8 enables by default features that improve performance such as CSS and JavaScript aggregation.
  7. Drupal 8 ships with new UI elements that you use in your own admin screens, including modal dialogs and drop buttons.
  8. Drupal 8 ships with responsive features such as responsive themes, toolbar, images, and tables.
  9. In Drupal 6 and 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 attaching JS/CSS assets in the #attached property of a render array using libraries.
  10. 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.
  11. Drupal 8 does not support browsers that do not support SVG (including IE8 and Android Browser 2.3)
  12. Drupal 8 contains fewer IDs than Drupal 7's CSS.
  13. Drupal 8's CSS (file) structure is based on SMACSS & BEM.
  14. Drupal 8's CSS uses CSS3 pseudo selectors.
  15. 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.
  16. Drupal 8 moves CSS classes from preprocess functions to Twig templates.
  17. Drupal 8 uses breakpoint media queries to control how the site looks on different devices.

CSS Class Changes between D7 and D8



.menu li.expanded
.menu li.collapsed
.menu li.leaf
.menu li.first
.menu li.last



.menu-item--leaf was rarely used so it was removed. It can be added back. @see example
@todo replace with link in this documentation.