https://github.com/cichy380/html-starter-bs4-webpack
HTML starter template with front-end development kit for building web apps and sites.
https://github.com/cichy380/html-starter-bs4-webpack
bootstrap sass webpack
Last synced: 12 months ago
JSON representation
HTML starter template with front-end development kit for building web apps and sites.
- Host: GitHub
- URL: https://github.com/cichy380/html-starter-bs4-webpack
- Owner: cichy380
- License: mit
- Created: 2018-04-30T13:53:27.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-03-06T20:45:24.000Z (over 3 years ago)
- Last Synced: 2025-06-01T07:42:41.387Z (about 1 year ago)
- Topics: bootstrap, sass, webpack
- Language: CSS
- Homepage:
- Size: 2.3 MB
- Stars: 64
- Watchers: 2
- Forks: 24
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# HTML Starter
[](https://getbootstrap.com)
[](https://webpack.js.org)
[](https://david-dm.org/cichy380/html-starter-bs4-webpack)
[](https://david-dm.org/cichy380/html-starter-bs4-webpack?type=dev)
[](https://github.com/cichy380/html-starter-bs4-webpack/blob/master/LICENSE.md)
Kick-start your project with [Bootstrap](https://getbootstrap.com/), the world's most popular framework and modern development workflow.
This boilerplate with [Webpack](https://webpack.js.org/) 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](https://sass-lang.com/) for stylesheets**
with [the 7-1 Pattern](https://sass-guidelin.es/#the-7-1-pattern)
* **Modern JavaScript**
ES6 modules-based code linting by [ESLint](https://eslint.org/)
* Older **browsers support**
* add vendor prefixes in CSS with [Autoprefixer](https://autoprefixer.github.io/)
* convert ES6+ code into a backwards compatible with [Babel](https://babeljs.io/)
* Includes:
* **[Webpack 4](https://webpack.js.org/)** configuration - module bundler
* **[Bootstrap 4](http://getbootstrap.com/)** - the most popular HTML, CSS and JS framework
* [jQuery](http://jquery.com/) - JavaScript library
* [Font Awesome 5](https://fontawesome.com/) - the web's most popular vector icons and social logos
* [Google Fonts](https://fonts.google.com/) - libre licensed fonts
* sourceMaps
* and more...
## Theme development
[Node.js](http://nodejs.org/) is the only required dependency to work with *HTML Starter*.
#### Installation
1. Install [Node.js](http://nodejs.org/) (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](https://www.npmjs.com/get-npm)).
2. Clone the repo using `git clone https://github.com/cichy380/html-starter-bs4-webpack.git` or [download *HTML Starter*](https://github.com/cichy380/html-starter-bs4-webpack/archive/master.zip).
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](https://github.com/webpack/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:
```shell
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](https://github.com/cichy380/html-starter-bs4-webpack/tree/demo) ─ simple corporate website
## License
Code released under the [MIT license](https://github.com/cichy380/html-starter-bs4-webpack/blob/master/LICENSE.md).