Slateframe

A clean frame for whatever you publish.

Slateframe is a fast, accessible, multilingual-ready WordPress theme for publishing, photography, blogs, portfolios, and personal websites. It is intentionally built around WordPress core: a hybrid theme.json + PHP template architecture, native blocks and patterns, system fonts, and a small progressive-enhancement JavaScript layer.

Pre-release: Slateframe is under active development. Validated milestones are merged into main; ongoing work continues on automation/continuous-development.

Why Slateframe

Slateframe is designed for people who want editorial polish without inheriting a page-builder runtime.

• Content first: typography, spacing, rules, alignment, and imagery establish hierarchy before decorative UI.
• WordPress first: core templates, blocks, patterns, menus, comments, and theme APIs remain the foundation.
• Multilingual by default: no fixed locale list, URL convention, or multilingual plugin is required.
• Accessible by design: keyboard behavior, visible focus, semantic landmarks, reduced motion, resilient fallbacks, and touch targets are part of the product.
• Performance by architecture: system fonts, contextual assets, small native JavaScript, and explicit asset budgets. The sticky header uses an opaque surface rather than GPU-heavy background blur.
• Contextual assets: long-form reading presentation is loaded only on singular documents; author/related/404 publishing extras are isolated from base routes, while common TOC interaction geometry stays with the singular reading layer; photography, portfolio, and knowledge presentation is layered on only when relevant blocks appear, with native Portfolio Query Loop grid rules isolated to project-grid documents.
• Small global shell: navigation and footer presentation are explicit always-loaded shell assets, both counted in the unchanged aggregate base-runtime budget; footer widgets use a responsive grid and the same control/touch system as the rest of Slateframe.
• Portable content: Slateframe owns presentation, not site business logic or content storage.

Who Slateframe is for

Slateframe is a general-purpose publishing theme for writers, photographers, independent publishers, documentation and knowledge sites, and portfolio owners who want a finished editorial baseline without turning WordPress into a page-builder application.

A fresh installation is intended to be useful before customization: the theme supplies a restrained responsive shell, long-form reading typography, accessible controls, native menus and comments, search/archive/author/404 states, Gutenberg-wide layouts, and portable starter patterns. Specialized presentation for photography, portfolio Query Loops, and knowledge/learning content stays content-driven and does not create proprietary post types or lock content into Slateframe.

The theme is deliberately small in scope. It does not bundle analytics, SEO ownership, caching, CDN configuration, custom business data, remote fonts, or a JavaScript UI framework. Those responsibilities remain with WordPress core or purpose-built plugins, so changing themes does not require migrating application logic.

Responsive navigation adapts to both viewport width and the real rendered width of translated menu labels. Long Latin, CJK, Arabic, and mixed-language navigation can fall back to the same keyboard-operable compact menu used on tablets, without truncating labels or assuming a fixed locale.

Appearance and spatial system

Slateframe uses one coherent spatial system instead of sizing each component independently. Its default visual language is restrained and editorial: a 44px accessible control baseline, semantic inline/component/stack/media/caption gaps, dedicated prose/heading/list reading rhythm, responsive page gutters, deliberate section whitespace, a readable 46rem text measure, a 74rem wide canvas, and one shared corner-radius language. Header chrome uses its own wider measure, up to 108rem on large displays, so translated navigation has room to breathe without widening article prose or Gutenberg wide blocks. Navigation, forms, comments, search, pagination, panels, media captions, and editorial layouts consume those tokens rather than maintaining separate sizing systems.

Site owners can tune eight bounded settings in Appearance → Customize → Slateframe design: color mode, control size, spacing density, page gutter, section whitespace, corner radius, reading width, and wide canvas. Color mode can follow the visitor's operating-system preference or establish a light/dark site default. Visitors also get a compact 44px header toggle; an explicit choice is stored only as a first-party functional preference cookie and takes precedence over the site default. Control size cannot fall below 44px, and every numeric range is intentionally narrow enough to preserve Slateframe's proportions rather than exposing arbitrary CSS.

