# roots/sage

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/roots-sage).**

13,223 stars · 3,015 forks · PHP · MIT

## Links

- GitHub: https://github.com/roots/sage
- Homepage: https://roots.io/sage/
- awesome-repositories: https://awesome-repositories.com/repository/roots-sage.md

## Topics

`acorn` `blade` `laravel` `php` `sage` `tailwindcss` `wordpress` `wordpress-laravel` `wordpress-starter-theme` `wordpress-theme`

## Description

Sage is a WordPress starter theme that provides a foundation for building sites using professional software engineering patterns and modern development workflows. It functions as a theme architecture designed for native compatibility with the visual block-based editor.

The project integrates the Laravel Blade templating engine to separate business logic from presentation using reusable components. It incorporates the Tailwind CSS framework for building responsive user interfaces via a utility-first approach and includes a modern frontend build tool to provide asset compilation and hot-reloading.

The system further decouples logic from views through controller-based separation and manages internationalization via automatic translation-file generation. It also defines global visual configurations for colors, fonts, and spacing to maintain design consistency across the site.

## Tags

### Content Management & Publishing

- [WordPress Theme Starter Kits](https://awesome-repositories.com/f/content-management-publishing/wordpress-theme-starter-kits.md) — Serves as a foundation for building WordPress sites using professional software engineering patterns.
- [CMS Toolkits](https://awesome-repositories.com/f/content-management-publishing/cms-toolkits.md) — Integrates a specialized toolkit to enable modern application features within the WordPress environment. ([source](https://github.com/roots/sage#readme))

### Development Tools & Productivity

- [Asset Compilation Pipelines](https://awesome-repositories.com/f/development-tools-productivity/asset-compilation-pipelines.md) — Processes styles and scripts through a high-performance build pipeline to optimize production delivery.
- [WordPress](https://awesome-repositories.com/f/development-tools-productivity/development-platforms/wordpress.md) — Functions as a comprehensive starter theme for building WordPress sites with modern workflows.
- [Frontend Build Tools](https://awesome-repositories.com/f/development-tools-productivity/build-tooling/build-orchestration-logic/build-orchestration-configuration/build-automation-systems/frontend-build-tools.md) — Includes a build tool that compiles assets and provides hot-reloading for faster iteration.
- [Frontend Development Environments](https://awesome-repositories.com/f/development-tools-productivity/frontend-development-environments.md) — Provides a modern development environment with optimized asset compilation and hot-reloading.

### Software Engineering & Architecture

- [Logic and Presentation Separation](https://awesome-repositories.com/f/software-engineering-architecture/logic-and-presentation-separation.md) — Decouples business logic from presentation by routing data through specialized controller classes.
- [Automated String Extraction](https://awesome-repositories.com/f/software-engineering-architecture/application-lifecycle-management/configuration-management/configuration-formats-and-schemas/yaml-configuration-files/locale-translation-files/automated-string-extraction.md) — Automatically extracts localized strings into files to facilitate multi-language content delivery.

### User Interface & Experience

- [Content Block Editors](https://awesome-repositories.com/f/user-interface-experience/content-block-editors.md) — Ensures full compatibility and styling support for the WordPress visual block editor.
- [Block-Based Theme Architectures](https://awesome-repositories.com/f/user-interface-experience/content-block-editors/block-based-theme-architectures.md) — Provides a theme architecture designed for native compatibility with the visual block-based editor.
- [Theme Compatibility Layers](https://awesome-repositories.com/f/user-interface-experience/content-block-editors/theme-compatibility-layers.md) — Provides a compatibility layer ensuring theme layouts support the WordPress visual block editor.
- [Tailwind CSS Integration](https://awesome-repositories.com/f/user-interface-experience/css-component-libraries/tailwind-css-integration.md) — Implements a utility-first CSS approach to create custom layouts without traditional stylesheets.
- [Template Engines](https://awesome-repositories.com/f/user-interface-experience/layout-utilities/presentation-engines/template-engines.md) — Employs a compiled templating system to separate logic from presentation in site layouts.
- [Template Component Renderers](https://awesome-repositories.com/f/user-interface-experience/layout-utilities/presentation-engines/template-engines/server-side-rendering-engines/html-template-renderers/template-component-renderers.md) — Implements reusable UI components by compiling Blade templates into optimized PHP code.
- [Templating Engines](https://awesome-repositories.com/f/user-interface-experience/templating-engines.md) — Utilizes a compiled template engine to separate business logic from presentation.
- [Utility-First CSS](https://awesome-repositories.com/f/user-interface-experience/utility-first-css.md) — Integrates a utility-first CSS framework to build responsive user interfaces without writing custom stylesheets. ([source](https://github.com/roots/sage/blob/main/README.md))
- [Design Tokens](https://awesome-repositories.com/f/user-interface-experience/design-tokens.md) — Defines shared styles for colors, fonts, and spacing to maintain a consistent look and feel across all pages. ([source](https://github.com/roots/sage/blob/main/theme.json))
- [Translation Management](https://awesome-repositories.com/f/user-interface-experience/frontend-ui-toolkits/right-to-left-support/translation-management.md) — Generates and manages translation files to map interface text for multi-language support. ([source](https://github.com/roots/sage/blob/main/package.json))

### Web Development

- [Utility-First CSS Frameworks](https://awesome-repositories.com/f/web-development/utility-first-css-frameworks.md) — Uses a utility-first CSS approach to build responsive interfaces without custom style sheets.
- [Framework Integrations](https://awesome-repositories.com/f/web-development/framework-integrations.md) — Integrates a professional application framework to provide structured patterns and advanced developer features. ([source](https://github.com/roots/sage/blob/main/README.md))
- [Front-End Development Workflows](https://awesome-repositories.com/f/web-development/front-end-development-workflows.md) — Integrates a build tool that enables instant browser updates and accelerated development cycles. ([source](https://github.com/roots/sage/blob/main/README.md))