Drupal is an open-source content management system released in 2001 by Dries Buytaert. An open-source application opens the world for Free Drupal 8 Themes.
Since Drupal was released, there have been 4 versions, with a 5th on the way. Drupal 8 marked an evolution of the software. When Drupal 8 was released, the front-end template engine changed from PHPTemplate to Twig. Drupal 8 currently supports Twig version 1.x and Drupal 8.7+ supports Twig 2.x
Drupal 8 allows developers to take customized themes and create subthemes.
Subthemes are children themes from the parents that allow developers to completely customize them to match their needs, without altering the parent source code. These subthemes will allow developers to still use all of the HTML, CSS, and JavaScript classes but to fit their own needs.
Visit here if you would like to learn more about Drupal’s pro’s & con’s.
The best 5 Free Drupal 8 Themes are:
- Bootstrap
- Tailwind
- Barrio
- Bulma
- Adminimal
1. Bootstrap Drupal 8 Theme
Bootstrap was created by two employers of Twitter in 2010.
It was originally released on August 19th, 2011. Twitter still uses the framework for internal development tools to this day. There have been multiple versions of Bootstrap, which version 5 is the newest.
Bootstrap focuses on mobile-first, as most of the web is targeted for mobile devices.
Bootstrap 3 Drupal 8 Theme
The original Free Drupal 8 theme consisted of Bootstrap 3.
This module was created to help bridge the gap between Drupal and the initial Bootstrap framework. This featured “out-of-the-box” CSS styling and jQuery, which allowed more efficient websites, as well as Glyphicons. The module also allowed deeper Drupal integration.
The theme settings GUI allowed developers to customize :
- Breadcrumbs
- Navbar
- Popovers
- Tooltips
- Wells
You can find the Bootstrap 3 Free Drupal 8 Theme here.
Bootstrap 4 Drupal 8 Theme
The Bootstrap 4 free Drupal theme was a simplified version of Bootstrap 4.
It contained the “bare-bones” of what was needed for developers and designers to implement bootstrap in websites. The best addition from Bootstrap 3 to Bootstrap 4 in Drupal was the user interface for creating a subtheme. This allowed developers to create a customized subtheme with the click of a button instead of the tedious legacy ways.
The Bootstrap 4 theme features:
- Bootstrap 4 Library
- Style guide
- Configuration with admin UI
- GUI for creating a subtheme
- Drupal 8 compatible
You can find the Bootstrap 4 Free Drupal 8 Theme here.
Bootstrap 5 Drupal 8 Theme
The Bootstrap 5 Free Drupal Theme was a complete addition version.
While the Bootstrap 4 version was simplified, Bootstrap 5 brought everything out of the box. In Bootstrap 5 you are able to use this theme out of the box or by a subtheme. If you wish to use a subtheme, the UI implementation is still around. This makes developer’s lives easier when creating a subtheme.
The Bootstrap 5 theme features:
- Bootstrap 5 Core Libraries
- Style Guide
- CKEditor Integration
- Admin UI
- Interface for creating subtheme
When Bootstrap 5 was released, they dropped a ton of legacy browser supports.
You can find the Bootstrap 5 Free Drupal 8 Theme here.
TailwindCSS Drupal 8 Theme
The first version of Tailwind was released on November 1st, 2017.
Tailwind is a CSS framework built to make developer’s and designer’s lives easier. Anytime you are building a website, and need to make something pretty, you are relying on CSS. CSS can turn your ideas into elegant designs.
This is the legacy way of styling websites.
Tailwind allows you to style your website directly in your HTML. Doing this allows quicker, more organized, development. Styling your website with Tailwind allows you to add HTML classes to your elements. Focusing on this allows developers to increase efficiency based on smaller CSS file sizes.
There are two different free Drupal 8 themes that use Tailwind:
Tailwind CSS Starter Kit Drupal 8 Theme
This starter kit is the easiest way to onboard your project to Tailwind.
If you are just interested in trying out the starter kit, you will be able to add it to your site a few different ways. You can add it by
- Using the Composer CLI
- Adding it to your website via Drush
- Adding it manually through drag and drop
Want to go beyond the demo? You will be able to install the starter kit and use it as your own Drupal subtheme. You will have to do this the old Drupal 8, manual, way. By downloading the theme, changing the directory name, and modifying the names of the files inside the directory.
You can download the Tailwind Starter Kit Free Drupal 8 theme here.
Wingsuit Drupal 8 Theme
Wingsuit is CMS framework built with Twig, Storybook, and Tailwind.
With Wingsuit, you are able to choose your design technology. When you choose Tailwind, you are selecting an API for your design system. This enables a more component based approach (like reactJS) rather than your typical HTML/CSS themes. But it is worth checking out.
You can download the Wingsuit Free Drupal 8 theme here.
Barrio Drupal 8 Theme
Barrio is a free Drupal 8 theme that is built on top of Bootstrap.
This theme implements the base CSS and Bootstrap markup to omit the standard Drupal markup. Doing this allows the theme to be completely custom for developers and designers. Most of the theme uses Bootstrap CSS, but there is a bit of custom added.
The custom parts of the theme, not implemented by Bootstrap, are implemented with Flex.
Features
- Bootstrap markup replaces Drupal Twig markup
- Bootstrap base theme for elements (form elements)
- Column based grid layout
- Bootswatch integration
You can download the Barrio Free Drupal 8 theme here.
Bulma CSS Drupal 8 Theme
The Bulma CSS Drupal 8 Theme is based on the open-source framework Bulma.
Bulma is a Flexbox CSS framework that allows beginners to design and develop websites from scratch. The implementation of Flexbox allows responsive, efficient, web interfaces to be created.
There is no JavaScript included in the Bulma CSS Drupal 8 Theme, besides the exception of the mobile menus.
You can download the Bulma Free Drupal 8 theme here.
Adminimal Drupal 8 Theme
Adminimal is a popular Drupal 8 theme for the administration side of web applications.
This theme is based on the Seven theme that comes within the Drupal installation. Adminimal has the best to offer in a responsive layout, minimalist design, and customization.
Even though this is an admin side only theme you are getting the best, most popular, theme.
You can download the Adminimal Drupal 8 Theme here.
Conclusion
Drupal 8 is an open-source framework, which allows plentiful free Drupal 8 themes.
Bootstrap is the best all-around theme that includes CSS, HTML, and JavaScript. This allows developers to build front-end styling from the ground up, but keep efficiency and responsiveness.
Diving more into TailwindCSS is on my list, but it is already very popular and future-proof.
If you have other suggestions, they are always welcome.
