Layouts¶

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

Available Layouts¶

Layout	Purpose	Use Case
`default`	Standard page with sidebar	Documentation, general pages
`article`	Blog post layout	Blog posts with metadata
`home`	Homepage layout	Site homepage
`collection`	Collection index	Listing pages for collections
`landing`	Full-width page	Marketing/landing pages
`root`	Base HTML	Don't use directly

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/:

{% raw %}---
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>{% endraw %}

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:

Variable	Description
{% raw %}`{{ content }}`	Page content (required)
{% raw %}`{{ page.title }}`	Page title
{% raw %}`{{ page.description }}`	Page description
{% raw %}`{{ page.layout }}`	Current layout name
{% raw %}`{{ page.url }}`	Page URL
{% raw %}`{{ site.title }}`	Site title

Overriding Theme Layouts¶

To customize a theme layout:

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

Conditional Content¶

Show content based on layout or page variables:

{% raw %}{% 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 %}{% endraw %}

Including Components¶

Use includes for reusable parts:

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

Best Practices¶

Start with default — Inherit from default for consistency
Keep layouts focused — Each layout should have one purpose
Use includes — Extract reusable components
Document custom layouts — Note purpose and required variables
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