Editorial Theme for Aether CMS

Discover a responsive and accessible editorial template, meticulously designed for editorial websites, blogs, and creative portfolios.

From Legacy to Modern

Every developer has that moment when they stumble upon an old template that stops them in their tracks. The design speaks to them: clean typography, thoughtful spacing, intuitive functionality. For me, that moment came while seeking inspiration for a new Aether theme. The Editorial template by HTML5 UP had everything needed for a compelling blog, news, or portfolio website.

Screenshot of the Editorial template homepage designed by HTML5 UP

But here's the challenge with legacy templates: beneath their attractive facade often lies outdated code built with yesterday's methods and technologies. The question becomes whether it's worth the investment to modernize such a template while preserving what makes it special.

The Modernization Decision

After diving deep into the template's architecture, I'll admit I hesitated, especially given my strong allergy to jQuery 🤣. However, I recognized that the foundation was solid and, with some strategic enhancements, could become something truly exceptional for modern web development.

The crucial final step was reviewing the license. Regardless of age, the original creator's time and effort must be respected. Even though I rewrote the entire codebase from scratch—using no original HTML, CSS, or JavaScript—and only retained the general design aesthetic, proper attribution remained essential. The new Editorial theme for Aether CMS wouldn't exist without the inspiration from HTML5 UP's original work.

Note: The original template is released under the Creative Commons Attribution 3.0 License, which permits this type of inspired adaptation with proper attribution.

Technical Transformation: A Modern Approach

The modernization effort resulted in significant improvements while dramatically reducing the overall codebase by approximately 50%. Here's what changed:

1.1 Dependency Elimination

Innovation: Complete removal of external JavaScript dependencies

Removed: jQuery (89KB), breakpoints.js, browser.js, util.js
Replaced with: Native vanilla JavaScript using modern APIs
Impact: Massive reduction in JavaScript code size

1.2 Modern JavaScript Features

ES6+ Implementation:

// Modern class-based architecture
class EditorialTheme {
    constructor() {
        this.app = document.getElementById("app")
        this.sidebar = document.getElementById("sidebar")
        // ...
        this.init()
    }
}

// Arrow functions and modern event handling
bindEvents() {
    this.sidebarToggle.addEventListener("click", this.toggleSidebar.bind(this))
    this.navOpeners.forEach((opener) => {
        opener.addEventListener("click", this.toggleSubmenu.bind(this))
    })
    // ...
}

1.3 Native DOM APIs

Modern Selector and Manipulation:

Replaced $(selector) with document.getElementById(), querySelector(), querySelectorAll()
Used native addEventListener() instead of jQuery event handlers
Implemented classList API for class manipulation

1.4 Responsive Design Logic

CSS-First Approach:

Moved responsive logic from JavaScript to CSS media queries
Implemented CSS-only sidebar state management
Reduced JavaScript complexity by leveraging CSS capabilities

2.1 CSS Custom Properties (Variables)

Innovation: Comprehensive design token system

:root {
    --color-primary: #f56a6a;
    --color-text: #7f888f;
    --color-heading: #3d4449;
    --sidebar-width: 20rem;
    --transition: all 0.3s ease;
}

2.2 Modern Layout Systems

CSS Grid Implementation:

.app {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    min-height: 100vh;
}

.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 3rem;
}

Flexbox for Component Layout:

.feature {
    display: flex;
    align-items: center;
    gap: 2rem;
}

2.3 Container Query Preparation

Future-Ready Responsive Design:

Structured CSS for easy container query adoption
Component-based responsive design patterns

2.4 Performance Optimizations

CSS Efficiency Improvements:

Eliminated redundant selectors and rules
Consolidated similar styles using CSS custom properties
Optimized specificity and cascade usage

3.1 Modern Semantic Structure

Enhanced Accessibility:

<aside class="sidebar" id="sidebar">
    <nav class="sidebar-section">
        <header class="section-header">
            <h2>Menu</h2>
        </header>
        <!-- Semantic navigation structure -->
    </nav>
</aside>

3.2 Progressive Enhancement

Modern HTML5 Features:

Proper semantic elements (aside, nav, header, section)
ARIA labels for accessibility
Modern form elements and attributes

3.3 Reduced Markup Complexity

Streamlined Structure:

Eliminated unnecessary wrapper divs
Consolidated class names using modern CSS capabilities
Removed jQuery-specific markup requirements

Technical Stack Evolution

Aspect	Original Implementation	Modern Implementation
JavaScript Framework	jQuery	Vanilla ES6+
CSS Methodology	Traditional CSS	Modern CSS + Grid/Flexbox
Responsive Design	JavaScript-heavy	CSS-first approach
Browser Detection	JavaScript libraries	CSS feature queries
Bundle Management	Multiple dependencies	Zero dependencies
Performance	Manual optimization	Built-in optimizations

Enhanced Features and Accessibility

The modernized Editorial theme introduces several key improvements:

Design and Accessibility Enhancements:

