Elements

Some html elements, within foliodot template, are custom styled and/or additional functionality is added for special interpretation by template engine:

  1. Content wrappers:

  2. (Inner) Page elements:

Customized to reduced code bloat, each of these predefined elements have special use-case as described bellow.

main Link

Wraps and define main content on foliodot web page: 

<main>
    Content as inner pages...
</main>

Foliodot engine will use content defined within main element to create project and thumbnails section.

Worth to remember:

  • Element is required. Foliodot template can't operate without this element.
  • Every child of <main> element is treated as project inner page
  • Only one <main> element can be defined per web page.

Learn more about creating project pages.

aside Link

Wraps and define sidebar content on foliodot web page: 

<aside>
    Sidebar content
</aside>

Foliodot engine will use content defined within aside element to create sidebar section.

Worth to remember:

  • Element is optional. If not present, template engine will not create sidebar section.
  • Only one <aside> element can be defined.

Learn more about sidebar section.

Use <nav> element to wrap and define navigation menu content:

<nav>
    <a href=”index.html”>Home</a>
    <a href=”about.html”>About</a>

    <a href=”#”>Portfolio</a>
    <a href=”landscape.html” subitem>Project 1</a>
    <a href=”portrait.html”  subitem>Project 2</a>
</nav>

Foliodot engine will use content defined within nav element to create menu widget.

Learn more about using and creating navigation menu.

img Link

Use <img> within <main> element to create inner photo page:

<main>
    <img src="my-photo.jpg" alt="Photo caption"/>
</main>

Additional functionality is added to this page element using custom page attributes.

Worth to remember:

  • Multiple img elements are allowed
  • Image element can be used across foliodot web page as inner pages, as part of page elements like figure or article or within any other html element.
  • using data-src instead src attribute is used for lazy loading
  • alt attribute is interpreted as image caption
  • if this element is followed by element with class "caption", that element will be used as page caption instead alt attribute
  • image name with suffix "_thumb" is used as corresponding thumbnail image

See markup samples for img element. Check our examples section to see various implementations of img element, particularly photo page layout guide.

figure Link

Use <figure> page element within <main> element as wrapper to create diptych/triptych inner pages:

<figure>
    <img src="my-photo-left.jpg"/>
    <img src="my-photo-right.jpg"/>
</figure>

Additional functionality is added to this page element using custom page attributes.

Worth to remember:

  • Multiple figure elements are allowed
  • every img element within figure element can contain fit, self, data-src custom attributes
  • if this element is followed by element with class "caption" that will be used for figure caption

See usage examples for figure element.

article Link

Use <article> page element within <main> element to create textual inner pages:

<article>
    html & text of article
</article>

Use <section> element within <article> to maximize space available for article body:

<article>
    <header>Title</header>
    <section>
        Article body will occupy maxim space pushing
        header and footer to the edges of the page.
    </section>
    <footer>footnote</footer>
</article>

Additional functionality is added to article page element using custom page attributes.

Worth to remember:

  • Multiple article pages per web document are allowed
  • Article element can be part of figure element
  • Custom attribute 'fit' is not applicable to article page element

See usage examples for article element.

× × ×

Learn next: Introduction