FED Starter Kit
General info
This is a Bootstrap 5 Boilerplate with Gulp 4+. Sass, browser-sync. “Basic” is the ultimate Bootstrap 5 starter boilerplate with Gulp 4 and webpack for automation and rapid development.
Feature
- Modular Architecture (Scss, html, javascript) in dev side.
- BEM Methodology
- Gsap for animations.
Prerequisite
Project is created with:
- Node > 14 (tested in 14.18.2)
Technologies
Project is created with:
- Bootstrap 5
- Gulp 4
- Sass
- Sourcemaps
- Webpack
- Concatenation
- CSS minification
- HTML minitification
- Uglify
- Image optimization
- Gulpfile Include
- BroswserSync
- Live reload
- Jquery if required.
Installation
yarn install
yarn dev
yarn build
You should see a live browser at http://localhost:3000/.
Development
Override Bootstrap’s variables and create your custom styles
dev/scss/variables.scss
Add custom scripts Modular structure
src/js/index.js
Production
yarn build
Folder Architecture
- dev
- fonts (Used for custom font)
- images (Used for static image and assets)
- includes (Used to include modular html file throughout the pages)
- Include has modules folder where all developed modules section are inserted.
- Global Modules html like header, footer.html are kept outside
- Each Modules and its variation should have separate modules scss and javascript file if needed within the modules.
- scripts (Used to define global and modular javascript within)
- Global functions and utility should be present within app.js which will be called throughout the files.
- Separate modules javascript should have same name as modules developed and should be included with the modules inside Includes folder with same name.
- scss (Used to define global app.scss and design.scss as entry point. app.scss is used globally and design.scss is used to define modular scss file associated within the files)
- app.css(complied version of app.scss) should be used globally everywhere within the site.
- app.scss contains all bootstrap5 needed global things like variables(colors, size ...) , buttons , form input which are being used throughout the site.
- design.scss will contain all the modular css associated with the modules and included on our architecture but should be implemented individually within the modules used while developing on sitecore.
- gulpfile.js / gulpSettings (Used to automate the process with gulp 4 and webpack )
Example Usage
- For Example we have slider module which have slider.html, slider.js and slider.scss or slider.min.css which will be inside dist folder(Compiled version of dev folder including all complied code).
- slider.html is inside dev/includes/section.slider.html
- slider.js iis inside script/modules/slider.js
- slider.scss is inside scss/styles/slider.scss
- With this 3 files slider modules is made which can be used as per need on the pages.