Bootstrap 5 Sass Gulp 4 Boilerplate

Overview:

The Bootstrap 5 boilerplate with SASS and Gulp 4 is a pre-built template that combines the power of Bootstrap 5 with additional functionality provided by SASS and Gulp 4. It includes bootstrap-icons for easy integration of over 1,800 icons. The boilerplate also uses browserSync for instant browser reloading. It allows users to customize their app style, override Bootstrap variables, and add custom SCSS and JavaScript files.

Features:

• Bootstrap 5.2.3: The latest version of Bootstrap for building responsive and mobile-first websites.
• Sass: Utilizes Sass (Syntactically Awesome Style Sheets) for easier and more efficient styling of web pages.
• Gulp 4: Gulp is a build system that automates tasks such as compiling Sass, minifying CSS and JS files, and more.
• Bootstrap-icons: Provides a library of over 1,800 icons to enhance the visual design of the website.
• BrowserSync: Enables live reloading of the web page whenever changes are made.
• Customization: Allows users to easily customize their app style, override Bootstrap variables, and add custom SCSS and JavaScript files.

Installation:

To install the Bootstrap 5 boilerplate with SASS and Gulp 4, follow these steps:

1. Pre-requisites:

   • Node.js: Make sure Node.js is installed on your system.
   • NPM: NPM comes bundled with Node.js, so ensure that NPM is installed as well.
   • Gulp 4: Install the Gulp CLI globally using the following command:

     npm install --global gulp-cli
     

2. Getting started:

   • Clone the repository by running the following command in your terminal:

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

   • Change to the cloned directory:

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

3. Install dependencies:

   • Run the following command to install all the required dependencies and libraries:

     npm install
     

4. Running Gulp tasks:

   • To compile SCSS to CSS, minify CSS and JS files, and build production files in the “dist” folder, run:

     gulp
     

   • To start a local server with browserSync and enable hot reloading on changes to files (HTML, SCSS, JS), run:

     gulp dev
     

5. Customization:

   • Custom App Style: Modify the assets/scss/app.scss file to customize the app’s style.
   • Overriding Bootstrap variables: Place the overridden variables in assets/scss/_bootstrap_variable_overrides.scss.
   • Custom SCSS: Add custom SCSS files in assets/scss directory, such as _general.scss, _layout.scss, _mixins.scss, and _module.scss.
   • Custom App JavaScript: Modify the assets/js/app.js file to add custom JavaScript functionality.

Summary:

The Bootstrap 5 boilerplate with SASS and Gulp 4 is a powerful and customizable template that combines the popular Bootstrap framework with the flexibility of SASS and the automation capabilities of Gulp. With features like bootstrap-icons and browserSync, it provides developers with an efficient workflow for building responsive websites. The installation process is straightforward, and the customization options allow for easy personalization of styles and functionality. This boilerplate is a valuable resource for front-end developers looking to streamline their development process and create visually appealing websites.