Skip to content

KunalPareek21/openframe

BranchesTags

Repository files navigation

OpenFrame

A modern, engineering-focused WordPress theme for developers, technical writers, and open source contributors.

Overview

OpenFrame is a production-ready WordPress theme built for developers who care about code quality, accessibility, and maintainability. It is not a portfolio template or a marketing gimmick — it is a proper engineering product with a real architecture, real accessibility implementation, and real long-term maintainability goals.

Theme Positioning:

  • Engineering blogs
  • Developer portfolios
  • Open source project websites
  • Technical writing
  • Documentation-heavy sites
  • SaaS and developer-tool landing pages
  • Async-first team websites

Design Philosophy

  • Content first — typography, readability, and structure before aesthetics
  • Accessibility first — WCAG AA compliance built in, not bolted on
  • Performance first — minimal JS, deferred loading, preloaded fonts, no bloat
  • Maintainability first — modular PHP, semantic CSS, documented code
  • Gutenberg native — built around the block editor, theme.json, and block patterns

Features

WordPress Features

  • Full Gutenberg / block editor support
  • theme.json global styles, color palette, typography, spacing
  • Custom block styles and block patterns
  • Template hierarchy support
  • Full Site Editor compatible template parts
  • Custom page templates (Full Width, Documentation, Landing Page, Project)
  • Custom navigation menus (Primary, Footer, Social, Documentation)
  • Widget areas (Sidebar, Footer columns 1-3, Documentation)
  • Custom image sizes
  • Post formats
  • Featured images
  • Editor styles (front-end parity)
  • RTL stylesheet support
  • HTML5 semantic markup

Design System

  • Dark minimal engineering aesthetic (default)
  • Optional light mode with CSS custom properties
  • System preference detection (prefers-color-scheme)
  • User toggle persisted to localStorage
  • Inter typeface for UI and prose
  • JetBrains Mono for code
  • Curated color palette with accessible contrast ratios
  • Fluid typography with clamp()
  • Consistent 10-step spacing scale
  • Subtle transitions respecting prefers-reduced-motion

Templates

  • index.php — Blog index / fallback
  • single.php — Single post
  • page.php — Standard page
  • front-page.php — Front page
  • archive.php — Generic archive
  • category.php — Category archive
  • tag.php — Tag archive
  • author.php — Author archive
  • search.php — Search results
  • 404.php — Error page
  • templates/full-width.php — Full-width page template
  • templates/documentation.php — Documentation layout
  • templates/landing-page.php — Minimal landing page
  • templates/project.php — Project / case study

Block Patterns

  • Hero — Dark Engineering
  • Engineering Blog Grid
  • Project Showcase
  • Feature Grid Section
  • Call to Action
  • Developer Profile / About
  • Open Source / GitHub Section

Accessibility

  • Skip links (content, navigation, sidebar, footer)
  • Semantic landmark regions (main, nav, aside, footer)
  • aria-current="page" on active navigation items
  • aria-expanded on toggle buttons
  • aria-label on all navigation regions
  • Focus trap in mobile menu
  • Keyboard-navigable sub-menus
  • Accessible comment form
  • Proper heading hierarchy

Performance

  • No jQuery dependency in front-end scripts
  • Deferred JS loading
  • Font preloading with <link rel="preload">
  • System emoji removed (no emoji.js)
  • preconnect hints for Google Fonts
  • Lazy loading for images
  • Minimal CSS bundle split across logical files

Installation

From WordPress Admin

  1. Download the theme ZIP from GitHub
  2. Go to Appearance → Themes → Add New → Upload Theme
  3. Upload the ZIP and activate

Manual Installation

  1. Extract the theme folder
  2. Upload openframe/ to wp-content/themes/
  3. Activate from Appearance → Themes

Via WP-CLI

wp theme install path/to/openframe.zip --activate

Setup

After activation:

  1. Set your logo — Appearance → Customize → Site Identity → Custom Logo
  2. Configure menus — Appearance → Menus → assign to Primary, Footer, Social, Documentation locations
  3. Set static front page (optional) — Settings → Reading → A static page
  4. Configure widgets — Appearance → Widgets → Sidebar Primary, Footer columns
  5. Explore patterns — In the block editor, open the Inserter → Patterns → OpenFrame

