Standard Framework 11ty Plugin

Complete integration of the Standard Framework CSS system with Eleventy. Includes automatic asset management, enhanced markdown, template filters, backlinks, content encryption, and zero-configuration setup.

Quick Start

1. Install

npm install @zefish/standard

2. Add to eleventy.config.js

import Standard from "@zefish/standard";

export default function (eleventyConfig) {
  eleventyConfig.addPlugin(Standard);
  return {
    dir: { input: "content", output: "_site" }
  };
}

3. Use in Templates

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  {% standardAssets %}
</head>
<body>
  {{ content | safe }}
</body>
</html>

4. Build

npx @11ty/eleventy

Done! Your 11ty site now has Standard Framework styling.

What’s Included

🎨 CSS Framework

Typography system with golden ratio
Semantic color system with light/dark themes
Responsive grid layout system
Vertical rhythm spacing
Beautiful components (buttons, forms, cards)
Complete utility class system

See CSS Framework documentation

📝 Markdown Enhancements

Automatic table of contents
Footnotes
Obsidian-style callouts
Code block escaping
Enhanced syntax highlighting

See Markdown Guide

🔧 Template Filters

String transformations
Date formatting
URL manipulation
Content processing
Custom helpers

See Filters Guide

🔗 Wiki Features

Automatic backlinks
Bidirectional linking
Reference detection
Link suggestions

See Backlinks Guide

🔐 Encryption

Inline content encryption
Password-protected content
Client-side decryption
No server required

See Encryption Guide

🎯 Shortcodes

{% standardAssets %} – Include CSS and JS
{% standardLab %} – Include experimental features
Plus more custom shortcodes

See Shortcodes Reference

Configuration Options

eleventyConfig.addPlugin(Standard, {
  // Directory where CSS/JS files are copied to
  outputDir: "assets/standard",

  // Copy files from node_modules to output directory
  copyFiles: true,

  // Use CDN instead of local files (faster for production)
  useCDN: false,

  // Languages to escape in code blocks
  escapeCodeBlocks: []
});

Asset Inclusion

Local Files (Default)

{% standardAssets %}

Outputs:

<link rel="stylesheet" href="/assets/standard/standard.min.css">
<script src="/assets/standard/standard.min.js" type="module"></script>

From CDN

eleventyConfig.addPlugin(Standard, {
  useCDN: true
});

Then {% standardAssets %} uses unpkg CDN:

<link href="https://unpkg.com/@zefish/standard" rel="stylesheet">
<script src="https://unpkg.com/@zefish/standard/js" type="module"></script>

Experimental Lab

{% standardLab %}

Includes experimental JavaScript features.

Global Data

Access framework data in templates:

{{ standard.layout.meta }}

Learning Path

Beginner

Getting Started – Set up and basics
CSS Framework – Style your content
Markdown – Write with enhancements

Intermediate

Filters – Transform content
Backlinks – Connect pages
Layouts – Page templates

Advanced

Encryption – Protect content
Advanced Features – Power user tips
Performance – Optimization

Common Use Cases

Blog with Standard Styling

---

title: My Blog Post
---

# {{ title }}

Your blog post content with beautiful Standard Framework styling.

Documentation Site

---

eleventyNavigation:
  key: Documentation
  title: Documentation
---

# Documentation

Automatically get wiki-style backlinks and beautiful typography.

Portfolio

---

---

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <!-- Your portfolio items -->
</div>

Knowledge Base

---

---

# Topic

Your knowledge base entry with automatic backlinks to related pages.

File Structure

Recommended project structure:

my-site/
├── eleventy.config.js
├── package.json
├── content/
│   ├── index.md
│   ├─ posts/
│   │  ├─ post-1.md
│   │  └─ post-2.md
│   └─ docs/
│      ├─ guide-1.md
│      └─ guide-2.md
├── _includes/
│   └─ layouts/
│      ├─ base.njk
│      └─ article.njk
└── _site/
    ├─ index.html
    ├─ posts/
    ├─ docs/
    └─ assets/standard/
       ├─ standard.min.css
       ├─ standard.min.js
       └─ standard.lab.js

Features by Category

Content Creation

✅ Enhanced markdown
✅ Automatic table of contents
✅ Footnotes
✅ Callouts
✅ Code highlighting

Styling

✅ Complete CSS framework
✅ Light/dark themes
✅ Responsive layouts
✅ Typography scales
✅ Components

Functionality

✅ Template filters
✅ Shortcodes
✅ Backlinks
✅ Content encryption
✅ Global data

Performance

✅ Minified CSS/JS
✅ CDN option
✅ Small file sizes (14KB CSS, 2KB JS gzipped)
✅ Minimal dependencies

Comparison with Similar Tools

Feature	Standard	Eleventy	Jekyll
CSS Framework	✅ Included	❌ Not included	❌ Minimal
Markdown Enhancement	✅ Full	⚠️ Limited	⚠️ Limited
Backlinks	✅ Automatic	❌ No	❌ No
Dark Mode	✅ Built-in	❌ No	❌ No
Encryption	✅ Included	❌ No	❌ No
Performance	✅ Excellent	✅ Excellent	✅ Good

API Reference

Standard Framework Plugin – Auto-generated API
Markdown Plugin – Markdown enhancements
Filter Plugin – Template filters
Shortcode Plugin – Custom shortcodes
Backlinks Plugin – Wiki features
Encryption Plugin – Content encryption

Getting Help

📖 Documentation – Comprehensive guides
🐛 Report Issues
💬 Discussions
⭐ Star on GitHub

Next Steps

Ready to build? Start here:

Getting Started – Installation and setup
CSS Framework – Learn the styling system
Markdown – Master markdown features
Filters – Transform your content
Backlinks – Connect your pages

Version 0.10.52 | Eleventy | MIT License