Skip to main content

Getting started with a Drupal 8 theme

drupal 8 theme

People are familiar with a Drupal theme and one of the first thing any Drupal developer need to understand how to apply the new tools and techniques to build a Drupal theme from scratch.

Getting started with a Drupal theme

  • Themes allow you to change the look and feel of your Drupal site 
  • Use contributed themes or create a new theme from scratch and share with the community
  • Create a sub-theme of an existing theme. A sub-theme inherits a parent theme's resources

Do more with a Drupal theme

  • Change layouts, regions, images and fonts
  • Hide or display fields dependent on user role
  • Dynamically respond to changes in the content, or to user input
  • Modify or replace text (e.g., labels or attributes) and variables generated by modules
  • Convert any website layout or template into a Drupal theme

Drupal 8 Theming

  • Defining a theme with an .info.yml file
  • Theme folder structure
  • Twig in Drupal 8
  • Adding Regions to a theme
  • Adding stylesheets (CSS) and JavaScript (JS) 
  • Creating a Drupal 8 sub-theme
  • Include default image styles with your theme
  • Use attributes in templates
  • Working with breakpoints in Drupal 8

Theming differences between Drupal 6, 7 & 8

Here are 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 markup
  • outputs 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.php files have been replaced by *.html.twig templates ()
  • Drupal 8 enables by default features that improve performance such as CSS and JavaScript aggregation.
  • 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 byinsert 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 pre-process functions and CSS files which were previously included in core modules
  • Drupal 8 moves CSS classes from pre-process functions to Twig templates
  • Drupal 8 uses breakpoint media queries to control how the site looks on different devices

After you have grasped some basic ideas about your template folder, its files, and the layout of your theme, let's move on to create a Drupal 8 theme in future posts in this series. Join the conversation by commenting below with any questions or feedback on using Drupal 8 theme for your project.


Leave Your Comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.

start with anubavam today

You have an idea we have engineers to convert your ideas into reality

Request Quote