🧰 BootPlate | An Awesome Bootstrap 5 Starter Kit

A zero configuration Bootstrap 5 Boilerplate bundled with modern tools and workflows for an efficient UI/UX development experience.

A FOSS (Free & Open Source Software) project. Developed & Maintained by @provineet.

Vineet Verma

📦 Built-in Support For:

• Bootstrap 5.x, FontAwesome 5.x
• SASS Compilation
• CSS AutoPrefixer
• JS Babel Transpilation (ES6 Presets)
• Webpack 5 Script Bundling
• Assets Minification (CSS, JS, Images)
• Image Optimizer (JPEG, GIF, PNG and SVGs)
• CSS Sprite Images
• BrowserSync for a no-lag browser reload
• Gulp Workflow

🔥 Salient Features

• All your source files will reside inside 'src' folder.
• Write SCSS with 7-in-1 SASS Architecture Folder Structure (src/scss)
• Option to transpile JS via Babel. Create individual JS files for each of your JS function inside 'src/js/scripts' folder and they all will be concatenated on the top of each other, creating a scripts.js file inside 'assets/js' folder.
• Use WebPack instead, to write Node or ES6 module based JS and bundle it as scripts.bundle.js.
• Create CSS Sprites by dumping all your individual images/icons inside 'src/sprites' folder. It will generate a sprite of these images and place a corresponding _sprites.scss file inside 'src/scss/components' folder to use the sprites via CSS classes.
• Generate a production distributable copy of your application via gulp build.
• Generate a development distribution copy of your application via gulp devbuild.

🚀 Installtion

It requires nodejs with npm and a global installation of gulp 4.x on your development machine.

You can install NodeJs from here.

Once Node is installed on your system, open your terminal and run:

npm install --global gulp gulp-cli

To check your gulp version run:

gulp --version

CLI version: 2.*.*
Local version: 4.*.*

⚡️ Let's get you started quickly!

1. Clone this repo
git clone https://github.com/provineet/bootplate

2. cd into directory bootplate

3. Run `npm install`
   - to install all dependencies

4. Run `npm run serve`
   - to spin a development server, compile files and reload browser on file changes.

Happy Coding 🥳

⚙️ Advanced Gulp Configurations

Edit gulpfile.config.js file inside gulpfile.js folder to manage your configs.

Gulpconfig.json file contains settings and variables used by the Gulp to perform the tasks.

A few important settings that you might want to checkout:

Setting	Option Type	Option Value	Usage
MODE	Boolean	true/false	Turn Development mode on and off
COMPRESSION	Boolean	true/false	Enable/Disable assets minification while compilation.
JSBUILD	String	webpack | concat	Controls how your theme's custom JavaScript files will be compiled.

There are more options that can be tweaked inside gulpconfig.json feel free to check them out.

⚙️ MODE

Manage the development or production mode of your theme.

{
    MODE: String ("development|production")
}

⚙️ COMPRESSION

Enable or disable this setting to enable compression for your CSS & JS files.

{
    COMPRESSION: BOOLEAN (true|false)
}

⚙️ JSBUILD

Controls how your theme's custom JavaScript files will be compiled.

{
    JUSBUILD: String ("concat|webpack")
}

• "webpack" lets you use ES6 modules style building with webpack. You can edit your webpack configuration using gulpfile.js/webpack.config.js file. Create all your custom modules in the modules directory found at src/js/modules and use them in src/js/scripts.bundle.js file. Output file name will be scripts.bundle.min.js.
• With "concat" option all your scripts inside src/js/scripts directory will be concated with the src/js/scripts.js file. Output file name will be scripts.js.

⚙️ Work with ES6 / Node Modules via Webpack

Use available node modules via npm while writing your scripts using webpack.

You can create your custom modules inside src/js/modules and use them in src/js/scripts.bundle.js file. Make sure to set JSBUILD to webpack inside your gulpfile.config.js file.

{ JUSBUILD: "webpack" }

Manage your webpack configration via webpack.config.js inside gulpfile.js folder.

⚙️ Work with unbundled/plain JS with Babel Support

• Create your individual JS functions files inside src/js/scripts folder.
• You can these functions inside src/js/scripts.js file.
• All the *.js files inside src/js/scripts folder will be concatenated on the top of each other and finally concatenated with src/js/scripts.js file.
• Concatenated file will then be transpiled by babel and placed inside assets/js/scripts.js.

Manage your babel config by editing babel.config.json file in the root of your application.

#️⃣ List of available NPM Commands

NPM Command	Usage
npm run serve	To compile your SCSS, JS, Minify Images and start a development server. Watch for changes in .js, .scss, .php files.
npm run build	Creats a production distributable folder of your theme.
npm run devbuild	Creats a development distributable folder of your theme. Along with yout PHP theme files this version contains all your src and gulpfile.js and other settings files.

#️⃣ List of available Gulp Commands for advanced usage

Gulp Command	Usage
gulp serve	To compile your SCSS, JS, Minify Images and start a development server. Watch for changes in .js, .scss, .php files.
gulp build	Creats a production distributable folder of your HTML template.
gulp devbuild	Creats a development distributable folder of your HTML template along with the src folder.
gulp minify	Minify all CSS and JS files inside assets folder.
gulp scss	Compiles your scss files to assets/css folder.
gulp scripts	Compiles your JS files to assets/js folder.