Magic trick with safety net

At first sight, there didn’t seem to be anything conspicuous about our previous website’s construction. There was an introduction, a project overview and filtered sub pages. Yet, under the hood, this is the point that differed from most other websites we’ve designed: actually, there were no sub pages. The entire site was a single static HTML page – no CMS, no templates, all sub pages were just a clever trick.

The concept was quite simple: each project had categories and meta information stored in data attributes in the markup that allowed the generation of virtual overviews. Using JavaScript, the general view was cloned and filtered by category, the navigation was operated and views switched with animations. Still, the website was fully functional without any scripts, just lacking the filters in that case. A magic trick with safety net.

Backstage

A project’s markup looked like this, for example:

<section
    id="stilbluete"
    class="project block-stilbluete"
    data-categories="Webdesign"
>
    <aside class="meta centered">
        <a href="#stilbluete">
            <span class="meta-designer">hn</span>
            <span class="meta-number">01/1</span>
        </a>
    </aside>
    <article class="text-slides">
        <p>
            <a href="http://stil-bluete.net">
                Stil-Blüte Handarbeit &amp; Co.
            </a>
            ist ein Wollgeschäft in Braunschweig, welches sich auf
            außergewöhnliche Handstrickgarne spezialisiert hat. Der
            Internetauftritt umfasst Onlineshop, Kursanmeldung und
            Informationen rund um das Ladengeschäft, bei denen auch
            Jack-Russel-Terrier Rudi seine Abenteuer als Ladenhüter mit
            den Lesern teilt. Die Gestaltung sollte sich in ihrer
            Klarheit bewusst von gängigen Onlineshops abheben. Für die
            Website entstanden ein eigenes Iconset sowie kleinere
            Illustrationen.
        </p>
    </article>
    <small class="text-center fineprint">
        <time class="uppercase" datetime="2009">seit 2009</time>
        Website, Shop, Icons, Illustration, Symphony
    </small>
    <div class="card centered grid">
        <div class="column size-12 ratio-3-2">
            <a
                href="media/stilbluete-startseite.png"
                class="image-placeholder"
                data-alt="Screenshot stil-bluete.net"
            >
                → Link zum Bild
            </a>
        </div>
    </div>
</section>

The attribute data-categories contained one or more categories that were used to create the navigation and the subpages:

function createCategoryFilters() {
    var ul = document.querySelector('#footer .footer-filters');

    // Add category filters
    categories.forEach(function (category) {
        var li = document.createElement('li'),
            a = document.createElement('a'),
            text = document.createTextNode(category);

        // Set filter link
        a.setAttribute('href', 'kategorie/' + createHandle(category));
        a.setAttribute('class', 'footer-filter');

        // Append Elements
        a.appendChild(text);
        li.appendChild(a);
        ul.insertBefore(li, ul.firstChild);
    });
}

function createCategoryPages() {
    // Setup pages
    categories.forEach(function (name) {
        var clone = slides.querySelector('.slide-all').cloneNode(true);

        clone.classList.remove('slide-all');
        clone.classList.remove('slide-active');
        clone.classList.add('slide-' + createHandle(name));
        clone.classList.add('slide-hidden');

        // Filter page by category
        [].forEach.call(clone.querySelectorAll('section'), function (project) {
            var currentCategories = project
                .getAttribute('data-categories')
                .split(', ');

            if (currentCategories.indexOf(name) == -1) {
                project.parentNode.removeChild(project);
            }
        });

        slides.appendChild(clone);
    });
}

So, one last screenshot. What a great time we had!