quick-html-boilerplate

About this

A dead simple and quick html starter kit for prototyping web development projects. Nothing fancy, everything is pretty basic.

Features

• Fully responsive, using the latest Bootstrap 4 with additional themes courtesy of Bootswatch.
• Font Awesome 5 (free) icons.
• Live reload courtesy of BrowserSync.
• Gulp based workflow, with defined tasks for:
  • copying minified (dist) files of modules listed in package.json "dependencies" field to the static/vendors directory. This is courtesy of gulp-npm-dist in conjunction with gulp-rename,
  • deleting files and directories in the static/vendors directory using del,
  • uglifying javascript files using gulp-uglify,
  • minifying css files using gulp-clean-css

Prerequisites

• Node.js with the following packages installed globally:
  • concurrently: npm install -g concurrently
  • Browsersync: npm install -g browser-sync
  • Gulp: npm install gulp-cli -g
• Python3. In this boilerplate, I use the http.server module as a development server. There are numerous (better) alternatives so feel free to use your preferred option (An excellent example is lite-server, a development only node server that uses BrowserSync). I chose this because python3 is always installed on any development machine I use 😄!

How to use this

1. Clone the repository: git clone https://github.com/engineervix/quick-html-boilerplate.git
2. Navigate to the cloned project directory: cd quick-html-boilerplate
3. Install dependencies: npm install
4. Copy the vendor libraries into the static/vendors directory: gulp cp
5. Start the development server: npm run dev. If you have lite-server, simply run lite-server.

Credits

• HTML Template based on https://startbootstrap.com/snippets/full-image-header/
• svg background: https://www.svgbackgrounds.com/#endless-constellation
• favicon created using https://favicon.io/
• <og:image> placeholder: https://picsum.photos
• .gitignore generated using https://www.gitignore.io/

TODO

• Develop a "cookiecutter"

---