Skip to content
A lightweight HTML5 single-page website using jQuery templating to switch content
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


A lightweight HTML5 single-page website using jQuery templating to switch content


  • A server for local development (I recommend node.js http-server because it's fast and easy)
  • A text editor or your preferred IDE
  • A browser that renders Javascript


Clone the repo locally, navigate to the repo folder, fire up your web server, view in the browser, edit in your IDE

The initial version has no styling or templating; this is meant to be as bare a repo as possible while still maintaining simple HTML5 standards, semantic elements, and a simple div to switch content out on-click of nav elements. I have included several pages for demonstration.

How it works

All the actual functional code is inside index.html

The script at the bottom of the index page does three things:

  1. sets the initial template to pages/main.html
  2. sets up the header tag to load pages/main.html if clicked anywhere
  3. loops through the nav divs to get their ids, then loads the template with the matching name inside the pages directory
  $('nav').children().each(function() {
    $(this).click(function() {
      $('#content-container').loadTemplate('pages/' + $(this).attr('id') + '.html');

To add a page, create a new div inside the nav tags with id="pagename", then create a template at pages/pagename.html.

  <div id="main">Home</div>
  <div id="about">About Us</div>
  <div id="portfolio">Portfolio</div>
  <div id="contact">Contact</div>

To delete a page, delete both the div in index.html, and the template inside the pages directory.

To change a page, change the value of the id in its div, and change the name of the template inside the pages directory.

As long as the id and the template name inside the pages directory are the same, the templating will work.

Content is loaded into the article tag inside the div with id="content-container"

  <div id="content-container"></div>

Running the tests

Coming soonish


FTP or your choice of deploy process - this is meant to be a vanilla install with all working parts in tact, without a strong opinion about deployment or environment setup

Built With


Please read for details on our code of conduct, and the process for submitting pull requests to us.


We use SemVer for versioning. For the versions available, see the tags on this repository.


See also the list of contributors who participated in this project.


This project is licensed under the MIT License - see the file for details


You can’t perform that action at this time.