Editorial Theme for Aether CMS

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.

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

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

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.

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 <!-- Contact --> and <!-- Footer --> sections. For custom contact icons:

1. Place your icons in /content/themes/editorial/assets/images

2. 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:

1. Install clean-css as a development dependency:

    npm i -D clean-css
   

2. 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.