Theming differences between Drupal 6, 7 & 8

Last updated on
11 January 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 schema.org 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

D7:

.menu li.expanded
.menu li.collapsed
.menu li.leaf
.menu li.active-trail
.menu li.first
.menu li.last

D8:

.menu-item--expanded
.menu-item--collapsed
.menu-item--active-trail
.menu-item:first-child
.menu-item:last-child

.menu-item--leaf was rarely used so it was removed. It can be added back. @see example https://www.drupal.org/node/2425691#comment-9629101
@todo replace with link in this documentation.