The light and dark palettes share the same semantic surface hierarchy, text, border, accent, focus, selection, and media-chrome tokens. System mode requires no JavaScript, while explicit site defaults are present in server-rendered HTML to avoid a theme flash. Block authors get the matching semantic color presets, XS–2XL spacing presets, and Small/Body/Lead/Heading/Display typography presets in the editor. Changed spatial settings and explicit site color defaults are mirrored into the block-editor canvas.

CI renders the designed default plus the minimum/compact and maximum/spacious spatial profiles at representative mobile and desktop widths, and separately exercises system, explicit-light, and explicit-dark color modes. The profiles are checked for control targets, real content/wide measures, gutters, radius, component and reading-rhythm tokens, content-mode overflow, color persistence, accessible toggle state, and screenshot evidence. Appearance visual evidence also covers single posts, attachment media, empty search/author states, and genuine 404 responses, and waits for the native lightbox to settle before checking enlarged-image viewport containment and saving screenshots.

Default experience

Slateframe treats the first activation as a product surface rather than a blank styling layer. Core page, search, archive, author, missing-content, post, comment, and footer surfaces share the same tokenized page-start rhythm and content measures. Controls keep an accessible minimum target, while headings, prose, code, tables, captions, navigation, and media reuse the same bounded spatial system.

Desktop navigation remains visible when the available row can contain it and moves to the compact, keyboard-operable menu when translated labels need more intrinsic inline space than the rendered row can provide. Slateframe measures that row-level intrinsic demand synchronously, restores normal navigation wrapping before paint, and then applies compact mode when required; this keeps 200% text enlargement and long CJK/RTL labels contained without leaving nowrap in the rendered UI. On the narrowest mobile widths, long site identity text receives its own row and the header yields sticky positioning so enlarged text can scroll normally instead of occupying the viewport indefinitely; compact navigation remains focus-reachable below it. Content changes are remeasured after layout, which matters for translated menus and plugin-provided language controls.

Current feature set

Publishing and reading

• Editorial single-post and Page layouts with readable prose measure.
• Wide and full-width Gutenberg alignment without forcing normal paragraphs wider.
• Long-title handling for CJK, Latin, and long translated strings.
• Code blocks, inline code, blockquotes, pullquotes, captions, footnotes, multi-page posts, native tables, TablePress-friendly overflow, Core/common TOC presentation compatibility, editorial leads, and print-friendly long-form output.
• Post metadata, categories/tags, filterable related reading, optional previous/next navigation, comments, pagination, archives, author pages with opt-in local profile media, search, a recovery-oriented 404 surface, and an optional Core block/widget footer-content region.
• Editor-canvas parity for the singular reading layer: title rhythm, H2/H3 hierarchy, nested-list rhythm, quotes, inline code, tables, captions, wide/full alignment, and bounded Appearance token overrides.

Core publishing and media

Slateframe treats ordinary WordPress content as a complete product surface: untitled entries receive a translatable frontend fallback, sticky posts receive a restrained editorial status, search results report locale-aware totals, and Pages share the same responsive featured-media/caption contract as posts. Native attachment pages preserve image, audio, and video presentation; expose portable MIME/dimension/file-size metadata when WordPress has it; link to the original asset; and return readers to the parent document without leaking server paths or inventing a media content model.

Photography, portfolio, and knowledge

Slateframe currently ships twenty-one site-neutral starter patterns across publishing, photography, portfolio, and knowledge work:

