HTML Starter

Kick-start your project with Bootstrap, the world's most popular framework and modern development workflow. This boilerplate with Webpack based setup helps you build web apps and sites much faster.

Features

Live reloading
browser update after changes
Automatically optimizes entry files
concatenate, minify and inject output files to HTML
Sass for stylesheets
with the 7-1 Pattern
Modern JavaScript
ES6 modules-based code linting by ESLint
Older browsers support
- add vendor prefixes in CSS with Autoprefixer
- convert ES6+ code into a backwards compatible with Babel
Includes:
- Webpack 4 configuration - module bundler
- Bootstrap 4 - the most popular HTML, CSS and JS framework
- jQuery - JavaScript library
- Font Awesome 5 - the web's most popular vector icons and social logos
- Google Fonts - libre licensed fonts
sourceMaps
and more...

Theme development

Node.js is the only required dependency to work with HTML Starter.

Installation

Install Node.js (installation depends on your system). After finishing, you will be able to check the version number using node -v and npm -v commands (npm is distributed with Node.js).
It is recommended to install the latest version of Yarn.
Clone the repo using git clone https://github.com/cichy380/html-starter-bs4-webpack.git or download HTML Starter.
Open folder html-starter-bs4-webpack (command: cd html-starter-bs4-webpack) and install a packages of HTML Starter via command: yarn or npm install.

Now you have everything you need to run the build process.

Build commands

yarn start or npm run start ─ compile assets when file changes are made, start webpack-dev-server session
yarn build or npm run build ─ compile and optimize (the files in your assets directory) for production

Structure

Shorten directories and files structure which you'll see after build:

html-starter-bs4-webpack/
├── assets/                 # template assets
│   ├── fonts/              # place template fonts files here
│   ├── html/               # template HTML files
│   │  ├── partials/        # common parts of HTML code
│   │  │  └── [...]
│   │  ├── 404.html         # placeholder 404 error page
│   │  └── index.html       # default HTML skeleton
│   ├── images/             # template images files
│   │  └── [...]
│   ├── scripts/            # template javascript files
│   │  ├── vendor/          # necessary parts of frameworks and libs
│   │  │  └── [...]         # Bootstrap, FontAwesome, jQuery
│   │  └── main.js          # main javascript file that references JS source files
│   ├── scss/               # template styles
│   │  ├── [...]            # 7-1 Sass architecture folders
│   │  └── main.scss        # main Sass file that references scss source files
│   ├── index.js            # entry point of template
│   └── [...]               # miscellaneous
├── dist/                   # output folder with production build (don't edit)
│   ├── css/                # output styles
│   ├── images/             # output images
│   ├── js/                 # output javascripts
│   ├── index.html          # homepage
│   └── [...]               # miscellaneous
├── node_modules/           # Node.js packages (don't edit)
│   └── [...]
├── .babelrc                # Babel configuration file
├── .eslintrc.js            # ESLint configuration file
├── package.json            # Node.js dependencies and scripts
├── webpack.config.js       # Webpack configuration file
├── yarn.lock               # Yarn lock file (don't edit)
└── [...]                   # other...

Demo

Sample of HTML Starter usage placed in separate branche:

demo branch ─ simple corporate website

License

Code released under the MIT license.

zhaopengme/html-starter-bs4-webpack