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
`journals`	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
└── default.html
    ├── home.html
    ├── journals.html
    ├── collection.html
    └── landing.html

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:

Variable	Description
`{{ content }}`	Page content (required)
`{{ page.title }}`	Page title
`{{ page.description }}`	Page description
`{{ page.layout }}`	Current layout name
`{{ page.url }}`	Page URL
`{{ 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 == 'journals' %}
  <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