How To Create Your Custom Bootstrap Theme

In particular, I recommend keeping three files there:· a file with variables: create a “_myVariables.scss” file;· a file with custom CSS rules: create a “_myStyles.scss” file· a theme file that includes custom styles, variables and the default Bootstrap theme: create a “myAwesomeTheme.scss” file.Finally, you will see the following structure:So, what’s next?Step 2 — SCSS compilingSCSS should be compiled to CSS..Using Gulp, you can automate this process..Open gulpfile.js and declare variables:var theme = "awesomeTheme";var gulp = require('gulp'), sass = require('gulp-sass'), sourcemaps = require('gulp-sourcemaps'), cleanCss = require('gulp-clean-css'), rename = require('gulp-rename'), lazypipe = require('lazypipe'), postcss = require('gulp-postcss'), autoprefixer = require('autoprefixer'), connect = require('gulp-connect');var compileTheme = lazypipe() .pipe(sourcemaps.init) .pipe(function () { return sass().on('error', sass.logError); }) .pipe(postcss, [ autoprefixer({ browsers: [ 'Chrome >= 35', 'Firefox >= 38', 'Edge >= 12', 'Explorer >= 10', 'iOS >= 8', 'Safari >= 8', 'Android 2.3', 'Android >= 4', 'Opera >= 12']}) ]) .pipe(sourcemaps.write) .pipe(rename, {basename: theme});var minifyCss = lazypipe() .pipe(cleanCss) .pipe(rename, {suffix: '.min'});Here, the most important options are:- “theme”: allows you to set up your theme name;- “basename”: a name of an output CSS file;Now it’s time to write some tasks..Declare the default task that will only compile your theme:gulp.task('default', ['compile-' + theme], function () {});To catch changes, it is really convenient to create a task that will ‘watch’ for every change of “*.scss” and “index.html” files:gulp.task('watch', ['default', 'connect'], function () { gulp.watch(['dist/' + theme + '/*.scss'], ['compile-' + theme]); gulp.watch(['./*.html'], ['html']);});where the connect task uses the gulp-connect plugin that refreshes required files if necessary:gulp.task('connect', function () { connect.server({ livereload: true, port: 5050 });});Live reloading should be applied to the index.html file and at the end of the task that compiles a theme:gulp.task('html', function () { gulp.src('./*.html') .pipe(connect.reload());});gulp.task('compile-' + theme, function() { return gulp.src(['dist/' + theme + '/*.scss']) .pipe(compileTheme()) .pipe(gulp.dest('dist/' + theme + '/')) .pipe(minifyCss()) .pipe(gulp.dest('dist/' + theme + '/')) .pipe(connect.reload());});compileTheme and minifyCss functions are called, and in your dist/YourTheme folder, you will see two CSS files that you can use instead of a default Bootstrap theme:Step 3 — StylingNow we have two files that were created by the “gulp” or “gulp watch” tasks, but they are empty..Let’s change *.scss files.Look, how easy it is to fill the content of the myAwesomeTheme.scss file:@import 'myVariables';@import '../../node_modules/bootstrap/scss/bootstrap';@import 'myStyles';I admit it’s my favorite part of the process..So easy, right?.Mind the only thing — the order: your variables must be declared before a default Bootstrap theme is imported.Let’s move on.The _myVariables.scss file should contain only variables that can be set as follows:$primary: #0454b6;$secondary: #959fa4;$success: #04b041;…These variables overwrite default Bootstrap variables..Take a look at the..ode_modulesootstrapscss_variables.scss file where default Bootstrap variables with the “!default” flag are located at the end of lines.In this way, you can override any of these variables by declaring them earlier (A Sass !default use case) without changing the default theme and that’s why the import order in the myAwesomeTheme.scss file is so important..Moreover, you can create your own variables!.However, take note that default Bootstrap files should not be changed..Work only with your custom *.scss files.Now the most interesting part begins:Run the “gulp watch” task in your terminal!. More details

Leave a Reply