Bootstrap 4/5 - Barrio SASS Starter Kit

This is a Barrio subtheme that simplifies integrating Bootstrap 4/5 SASS with Drupal.

This subtheme is compatible with Barrio Bootstrap 4 (5.1.x) and Barrio Bootstrap 5 (5.5.x).

By default package and gulp will build for Bootstrap 5, if you wish to work with Bootstrap 4 use legacy versions of package and gulp files available on root folder.

This subtheme overrides almost every CSS from Drupal and replaces where posible Bootstrap variables in order to generate from roots a new set of CSS files.

Color management relies on Google Material Design, generating lighten and darken variations of main color to generate hover or contrast for main colors.

For variables overide a SCSS file is defined, changinmg the whole Bootstrap definition according to personalizations set.

This subtrheme is also compatible with Material Desingn Bootstrap.

For a deeper understanding ir the theme options:

SASS Subtheme Configuration Guide

Installation

• Install node.js on your server
• On the theme´s folder:
• Install gulp: npm install --global gulp-cli
• Install dependencies including Bootstrap latest version: npm install
• Change permissions to node modules folderchmod -R u+x node_modules
• Optional install Material Design Bootstrap: npm install mdbootstrap

Update line#47 of the gulpfile.js file with your own domain.

browserSync.init({
  proxy: "http://yourdomain.com",
});

This will generate a style.css file with mappings for debbuging and a style.min.css file for production. You will need to change the reference to the file manually on your SUBTHEME.libraries.yml file.

Execution

Just run gulp