Ctrlk
For the complete documentation index, see llms.txt. This page is also available as Markdown.

Systems

CivicTheme has several unique architectural approaches for developing themes that promote component-centric development and maintainability. Understanding these systems is essential for building sites that work effectively within the CivicTheme ecosystem.

Overview

CivicTheme's development approach is built around these core systems:

  • Component-centric architecture - Organised folders for styles, JavaScript, and templates

  • Template separation - Component Twig templates separated from Drupal *.html.twig files

  • Preprocess functions - Custom functions to populate component template properties

  • Color system - Custom color overrides and theming capabilities

  • Build system - Custom asset compilation and development workflow

System Documentation

Each system has detailed documentation that explains implementation patterns and best practices:

Build System

Learn about CivicTheme's custom build system, including asset compilation, configuration, and development workflows.

Colors

Explore the color override system and how to customise CivicTheme's design tokens.

Components

Understand the component-centric approach, including template separation, preprocess functions, and how to map Drupal data to component properties.

Mapping

Discover how Drupal entities are mapped to component templates and properties.

Related Documentation

Component Development

  • Templates - How to use CivicTheme UI Kit components in Drupal

  • Namespaces - Component namespace system and organisation

  • Assets - Asset management and component structure

Learning Path

To effectively work with CivicTheme systems:

  1. Start with the basics: Read Templates to understand component separation

  2. Understand the build system: Review Build System for development workflow

  3. Learn component mapping: Study Components for data flow patterns

  4. Customise appearance: Explore Colors for theming

Key Benefits

Learning these systems enables you to:

  • Build component-centric sites that are maintainable and scalable

  • Create reusable patterns that work across different projects

  • Leverage CivicTheme's ecosystem effectively

  • Maintain consistent design and development standards

  • Extend functionality without breaking existing patterns

Getting Help

PreviousAutomated list
NextBuild System

Last updated

Was this helpful?