Extra Block Types (EBT) - New Layout Builder experience❗

Extra Block Types (EBT) - styled, customizable block types: Slideshows, Tabs, Cards, Accordions and many others. Built-in settings for background, DOM Box, javascript plugins. Experience the future of layout building today.

Demo EBT modules Download EBT modules

❗Extra Paragraph Types (EPT) - New Paragraphs experience

Extra Paragraph Types (EPT) - analogical paragraph based set of modules.

Demo EPT modules Download EPT modules

Scroll

7.2. Creating themes based on Bootstrap. Compiling SASS via Gulp

13/09/2019, by mikhail

In the last lesson, we looked at how to compile LESS using the built-in watcher in PhpStorm. In this tutorial, we will create a theme based on SASS Boostrap. If you are unable to deal with LESS and compiling through PhpStorm, then you can try using Gulp and SASS. At this stage of the lessons, it doesn’t matter for us what to use LESS or SASS. But I would recommend that you use SASS and Gulp, because compilation is faster and easier to configure Gulp.

Gulp is a job manager for javascript. We will use it to add two tasks, one to track changes in the sass folder when we add styles and the second is to compile SASS in CSS.

Let's move on to the installation. I installed Drupal. Now you need to download the bootstrap theme and put it in the /themes folder:

https://www.drupal.org/project/bootstrap

To use SASS in the bootstrap subtopics, we need to use this kit called sass:

sass

Copy this sass folder to the /themes folder separately from boostrap and rename it to the name of your theme, I will have drupalbook:

bootstrap

Now you need to rename all files from THEMENAME to the name of your theme. For example, we have the file THEMENAME.starterkit.yml, it will need to be renamed to drupalbook.info.yml. THEMENAME.libraries.yml needs to be renamed to drupalbook.libraries.yml and so on. Do not forget to rename the files in the config files folder, they are also there with THEMENAME:

settings

Inside the files, there can also be THEMENAME, for example, in the sass/config/schema/ THEMENAME.schema.yml file:

themename

To make sure that you haven't missed anything, look for THEMENAME throughout the subtopic folder through PhpStorm:

find

We drive in the search THEMENAME and where there is a fix in the name of our theme.

find a path

Now you need to download bootstrap itself and put it in the /themes/drupalbook/bootstrap folder:

https://getbootstrap.com/docs/4.3/getting-started/download/

https://getbootstrap.com/docs/3.3/getting-started/

We are interested in the SASS version of bootstrap:

download

For our theme, we need the entire bootstrap folder, put it so that the path to the assets folder is /themes/drupalbook/bootstrap/assets:

assets

We copied all the files necessary for the theme, now we need to include Gulp to compile SASS.

First we need to install Node.js:

https://nodejs.org/en/

Node.js is a javascript runtime, it allows you to execute code to compile SASS into CSS. It is installed on Windows as a regular program. It’s better to download the latest version, at the moment 7.x.x:

npm

After you install Node.js, you will need to restart PhpStorm or restart the CMD console if you have it open. The console for working with node.js can be opened as in PhpStorm:

terminal

So through the menu Windows

cmd

In the console, type node -v to verify that Node.js has installed correctly:

cmd

Next, we need to go to the folder with our drupalbook theme and install Gulp. We go to the console through the folders through the cd command. The cd .. command (cd space and two dots) allows you to go to the parent folder:

bootstrap

To switch another drive, you need to type the command D: (where D can be anything), so you switch to the desired partition of the drive, in this case drive D.

openserver

Now that you have moved to the folder with your theme, install Gulp. We will install using the npm package manager. It is installed immediately with Node.js. First, initialize a new set of npm components:

npm init

This will create the package.json file for us, in this file all the packages that we install through npm will be shown. When executing the command, just press Enter:

isc

As a result, the following package.json file will be generated:

{
  "name": "bootstrap-sass",
  "version": "3.3.7",
  "description": "bootstrap-sass is a Sass-powered version of Bootstrap 3, ready to drop right into your Sass powered applications.",
  "main": "assets/javascripts/bootstrap.js",
  "style": "assets/stylesheets/_bootstrap.scss",
  "sass": "assets/stylesheets/_bootstrap.scss",
  "files": [
    "assets",
    "eyeglass-exports.js",
    "CHANGELOG.md",
    "LICENSE",
    "README.md"
  ],
  "repository": {
    "type": "git",
    "url": "git://github.com/twbs/bootstrap-sass"
  },
  "keywords": [
    "bootstrap",
    "sass",
    "css",
    "eyeglass-module"
  ],
  "contributors": [
    "Thomas McDonald",
    "Tristan Harward",
    "Peter Gumeson",
    "Gleb Mazovetskiy"
  ],
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/twbs/bootstrap-sass/issues"
  },
  "devDependencies": {
    "node-sass": "^3.8.0",
    "mincer": "~1.4.0",
    "ejs": "~2.4.2"
  },
  "eyeglass": {
    "exports": "eyeglass-exports.js",
    "needs": "^0.7.1"
  }
}

Now we execute the following command, install Gulp:

npm install --save-dev gulp

npm install

The following command installs the gulp-sass package:

npm install --save-dev gulp-sass

If you have Gulp 4.x, then you will need this Gulpfile.js code:

// Gulpfile.js running on stratumui,
// a css framework available on npmjs.com
var gulp    = require('gulp'),
    sass    = require('gulp-sass'),
    concat  = require('gulp-concat'),
    uglify  = require('gulp-uglify');
 
var paths = {
  styles: {
    src: 'scss/**/*.scss',
    dest: 'css'
  }
};
 
function styles() {
  return gulp
   .src(paths.styles.src, {
      sourcemaps: true
    })
    .pipe(sass())
.pipe(gulp.dest(paths.styles.dest));
}
 
function watch() {
  gulp.watch(paths.styles.src, styles);
}
 
var build = gulp.parallel(styles, watch);
 
gulp.task(build);
gulp.task('default', build);

We installed the gulp, gulp-sass packages, now we need to create tasks for gulp. To do this, create the Gulpfile.js file in the root of the theme:

/themes/drupalbook/Gulpfile.js

Also for gulp 4.x and the example above, you will need to install additional libraries:

npm install gulp-concat
npm install gulp-uglify

We told you to compile SASS files in the css folder, but this folder is not immediately in our theme, you need to create it, also add style.css files there:

/themes/drupalbook/css/style.css

style

This file will contain all of our compiled CSS.

Everything is ready to start compiling SASS. To do this, go through PhpStorm to the theme folder and select our Gulpfile.js and select Show Gulp Tasks in the context menu:

themes

We select the default task and the window of this task will immediately open:

default

Now, every time we change SASS in our theme, gulp will automatically recompile SASS.

css

As a result of compilation, CSS will appear in our style.css file and the background color of the site will turn yellow:

yellow

At first it might seem like it takes a long time to set up compilation using Gulp, but if you already have Node.js installed, you only need to add the Gulpfile.js file and install the gulp, gulp-sass packages. If you have any difficulties with installation and setup, write in the comments.