Drupal 8 Theme Development using bootstrap

Drupal Theme Development using bootstrap SASS

Bootstrap is a front-end framework for building websites. It ships prebuilt CSS and JavaScript components that make building sites fast. It comes with all sorts of common components that every website needs such as a grid system, buttons, drop-down, responsive form elements, carousel (of course) and so much.

In this tutorial, you learn the following:

1. Bootstrap theme configuration
2. Create a Bootstrap sub-theme
3. Compile Bootstrap locally using Sass

Bootstrap theme configuration

Before we can begin, go download the Bootstrap theme from drupal.org.

If you use Composer, run the following:

$ composer require drupal/bootstrap

Once you’ve downloaded the theme go to Appearance and click on “Install and set as default” on the Bootstrap theme.

Create Bootstrap Sub-theme

Why Sub-theme?

When you create a sub-theme, the Bootstrap theme will be the “base theme” which means your sub-theme will automatically inherit all templates and assets such as the CSS and JavaScript.

Your sub-theme will automatically use any template from the base theme unless it’s overridden. If you want to modify the page.html.twig then simply copy it from Bootstrap into your sub-theme templates directory and customize. Drupal will automatically pickup the page.html.twig in your sub-theme instead of the one in Bootstrap.

Bootstrap comes with three starter kits: CDN, Less and Sass. You can see them by going into the starterkits folder in the theme.

Step 1: Create Sub-theme

Let’s now create a sub-theme using the Sass starter kit.

• Go into the Bootstrap theme and copy the sass folder from starterkits and then paste the folder into /themes/custom.
• Rename the folder from sass to horizon (you can rename it to whatever you want). Once copied and renamed, the path to the sub-theme should be /themes/custom/horizon.
• In the horizon sub-theme, replace all instances of THEMENAME in the file name to horizon.

Look for the following files:

• THEMENAME.libraries.yml => horizon.libraries.yml
• THEMENAME.starterkit.yml => horizon.info.yml (NOTE: make sure you change starterkit to info)
• THEMENAME.theme => horizon.theme
• /config/install/THEMENAME.settings.yml => horizon.settings.yml
• /config/schema/THEMENAME.schema.yml => horizon.schema.yml

Now we need to open up a few files and perform a find and replace on the string THEMENAME.

Open the following files:

• horizon.info.yml: Give your sub-theme a name such as “Bootstrap Sass” and find all THEMENAME and replace them with horizon.
• /config/schema/horizon.schema.yml: Find all instances of THEMENAME and replace with horizon.

Step 2: Download bootstrap SASS Library

• Go to the Bootstrap Getting Started page and download the Sass version.
• Extract the downloaded file into horizon, once extracted the path should be horizon/bootstrap. You may have to rename the folder after it’s extracted.
• Now we need to copy over the variables in Bootstrap into our Sass files. This will allow us to override the variables without having to modify the actual Bootstrap library.
• Go to horizon/bootstrap/assets/stylesheets/bootstrap/_variables.scss and copy the variables into horizon/scss/_default-variables.scss. Paste them just below the $icon-font-path variable.

Step 3: Compile Sass using laravel-mix

The final step to complete this sub-theme is to compile Sass.We’ll use laravel-mixwhich is a wrapper on top of webpack. Before you begin make sure you download and install Node.js.

• Go into the sub-theme directory and run below command and Just follow the prompts

npm init

• Then install laravel-mix with the following command:

npm install laravel-mix

• In the sub-theme create another file called webpack.mix.js and add the following to it:

let mix = require('laravel-mix');

mix.sass('scss/style.scss', 'css/');
mix.options({
  processCssUrls: false
});

The code above is pretty straightforward, it’ll tell laravel-mix to compile scss/styles.scss into the css directory. Once compiled there will be a single file styles.css and the path will be css/styles.css.

• Open up package.json and replace the scripts section with the one below:

"scripts": {
  "dev": "NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
  "watch": "NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
  "hot": "NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
  "production": "NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},

• Use this script to automatically compile when a file is changed.

npm run watch

• This should be used locally while developing a site.

npm run production

Like what you read? Give clap to show how much you enjoyed this story.