See docs/setup.md for full setup instructions.

Folder Structure

openframe/
├── assets/
│   ├── css/
│   │   ├── tokens.css         Design tokens (custom properties)
│   │   ├── base.css           Reset and base typography
│   │   ├── layout.css         Site layout system
│   │   ├── components.css     UI components
│   │   ├── navigation.css     Navigation styles
│   │   ├── blocks.css         Gutenberg block overrides
│   │   ├── color-modes.css    Dark/light mode transitions
│   │   └── editor.css         Block editor styles
│   ├── js/
│   │   ├── navigation.js      Mobile menu, search modal, keyboard nav
│   │   ├── color-mode.js      Dark/light mode manager
│   │   ├── skip-link-focus-fix.js  Accessibility fix for Safari
│   │   └── editor.js          Block editor script
│   ├── images/                Theme images
│   └── fonts/                 Local fonts (if self-hosting)
├── docs/                      Documentation
├── inc/
│   ├── setup/                 Theme setup, enqueue, menus, images, editor, widgets
│   ├── blocks/                Block styles, block categories
│   ├── patterns/              Pattern registration
│   ├── template-tags/         Post meta, navigation, pagination helpers
│   ├── accessibility/         Skip links, ARIA helpers
│   ├── performance/           Resource hints, body classes
│   └── utilities/             Sanitization and helper functions
├── parts/                     Template parts (content, content-none, etc.)
├── patterns/                  Block patterns (PHP files)
├── templates/                 Custom page templates
├── styles/                    Alternative theme.json style variations
├── languages/                 Translation files
├── functions.php              Main entry point — loads all inc/ files
├── style.css                  Theme header
├── theme.json                 Global styles, typography, color, spacing
├── index.php                  Blog index fallback
├── single.php                 Single post
├── archive.php                Archive
├── search.php                 Search results
├── 404.php                    Error page
├── page.php                   Standard page
├── front-page.php             Front page
├── author.php                 Author archive
├── category.php               Category archive
├── tag.php                    Tag archive
├── header.php                 Site header
├── footer.php                 Site footer
├── sidebar.php                Primary sidebar
└── comments.php               Comments template

Development Workflow

OpenFrame uses no build tools by default for maximum simplicity. CSS and JS are authored directly. If you want to add a build step:

  1. Add a package.json with your preferred toolchain (Vite, esbuild, etc.)
  2. Point build output to assets/css/ and assets/js/
  3. Update version strings in functions.php for cache busting

Code Standards

Customization

See docs/customization.md for full guidance.

Quick reference:

  • Colors and typography — edit theme.json or override in assets/css/tokens.css
  • Layout widths — edit --container-* custom properties in tokens.css
  • Add custom block styles — extend inc/blocks/block-styles.php
  • Add block patterns — create PHP files in patterns/
  • Extend templates — use child theme or template override hooks

Accessibility

OpenFrame targets WCAG 2.1 Level AA compliance. See docs/accessibility.md for implementation details.

Key implementations:

  • Visible skip links on focus
  • Full keyboard navigability
  • Semantic landmark structure
  • aria-current, aria-expanded, aria-label throughout
  • Accessible focus rings (2px accent-color outline)
  • prefers-reduced-motion respected
  • Screen reader-only text helpers

Performance Goals

  • Lighthouse Performance: 90+
  • Lighthouse Accessibility: 100
  • Lighthouse Best Practices: 100
  • Lighthouse SEO: 100
  • No jQuery on front-end
  • < 50KB total CSS
  • < 10KB total JS (front-end)

Contributing

See docs/contribution-guide.md.

Contributions are welcome. Please follow WordPress Coding Standards and maintain accessibility compliance in all changes.

License

OpenFrame is licensed under the GNU General Public License v2 or later.

See https://www.gnu.org/licenses/gpl-2.0.html

Author

Kunal Pareek https://kunalpareek.in

Changelog

See CHANGELOG.md

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages