Skip to content

Latest commit

 

History

History
82 lines (63 loc) · 3.42 KB

README.md

File metadata and controls

82 lines (63 loc) · 3.42 KB

HTML5-Template

A simple HTML5 template with the power of Webpack 4

GitHub stars David David GitHub license

This template is built to provide a head start for building the frontend of multipage websites. No-frills, just plain good old HTML5, CSS3, JS and jQuery with a dash of autoreloading. Some parts are taken from popular open source projects.

Installing

  • Clone this repository.
  • Browse into the project directory
  • Do yarn install
  • Then you are good to go!! 🎉

NOTE: For every new build existing dist directory will be deleted.

Working with the template

Adding new pages

To add new page (ex: page2.html) in your project, create html, css, js files inside src directory and under respective directories.
Then,

  • add an entry point inside app.js file like following:
    // page2 refers to the name of the html file
    page2: [
      "./src/js/<your-js-file>.js",
      "./src/css/<your-stylesheet>.css"
    ]
  • 🎉 And you are all done!! 🎉

Using Modernizr

Modernizr is turned off by default but if you need to use it, you first need to generate the custom build.
To do so:

  • Modify the modernizr-config.json file to add whatever tests/ options you need. For full set of tests/ options refer here.
  • Run yarn build:modernizr to generate the custom build into your src/js/ directory.
  • Add it to your app.js file. Remember, to put it on top of everything (see below example), or else you might have some errors.
     index: [
         "./src/js/modernizr.js",
         "./src/js/index.js",
         "./src/css/index.css"
     ]
  • Now, you can use modernizr in both css and js files. For example if you want to use modernizr in a js file, you can do as below:
    if (Modernizr.someFeature) {
        console.log("Available");
    } else {
        console.log("Not Available");
    }

Using a backend during development

To use a backend REST api, edit proxy-config.json. For advanced usages, visit here.

Remember to run you backend server first.

Running your project

Development: yarn start
It will start the dev server at localhost:8080.

Production: yarn build
It will build the whole project into dist directory.

Build modernizr.js: yarn build:modernizr
It will build the custom modernizr.js into src/js/ directory.

Contributing

You can contribute to this project in the following ways:

  • Bug reporting by creating an issue in this repo.
  • Fixing bugs by opening a PR.
  • Proposing some new additions/ improvements.
  • Star this project if you found it helpful. 🙏 🤞