Western Friend Django/Wagtail Development

Development guidelines for the Western Friend website (westernfriend.org), a Quaker publication platform built with Django and Wagtail CMS. This skill ensures adherence to accessibility standards, semantic markup, and modern CSS practices.

Package Management

**Always use `uv` for Python package management**, not `pip`:

```bash

Add a new package

uv add <package-name>

Sync dependencies

uv sync

```

Testing

Use Django's built-in test framework, not `unittest` or `pytest`:

```bash

Run tests using Django management command

python manage.py test <path-to-specific-test>

```

Code Style Guidelines

Accessibility Standards

Follow **WCAG 2.1** (Web Content Accessibility Guidelines) and **ARIA 1.1** specifications:

Semantic HTML Markup

Use semantic HTML5 elements instead of generic divs:

**Good:**

```html

<header>...</header>

<nav>...</nav>

<main>...</main>

<section>...</section>

<article>...</article>

<aside>...</aside>

<footer>...</footer>

<figure>

<img src="..." alt="...">

<figcaption>...</figcaption>

</figure>

<time datetime="2024-01-01">...</time>

<address>...</address>

```

**Bad:**

```html

<div class="header">...</div>

<div class="nav">...</div>

```

Use semantic heading hierarchy (`<h1>` through `<h6>`) to structure content properly.

CSS Styling with Tailwind & daisyUI

The project is transitioning to **Tailwind CSS 4.x** with **daisyUI 5.x** components:

**Global styles location:** `/theme/static_src/src/styles.css`

Tailwind Prose for Rich Text

Wrap Wagtail `richtext` filter content with the `prose` class:

```html

<div class="prose">

{{ page.body|richtext }}

</div>

```

This applies Tailwind typography styles to CMS-generated HTML that cannot be manually styled.

UI Icons

Bootstrap Icons package is available. Use icon classes directly:

```html

<i class="bi bi-<icon-name>"></i>

```

Ensure consistent icon usage across the project for UI coherence.

Key Constraints

1. **Never use pip** - always use `uv` for package management

2. **Never use pytest/unittest** - use Django's test framework

3. **Always use semantic HTML** - no divs where semantic elements exist

4. **Follow WCAG 2.1** - ensure all features are accessible

5. **Use Tailwind/daisyUI** - avoid Bootstrap CSS for new code

6. **Define global styles** - add reusable styles to `styles.css`

7. **Apply prose class** - wrap all richtext content for proper typography

Example: Creating an Accessible Form

```html

<form class="max-w-md mx-auto p-6">

<label for="name" class="label">

<span class="label-text">Name</span>

</label>

<input

type="text"

id="name"

name="name"

class="input input-bordered w-full"

required

aria-required="true"

/>

<button type="submit" class="btn btn-primary mt-4">

<i class="bi bi-send"></i>

Submit

</button>

</form>

```