Fork me on GitHub

JustaPage is an Open Source HTML template for creating single page websites.

Every so often we just need to bang out a quickie one page site. It's a client who doesn't have a large amount of content, or an uncle who wants a site for his Mahjong team. JustaPage is what you can use to turn around the project in a couple of hours.

JustaPage has an "intro" area above the navigation and three sections that can be reached through the jQuery navigation. The template is mobile-friendly and mostly cross-browser compatible, and you get everything you need in the download. Shove your usual image gallery or some text or some social media links inside the appropriate sections and you're ready to rock. Get started now!

Features:

Image1

Semantic HTML/CSS Template

The code is written as expected and commented out. It uses Eric Meyer's CSS Reset because he's smarter than me.

Image3

Nifty JS Navigation

If there's no nav your uncle will be mad. The navigation scrolls the page and looks kinda cool. jQuery 1.7.2 is included.

Image5

Mobile-friendly Version

Because you want the site to look nice on smartphones. Media query in the <head> pulls in a seperate CSS file for devices between 320px–480px.

Using JustaPage:

JustaPage is built for people who know a enough about code to change the content inside a p-tag, switch out an href, change the color of the background and break everything else. You shouldn't have to mess with the javascript, and the supporting files are all included. First step is to download the code from GitHub.

There a few things that you might want to adjust in the code.

A word on mobile

This site does not use responsive web design. Please stop changing the window size. There is a mobile version of the site for devices with a width between 320px - 480px. That covers most smartphones. If you want to have a site for Blackberry or the 8 people on the Playbook, you'll need to make adjustments on your own.

Things to Add & Code to look for:

This is a template. Dump your code in between the section you want it to appear. There are comments so you don't get lost in the code.

<div class="section" id="one"> <!-- begin section one -->

	<div class="newstuff"> </div>

</div> <!-- end .section#one -->

Anything you add to the HTML you need to style.

.newstuff {
background-color: #F00;
display: block;
position: relative;
height:100px;
}

The height of the intro needs to be a fixed number, not auto. If you change it to auto, the page will jump when you scroll past the bottom of the intro.

#intro {
background: url(...);
display: block;
position: relative;
height:520px;
}

In the file justapage.js, you can adjust the distance above a section that begins the highlight in the navigation. Just change the number for the buffer variable.

var buffer = 100;

Warnings!

JustaPage is not perfect, so here are a few caveats to using the template: