Introduction

Foliodot, website template engine, lets you create “portfolio à la photobook” web pages using minimal html markup.

How it works:

  1. You insert the content

    Create foliodot web page using simple html structure and insert html content in markup sections

  2. Foliodot render the page

    Template js engine create and render animated, feature rich web page with visual sections

1) You insert the content Link

Foliodot webpage html structure is fairly simple and has only two markup sections where you can insert your html content to — main and sidebar section defined with respective html elements: 

<main>
    main content like
    photos, articles etc.
</main>

<aside>
    sidebar content like
    logo, navigation etc.
</aside>

While <main> element is required, <aside> element is optional.

Once initialized, template engine will create page visual sections by using:

  • html content of <main> element to create project and thumbnails section.
  • html content of <aside> element to create sidebar section section.

2. Foliodot render the page Link

Depending on configuration, every foliodot web page will have up to three visual sections — project, thumbnails and sidebar section:

Fig 1. Foliodot sections: project, thumbnails and sidebar

  • Project

    The main foliodot visual section. Contain project inner pages generated from content in main element.

  • Thumbnails

    Optional section with purpose to act like contact-sheets or project content overview.

  • Sidebar

    Optional section for secondary content such as logo, navigation menu, copyright info etc.

All sections are seamlessly interconnected with transitions and supplement each other creating feature rich portfolio experience.

Learn more about foliodot

× × ×

Learn next: Introduction