Take a look at the code of the “Starter Pack”. For better understanding every element is commented.
Here I’ll explain the basic structure of a dossier HTML file.
The head section
What you need to know:
- The content of the <title> tag is displayed on the loading screen of the iOS-App.
- Every dossier has it’s own stylesheet, which is stored under “styles/dossiers/”. All dossier specific styles are saved in there. Why an extra stylesheet? Because it’s tidy!
The main content
The main content consists of three parts:
1) The dossier picture.
Every dossier has it’s own start picture. It is resized automatically depending on screen size and orientation. Please note that some parts of the image will be cropped on different screen sizes. Refer to “Download” for a start picture template. The markup of the start picture looks as following:
<!--Dossier start image--> <div class="dossier-start-bg"> <!--(if you want to place something on top of the picture, place it here--> </div><!-- Div dossier-start-bg-->
If you want to place pictures, a headline or other content on top of the picture, just put them between the <div> tags.Important: Dossier background pictures must always be saved as a “progressive JPEG”. Otherwise they won’t resize on iOS devices.
2) The content area
That’s where you place all your dossier content, like texts, articles, images and so on. Content is always described in small “modules”. A module is almost always enclosed by a “content-element”, which enables the correct margins for each screen size and orientation. Everything that’s inside a “content-element” will be aligned to the grid.
<!--"content-element" ensures, that content is placed within the right margins--> <div class="content-element"> <div class="dossier-text-left"> <p>Some example Text.</p> </div><!--Div dossier-text-left--> </div><!--Div content-element-->
Inside the “content-element” there is a module called “dossier-text-left”. It describes a regular text, which is slightly placed to the left of the page. The text’s width will scale accordingly to different page widths. For detailed explanation of each module, see section “modules”. The amount “content-elements” and modules on one page is not restricted. A “content-element” can even contain multiple modules (with the exception of the module “slideshow”, which shouldn’t be placed inside a “content-element”).
3) The footer
The footer is stored in an external file called “footer.html”. It can be found in the folder “inc”. The content of footer.html will be included on all pages. You can either customize the footer throughout the whole publication or add additional lines in the dossier files.