Creating Peacekeeper

Peace to you!

In this series, my first ever on DEV, I'll be breaking down some of the details behind one of my favourite website templates, Peacekeeper! This series is largely aimed at beginners, but anyone can benefit. Plus, your feedback is welcomed, because there's always room to learn and grow!

First, I'd like to start by explaining what Peacekeeper is, beyond what's immediately obvious of course.

Peacekeeper is a single-page website template

This means that though there are multiple source files for each "tab" in the page, there is only one functional "page" from an end-user perspective. Though an end user can view several "sub-pages" (for want of a better term), they never actually need to navigate away from the landing page. This approach has a number of advantages, but also some disadvantages, which you'd have to weigh if you're taking this approach.

I've tried to identify a few below.

Pros:

• No reloading.
• Faster load times (for most things at least).
• Most necessary resources are already loaded when new content is displayed.
• Potentially easier to manage (from a dev perspective).
• Everything feels self-contained.
• (Optionally) everything can be placed in one HTML file.

Cons:

• Tabs cannot be accessed via links (this can be worked around).
• Noticeable delay when loading large or complex tabs.
• Requires JavaScript to be enabled, even if using a single file.

There are probably others, but I think these should give a relatively concise idea of what to expect when choosing this approach. Single-page websites are perfect for companies preparing a launch, or individuals seeking to hold an online identity via their own website. It is possible to allow users to navigate to specific tabs via hyperlinks to your website, using JavaScript to catch the specific ID of your tab and activate it.

In Peacekeeper, I did not choose this specific approach, but that's on purpose — because seeing as it is a template, I decided to keep to the basics.

What I'll be covering in this series

To create Peacekeeper, I've employed a number of CSS capabilities to achieve some rather exciting results. You can change the page's background and theme on the fly, and changes are applied live (with a transition). Each tab comes with its own styles, and thanks to the use of semantic HTML, there's no need to add classes to everything in order to achieve such diverse results. In fact, JavaScript is only used where (for the most part) CSS can't (or shouldn't) be: triggering events.

All of this will be examined and explored in more detail going forward, and I'm pretty sure the DEV community will it useful!

Stay tuned!