Layouts

Layouts define the structure and appearance of your pages. The Zer0-Mistakes theme includes several built-in layouts.

Available Layouts

Using Layouts

Specify a layout in your page’s front matter:

---
title: "My Page"
layout: default
---

Layout Hierarchy

Layouts inherit from each other:

root.html                 # base HTML document — never use directly
├── default.html          # adds the sidebars and table of contents
│   ├── article.html      # blog posts
│   ├── collection.html   # collection index pages
│   ├── author.html  authors.html
│   ├── note.html    notebook.html
│   ├── recipe.html  cookbook.html
│   └── tag.html
├── home.html             # homepage
├── landing.html          # full-width marketing pages
├── section.html  news.html  admin.html  stats.html
└── 404.html      setup.html  welcome.html  book*.html

Which branch a layout sits on is not cosmetic. default.html is the only layout that renders the left sidebar (#bdSidebar) and the table-of-contents panel (#tocContents). A layout inheriting root directly gets neither — so a custom layout that needs them should inherit default.

Creating Custom Layouts

Step 1: Create the Layout File

Create a file in _layouts/:

---
layout: default
---
<!-- _layouts/tutorial.html -->
<article class="tutorial">
  <header class="tutorial-header">
    <h1>{{ page.title }}</h1>
    <div class="meta">
      <span class="difficulty">{{ page.difficulty }}</span>
      <span class="time">{{ page.estimated_time }}</span>
    </div>
  </header>
  
  <div class="tutorial-content">
    {{ content }}
  </div>
  
  {% if page.next_tutorial %}
  <footer class="tutorial-footer">
    <a href="{{ page.next_tutorial }}">Next Tutorial →</a>
  </footer>
  {% endif %}
</article>

Step 2: Use the Layout

---
title: "Getting Started Tutorial"
layout: tutorial
difficulty: beginner
estimated_reading_time: "15 minutes"
next_tutorial: /tutorials/part-2/
---

Layout Variables

Access these variables in your layouts:

Overriding Theme Layouts

To customize a theme layout:

1. Copy the layout from the theme to your _layouts/ directory
2. Modify as needed
3. Jekyll uses your version instead

Conditional Content

Show content based on layout or page variables:

{% if page.layout == 'article' %}
  <div class="post-meta">
    <time>{{ page.date | date: "%B %d, %Y" }}</time>
    <span class="author">{{ page.author }}</span>
  </div>
{% endif %}

{% if page.sidebar %}
  {% include navigation/sidebar.html %}
{% endif %}

Including Components

Use includes for reusable parts:

{% include core/head.html %}
{% include navigation/header.html %}
{% include content/toc.html %}
{% include core/footer.html %}

Best Practices

1. Start with default — Inherit from default for consistency
2. Keep layouts focused — Each layout should have one purpose
3. Use includes — Extract reusable components
4. Document custom layouts — Note purpose and required variables
5. Test responsiveness — Verify layouts work on all screen sizes

Reference

• Jekyll Layouts Documentation
• Liquid Template Language
• CSS Grid Mastery (tutorial) — build custom two-dimensional layouts with live, in-browser examples

Technical Reference

For contributor-level details (layout hierarchy, Liquid template inheritance, sidebar wiring):

• Layouts and Navigation → docs/ui/layouts-and-navigation.md

See also

• [[Customization]]
• [[Include Components]]
• [[Liquid]]