No time to read it now?
We will send a link to the article to your inbox
Contents:
What is a Drupal theme
A theme in Drupal is a set of files that defines the appearance of a website.
We all know what a typical website page is made of: it contains text, images, links to pdf files, data that the browser requests from the server, etc. The way this content is organized on the page is determined by the Drupal core and enabled modules. The role of a theme is to give that content a readable and digestible form.
This is how it works. When the theme is launched, the website backend generates HTML code using the .yml, PHP, and twig files stored in the theme, default images (for example, buttons), configuration files, and settings. The theme files also include CSS and JS files that interact with HTML. The HTML code assigns each content block and element its place, CSS code is responsible for their appearance, and JS code animates interactive elements. The website user sees the product of this internal work on their screen.
A developer can create a custom Drupal theme for a specific project or client, or use one of the contributed themes, i.e. created and made publicly available by the members of the Drupal community.
Types of Drupal themes
Themes in Drupal are divided into base and ready-made (can be used out of the box).
A base theme consists of a set of templates, layouts for them and a small piece of CSS code. Only developers have to deal with base themes. Such a theme is always included in the core (for Drupal 10, it is the Starterkit theme), but it can be replaced with another base theme.
The ready-made theme is responsible for the attractive appearance and style of the website; they are creative. Each of them is unique either in the functionality it provides or its visual appearance. A developer creates a creative theme using one of the base themes as a basis (so-termed inheritance). There are not that many free ready-made themes; more often Drupal projects involve creating a custom theme or purchasing a ready-to-use theme.
How to choose a theme for a Drupal website
Here is a list of criteria that will help you evaluate the reliability and security of a theme.
→ The theme has passed the Drupal security check.
Its security is indicated by a special plaque on the theme page on Drupal.org. This status is a sign that the project maintainer agrees to follow Drupal Security Team procedures. This is one of the biggest benefits of using a theme listed on Drupal.org.
There are Drupal theme aggregators where the choice is much wider. But by embedding files downloaded from them into your website, you act at your own peril and risk.
→ The theme has Actively maintained and Under active development statuses on Drupal.org.
If a theme is actively supported by its creators, fixes and improvements will be released for it on a regular basis. There may even be new features.
→ The theme is responsive.
It easily adjusts to the screen size. Responsive sites determine the browser resolution themselves and output a page of appropriate parameters.
→ Its developers follow the Mobile First principle.
When creating the theme, developers took into account the fact that most of the interactions with websites happen on mobile devices and adjusted the theme to them.
→ The theme is compatible with Drupal 10.
You can find a theme for any CMS version on Drupal.org, but in this article, we are focusing on themes for Drupal 10.
→ The theme is tailored to a specific type of business or is universal.
You can focus your search on themes for eCommerce websites, blogs, etc. We have only selected themes that are suitable to a wide range of businesses.
Free Drupal themes
It is difficult to find a free and high-quality theme. But Drupal is famous for its community ready to share its solutions. We have compiled a list of the top 15 topics that meet the criteria listed above.
Base themes
Drupal offers several base themes that can become the blueprint for further customization.
Bootstrap
Bootstrap is a sleek, intuitive, and powerful mobile-first front-end framework. The base theme of the same name bridges the gap between the framework and Drupal. It changes the markup of all Drupal elements to one suitable for this framework, loads all the necessary libraries and dependencies, and adds the necessary classes to the necessary elements.
Barrio Bootstrap
A Bootstrap 5-based theme completely overrides Drupal's core markup. This theme is not stylized, it rather creates a layout to serve as a starting point for a base theme.
Radix
An original component-based theme. It comes with Bootstrap 5, Sass, ES6, BrowserSync, BiomeJS built-in. It has the Starterkit theme and Single directory components in its core, so there is no need to use the Components module anymore.
Material Base
A base theme that implements Google’s Material Design concept. The theme was created as a combination of basic styles and components, which can be easily combined for making beautiful Drupal themes instead of making them from scratch. It requires knowledge of the Drupal theming system as well as knowledge of CSS and SASS.
Adaptive Theme
A base theme designed for people who don’t code and those who only want to write a bit of CSS but still get a sleek and sophisticated theme for mobile web. It includes the AT Generator module to generate unlimited themes, clones of themes, and even skin themes.
Zurb Foundation
This theme provides tools needed to integrate the Foundation framework into Drupal, so you can begin prototyping websites right away. The theme provides a Gulp workflow out of the box to generate CSS from SCSS files.
Bulma CSS
The theme is adjusted to a modern CSS framework of the same name that is based on the Flexbox CSS3 layout mode. Even though Bulma CSS is designed as a base theme, developers have made sure that the theme looked good out of the box, so it could be applied right away without subtheming.
Ready-made themes
Let's be honest, beautiful ready-made themes are not Drupal's strongest suit. Themes that work well out of the box are most often paid. And even after purchase, you will likely need help from developers to adapt it to the website. But we still did our best to select the best free Drupal themes.
NB. If you have a website with a complex architecture, you shouldn’t use a ready-made design—you need custom theme development.
Showcase Lite Theme
A free mobile-first Bootstrap 3-based theme that helps you create great-looking business and product/service portfolio websites.
NB. All themes that have Lite in their names are demo versions of paid themes. They can function independently but have limited features.
Creative Responsive Theme
Perfect for all types of small or medium-sized business websites. This theme is not dependent on any core theme and has a clean responsive layout and lightweight code.
Civic Theme
A component-based atomic design system. It was created so that governments and corporations could rapidly assemble modern, consistent, and inclusive websites.
Catalog Lite Theme
A free mobile-first theme based on Bootstrap 4 and the Progressive Web App. Comes with 200+ theme settings and helps you build great corporate and business websites.
Creative & Innovative Theme
A mobile-friendly responsive theme. This theme features a responsive layout and is highly customizable. It will be great for any kind of business website.
→ Top 10 Responsive Drupal E-commerce Themes
Zymphonies Theme
A responsive theme that doesn't require any additional modules. Developed using only Drupal 8 core modules and the Bootstrap 3 framework. The theme will be useful for any kind of small or large-scale website development.
Dempo Theme
Inspired by the News subtheme of the Katerio WordPress theme, but not 100% identical. Does not depend on other themes and employs the Bootstrap Layout Builder.
Conclusion
We’ve observed 14 Drupal themes which you can use for your website. All of them are free and ready to use. Remember that the beautiful design of your website and the high-quality graphics аre able to sell your product or service better. I hope you enjoyed the collection.
More on Drupal themes