1. Photo essay — image-led storytelling with the native Gallery block.
2. Project case study — role/scope context with Context, Approach, and Outcome sections.
3. Learning path — a Foundation → Practice → Extend structure for educational content.
4. Editorial note — a restrained note/caveat that remains part of normal document flow.
5. Curated reading list — a typography-led related-reading section without a card wall.
6. Photography contact sheet — mixed portrait/landscape imagery without forced cropping.
7. Portfolio index — project summaries organized as an editorial ledger rather than a card grid.
8. Knowledge outline — prerequisites, outcomes, and a numbered learning sequence.
9. Photography feature — a single natural-ratio image with restrained editorial context.
10. Project brief — context, role, constraints, and outcome without a custom content type.
11. Lesson chapter — objective, practice sequence, and explicit continuation for educational content.
12. Editorial opening — a lead paragraph and compact orientation for long-form reading.
13. Photography diptych — two natural-ratio frames that collapse cleanly on narrow screens.
14. Project outcomes — a portable three-column metrics summary without a custom project model.
15. Knowledge definition — a semantic term-and-explanation callout for reference material.
16. Photography sequence — an establishing frame plus paired detail rhythm with natural-ratio imagery and captions.
17. Project grid — a native Query Loop portfolio index with responsive cards, site-local date formatting, empty state, and pagination.
18. Knowledge checklist — a compact Understand → Practise checkpoint built from core Columns, Lists, and Quote blocks.
19. Project decision log — a constraint → decision → consequence trail with an explicit evidence prompt.
20. Knowledge procedure — a goal → action → verification workflow with a recovery checkpoint.
21. Knowledge comparison — a two-option editorial comparison organized around fit, limits, and a decision rule.

Block styles add editorial notes and leads, framed images, photo sequences, contact sheets, diptychs, photography features, project features/briefs/metrics, learning paths/callouts/definitions, data tables, native disclosures, numbered steps, checklists, key facts, and editorial ledgers. Photography layouts load their own contextual CSS only when Photography or Core-lightbox content needs it, share one media/caption rhythm, preserve natural image geometry, and use WordPress Core's native lightbox with Slateframe's shared control geometry, dynamic-viewport containment, safe-area handling, keyboard focus, forced-colors, RTL/200%-text, scroll-lock, and reduced-motion safeguards. Focused runtime CI uses real generated landscape, portrait, and square raster attachments rather than SVG-only geometry, and retains reviewable page plus lightbox screenshots. Portfolio and knowledge patterns deliberately compose shared styles instead of introducing one-off component CSS.

Navigation and multilingual readiness

• Primary and footer menu locations with a usable fresh-install fallback.
• Responsive navigation with Escape, outside-click, link-close behavior, focus return, and mobile focus containment.
• No-JavaScript fallback remains navigable, and system light/dark preference still works without JavaScript.
• Accessible light/dark header control with server-rendered site defaults and a first-party visitor preference cookie.
• Optional language-selector integration through the public slateframe_language_switcher_html filter.
• Extensible contextual-style detection through slateframe_content_mode_markers, without hard-coding multilingual or plugin APIs.
• Logical CSS properties, RTL corrections, CJK-safe wrapping, and long-string resilience.

Installation

Slateframe has not reached a tagged stable release yet. For development builds:

1. Download a validated slateframe.zip artifact from the public CI, or build it locally.
2. In WordPress, open Appearance → Themes → Add New → Upload Theme.
3. Upload slateframe.zip and activate Slateframe.
4. Assign Primary and Footer menus if desired.
5. Configure the Site Title, Tagline, and optional Custom Logo.
6. Build content with WordPress core blocks and Slateframe patterns.

No page builder or companion plugin is required.

Compatibility target

Area	Current target
WordPress	6.7+
PHP	7.4+
theme.json	Version 3
Editor	Gutenberg/core block editor
Directionality	LTR + RTL architecture
Languages	Locale-agnostic; CJK/RTL/long-string aware
Multilingual plugins	Optional adapters/hooks; none required

Compatibility is validated incrementally rather than claimed from syntax alone. CI currently exercises the minimum PHP target and the primary modern PHP runtime against WordPress 6.7 and current WordPress.

Quality gates

Public GitHub Actions currently enforce:

