Building a Neo-Brutalist Theme with 11ty

The Stack That Powers Rebellion

When we set out to build a theme that breaks every design rule, we needed a
stack that could keep up with our chaos. Enter Eleventy (11ty) – the static
site generator that's fast enough to handle our madness.

Why 11ty?

While everyone else is drowning in React complexity and Next.js overhead, we
chose simplicity with attitude:

Zero Client JS by Default: Our chaos is CSS-powered, not
JavaScript-bloated
Lightning Fast Builds: < 1 second to generate the entire site
Template Freedom: Mix and match Nunjucks, Markdown, and more
Data Cascade: Powerful data management without the headaches

The Architecture

📁 src/
  📁 _includes/
    📁 components/    # Modular chaos
    📁 layouts/       # Base templates
  📁 _data/          # Global data files
  📁 assets/
    📁 css/          # 14 component files
    📁 js/           # Minimal enhancement
  📁 posts/          # Blog content
  📁 projects/       # Portfolio items
  📁 pages/          # Static pages

Component-Based CSS Architecture

Instead of a monolithic stylesheet, we broke our chaos into manageable
pieces:

/* main.css - The Orchestrator */
@import 'variables.css'; /* Design tokens */
@import 'base.css'; /* Reset & foundations */
@import 'components/nav.css'; /* Component styles */
@import 'components/hero.css';
@import 'components/about.css';
/* ... more components */
@import 'utilities.css'; /* Helper classes */
@import 'animations.css'; /* Motion & chaos */

The Nunjucks Advantage

Nunjucks gives us powerful templating without the complexity:


<div class="skill-card" style="transform: rotate(0deg)">
    <span class="skill-icon">⚡</span>
    <h3>Lightning Fast</h3>
    <p>Code that runs at the speed of thought. Performance isn&#39;t a feature, it&#39;s a requirement. Zero compromises.</p>
</div>
<div class="skill-card" style="transform: rotate(-1deg)">
    <span class="skill-icon">🎨</span>
    <h3>Design Magic</h3>
    <p>Where pixels meet perfection. Creating visual experiences that stick in your mind and refuse to leave.</p>
</div>
<div class="skill-card" style="transform: rotate(1deg)">
    <span class="skill-icon">🚀</span>
    <h3>Launch Ready</h3>
    <p>From concept to production in record time. Building products that ship, not prototypes that sit.</p>
</div>
<div class="skill-card" style="transform: rotate(2deg)">
    <span class="skill-icon">💥</span>
    <h3>Problem Crusher</h3>
    <p>Complex challenges are just puzzles in disguise. The harder they come, the harder they fall.</p>
</div>
<div class="skill-card" style="transform: rotate(-2deg)">
    <span class="skill-icon">🔥</span>
    <h3>Innovation Engine</h3>
    <p>Always exploring what&#39;s next. If it&#39;s cutting edge, we&#39;re already building with it.</p>
</div>
<div class="skill-card" style="transform: rotate(-1deg)">
    <span class="skill-icon">⭐</span>
    <h3>Quality Obsessed</h3>
    <p>Good enough isn&#39;t in our vocabulary. Every detail matters, every pixel has purpose.</p>
</div>

Data-Driven Design

All our content lives in structured data files:

// _data/site.json
{
  "theme": {
    "colors": {
      "electricBlue": "#0066FF",
      "hotPink": "#FF0099",
      "acidGreen": "#00FF88"
    },
    "animations": {
      "glitchEnabled": true,
      "floatingShapes": true
    }
  }
}

Performance Without Compromise

Despite the visual chaos, we achieve perfect scores:

100/100 Lighthouse Performance
< 100KB Total Page Weight
Zero Render-Blocking Resources
Instant Page Loads

The Build Pipeline

Simple yet powerful:

// .eleventy.js
module.exports = function (eleventyConfig) {
  // Copy assets directly
  eleventyConfig.addPassthroughCopy('src/assets');

  // Add custom filters
  eleventyConfig.addFilter('random', () => {
    return Math.floor(Math.random() * 5) - 2;
  });

  // Custom collections
  eleventyConfig.addCollection('featured', collection => {
    return collection.getFilteredByTag('featured');
  });

  return {
    dir: {
      input: 'src',
      output: '_site'
    }
  };
};

Deployment via GitHub Actions

Automatic deployment on every push:

name: Deploy to GitHub Pages
on:
  push:
    branches: [main]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: npm ci && npm run build
      - uses: peaceiris/actions-gh-pages@v3

CSS Variables for Dynamic Theming

The entire color scheme can be changed with CSS custom properties:

:root {
  --electric-blue: #0066ff;
  --hot-pink: #ff0099;
  --acid-green: #00ff88;
  --border-width: 6px;
  --shadow-offset: 12px;
}

/* Dark mode? Psychedelic mode? Your choice */
[data-theme='psychedelic'] {
  --electric-blue: #ff00ff;
  --hot-pink: #00ffff;
  --acid-green: #ffff00;
}

Accessibility in Chaos

Bold doesn't mean inaccessible:

WCAG 2.1 AA Compliant
Semantic HTML Structure
ARIA Labels Where Needed
Keyboard Navigation Support
Skip Links for Screen Readers

The Philosophy in Code

Our development philosophy:

Performance First: If it slows the site, it doesn't ship
Progressive Enhancement: CSS does the heavy lifting
Maintainable Chaos: Organized file structure despite visual anarchy
Open Source: Share the rebellion

Lessons Learned

Building this theme taught us:

Constraints Breed Creativity: No frameworks forced innovative solutions
CSS is Powerful: You don't need JS for impressive animations
Static is Fast: Server-side generation beats client-side rendering
Bold Designs Work: Users remember experiences that stand out

Get the Code

Ready to start your own rebellion?

git clone https://github.com/williamzujkowski/Neo-Brutalist-11ty-Theme
cd Neo-Brutalist-11ty-Theme
npm install
npm run dev

The Future

This theme is just the beginning. We're planning:

More Animation Modes: Glitch, wave, morph effects
Theme Variations: Cyberpunk, Vaporwave, Brutalist Classic
Component Library: Drag-and-drop Neo-Brutalist elements
11ty Plugin: Easy integration for any project

Join the Revolution

The web needs more personality. More attitude. More rebellion.

Stop building boring websites. Start breaking rules.

The revolution will be font-size: 10rem 🔥