Layouts

Learn about the five available layouts and when to use each one

Version: 1.0.0 Updated: Mar 2, 2026

Available Layouts

The Neubrutalist theme includes 5 powerful layouts for different content types.

1. Default Layout

The base layout with header and footer.

Usage

---
layout: default
title: Your Page
---

Your content here...

Features

Site header with navigation
Main content area
Site footer
Responsive design

When to Use

Custom page layouts
Landing pages
Special sections

2. Home Layout

Homepage with hero section and blog post listing.

Usage

---
layout: home
---

Features

Hero Section - Bold welcome message with animated accent
Post Listing - Automatic display of recent blog posts
Responsive Grid - Mobile-friendly layout

Customization

Edit the hero content in _layouts/home.html:

<div class="hero-section">
  <h1 class="hero-title">YOUR TITLE</h1>
  <p class="hero-subtitle">Your subtitle</p>
</div>

3. Page Layout

Simple content pages.

Usage

---
layout: page
title: About
permalink: /about/
---

Your content here...

Features

Clean content area
Page title header
Border and shadow styling
Rounded corners

When to Use

About pages
Contact pages
Simple content pages
Portfolio pages

Example

---
layout: page
title: About Me
permalink: /about/
---

## Who I Am

I'm a developer who loves bold design...

## What I Do

I create awesome websites with...

4. Post Layout

Blog post layout with metadata.

Usage

---
layout: post
title: "My Blog Post"
date: 2026-03-02
categories: blog design
---

Your post content...

Features

Post title and date badge
Category display
Content styling
Author information
Share buttons (optional)

Post Front Matter

---
layout: post
title: "Your Post Title"
date: 2026-03-02
categories: [category1, category2]
author: Your Name
excerpt: "Brief description for post listing"
---

When to Use

Blog posts
Articles
Tutorials
News updates

5. Docs Layout

Technical documentation with sidebar.

Usage

---
layout: docs
title: Getting Started
category: Documentation
order: 1
---

Your documentation content...

Features

Sidebar Navigation - Auto-generated or custom
Table of Contents - From H2/H3 headings
Breadcrumbs - Navigation trail
Previous/Next - Page navigation
Version Badges - Display version info
Edit Links - GitHub integration
Callout Boxes - Notes, warnings, tips

Docs Front Matter

---
layout: docs
title: Page Title
description: Brief description
category: Documentation    # Groups related pages
order: 1                   # Sidebar order
version: "1.0.0"          # Optional
date: 2026-03-02          # Optional
toc: true                 # Enable TOC
---

Auto-Generated:

# All pages with same category appear in sidebar
---
category: Documentation
order: 1
---

Custom Navigation:

---
docs_nav:
  - title: Getting Started
    url: /docs/start/
  - title: Advanced
    url: /docs/advanced/
    children:
      - title: API
        url: /docs/api/
---

When to Use

API documentation
User guides
Technical tutorials
Knowledge base
Wiki-style content

Layout Comparison

Layout	Header	Sidebar	TOC	Posts	Best For
default	✅	❌	❌	❌	Base template
home	✅	❌	❌	✅	Homepage
page	✅	❌	❌	❌	Simple pages
post	✅	❌	❌	❌	Blog posts
docs	✅	✅	✅	❌	Documentation

Overriding Layouts

Create custom layouts in _layouts/:

your-site/
└── _layouts/
    └── custom.html

Example custom layout:

---
layout: default
---

<div class="custom-container">
  <aside class="custom-sidebar">
    <!-- Your sidebar -->
  </aside>
  
  <main class="custom-content">
    <div class="docs-container">
  <!-- Sidebar Navigation -->
  <aside class="docs-sidebar">
    <nav class="docs-nav">
      <div class="docs-nav-header">
        <h3>Documentation</h3>
      </div>

      
        <!-- Auto-generate nav from site pages with same category -->
        <ul class="docs-nav-list">
          
          
            <li class="docs-nav-item active">
              <a href="/jekyll-theme-neubrutalism/docs/">Documentation</a>
            </li>
          
            <li class="docs-nav-item ">
              <a href="/jekyll-theme-neubrutalism/docs/getting-started.html">Getting Started</a>
            </li>
          
            <li class="docs-nav-item ">
              <a href="/jekyll-theme-neubrutalism/docs/configuration.html">Configuration</a>
            </li>
          
            <li class="docs-nav-item ">
              <a href="/jekyll-theme-neubrutalism/docs/layouts.html">Layouts</a>
            </li>
          
        </ul>
      

      <!-- Table of Contents -->
      
        <div class="docs-toc">
          <h4>On This Page</h4>
          <div id="toc-content">
            <!-- Will be populated by JavaScript -->
          </div>
        </div>
      
    </nav>
  </aside>

  <!-- Main Content -->
  <main class="docs-content">
    <article class="docs-article">
      <!-- Breadcrumbs -->
      
        <nav class="breadcrumbs">
          
            
              <a href="/jekyll-theme-neubrutalism/" class="breadcrumb-item">Home</a>
              <span class="breadcrumb-separator">→</span>
            
          
            
              <span class="breadcrumb-item active">Documentation</span>
            
          
        </nav>
      

      <!-- Header -->
      <header class="docs-header">
        <h1 class="docs-title">Documentation</h1>
        
          <p class="docs-description">Complete guide to using the Neubrutalist Jekyll theme</p>
        

        <!-- Meta Info -->
        <div class="docs-meta">
          
            <span class="docs-version">Version: 1.0.0</span>
          
          
            <span class="docs-date">Updated: Mar 2, 2026</span>
          
        </div>
      </header>

      <!-- Content -->
      <div class="docs-body">
        <h2 id="welcome-to-the-documentation">Welcome to the Documentation</h2>

