A dead simple and quick html starter kit for prototyping web development projects. Nothing fancy, everything is pretty basic.
- 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
- copying minified (dist) files of modules listed in package.json "dependencies" field to the
- 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
- concurrently:
- 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 😄!
- Clone the repository:
git clone https://github.com/engineervix/quick-html-boilerplate.git
- Navigate to the cloned project directory:
cd quick-html-boilerplate
- Install dependencies:
npm install
- Copy the vendor libraries into the
static/vendors
directory:gulp cp
- Start the development server:
npm run dev
. If you havelite-server
, simply runlite-server
.
- 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/
- Develop a "cookiecutter"