Structure of rendered page is represented on following graph:
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> FOLIO.init(); </script>
Standard HTML5 document type declaration and character document encoding. Required.
Title & description
Page title and description. Optional but recommended.
Foliodot CSS file. Required.
Main content section. Required. This content will be converted to project and thumbnails section.
Secondary content section. Optional. If present, this content will be converted to sidebar section.
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.
<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:
Open your foliodot webpage in browser and use DOM inspector tool for complete insight of rendered page source code.
× × ×
Learn next: Page sections