Hello! In this article, I want to share my experience of custom layout development using the Bootstrap 3 framework.
What exactly will we do?
- Learn how to install the SCSS version of Bootstrap via Bower
- Configure Bootstrap's grid and other framework settings (if needed)
- Include specific Bootstrap components in the final stylesheet
Project Configuration
First, let’s define the directory structure of our project. For example:
/_data /scss /bootstrap //This directory contains the Bootsrap files we modified _bootstrap.scss //Connected components _variables.scss //Variables style.scss //Contains connections to other files template.scss //Project styles .bowerrc bower.json gulpfile.js package.json /assets //Contains scripts loaded by bower /image //Images and project styles index.php
Contents of the package.json file:
{
"devDependencies": {
"gulp": "*",
"gulp-sass": "*",
"gulp-minify-css": "*"
}
}Contents of the bower.json file:
{
"name": "my-project",
"dependencies": {
"bootstrap-sass": "3.3.7",
"jquery": "*"
}
}Contents of the .bowerrc file:
{
"directory": "../assets"
}The "directory" parameter tells Bower to load scripts into the "assets" folder at the root of the project.
Contents of the gulpfile.js:
var gulp = require('gulp');
var sass = require('gulp-sass');
var minifycss = require('gulp-minify-css');
gulp.task('default', function() {
ProjectTheme.scss();
gulp.watch('scss/**/*.scss', ['scss-index']);
});
/* SCSS */
gulp.task('scss-index', function () {
ProjectTheme.scss();
});
var ProjectTheme = {
scss: function()
{
gulp.src('scss/style.scss')
.pipe(sass.sync().on('error', sass.logError))
.pipe(minifycss())
.pipe(gulp.dest('../image/'));
}
}Contents of the index.php file (although we don’t really need it):
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Example page</title> <link href="image/style.css" rel="stylesheet"> </head> <body> <div class="container"> <div class="row"> <div class="col-md-1">1</div> <div class="col-md-1">2</div> <div class="col-md-1">3</div> <div class="col-md-1">4</div> <div class="col-md-1">5</div> <div class="col-md-1">6</div> <div class="col-md-1">7</div> <div class="col-md-1">8</div> <div class="col-md-1">9</div> <div class="col-md-1">10</div> <div class="col-md-1">11</div> <div class="col-md-1">12</div> <div class="col-md-1">13</div> <div class="col-md-1">14</div> </div> <span class="glyphicon glyphicon-film"></span> </div> <script src="assets/jquery/dist/jquery.min.js"></script> <script src="assets/bootstrap-sass/assets/javascripts/bootstrap.min.js"></script> </body> </html>
Created? Great. Now go to the “_data” directory of your project, open the terminal, and enter:
npm i //Wait for it to install bower i //Wait for it to install gulp //If everything went without errors, gulp will compile our css file (but it is empty for now)
Configuring Bootstrap
Open the file “_data/scss/style.scss” and specify the paths to the Bootstrap config and your project style file:
@import "bootstrap/_variables.scss"; @import "bootstrap/_bootstrap.scss"; @import "template.scss";
In the “template.scss” file, add a red border for the “.col-md-1” class:
.col-md-1 {
border: 1px solid red;
}This is done so that you can see the block boundaries on the page.
Next, it gets a bit more complex. From Bootstrap’s SCSS files (variables and core), copy the content into our own files.
That is, copy from “assets/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss” to “_data/scss/bootstrap/_variables.scss”.
And from “assets/bootstrap-sass/assets/stylesheets/_bootstrap.scss” to “_data/scss/bootstrap/_bootstrap.scss”.
In our Bootstrap path file “_data/scss/bootstrap/_bootstrap.scss”, use auto-replace to update the paths to Bootstrap’s original files. For example:
... @import "../assets/bootstrap-sass/assets/stylesheets/bootstrap/normalize"; @import "../assets/bootstrap-sass/assets/stylesheets/bootstrap/print"; @import "../assets/bootstrap-sass/assets/stylesheets/bootstrap/glyphicons"; ...
Why do this? Good question. It’s useful in case you decide to update Bootstrap's source files via Bower. Also, if you want to customize certain Bootstrap components (e.g. modals), you can copy them into the “_data/scss/bootstrap” folder. Then, in the path file, link to your version instead of the default Bootstrap component.
Of course, no one stops you from editing the Bootstrap source files directly. But in that case, be careful when running the “bower i” command.
In the file “_data/scss/bootstrap/_variables.scss”, we’ll modify the styles of our elements. To do this, comment out the entire file content, find the needed variable, uncomment it, and change its value.
Alternatively, you can copy only the variables you want to change. But for clarity, I prefer to see the whole list. It also helps if you want to revert to the original value later.
For example, here are my demo changes:
//Default font size $font-size-base: 16px; //Path to the font directory $icon-font-path: "../assets/bootstrap-sass/assets/fonts/bootstrap/"; //New number of columns $grid-columns: 14; //Inner padding inside the grid block $grid-gutter-width: 10px;
Made the changes? OK, save, check the console (in case gulp throws an error). If everything is fine, open the browser and view the result.
So, we now have fourteen columns outlined in red and one icon. Looks like everything works. By the way, you can use the same approach for forming JS files—include only what you need.
If you found this article useful, don’t forget to like it. Thank you!