<p>This documentation will help you get started with the <strong>Neubrutalist Jekyll Theme</strong> and make the most of its bold, beautiful features.</p>

<div class="note">
This is an interactive documentation site built with the <code>docs</code> layout. Use the sidebar to navigate between sections.
</div>

<h2 id="what-is-neubrutalism">What is Neubrutalism?</h2>

<p>Neubrutalism (or Neo-Brutalism) is a design trend that embraces:</p>

<ul>
  <li><strong>Thick Borders</strong> - 4px solid borders everywhere</li>
  <li><strong>Hard Shadows</strong> - 8px offset shadows with no blur</li>
  <li><strong>Bright Colors</strong> - Hot pink, cyan, yellow, and more</li>
  <li><strong>Bold Typography</strong> - Space Grotesk and Space Mono fonts</li>
  <li><strong>Honest Design</strong> - Raw, unapologetic aesthetics</li>
</ul>

<h2 id="theme-features">Theme Features</h2>

<h3 id="layouts">Layouts</h3>

<p>The theme includes 5 different layouts:</p>

<ol>
  <li><strong>default</strong> - Base layout with header and footer</li>
  <li><strong>home</strong> - Homepage with hero section and blog posts</li>
  <li><strong>page</strong> - Simple content pages</li>
  <li><strong>post</strong> - Blog post layout</li>
  <li><strong>docs</strong> - Technical documentation (you’re looking at it!)</li>
</ol>

<h3 id="components">Components</h3>

<ul>
  <li>Responsive navigation</li>
  <li>Hero sections</li>
  <li>Blog post listings</li>
  <li>Code syntax highlighting</li>
  <li>Callout boxes (notes, warnings, tips)</li>
  <li>Tables with neubrutalist styling</li>
  <li>Custom 404 page</li>
</ul>

<h3 id="colors">Colors</h3>

<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">--color-primary</span><span class="o">:</span> <span class="nf">#FF006E</span>    <span class="c">/* Hot Pink */</span>
<span class="nt">--color-secondary</span><span class="o">:</span> <span class="err">#00</span><span class="nt">F5FF</span>  <span class="c">/* Cyan */</span>
<span class="nt">--color-accent</span><span class="o">:</span> <span class="nf">#FFBE0B</span>     <span class="c">/* Yellow */</span>
<span class="nt">--color-success</span><span class="o">:</span> <span class="err">#06</span><span class="nt">FFA5</span>    <span class="c">/* Mint Green */</span>
<span class="nt">--color-border</span><span class="o">:</span> <span class="err">#000000</span>     <span class="c">/* Black */</span>
</code></pre></div></div>

<h2 id="quick-examples">Quick Examples</h2>

<h3 id="code-blocks">Code Blocks</h3>

<p>Code blocks are styled with black backgrounds and green text:</p>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">function</span> <span class="nf">greet</span><span class="p">(</span><span class="nx">name</span><span class="p">)</span> <span class="p">{</span>
  <span class="k">return</span> <span class="s2">`Hello, </span><span class="p">${</span><span class="nx">name</span><span class="p">}</span><span class="s2">!`</span><span class="p">;</span>
<span class="p">}</span>

<span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="nf">greet</span><span class="p">(</span><span class="dl">'</span><span class="s1">World</span><span class="dl">'</span><span class="p">));</span>
</code></pre></div></div>

<h3 id="callout-boxes">Callout Boxes</h3>

<div class="tip">
💡 Tip: Use callout boxes to highlight important information!
</div>

<div class="warning">
⚠️ Warning: Make sure to test your site locally before deploying.
</div>

<h3 id="tables">Tables</h3>

