HTML structure

Foliodot html markup structure is designed for simplicity and brevity:


<!DOCTYPE html>
<meta charset="utf-8">

<title>Page title</title>
<meta name="description" content="Page description">

<link rel="stylesheet" id="folio-css" href="css/folio.css">

<main>
    Your main content
    like images, articles...
</main>

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

<script src="js/folio.js"></script>

<script> FOLIO.init(); </script>

Legend:

  1. html definition

    Standard HTML5 document type declaration and character document encoding. Required.

  2. Title & description

    Page title and description. Optional but recommended.

  3. CSS style

    Foliodot CSS file. Required.

  4. Main section

    Main content section. Required. This content will be converted to project and thumbnails section.

  5. Sidebar section

    Secondary content section. Optional. If present, this content will be converted to sidebar section.

  6. JS script

    Foliodot javascript file. Required.

  7. Initialization

    Template initialization function. Required.

Notice, there is no thumbnails code, no user interface code. Those features are auto-generated based on settings provided in template configuration.

Common <html>, <head> and <body> tags are not required, however you can insert them if that make sense for you.

For more information about page html markup, see fully annotated html page source with some code samples and snippets.

Rendered page Link

Once browser load foliodot web page:

  1. Template is initialized with FOLIO.init(); javascript method
  2. Template reads configuration object
  3. Template analyze & parse main and aside html content
  4. Template apply settings and create visual sections
  5. Template output rendered page to browser

Structure of rendered page is represented on following graph:

Open your foliodot webpage in browser and use DOM inspector tool for complete insight of rendered page source code.

× × ×

Learn next: Introduction