supervueman / html-starter-bs4-webpack

HTML starter template with front-end development kit for building web apps and sites.

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

1. 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).
2. Clone the repo using git clone https://github.com/cichy380/html-starter-bs4-webpack.git or download HTML Starter.
3. Open folder html-starter-bs4-webpack (command: cd html-starter-bs4-webpack) and install a packages of HTML Starter via npm install command.

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

Build commands

• npm run start ─ compile assets when file changes are made, start webpack-dev-server session
• 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
├── package-lock.json       # Node.js dependencies 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.