This project provides a Drupal subtheme that integrates Bootstrap 5 SASS, allowing you to easily customize Bootstrap variables and colors to match your site's design. It overrides default Drupal CSS and offers options for Material Design integration, simplifying the creation of a unique Bootstrap-based theme.
This is a Barrio subtheme that simplifies integrating Bootstrap 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 files are compatible with 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.
Variables SCSS file is included with most popular Bootstrap options to out-of-the-box recompile a custom Bootstrap version, to match your site's look&feel.
This subtheme 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 folder
chmod -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