Mobile-first, accessible design with high contrast ratios
Bold, safe typography: Georgia for headings, Verdana for body text
Minimum line-height of 1.5 for improved readability
Semantic HTML with proper ARIA attributes
Independently scrollable sidebar that transforms to off-canvas on mobile devices

Layout and Navigation:

Single-depth accordion menu system
Algolia-style search bar prominently placed in the header
CSS Grid for overall layout structure
CSS Flexbox for individual components
Responsive footer (absent in the original design)

Content Management:

Paginated blog and taxonomy pages (categories/tags)
Consistent post structure with optional featured images
Post metadata and navigation (previous/next)
Related posts displayed in sidebar
Custom 404 error page
Automated accessible code highlighting with highlight.js

Screenshot of a post layout in the Editorial theme for Aether CMS, featuring a large header image, article metadata and content, and sidebar elements.

Development Tools:

Integrated styles bundle and minification script
Open-source SVG icons from Iconoir
Zero JavaScript library dependencies

Implementation Guide

Homepage Features Customization

Modify the homepage features section by editing home-features.html in /content/themes/editorial/contents/. The inline SVGs use the #include tag for clean markup. Custom SVGs can be added to /content/themes/editorial/svg/ following the established pattern.

Screenshot of the features section on the Editorial theme homepage for Aether CMS, displaying a two columns grid layout with icons, headings, and descriptive text.

Header and Footer Customization

Header Icons: Edit header.html in /content/themes/editorial/partials/ to replace the inline SVG icons.

Footer Modification: All footer components are contained in footer.html within the partials folder. Replace text, links, and SVGs as needed.

Blog Setup

Create a custom page named "Blog" from your Aether dashboard. The theme will automatically display your posts once they're created.

Menu Configuration

Use the menu editor in your Aether dashboard. The theme supports one level of sub-items for hierarchical navigation.

Sidebar Customization

Proceed with caution when editing sidebar.html in /content/themes/editorial/partials/. Only modify the  and  sections. For custom contact icons:

Place your icons in /content/themes/editorial/assets/images
Update /content/themes/editorial/assets/css/sidebar-contact.css:

/* Replace the mask URL with your custom icon */
mask: url("/content/themes/editorial/assets/images/your-icon.svg") no-repeat center;
-webkit-mask: url("/content/themes/editorial/assets/images/your-icon.svg") no-repeat center;

Search Functionality

Search is enabled by default! Simply create your posts, and Aether automatically generates a search-index.json file in /content/themes/editorial/assets/json. The header search bar provides an Algolia-like experience.

Development Workflow: Bundle and Minification

The theme includes a built-in script for bundling and minifying CSS. To use this feature:

Install clean-css as a development dependency:
```
npm i -D clean-css
```

Run the bundle script after making changes:

node content/themes/editorial/scripts/bundle.js

This script optimizes your stylesheets for production, ensuring faster load times and better performance.

Taxonomy Pages

No action required, Aether automatically generates category and tag pages as you create content 😉

SVG Best Practices

When adding custom inline SVGs, follow these accessibility guidelines:

<!-- Original SVG (avoid this) -->
<?xml version="1.0" encoding="UTF-8"?>
<svg
    width="24px"
    height="24px"
    viewBox="0 0 24 24"
    stroke-width="1.5"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    color="#000000"
>
    <path d="..." stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>

<!-- Optimized SVG (use this) -->
<svg
    width="24px"
    height="24px"
    viewBox="0 0 24 24"
    stroke-width="1.5"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    aria-hidden="true"
    focusable="false"
>
    <path d="..." stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>

Key optimizations:

Remove XML declaration (not needed for inline SVGs)
Keep xmlns="http://www.w3.org/2000/svg" for broader compatibility
Add aria-hidden="true" and focusable="false" for accessibility
Use currentColor for stroke values to inherit text color
Remove hardcoded color values for better theming flexibility

Performance and Maintenance Benefits

The modernization effort delivers significant advantages:

50% code reduction through elimination of jQuery dependency and associated libraries
Improved performance with CSS-first responsive design
Better maintainability with modern JavaScript patterns
Enhanced accessibility through semantic HTML and ARIA attributes
Future-proof architecture using current web standards

Conclusion: Honoring the Past, Embracing the Future

Transforming the HTML5 UP Editorial template into a modern Aether theme represents more than just a technical exercise, it's about preserving great design while embracing contemporary web development practices. The result is a theme that honors the original creator's vision while delivering the performance, accessibility, and maintainability that modern websites demand.

Whether you're building a personal blog, portfolio, or news site, the modernized Editorial theme provides a solid foundation that grows with both your content and the evolving web landscape. The combination of thoughtful design, clean code, and zero dependencies ensures your site remains fast, accessible, and easy to maintain.

Ready to give your Aether site a fresh, modern look? The Editorial theme proves that sometimes the best way forward is to take inspiration from the past and build something even better for the future.

The Editorial theme for Aether CMS is inspired by the original Editorial template from HTML5 UP, released under the Creative Commons Attribution 3.0 License. While completely rewritten with modern code and enhanced features, I acknowledge and appreciate the original design inspiration that made this theme possible.