Theme Structure

Typemill does not predefine a certain structure for a theme. It just requires some mandatory files. Everything else is up to you.

Minimal Theme Structure

For a minimal theme, Typemill requires only a small set of mandatory files:

/mytheme
- index.twig
- 404.twig
- mytheme.jpg
- mytheme.yaml

Naming Rules

Use a unique, short, and descriptive name for your theme with alpha characters [a-z].

• Use the theme name for your folder name.
• Use the theme name for the preview image.
• Use the theme name for the YAML configuration file.

Short Explanation of Mandatory Files

• index.twig: This template will render all content files. You can extend the index-file with other files.
• 404.twig: This is the template for a 404 error message.
• mytheme.yaml: This is the configuration file with the version, the author name, license, and other information about your theme.
• mytheme.jpg: This is a preview picture of your theme with a minimum width of 800px.

Extended Theme Structure

In Twig, you can include and extend templates, and create a template hierarchy. With these features, you can create a more complex theme with a structure. Read more about it in the chapter about Twig.

If you don't have an idea how to start, then you can follow the example below.

- /css
    - /style.css
    - /another.css
- /js
    - /javascript.js
- /img
    - /icon.png
    - /favicon.ico
    - /themeLogo.jpg
- /partials
    - /layoutStart.twig
    - /layout.twig 
    - /navigation.twig 
    - /header.twig
    - /footer.twig
- /cover.twig
- /index.twig
- /404.twig
- /themeName.yaml

Some explanations for the twig-files of the example:

• layoutStart.twig: Layout for the static start page, usually with the HTML head and the page structure.
• layout.twig: Layout for all other pages, usually with the HTML head and the page structure.
• navigation.twig: The content navigation. Include this in your layout files.
• header.twig: The header area of your page. Include this in your main layout files.
• footer.twig: The footer area of your page. Include this in your main layout files.
• cover.twig: Template with the content for an individual start page. The cover.twig file extends the layoutStart.twig file.
• index.twig: Template for all other pages. The index.twig file extends the layout.twig file.
• 404.twig: Template for the Error 404 page. The 404.twig file extends the layout.twig file.