A basic template to develop a website based on Bootstrap 4
- Bootstrap 4: build responsive, mobile-first projects on the web with the world's most popular front-end component library
- Gulp 4: task runner for running all of the following
- Sass compilation: leverage the power of the most popular CSS extension language
- Sourcemaps generation for easier Sass debugging
- Browsersync: automatically reloads (or injects in case of CSS), browsers' when you change files
- Autoprefixer: parses CSS and adds vendor prefixes according to caniuse.com
- UnCSS: removes unused styles from CSS
- Flexbugs fixes: automatically fixes some of the flexbugs
- CSSO: CSS minifier with structural optimizations
- Surge.sh: deploy static websites easily and for free
First time installation
Install all packages from
If you’re having errors with
node-gyp, try installing it globally.
To develop with automatic compilation and browser refreshing run
And see the result on
To build everything once for production deploy (in
This build uses all generated HTML files for UnCSS. If it removes something you need to keep, add and array to
ignore option in
npm run build
CSS (Sass preprocessor)
index.css is compiled from
src/scss/index.scss by Sass.
You don't know Scss syntax or don't want to use it? Just use plain CSS in
HTML (Twig templates)
You don't need to leverage the power of templates. You can just create plain HTML files with
If you don't want a template to be turned into HTML file start it with
_. Typically these are templates used for include or extend.
Documentation for Twig.
Warning: Twig.js doesn't implement 100% of Twig.
If you need some data to be available in all templates, use
templates/data.json for that.
Folders and files from
/src/static/ are simply copied directly to
You can comment out Bootstrap components you don't need in
/src/_custom-bootstrap-variables.scss contains only customized Bootstrap variables.
package.json for supported browsers.
Upload everything in
/dist/ folder to the server.
You can use surge.sh free service for that.
- Install surge client
npm install --global surge.
surgemanually once in
/dist: you will create an account with surge.sh.
- Set your own domain in
- From now on run
npm run deploywhenever you want to publish a new version.
If you want multiple people to be able to deploy to the same domain, run
surge --add firstname.lastname@example.org for each.