Getting started with a 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
- 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 schema.org markup
- 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.php files have been replaced by *.html.twig templates ()
- 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.