HTML

Annotated html source code of foliodot web page

Hint: Click on desired code line to expand more details. 
<!DOCTYPE html>
<meta charset="utf-8">

sdfsd sdf sdf

<title>Foliodot - portfolio website à la photo book </title>
<meta name="description" content="Simplest, versatile website for photographers and artists.">
<title>Website title</title>
<meta name="description" content="Describe your website">

Example

Description

  • Title is title of the document and it's shown in a browser's title bar
  • Meta description is used for short description of your page.

Title and meta description tags are important for search engine crawlers. Put relevant information about your page here as this data will be visible in google search results.

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

Description

Foliodot css (element required)

<main>

Description

Main content section for project pages (element required)

<img src="img/project/photo-1.jpg"/>
<img data-src="img/project/photo-1.jpg"/>
<img data-src="img/project/photo-1.jpg" alt="This is my image 1"/> 
<img data-src="img/project/photo-1.jpg" alt="This is my image 1" transition="fade" /> 
<img data-src="img/project/photo-1.jpg" alt="This is my image 1" transition="fade" hash="photo" /> 
<img data-src="img/project/photo-1.jpg" fit="cover" /> 
<img data-src="img/project/photo-1.jpg" self="size-small" /> 
<img data-src="img/project/photo-1.jpg" />
<div class="caption">
    This is <strong>custom</strong> caption with <em>rich formating</em>
</div> 
<a href="https://www.flickr.com/photos/i_shudder/14691597946"
    title="Moorabbin May 2014 by Peter Schofield, on Flickr">
    <img src="https://farm6.staticflickr.com/5587/14691597946_90a2f93536_b.jpg"
    width="1024"
    height="1024"
    alt="Moorabbin May 2014">
</a>

Examples

Description

Use img element to create photo pages.

Learn more

<figure>
    <img data-src="1.jpg"/>
    <img data-src="2.jpg"/>
</figure>
<figure self="size-medium">
    <img data-src="1.jpg"/>
    <img data-src="2.jpg"/>
</figure>
<figure self="size-medium">
    <img data-src="1.jpg" self="top"/>
    <img data-src="2.jpg" self="bottom"/>
</figure>
<figure>
    <img data-src="1.jpg"/>
    <img data-src="2.jpg" self="size-x2"/>
    <img data-src="3.jpg"/>
</figure>

Examples

Description

Use figure element to create diptych pages.

Learn more

<article>
    <h2>Article heading</h2>
    <p>This is first paragraph text...</p>
    <p>This is second paragraph text...</p>
</article>

<article self="size-medium" hash="my-article" transition="fade">
    <h2>Article heading</h2>
    <p>This is first paragraph text...</p>
    <p>This is second paragraph text...</p>
</article>

Examples

Description

Use <article> element to create inner pages that contain mostly textual content.

Learn more

</main>

Every child element inside main will be converted to 'page'

<aside>

Description

Sidebar content defined with aside element.

Usage

  • Sidebar section is optional.
  • Sidebar section can contain any html you want
  • Remove aside element to remove sidebar section from web page.
  • View sidebar configuration options available in sidebar configuration object
<h3>Your Name</h3>

Description

Simple logo wrapper

<nav>
    <a href="index.html">home</a>
    <a href="one.html">One </a>
    <a href="two.html">Two </a>
    <a href="about.html">About</a>
    <a href="contact.html">Contact</a>
</nav>
<nav>
    <a href="index.html">home</a>
    <h4>Projects</h4>
    <a subitem href="one.html">One </a>
    <a subitem href="two.html">Two </a>
    <a href="about.html">About</a>
    <a href="contact.html">Contact</a>
</nav>

Examples

Description

Use nav element as navigation menu definition.

Learn more

</aside>

End of navigation

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

Examples

Description

Foliodot javascript file.

Usage

  • Foliodot js file is required.
  • Insert foliodot js file at the bottom of the page
  • Configuration js file is optional. Insert configuration file after main foliodot js file. Learn more about foliodot configuration file
<script>
    FOLIO.init();
</script>
<script>
    FOLIO.init('/thumbnails/2');
</script>
<script>
    FOLIO.init('/5', {
        sidebar : {
            hidden : false,
            align: 'top'
        },
        project : {
            transition : 'fade'
        },
        thumbnails : {
            grid : '4x3',
            fit : 'cover',
        }
    });
</script>

Examples

Description

Foliodot initialization function. Accepts two optional arguments:

  • page — hash string for the initial page.
  • configuration — js object with configuration options

Usage

  • Initialization function is required.
  • Script element with initialization function should be the last element in html source code.
  • Initialization arguments are optional.
  • Use page argument when you want to show particular inner page first (upon foliodot web page load)
  • Learn more about foliodot configuration object
  • View all foliodot settings available via configuration object

More

Fatalis advenas ducunt ad fraticinida.Diatrias congregabo, tanquam audax exemplar.Bubos messis!

× × ×

Learn next: Introduction