Coded version of the concept from Alberto Conti.
See the demo here: Demo
You can use the generated minified files OR your can setup the development environment and build things on your own.
Open the index.html inside the dist folder OR include the CSS & JavaScript files into your website.
<link rel="stylesheet" type="text/css href="dist/main.css">
<script type="text/javascript href="dist/main.js">
- node >= 10.15.0
- Package manager
- npm (included in node)
- OR
- yarn
$ yarn$ npm installWhile your are in the developement mode the
dist/folder and files won't be created. All files are cached and loaded automatically by the webpack dev server.
$ yarn dev$ npm run devThe development server watches for your changes and reloads the browser automatically. You can open it by visitting
http://localhost:8000/
This creates the "real" & minified files. The
dist/folder will be automatically removed and then created to start with a clean folder.
$ yarn build$ npm run buildAll of the source files are in the
src/folder. The generated files are in thedist/folder.
The entry and template of the website. The generated index.html inside the dist/ folder has the main.css and main.js included.
Holds all JavaScript files which will be compiled into the dist/main.js file.
Holds all SCSS files which will be compiled into the dist/main.css file.
Holds all fonts which will be compiled and included. The folder name is the Kebab Case name of the font (e.g. open-sans or my-awesome-font. Your can include the .scss files inside the folders in the src/scss/_fonts.scss file.
Your can find all images, videos or other assets there.
This project is licensed under the MIT License - see the LICENSE file for details