Introduction

Motivation

There are many base themes for Drupal which you can use, so the logical question is why create another one?
While evaluating current base themes we noticed a couple of problems:

• No good Bootstrap 4 base theme,
• Most of the base themes are concentrating on adding a lot of features that are hard to remove when you do not need them,
• No clear development workflow defined for child themes,
• Lack of re-usability,
• Lack of component-oriented approach,
• Difficult to update/refactor based themes without breaking compatibility of child theme implementations,
• Monolithic design, especially true for CSS,
• Difficult custom theme development when you want to step outside of boundaries of base theme.

Based on this list we decided to create a new base theme that will have light Bootstrap 4 implementation but should also address all the other problems we identified.

This is a big and complex problem to solve and the current version still didn't fully reached all the goals we set. However great progress is already made and we are already using this base theme in numerous production client projects.

Because of this base theme implementation is split into two base themes for now:

• bs_base is the lowest level base theme which job is to introduce basic development workflow and offers various tools to improve the development of child themes.
• bs_bootstrap is Bootstrap 4 bs_base child theme which is a base theme for custom child theme implementation.

Goals

• Developer-oriented,
• No tons of UI settings or big assumptions,
• Presents and use practical and business-oriented development workflow which is not mandatory but recommended,
• Lightweight and fast,
• Component-oriented,
• Explore all new nice & cool technologies that are supported in major browsers,
• Stick to core Drupal API. Do not add custom APIs unless it is really needed.

Features

• BEM and component oriented,
• Gulp build process,
• SASS inheritance workflow which is easily overridable,
• Implements bs_bootstrap Bootstrap 4 based child theme,
• Lots of options in bs_bootstrap theme that you can easly turn off if you don't want them,
• Semantically clean HTML as much as possible with the use of mixins and utility CSS classes,
• Powerful drush generator implementation for quick theme generation and update,
• Theme update hooks support for complex upgrade paths.

bs_base

As said before bs_base is the lowest base theme in this project. It is doing the next things:

• Setting up basic general SASS workflow and components support. All variables are defined in `variables/_bs_base.scss` partial.
• Provides various template definitions with `{% block %}` implementations for an easier override of template parts.
• Define 3 drush commands for child theme creating, update and CSS build.
• Defines gulp development workflow for CSS development.

We will explain in more details custom gulp workflow, SASS workflow and drush generator command a bit later.

bs_bootstrap

Bs_bootstrap is a child sub-theme implementation of `bs_base` base theme. You start from this theme in your custom theme.

With this theme, your child theme will get Bootstrap 4 support and implementation, a ton of SASS variables you can override and various frontend options in theme settings like:

• Header top container type: fixed or fluid,
• Navbar container type: fixed or fluid,
• Navbar type:
  • Second level horizontal - your second level menu items will be laid out in a horizontal row. They can have third level menu items in a dropdown. With this option you have one additional option:
    • Navbar show sub-level on hover - should we display the second level on first menu level hover or not.
  • Second level dropdown - your second level menu items are in a dropdown.
• Navbar off canvas type. This is for responsive main navigation menu support and it basically controls the type of reveal animation for sidebar responsive navigation menu.
• Navbar off canvas position. Works with previous option.
• Language block type. With this, you can control how language block links will be rendered as a regular block navigation links or as a dropdown menu.
• Language block title. Controls the label of language links as a language label or language ISO code.
• Inline SVG logo. If the theme logo is SVG you can inline it in HTML code with this option. Useful when you want to have more CSS control with SVG logo parts.

As you see you will get a lot of help and options out of the box with this base theme system, but hold on, there is even more ;) Instead of writing more boring text lets dive into an example and explain other advanced concepts in real life example.