Making Beautiful Single Page Websites Is Easy With fullPage.js

Single-page websites are all the rage.

No complaints here, I love them. There are a huge number of reasons why you should look at using a single page website. They work nicely with touch-oriented devices. They’re reasonably simple to develop, and… Well? They look ridiculously cool.

There are some rather beautiful examples of single page websites out there, and OnePageLove has done a sterling job of aggregating the best of them.  My favorite is this painfully hip wedding invitation.  Have a look.

singlepage-jess

If you want to quickly make a simple single-page application, you’ll find that there are no shortage of JavaScript frameworks and libraries out there which make this possible. One of these frameworks is fullPage.js. I’ve used it a lot over the past couple of days, and I’ve become rather fond of it.

Created by Cambridge based programmer Alvaro Rotrigo, it makes it trivially easy to create simple, elegant websites using the single page paradigm. fullPage works by structuring each page into sections, with each of these sections occupying the entirety of a page.

The result is a product which has a logical flow and looks incredible. And fullPage.js makes it easy to create Single Page websites. Here’s how.

Using frontpage.js

Start off with a basic project skeleton.

/OnePageProject
|_ index.html
|_/ Styles
|_/ Scripts

Then grab the latest version of frontpage.js from Github. When cloning the repository, you’ll notice that it comes with all sorts of extraneous fluff which we’re not particularly interested in. Grab ‘jquery.fullPage.css’ and ‘jquery.fullPage.js’ and copy them into our Styles and Scripts folder respectively. While you’re at it, create a CSS and Javascript file where we’ll store our custom code. So, our project folder should now look like this.


/OnePageProject
|_ Index.html
|_/Styles
|_/Styles/jquery.fullPage.css
|_/Styles/style.css
|_/Scripts
|_/Scripts/jquery.fullpage.js
|_/Scripts/fullpage.js

Now, open up your index.html file, and create a simple HTML5 document structure. If you use Emmet in Sublime Text 2, you can easily create this by pressing ‘ctrl-alt-return’ and then typing ‘html:5’.

Now link to the stylesheets and scripts. You’ll also need to link to JQuery. It’s highly recommended that you grab these from the Google CDN, as I did below.


<link href='http://fonts.googleapis.com/css?family=Inika&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href=“styles/style.css">
<link rel="stylesheet" type="text/css" href="styles/jquery.fullPage.css" />

Now, time to create the elements in our single page application. For each section of your page, you need to create a div with a class of ‘section’.

<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>

You can also create landscape sections by adding a div with the class of slide within a section.


<div class="section">
<div class="slide"> Slide 1 </div>
<div class="slide"> Slide 2 </div>
<div class="slide"> Slide 3 </div>
<div class="slide"> Slide 4 </div>
</div>

Nothing working? That’s because you need to instantiate frontPage.js. Open ‘scripts/frontPage.js’ and add the following lines of code.


$(document).ready(function() {
$.fn.fullpage();
});

Huzzah, it works!

singlepage-layout

You can customize fullPage’s functionality in this function by passing it an object containing variables which define how fullPage works. There are literally hundreds of these options, so it’s recommended you read the documentation on Github.

Conclusion

As you can see, fullPage makes it trivially easy to make single page applications, and I’ve got quite a soft-spot for it. Give it a go, and let me know how you find it in the comments below.

Enjoy this article? You should follow me on Twitter.

About Matthew Hughes

Matthew Hughes is a software developer, student and freelance writer from Liverpool, England. He is seldom found without a cup of strong black coffee in his hand and absolutely adores his Macbook Pro and his camera. You should follow him at @matthewhughes.

1 comment

Leave a Reply