Meet Material Base v2

What base Drupal themes are needed for

The frontend of a Drupal site is usually separated from the backend and presented as a theme. Drupal has very powerful theming abilities and base themes are one of its powerful features.

A base theme allows you to store basic and frequently used elements and then reuse them as a starting point for other themes, which only contain features for a specific project. All functionality and assets of the base theme are automatically inherited in the child sub-theme.

This is a very useful architecture as today most sites use similar design concepts. Using base themes allows you to significantly speed up development and, in some cases, avoid it entirely, just by configuring the theme for the needs of the project.

Theming approaches and types of base themes

Drupal is flexible and supports several different approaches for theming, which are reflected in the types of base themes available.

The simplest ones are themes that contain only the markup of their elements without any styling. Such themes are intended for from-scratch theme development in accordance with the individual project design. Two such themes Stable and Classy are included in Drupal core 8+. There are contributed themes that use this approach, and also include additional features such as various compilers, libraries, and framework integrations.

Another popular type of theme is those with ready-made markup and component styling, right down to entire pages. Such themes look quite attractive right out of the box, and usually, they have some customization options, for example, colors, fonts, page layouts. The highest quality themes with styling are mostly published in marketplaces, that is, they are paid (average cost $50). These themes are well suited for quickly deploying a project and when the project does not have or does not require a unique design. But there are also disadvantages including redundancy of elements, large file sizes, the complexity of rework and required fine-tuning.

Perhaps the rarest, but no less popular type, is theme-builders which contain markup and styling only for generic elements, such as buttons, form fields, menus, etc. Very often design comes from a framework or library. At the same time, there are themes focused on both development and site-building. This type of theme includes the main advantages of the other two types and is optimal for professional development. Perhaps that is why there are only a few high-quality base themes with this approach.

Review of existing base Drupal themes

In theory, there should be a list of popular themes with their descriptions, advantages, and disadvantages. However, this type of comparison isolated from a project context wouldn't be accurate or useful. Also, there aren’t that many base themes that really deserve the attention - to be precise, there are three that would be worth it. 

I don’t see any point in considering themes with styling at all, since any development regarding them is not initially implied.

The base themes from Drupal core — Stable and Classy — are a good option for projects with individual designs when you have a frontend developer in house. There are only slight differences between these themes in the number of CSS classes added to the markup. There are quite a large number of them in Classy, ​​which allows you to start developing a theme right away with styles. If you need to use your own markup and classes, for example, for integration into a framework or library, then it is better to choose Stable.

In reviewing the themes from drupal.org, I cannot fail to mention the Bootstrap theme. This is a good theme and the statistics of its use prove it — 64k installations. For comparison, of the closest competitors Barrio has about 15k, and AdaptiveTheme has about 5k installations. 
The number of installations quoted is for Drupal 8+. Bootstrap is arguably the most popular website styling framework, and as a theme that makes it easy to use is by far the most popular Drupal theme. However, it does not work well in all cases. The theme is effective for designs based on this framework, "designless" sites, and site-building. For custom designs and designs based on other systems, such as Material Design, using this theme is often ineffective, since a large number of elements need to be overridden, and the number of elements which could be used out of the box is small.

Most of the other base themes from drupal.org are also related to specific technologies or frameworks. But as is often the case in the world of the web, technologies are becoming obsolete, frameworks are losing popularity, and the underlying themes based on them too.

Material Base Version 1 and how it came about

Back in 2015, I thought that it would be useful to collect my experience of Drupal theme development and shape it as a base theme. The Material Design concept which appeared shortly before that was ideal as a design system. It is a well thought out system, and was presented as design guidelines for Android apps, but also includes recommendations for desktop. 

There were already several Material Design implementations from different developers, but there was no really complete and high-quality one available.

I started developing Material Base from scratch, gradually adding common elements to it that no site can do without. In doing so, I tried to keep the theme as light as possible and not overload it with specific elements. 

The development proceeded as we were working on real projects that used the theme. The first release came out more than a year later. It was a good theme and is still used on over 500 sites today. 

