Theming differences between Drupal 6, 7 & 8
This is a list of some of the most noteworthy changes in Drupal 8 that affect theming.
- Drupal 8 outputs semantic HTML5 markup by default (see Drupal 8 HTML5 Initiative), compared to XHTML in Drupal 6 and 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 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.
- 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 fewer 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.
CSS Class Changes between D7 and D8
- Upgrading 7.x themes to 8.x
- Change notice for themers
- Sqndr's Drupal 8 theming guide
- Ultimate Guide to Drupal 8: Episode 5 - Front-End Developer Improvements
.menu li.expanded .menu li.collapsed .menu li.leaf .menu li.active-trail .menu li.first .menu li.last
.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.