A basic template to develop a website based on Bootstrap 4
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src 4.3.1 even here Feb 13, 2019
.editorconfig
.gitignore RC1 Aug 23, 2017
.surgeignore surge deployment added Aug 23, 2017
LICENSE Initial commit Aug 22, 2017
README.md added empty ignore option to UnCSS config Jul 4, 2018
gulpfile.js
package-lock.json Bootstrap bumped to 4.3.1 Feb 13, 2019
package.json Bootstrap bumped to 4.3.1 Feb 13, 2019

README.md

A basic template to develop a website based on Bootstrap 4

Includes:

  • 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
  • Twig.js: JavaScript implementation of the Twig PHP templating language
  • Surge.sh: deploy static websites easily and for free

First time installation

Install latest node.js

Install all packages from package.json locally

npm install

If you’re having errors with node-gyp, try installing it globally.

Development

To develop with automatic compilation and browser refreshing run

npm start

And see the result on http://localhost:3000/

Build

To build everything once for production deploy (in /dist/ folder)

This build uses all generated HTML files for UnCSS. If it removes something you need to keep, add and array to ignore option in gulpfile.js.

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 src/scss/_base.scss.

HTML (Twig templates)

HTML is generated from Twig.js templates (JavaScript impementation of Twig templating language) in src/templates.

You don't need to leverage the power of templates. You can just create plain HTML files with *.twig extension.

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.

Static files (JavaScript, images, …)

Folders and files from /src/static/ are simply copied directly to /dist/ folder.

Bootstrap

You can comment out Bootstrap components you don't need in /src/index.scss.

/src/_custom-bootstrap-variables.scss contains only customized Bootstrap variables.

See browserslist in package.json for supported browsers.

Deployment

Upload everything in /dist/ folder to the server.

Surge.sh

You can use surge.sh free service for that.

  1. Install surge client npm install --global surge.
  2. Run surge manually once in /dist: you will create an account with surge.sh.
  3. Set your own domain in gulpfile.js (replace https://my-first-website.surge.sh).
  4. From now on run npm run deploy whenever you want to publish a new version.

If you want multiple people to be able to deploy to the same domain, run surge --add mail.your.collaborator.used.to.register.with.surge@example.com for each.