The main "feature" of the theme is a large number of ready-made components, like Bootstrap, but in the Material Design style. At the same time, we applied the design to the standard Drupal markup and the bulk of the theme was represented by CSS styles, which made it relatively easy to change the appearance of elements.

But the web evolved further and, as with other themes, version 1 was no longer relevant. Then the second edition of Material Design was released, and good software implementations of Material Design appeared. New approaches for organizing components, new methodologies for working with styles, and new tools were also created. Material Base V1 did not have sufficient flexibility or ability to use these new approaches without significant rework.

Requirements for modern base themes

Along with the web, development tools are also being developed and especially for the frontend. Realising the need to develop a new theme, we identified the following key requirements that it would need to meet:

• High technologically and quality — the theme for professional development
• Component-based approach — we settled on Atomic design
• Using native Material Design implementation — Material Components for the web by Google
• Convenient grid and breakpoints — used the approach from Bootstrap
• Maximum flexibility and customization — all libraries and components are replaceable, all key parameters are set using variables
• Fast auto-build, watching for changes, industry standards compliance — leveraged Yarn, Webpack and BEM methodology
• Compliance with Drupal standards — best practices of Drupal development are applied: sub-theming, libraries, the inheritance of Twig templates
• Using sub-themes for the ability to update the base theme — developed a script for generating sub-themes
• Beautiful out-of-the-box appearance — the theme includes over 20 commonly used components with full support for customizing the appearance
• Good documentation — we are still working on this, but everything that is needed to start is already in the theme folder

Challenges and solutions implemented in Material Base V2

The main challenges were in organising components for convenient use, and the ability to disable and override them. The point is that a component is a very abstract division. Some components are just styles applied to a specific class, while others may need special markup in the Twig template and/or additional JS code. 

Organising components is a non-trivial task due to the combination of Sass variables, the ability to customise the component in the admin interface, and the structure of Drupal entities. Nevertheless, the best option was found, and it provides the necessary flexibility in use, the lack of which was, perhaps, the main problem of the 1.x version. 

Our chosen method may not be the simplest and most obvious, but we have prepared all the necessary structures in the sub-theme template, so you will not have to figure out how it all works.

Another interesting task was the integration of Material Components for the web library. Like Material Base, it uses a component-based approach, but the paradigm for using these components is very different from how similar elements are created in Drupal. For example, menus or form elements in Drupal are created programmatically, and the default function for generating them did not have the necessary markup.

Another example is a regular button. If you do not take into account buttons in forms, in Drupal you cannot just add a button to a page. You can add a button as markup, but that would be inconvenient for regular use and just plain wrong. In Drupal you need to create a field or a set of fields that will store the necessary data (text, link, style) for rendering a button, and the Twig template will generate the necessary markup based on this data. 

So the problem is that the theme couldn’t include the definition of fields, since this is already a content level item. As a result, we used a concept that allows us to connect a Twig template and pass the necessary values ​​to it from other Drupal Twig templates, for example, from a block or paragraph.

Thus, we managed to solve both problems using two levels of templates: native Drupal templates for pages, blocks, menus, forms, etc. and individual component templates such as buttons, icons, cards, which can be connected to other templates as needed. 

Moreover, component templates usually have a set of accepted values, just as it is done in native Drupal templates.

Current state and future plans

Material Base has been and remains a theme for developers. And if V1.x had great opportunities for site-building, then in V2 the emphasis is on the ease of use for custom development.

Material Base 2 has been developed as part of internal and client projects at SystemSeed, including its own site systemseed.com. Undoubtedly the use of the theme in projects of this level provided the basis for high-quality development and support in the future.

This is one of the few Drupal themes developed by an agency for their own needs and also released as an open-source project. We love open source and believe in the power of the FOSS community, so we invite everyone to try this theme in their projects. 

We will also be glad to have comments and suggestions on the project page at drupal.org. For our part, we plan to continue adding new features and components as the theme is used on new projects.