How to use Bootstrap 4.0 with a concrete5 Theme

Theme development in concrete5 can be extremely rewarding when creating a custom design. But let’s say you want to use the latest version of bootstrap which is now SASS only and concrete5 only complies LESS files. What do you do? This tutorial will show you how to use bootstrap 4 in your concrete5 theme and using gulp.js to compile your sass files.

First let’s get some assumption out of the way. For you to get the best out of this tutorial, you’re going to need a good understanding of the following technologies.

  1. Basic understanding of concrete5 custom theme building
  2. Text Editor (Atom, Sublime Text, Visual Studio Code)
  3. HTML5
  5. Gulp.js
  6. Node.js/NPM

With those prerequisite out the way, lets get the latest version of bootstrap and the files we need for our theme.

  1. Open up your node.js command promote on your computer.
  2. Using the command prompt, go to your desktop directory or a place where you can easily access files. (For this example we will browse to our desktop directory. )
  3. Type npm install bootstrap and press enter.
  4. Node will create a folder entitled node_modules on your desktop.
  5. Open the node_modules folder and go to the bootstrap > scss folder.  
  6. Then open the node_modules folder and go to the bootstrap > dist > js  folder. 

These two folders contain all the scss and javascript files we need for our bootstrap 4.0 based theme. Now its time to give concrete5 the ability to compile sass files into css. For the sake of this tutorial we are going to assume that you already started building out a custom c5 theme for your project. 

  1. Open your favorite text editor and browse to wherever your c5 project site resides on your computer.
  2. In the c5 root directory, create a folder named frt-end-dev.  This folder is where all the files needed to compile  our sass project will reside.
  3. Click this link to download the gulpfile.js and package.json files needed in the frt-end-dev folder. 
  4. Once the zip file is donwloaded. Unzip the content of the downloaded file into the frt-end-dev folder. 
  5. The frt-end-dev  folder should now have gulpfile.js and package.json . 

The gulpfile.js and package.json files are the controller and configuration files needed for all gulp based projects. For the sake of this tutorial we are just going to be focusing on sass compling aspect of the gulpfile.js and package.json files.     

  1. Open your text editor of choice and open the gulpfile.js file.
  2. Don’t worry too much about understanding what all this does. We only need to worry about two variables.
  3. Under SASS Dependencies area there are two variables. var sassInput and var sassOutput.
  4. These two variables let our gulpfile know where to find the SASS files we wanted complied and where to put output the complied css file.
  5. In the var sassInput variable there is an input path, just delete portion of the path entitled 'ENTER THEME NAME'  and replace it with your theme name.
  6. Repeat the same process in step 5 for the var sassOutput variable.
  7. Save the gulpfile.js file.

Those are the only changes we need to make in our gulpfile.js file. We are almost ready to start compiling our bootstrap 4.0 SASS project in c5. Let’s look at our theme, create a few folders and bring in our bootstrap files.

  1. Go back to your desktop and open the folder node_modules.
  2. Navigate to bootstrap > scss folder.
  3. Copy all the files inside the scss folder.
  4. Using your file browser, navigate to the root of your C5 project and go to the directory  application > themes > YOUR THEME.
  5. Inside the root directory of your theme folder create two folders entitled sass and css.
  6. Open the sass folder and create a folder named bootstrap. 
  7. Paste the contents of the bootstrap > scss folder on your desktop into the newly created bootstrap folder in application > themes > YOUR THEME > sass directory.

Your doing great so far. Let's add a few more folders and files inside out theme sass folder.

  1. Inside your sass folder create a folder entitled partials  and a scss file entitled styles.scss. Inside your sass folder should now have two folders named bootstrap and partials and a file named styles.scss.

When creating a concrete5 theme using SASS, a good pratice is to break up our .scss files into different section that will correspond to various areas within the website or application. The partials folder is where your project .scss files will reside, while the style.scss file is the file gulp.js will be compiling into css. Our style.scss will contains all the import statements for each .scss file that reside in the “bootstrap” and “partials” folders. This allows concrete5 to only have to read one main css file for the project.

Let’s do our final steps to get our concrete5 boostrap 4.0 project up and running.

  1. Open your text editor and open the style.scss file in the application > themes > YOUR THEME > sass folder.
  2. On line one in your style.scss file type @import "bootstrap/_bootstrap;
  3. On line two in your style.scss  file type @import "partials/_global;
  4. Save the style.scss  file.
  5. Up one level file level in the sass folder, open the partials folder and created entitled global.scss.
  6. Save the global.scss.

Its finally time to fire up our concrete5 bootstrap 4.0 project. Let get started.

  1. Open up your node.js command prompt and browse to the directory where your concrete5 project resides.
  2. In your node.js command prompt browse to the frt-end-dev folder we created early on in our tutorial.
  3. Once you are in the frt-end-dev folder in the node.js command prompt type npm install and press enter.

Node will start installing all the necessary packages needed run our project. Once all the necessarily modules have been installed, its now time to run our bootstrap project. Node is going to watch for any changes in our sass files and automatedly compile those files into sass. We just need type a command to run this compiling feature.

  1. With your node.js command prompt still open and you are in the frt-end-dev folder type. Gulp.
  2. This will start the sass file watch on your bootstrap project. Let’s test our project and make sure it’s up and running correctly.
  3. In your text editor open up the global.scss  file that’s in application > theme > sass > partials folder.
  4. Inside global.scss file type body { background-color: #000000 }.
  5. Save the global.scss. In the node.js command prompt window you will see the sass files were compile into css.
  6. Open the css folder in the theme root direcotry folder and node.js has created a styles.css file and sourcemaps folder.

Hope this tutorial has helped you create bootstrap 4 SASS based projects in concrete5. If you have any questions, problems geting this to work or mistakes in this tutorial please leave your comments below. Thank You.



Loading Conversation