Theming Differences between Drupal 6,7 & 8?

  1. Drupal 8 outputs sematic HTML5 markup by default, compared to XHTML in Drupal 6 & 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 introduces TWIG, Which replaces PHP Template as the default theme engine. This means the theme_* functions and PHP based *.tpl.php files have been replaced by *.html.twig templates().
  4. Drupal 8 ships with responsive features such as responsive themes, toolbar, images and tables.
  5. In drupal 6&7 if you wanted to add css or js to 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 array.
  6. Drupal 8's CSS(file) structure is based on SMACSS & BEM
  7. Drupal8's CSS uses CSS3 pseudo selectors.
  8. Drupal 8 moves CSS classes from preprocess functions to Twig templates.
  9. Drupal 8 uses break-point media queries to control how the site looks on different devices.
  10. Drupal 8 enables by default features that improve performance such as CSS & Javascript aggregation.