Bootstrap 4 Sass Gulp 4 Boilerplate

Overview:

The Bootstrap 4 boilerplate with sass and gulp 4 is a development template that combines the power of Bootstrap 4.5.2 with additional features such as font-awesome 5, sass, gulp 4 tasks, and browserSync with hot-reloading. This boilerplate allows users to easily set up and customize their Bootstrap projects by overriding bootstrap sass variables.

Features:

• Bootstrap 4.5.2: Includes the latest version of Bootstrap framework for building responsive and mobile-first websites.
• Font-awesome 5 free: Provides a collection of scalable icons that can be easily integrated into the project.
• Sass: Allows users to write modular and reusable CSS styles using the Sass preprocessor.
• Gulp 4 tasks: Automates various development tasks such as compiling Sass to CSS, minifying CSS and JS files, and building production-ready files.
• BrowserSync with hot-reloading: Enables live browser reloading during development, making it easier to see changes in real-time.

Installation:

To install the Bootstrap 4 boilerplate with sass and gulp 4, follow these steps:

1. Make sure you have Node.js and NPM (which comes with Node.js) installed on your system.
2. Install Gulp CLI, which is the Command Line Utility for Gulp, by running the following command in your terminal:

   npm install --global gulp-cli
   

3. Verify Gulp CLI and Gulp local version by running the following commands:

   gulp --version
   

4. Clone the repository by running the following command in your terminal:

   git clone https://github.com/JayeshLab/bootstrap-4-sass-gulp-4-boilerplate.git
   

5. Change directory to the cloned repository:

   cd bootstrap-4-sass-gulp-4-boilerplate
   

6. Install all dependencies and libraries by running the following command:

   npm install
   

7. Run Gulp Task to compile Sass to CSS, minify CSS and JS, and build production-ready files in the dist folder:

   gulp
   

8. Alternatively, you can start a local server with BrowserSync and hot reloading on changes to files (HTML, SCSS, JS) by running the following command:

   gulp dev
   

Summary:

The Bootstrap 4 boilerplate with sass and gulp 4 is a comprehensive development template that provides a solid foundation for building responsive websites with Bootstrap. It offers additional features such as font-awesome icons, support for Sass preprocessor, and automation of development tasks using Gulp 4. With the inclusion of BrowserSync, developers can enjoy live reloading during the development process. Overall, this boilerplate simplifies the setup and customization of Bootstrap projects, making it an efficient and time-saving tool for web developers.