├── assets ├── scss │ ├── _mixins.scss │ ├── _general.scss │ ├── _layout.scss │ ├── _module.scss │ ├── _variables.scss │ ├── _bootstrap_variable_overrides.scss │ └── app.scss ├── img │ ├── logo.png │ └── favicons │ │ └── favicon.ico └── js │ └── app.js ├── .gitignore ├── LICENSE.md ├── package.json ├── README.md ├── gulpfile.js └── index.html /assets/scss/_mixins.scss: -------------------------------------------------------------------------------- 1 | // Mixins -------------------------------------------------------------------------------- /assets/scss/_general.scss: -------------------------------------------------------------------------------- 1 | // General Style -------------------------------------------------------------------------------- /assets/scss/_layout.scss: -------------------------------------------------------------------------------- 1 | // Layout Style -------------------------------------------------------------------------------- /assets/scss/_module.scss: -------------------------------------------------------------------------------- 1 | // Module Style -------------------------------------------------------------------------------- /assets/scss/_variables.scss: -------------------------------------------------------------------------------- 1 | // Variables -------------------------------------------------------------------------------- /assets/scss/_bootstrap_variable_overrides.scss: -------------------------------------------------------------------------------- 1 | // Bootstrap overrides variables 2 | // $primary: #6610f2; 3 | -------------------------------------------------------------------------------- /assets/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JayeshLab/bootstrap-5-sass-gulp-4-boilerplate/HEAD/assets/img/logo.png -------------------------------------------------------------------------------- /assets/img/favicons/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JayeshLab/bootstrap-5-sass-gulp-4-boilerplate/HEAD/assets/img/favicons/favicon.ico -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | package-lock.json 2 | *.iml 3 | /.idea 4 | /node_modules 5 | dist 6 | /assets/fonts 7 | /assets/scss/bootstrap 8 | /assets/js/vendor 9 | /assets/css/app.css 10 | -------------------------------------------------------------------------------- /assets/js/app.js: -------------------------------------------------------------------------------- 1 | // An object literal 2 | var app = { 3 | init: function() { 4 | app.functionOne(); 5 | }, 6 | functionOne: function () { 7 | }, 8 | scrollTop: function() { 9 | window.scrollTo({top: 0, behavior: 'smooth'}); 10 | } 11 | }; 12 | (function() { 13 | // your page initialization code here 14 | // the DOM will be available here 15 | app.init(); 16 | })(); 17 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | Copyright (c) 2020-2022 Jayesh Vachhani 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 8 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bootstrap-5-sass-gulp-4-boilerplate", 3 | "version": "1.0.4", 4 | "description": "A Bootstrap 5.0.2 boilerplate with sass and gulp 4", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/JayeshLab/bootstrap-5-sass-gulp-4-boilerplate.git" 12 | }, 13 | "keywords": [ 14 | "bootstrap 5", 15 | "sass", 16 | "scss", 17 | "gulp", 18 | "gulp 4", 19 | "bootstrap icons", 20 | "boilerplate", 21 | "stater" 22 | ], 23 | "author": "Jayesh Vachhani", 24 | "license": "MIT", 25 | "bugs": { 26 | "url": "https://github.com/JayeshLab/bootstrap-5-sass-gulp-4-boilerplate/issues" 27 | }, 28 | "homepage": "https://github.com/JayeshLab/bootstrap-5-sass-gulp-4-boilerplate#readme", 29 | "dependencies": { 30 | "@popperjs/core": "^2.11.6", 31 | "bootstrap": "^5.2.3", 32 | "bootstrap-icons": "^1.10.2" 33 | }, 34 | "devDependencies": { 35 | "browser-sync": "^2.27.10", 36 | "del": "^3.0.0", 37 | "gulp": "^4.0.2", 38 | "gulp-autoprefixer": "^8.0.0", 39 | "gulp-clean-css": "3.9.4", 40 | "gulp-concat": "^2.6.1", 41 | "gulp-html-replace": "^1.6.2", 42 | "gulp-rename": "^1.4.0", 43 | "gulp-sass": "^5.1.0", 44 | "gulp-sourcemaps": "^2.6.5", 45 | "gulp-uglify": "^3.0.2", 46 | "merge-stream": "^1.0.1", 47 | "sass": "^1.49.0" 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Bootstrap 5 boilerplate with sass and gulp 4 2 | A Bootstrap v5.2.3 boilerplate with bootstrap-icons(1,800+ icons), sass, gulp 4 tasks, browserSync (with hot-reloading). 3 | You can override bootstrap sass variables by placing those variables in `bootstrap-5-sass-gulp-4-boilerplate/assets/scss/_bootstrap_variable_overrides.scss` 4 | 5 | ## Pre-requisite 6 | - [Node.js](https://nodejs.org/en/download/ "Node Js") 7 | - NPM (Comes with Node.js) 8 | - [Gulp 4](https://gulpjs.com/ "Gulp") 9 | 10 | Install Gulp cli 11 | 12 | $ npm install --global gulp-cli 13 | 14 | 15 | ## Getting started 16 | 17 | 1. Clone repository: 18 | `git clone https://github.com/JayeshLab/bootstrap-5-sass-gulp-4-boilerplate.git` 19 | 20 | 2. Change directory: 21 | `cd bootstrap-5-sass-gulp-4-boilerplate` 22 | 23 | 3. Install all dependencies and libraries: 24 | `npm install` 25 | 26 | 4. Run Gulp Task: 27 | - `gulp` - To compile scss to css, minify css and js and build ready for production files in **dist** folder. 28 | 29 | - `gulp dev` - Starts a local server with browserSync and hot reloading on changes to files (HTML, SCSS, JS). 30 | 31 | 5. Customize: 32 | - Custom App Style : assets/scss/app.scss 33 | - Overriding Bootstrap variable: assets/scss/_bootstrap_variable_overrides.scss 34 | - Custom SCSS: assets/scss/_general.scss, assets/scss/_layout.scss, assets/scss/_mixins.scss, assets/scss/_module.scss, _variables.scss 35 | - Custom App Javascript: assets/js/app.js 36 | -------------------------------------------------------------------------------- /assets/scss/app.scss: -------------------------------------------------------------------------------- 1 | // Custom bootstrap variable overrides 2 | @import "bootstrap_variable_overrides"; 3 | 4 | // Bootstrap and its default variables 5 | @import "../../node_modules/bootstrap/scss/bootstrap"; 6 | 7 | // Your style 8 | @import "variables"; 9 | @import "mixins"; 10 | @import "general"; 11 | @import "layout"; 12 | @import "module"; 13 | 14 | /* CUSTOM STYLES 15 | -------------------------------------------------- */ 16 | //Smooth Scroll 17 | html { 18 | scroll-behavior: smooth; 19 | } 20 | /* Padding below the footer and lighter body text */ 21 | 22 | body { 23 | padding-top: 3rem; 24 | padding-bottom: 3rem; 25 | color: #5a5a5a; 26 | } 27 | 28 | /* CUSTOMIZE THE CAROUSEL 29 | -------------------------------------------------- */ 30 | 31 | /* Carousel base class */ 32 | .carousel { 33 | margin-bottom: 4rem; 34 | } 35 | /* Since positioning the image, we need to help out the caption */ 36 | .carousel-caption { 37 | bottom: 3rem; 38 | z-index: 10; 39 | } 40 | 41 | /* Declare heights because of positioning of img element */ 42 | .carousel-item { 43 | height: 32rem; 44 | } 45 | .carousel-item > img { 46 | position: absolute; 47 | top: 0; 48 | left: 0; 49 | min-width: 100%; 50 | height: 32rem; 51 | } 52 | 53 | 54 | /* MARKETING CONTENT 55 | -------------------------------------------------- */ 56 | 57 | /* Center align the text within the three columns below the carousel */ 58 | .marketing .col-lg-4 { 59 | margin-bottom: 1.5rem; 60 | text-align: center; 61 | } 62 | .marketing h2 { 63 | font-weight: 400; 64 | } 65 | /* rtl:begin:ignore */ 66 | .marketing .col-lg-4 p { 67 | margin-right: .75rem; 68 | margin-left: .75rem; 69 | } 70 | /* rtl:end:ignore */ 71 | 72 | 73 | /* Featurettes 74 | ------------------------- */ 75 | 76 | .featurette-divider { 77 | margin: 5rem 0; /* Space out the Bootstrap
more */ 78 | } 79 | 80 | /* Thin out the marketing headings */ 81 | .featurette-heading { 82 | font-weight: 300; 83 | line-height: 1; 84 | /* rtl:remove */ 85 | letter-spacing: -.05rem; 86 | } 87 | 88 | 89 | /* RESPONSIVE CSS 90 | -------------------------------------------------- */ 91 | 92 | @media (min-width: 40em) { 93 | /* Bump up size of carousel content */ 94 | .carousel-caption p { 95 | margin-bottom: 1.25rem; 96 | font-size: 1.25rem; 97 | line-height: 1.4; 98 | } 99 | 100 | .featurette-heading { 101 | font-size: 50px; 102 | } 103 | } 104 | 105 | @media (min-width: 62em) { 106 | .featurette-heading { 107 | margin-top: 7rem; 108 | } 109 | } 110 | 111 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var gulp = require('gulp'), 4 | sass = require('gulp-sass')(require('sass')), 5 | del = require('del'), 6 | uglify = require('gulp-uglify'), 7 | cleanCSS = require('gulp-clean-css'), 8 | rename = require("gulp-rename"), 9 | merge = require('merge-stream'), 10 | htmlreplace = require('gulp-html-replace'), 11 | autoprefixer = require('gulp-autoprefixer'), 12 | browserSync = require('browser-sync').create(); 13 | 14 | // Clean task 15 | gulp.task('clean', function() { 16 | return del(['dist', 'assets/css/app.css']); 17 | }); 18 | 19 | // Copy third party libraries from node_modules into /vendor 20 | gulp.task('vendor:js', function() { 21 | return gulp.src([ 22 | './node_modules/bootstrap/dist/js/*', 23 | './node_modules/@popperjs/core/dist/umd/popper.*' 24 | ]) 25 | .pipe(gulp.dest('./assets/js/vendor')); 26 | }); 27 | 28 | // Copy bootstrap-icons from node_modules into /fonts 29 | gulp.task('vendor:fonts', function() { 30 | return gulp.src([ 31 | './node_modules/bootstrap-icons/**/*', 32 | '!./node_modules/bootstrap-icons/package.json', 33 | '!./node_modules/bootstrap-icons/README.md', 34 | ]) 35 | .pipe(gulp.dest('./assets/fonts/bootstrap-icons')) 36 | }); 37 | 38 | // vendor task 39 | gulp.task('vendor', gulp.parallel('vendor:fonts', 'vendor:js')); 40 | 41 | // Copy vendor's js to /dist 42 | gulp.task('vendor:build', function() { 43 | var jsStream = gulp.src([ 44 | './assets/js/vendor/bootstrap.bundle.min.js', 45 | './assets/js/vendor/popper.min.js' 46 | ]) 47 | .pipe(gulp.dest('./dist/assets/js/vendor')); 48 | var fontStream = gulp.src(['./assets/fonts/bootstrap-icons/**/*.*']).pipe(gulp.dest('./dist/assets/fonts/bootstrap-icons')); 49 | return merge (jsStream, fontStream); 50 | }) 51 | 52 | // Copy Bootstrap SCSS(SASS) from node_modules to /assets/scss/bootstrap 53 | gulp.task('bootstrap:scss', function() { 54 | return gulp.src(['./node_modules/bootstrap/scss/**/*']) 55 | .pipe(gulp.dest('./assets/scss/bootstrap')); 56 | }); 57 | 58 | // Compile SCSS(SASS) files 59 | gulp.task('scss', gulp.series('bootstrap:scss', function compileScss() { 60 | return gulp.src(['./assets/scss/*.scss']) 61 | .pipe(sass.sync({ 62 | outputStyle: 'expanded' 63 | }).on('error', sass.logError)) 64 | .pipe(autoprefixer()) 65 | .pipe(gulp.dest('./assets/css')) 66 | })); 67 | 68 | // Minify CSS 69 | gulp.task('css:minify', gulp.series('scss', function cssMinify() { 70 | return gulp.src("./assets/css/*.css") 71 | .pipe(cleanCSS()) 72 | .pipe(rename({ 73 | suffix: '.min' 74 | })) 75 | .pipe(gulp.dest('./dist/assets/css')) 76 | .pipe(browserSync.stream()); 77 | })); 78 | 79 | // Minify Js 80 | gulp.task('js:minify', function () { 81 | return gulp.src([ 82 | './assets/js/app.js' 83 | ]) 84 | .pipe(uglify()) 85 | .pipe(rename({ 86 | suffix: '.min' 87 | })) 88 | .pipe(gulp.dest('./dist/assets/js')) 89 | .pipe(browserSync.stream()); 90 | }); 91 | 92 | // Replace HTML block for Js and Css file to min version upon build and copy to /dist 93 | gulp.task('replaceHtmlBlock', function () { 94 | return gulp.src(['*.html']) 95 | .pipe(htmlreplace({ 96 | 'js': 'assets/js/app.min.js', 97 | 'css': 'assets/css/app.min.css' 98 | })) 99 | .pipe(gulp.dest('dist/')); 100 | }); 101 | 102 | // Configure the browserSync task and watch file path for change 103 | gulp.task('dev', function browserDev(done) { 104 | browserSync.init({ 105 | server: { 106 | baseDir: "./" 107 | } 108 | }); 109 | gulp.watch(['assets/scss/*.scss','assets/scss/**/*.scss','!assets/scss/bootstrap/**'], gulp.series('css:minify', function cssBrowserReload (done) { 110 | browserSync.reload(); 111 | done(); //Async callback for completion. 112 | })); 113 | gulp.watch('assets/js/app.js', gulp.series('js:minify', function jsBrowserReload (done) { 114 | browserSync.reload(); 115 | done(); 116 | })); 117 | gulp.watch(['*.html']).on('change', browserSync.reload); 118 | done(); 119 | }); 120 | 121 | // Build task 122 | gulp.task("build", gulp.series(gulp.parallel('css:minify', 'js:minify', 'vendor'), 'vendor:build', function copyAssets() { 123 | return gulp.src([ 124 | '*.html', 125 | "assets/img/**" 126 | ], { base: './'}) 127 | .pipe(gulp.dest('dist')); 128 | })); 129 | 130 | // Default task 131 | gulp.task("default", gulp.series("clean", 'build', 'replaceHtmlBlock')); 132 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Bootstrap 5 Template 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 48 |
49 | 50 |
51 | 52 | 110 | 111 | 112 | 114 | 115 | 116 |
117 | 118 | 119 |
120 |
121 | Placeholder140x140 122 | 123 |

Heading

124 |

Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.

125 |

View details »

126 |
127 |
128 | Placeholder140x140 129 | 130 |

Heading

131 |

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.

132 |

View details »

133 |
134 |
135 | Placeholder140x140 136 | 137 |

Heading

138 |

Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

139 |

View details »

140 |
141 |
142 | 143 | 144 | 145 | 146 |
147 | 148 |
149 |
150 |

First featurette heading. It’ll blow your mind.

151 |

Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.

152 |
153 |
154 | Placeholder500x500 155 | 156 |
157 |
158 | 159 |
160 | 161 |
162 |
163 |

Oh yeah, it’s that good. See for yourself.

164 |

Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.

165 |
166 |
167 | Placeholder500x500 168 | 169 |
170 |
171 | 172 |
173 | 174 |
175 |
176 |

And lastly, this one. Checkmate.

177 |

Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.

178 |
179 |
180 | Placeholder500x500 181 | 182 |
183 |
184 | 185 |
186 | 187 | 188 | 189 |
190 | 191 | 192 | 193 | 203 |
204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | --------------------------------------------------------------------------------