# 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](https://docs.civictheme.io/development/drupal-theme/systems/build)

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

### [Colors](https://docs.civictheme.io/development/drupal-theme/systems/colors)

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

### [Components](https://docs.civictheme.io/development/drupal-theme/systems/components)

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

### [Mapping](https://docs.civictheme.io/development/drupal-theme/systems/mapping)

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

## Related Documentation

### Component Development

* [Templates](https://docs.civictheme.io/development/drupal-theme/templates) - How to use CivicTheme UI Kit components in Drupal
* [Namespaces](https://docs.civictheme.io/development/drupal-theme/namespaces) - Component namespace system and organisation
* [Assets](https://docs.civictheme.io/development/drupal-theme/assets) - Asset management and component structure

## Learning Path

To effectively work with CivicTheme systems:

1. **Start with the basics**: Read [Templates](https://docs.civictheme.io/development/drupal-theme/templates) to understand component separation
2. **Understand the build system**: Review [Build System](https://docs.civictheme.io/development/drupal-theme/systems/build) for development workflow
3. **Learn component mapping**: Study [Components](https://docs.civictheme.io/development/drupal-theme/systems/components) for data flow patterns
4. **Customise appearance**: Explore [Colors](https://docs.civictheme.io/development/drupal-theme/systems/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

* [Getting Help](https://docs.civictheme.io/getting-started/getting-help) - Community resources and support
* [Contribution Model](https://docs.civictheme.io/contributing/contribution-model) - How to contribute to the ecosystem
* [GitHub Organisation](https://github.com/civictheme/) - Source code and issues