..using Gulp 4 and SASS preprocessor
đ Bootstrap is amazing, makes front-end web development faster and easier. But how to change something inside? If you need a different primary color or rules of small device start at 576px isn't good for you. You can always change it. So, let's do it! đą
#0 Get Gulp
Install Gulp tool directly by npm package will be a fast way.
If you haven't npm yet, let's install only NodeJs this
Node Package Manager
will be inside.
npm install gulp-cli --global
#1 Download Bootstrap, Gulp and SASS tool
Save last Bootstrap version and Gulp SASS preprocessor tool to your project.
npm install gulp gulp-sass bootstrap --save-dev
#2 Copy Bootstrap to the local version
Fact is that npm created a lot of directory inside ./node_modules/
. Look that in ./node_modules/bootstrap/scss/
we have source code of Bootstrap CSS framework and this is amazing
so lets copy all of './node_modules/bootstrap/scss/*' directory to './bootstrap-source/' localy
#3 Change Bootstrap, personalize it
You can do what you want, but I have own plan.
I must change breakpoint rules for small devices to 370px instead 576px
/* @file: ./bootstrap-source/_variables.scss */
// Grid breakpoints
// Define the minimum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.
$grid-breakpoints: (
xs: 0,
sm: 370px, // @note: this is exactly what I need (before was 576px there)
md: 768px,
lg: 992px,
xl: 1200px
) !default;
#4 Tell to gulp sass what is needed
create ./gulpfile.js
and set source directory to ./bootstrap-source/
and destination directory to ./css/
/* @file: ./gulpfile.js */
const { src, dest } = require('gulp');
const sass = require('gulp-sass'); // Gulp SASS plugin
function compileBootstrap() {
return src('./bootstrap-source/**/*.scss') // Input
.pipe(sass().on('error', sass.logError))
.pipe(dest('./css')); // Output
}
exports.default = compileBootstrap;
#5 Enjoy your own Bootstrap
Run gulp
gulp
And this is all. Ready CSS bootstrap with your modification, you can find in ./css/
folder.
#Inf summary
After this modification my own Bootstrap have diffrent bechavior for examples class: .d-sm-block, .float-sm-right, .text-sm-right, .mr-sm-auto and others from two hundred *-sm-* examples.
One change in the scss file has a big impact. I'm afraid of what you will do with it. So, just do it. Get own Bootstrap version, good looking in your specific project !đ
Top comments (1)
Did it article help you?