Sidebar

Sidebar section is ideal place for your logo, navigation and any sort of short information.

Playground

Button label:

Align:

hidden

View configuration object

sidebar : {
    align : 'left',
    hidden : 'true',
    buttonToggle : 'menu'
}

Sidebar section is optional
Use <aside> element to create and define sidebar section
Use sidebar configuration object to set options:
- align
- hidden
- buttonToggle
- buttonClose
Use 'top' or 'bottom' align for simple sidebar content
Use 'left' or 'right' align when you have lot of sidebar content
Toggle sidebar with 'm' key (default)

Documentation:

Example of presenting portraits photo project with Foliodot template.

Your take on the world. Your own voice through your photographs. Tell the story.

Explore your ideas, your visual language, show the narrative aspects of your artwork.

Define structure, create chapters, set the layout, rhythm and flow of your story.

Use foliodot to create simple photo slideshow using minimal html markup.

See photo layout examples and learn how to set layout using minimal html markup.

Diptych layout examples with preview samples and ready to copy/paste markup snippets.

Preview predefined transitions you can use right out of the box in your project.

Explore thumbnails options, set your values, see live preview and copy configuration object.

Explore sidebar options. Try this demo with live preview.