/html-starter-bs4-webpack

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

Primary LanguageCSSMIT LicenseMIT

HTML Starter

Bootstrap Webpack dependencies devDependencies license

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:
  • 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. It is recommended to install the latest version of Yarn.
  3. Clone the repo using git clone https://github.com/cichy380/html-starter-bs4-webpack.git or download HTML Starter.
  4. 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:

License

Code released under the MIT license.