<table>
  <thead>
    <tr>
      <th>Feature</th>
      <th>Description</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Responsive</td>
      <td>Mobile-friendly design</td>
      <td>✅</td>
    </tr>
    <tr>
      <td>Fast</td>
      <td>Pure CSS, no frameworks</td>
      <td>✅</td>
    </tr>
    <tr>
      <td>Bold</td>
      <td>Thick borders and shadows</td>
      <td>✅</td>
    </tr>
    <tr>
      <td>Documented</td>
      <td>Complete guides</td>
      <td>✅</td>
    </tr>
  </tbody>
</table>

<h2 id="documentation-sections">Documentation Sections</h2>

<p>Explore the documentation using the sidebar:</p>

<ul>
  <li><strong>Getting Started</strong> - Installation and setup</li>
  <li><strong>Configuration</strong> - Customize your site</li>
  <li><strong>Layouts</strong> - Available page templates</li>
  <li><strong>Components</strong> - Built-in components and styles</li>
  <li><strong>Deployment</strong> - Publishing your site</li>
</ul>

<h2 id="need-help">Need Help?</h2>

<p>If you run into any issues or have questions:</p>

<ol>
  <li>Check the documentation sections in the sidebar</li>
  <li>Review the <a href="https://github.com/cryptonym0/jekyll-theme-neubrutalism/tree/main/examples">example files</a></li>
  <li>Open an <a href="https://github.com/cryptonym0/jekyll-theme-neubrutalism/issues">issue on GitHub</a></li>
</ol>

<div class="note">
📘 Note: This documentation is a work in progress. Contributions are welcome!
</div>

<h2 id="whats-next">What’s Next?</h2>

<p>Ready to get started? Head to the <a href="/docs/getting-started/">Getting Started</a> guide to install and configure the theme.</p>

      </div>

      <!-- Footer Navigation -->
      <footer class="docs-footer">
        <div class="docs-nav-buttons">
          

          
            <a href="/jekyll-theme-neubrutalism/docs/getting-started/" class="docs-nav-btn docs-nav-next">
              <span class="docs-nav-label">Next →</span>
              <span class="docs-nav-title">Getting Started</span>
            </a>
          
        </div>

        <!-- Edit on GitHub -->
        
      </footer>
    </article>
  </main>
</div>

<!-- Table of Contents Generator Script -->
<script>
document.addEventListener('DOMContentLoaded', function() {
  const content = document.querySelector('.docs-body');
  const tocContent = document.getElementById('toc-content');

  if (!content || !tocContent) return;

  const headings = content.querySelectorAll('h2, h3');
  if (headings.length === 0) {
    document.querySelector('.docs-toc').style.display = 'none';
    return;
  }

  const tocList = document.createElement('ul');
  tocList.className = 'toc-list';

  headings.forEach((heading, index) => {
    const id = heading.id || `heading-${index}`;
    heading.id = id;

    const li = document.createElement('li');
    li.className = heading.tagName === 'H2' ? 'toc-item' : 'toc-subitem';

    const a = document.createElement('a');
    a.href = `#${id}`;
    a.textContent = heading.textContent;
    a.onclick = function(e) {
      e.preventDefault();
      heading.scrollIntoView({ behavior: 'smooth' });
      window.history.pushState(null, null, `#${id}`);
    };

    li.appendChild(a);
    tocList.appendChild(li);
  });

  tocContent.appendChild(tocList);
});
</script>

  </main>
</div>

Layout Styling

All layouts use the neubrutalist design:

4px borders with rounded corners
8px hard shadows
Bold typography
Bright colors
High contrast

Common Elements

/* Borders */
border: 4px solid var(--color-border);
border-radius: 12px;

/* Shadows */
box-shadow: 8px 8px 0 var(--color-border);

/* Colors */
background-color: var(--color-primary);

Best Practices

Homepage

Use home layout for main landing page
Keep hero text concise and bold
Let blog posts auto-populate

Content Pages

Use page layout for standalone pages
Add descriptive titles
Use headings to structure content

Blog Posts

Use post layout for all blog content
Follow naming: YYYY-MM-DD-title.md
Add categories for organization
Include excerpt for listings

Documentation

Use docs layout for technical content
Group by category
Use order numbers for sequence
Add breadcrumbs for navigation
Link pages with previous/next

💡 Tip: Preview layouts locally before deploying to see how they look!

Next Steps

Learn about Components like callouts and tables
Explore Deployment options
Check out example pages in the theme

📘 All layouts are fully responsive and work great on mobile devices!

Available Layouts

1. Default Layout

Usage

Features

When to Use

2. Home Layout

Usage

Features

Customization

3. Page Layout

Usage

Features

When to Use

Example

4. Post Layout

Usage

Features

Post Front Matter

When to Use

5. Docs Layout

Usage

Features

Docs Front Matter

Navigation Options

When to Use

Layout Comparison

Overriding Layouts

Layout Styling

Common Elements

Best Practices

Homepage

Content Pages

Blog Posts

Documentation

Next Steps