• PHP syntax.
• WordPress Coding Standards through PHPCS/WPCS.
• Release metadata consistency across style.css, readme.txt, and package.json.
• WordPress.org Theme Check against the built production ZIP in a real WordPress installation with WP_DEBUG enabled; REQUIRED findings block the build while advisory recommendations remain visible in the report.
• WordPress/PHP compatibility smoke coverage for the minimum PHP target and modern PHP runtime.
• theme.json, theme metadata, required files, and pattern metadata.
• Public namespace / Text Domain rules and guards against private Time2Log runtime identifiers.
• Guards against hard-coded locale paths and a required Polylang dependency.
• JavaScript syntax and explicit budgets for the base stylesheet, always-loaded navigation, contextual publishing/reading/comments/content-mode CSS, the Portfolio Query Loop layer, and JavaScript, including route-level aggregate budgets so moving CSS between requests cannot hide runtime growth.
• Real WordPress + MariaDB installation and theme activation.
• Runtime pattern registration plus parseability checks derived from every shipped patterns/*.php file, including filename/slug parity and exact shipped-versus-registered set equality.
• Authenticated Gutenberg authoring regression that opens representative Slateframe patterns in the real block editor, dismisses WordPress onboarding before visual capture, rejects invalid blocks, checks editor containment/control rhythm, keeps a full editor-top capture with real Core chrome, and publishes unobscured 390/1440 focused evidence for Editorial, long-form reading primitives, Photography, Portfolio, and Knowledge.
• Playwright/Chromium browser regression at 320, 375, 390, 412, 768, 1440, and 1920 px, plus compact/default/spacious spatial profiles and system/light/dark color-mode profiles at representative mobile and desktop widths; Photography is also captured in each spatial profile and Core lightbox behavior is exercised in the focused raster runtime.
• Keyboard navigation, threaded comments, core routes, classic alignment/caption compatibility, 200% text-enlargement containment, adaptive desktop navigation, overflow, wide/full blocks, long mixed-script titles, reduced motion, real mixed-orientation raster Photography/Portfolio/Knowledge responsive layouts, intrinsic image sizing, deterministic Query Loop pagination across multiple pages, and reference screenshots.
• Automated Axe WCAG A/AA regression on representative mobile/desktop routes, plus explicit visible-focus, accessible-name, and 44 px touch-target checks.
• Reproducible release ZIP creation with normalized archive order/timestamps/permissions, development-only files excluded, required WordPress.org metadata, a validated 1200×900 theme screenshot, and CI verification that two builds of the same commit have an identical SHA256.
• Browser runs publish reviewable screenshot artifacts for core Page/Post surfaces, Photography, Portfolio, Knowledge, color modes, Appearance profiles, and adaptive translated-navigation states; visual evidence is reviewed alongside automated geometry checks rather than treated as a substitute for them.

A failed gate is treated as a defect; tests are not removed merely to make CI green.

Development

The long-lived integration branch is automation/continuous-development. Validated batches are periodically merged into main.

Build the distributable archive (requires PHP, Python 3, and rsync):

./bin/build-theme-zip.sh

The builder sorts archive entries and normalizes ZIP timestamps/permissions from the source commit so repeated builds of the same revision are byte-for-byte reproducible.

Run browser tests against a local WordPress installation using Slateframe:

npm install
PLAYWRIGHT_TEST_BASE_URL=http://127.0.0.1:8080 npm run test:browser

Run only the accessibility regression slice:

PLAYWRIGHT_TEST_BASE_URL=http://127.0.0.1:8080 npm run test:a11y

Automated checks are a regression baseline, not a claim of complete WCAG conformance; manual keyboard, zoom, screen-reader, and visual review remain part of release work.

Repository documentation:

• Contributing
• Security policy
• Architecture
• Public extension points
• Roadmap
• WordPress.org readiness
• Migration audit
• WPCode migration boundary
• Changelog

Theme boundaries

Slateframe deliberately does not implement analytics, SEO metadata ownership, caching/CDN logic, business data, custom course/project storage, or a required multilingual implementation. Those responsibilities belong to WordPress core, plugins, or services.

The theme provides semantic markup and coexists with SEO, table, TOC, multilingual, and content plugins without duplicating their responsibilities.

License

Slateframe is free software released under GPL-3.0-or-later. See LICENSE.