# Documentation

ECL v5 consists of Vanilla components packages and a twig implementation of those, also released as npm packages.

To maintain these it's important to have a good grasp of few concepts before diving in the code of the packages.

## Getting Started

- **[Developers - Start here](./developers-start-here.md)**: Setup, development commands, testing, and building
- **[Presets](./presets.md)**: How to use ECL presets (NPM, CDN, direct download)
- **[JavaScript](./javascript.md)**: Using ECL JavaScript (ESM, IIFE, events, API)

## Understanding ECL

- **[Core principles](./core-principles.md)**: Fundamentals and design philosophy of ECL
- **[EC & EU systems](./ec-eu-systems.md)**: Understanding the differences between EC and EU systems
- **[ECL structure](./ecl-structure.md)**: Project structure (components, utilities, themes, tools, etc.)
- **[Accessibility](./accessibility.md)**: WCAG compliance and accessibility guidelines

## Development

- **[Conventions](./conventions/README.md)**: Collection of best practices
  - [Components](./conventions/components.md) - Component development conventions
  - [SCSS](./conventions/scss.md) - SCSS styling conventions
  - [JavaScript](./conventions/javascript.md) - JavaScript coding conventions
  - [Git commits](./conventions/git.md) - Commit message guidelines
  - [Linting](./conventions/linting.md) - ESLint and Stylelint configuration
  - [Markdown](./conventions/markdown.md) - Markdown formatting
- **[Decisions](./decisions/README.md)**: Technical and non-technical decisions during the project's evolution
- **[Agentic skills](./agentic/README.md)**: Task-oriented guides for AI assistants (Claude Code, Kiro, Cursor, etc.)