django-cotton

A library for creating reusable UI components in Django using a modern, tag-based syntax.

Workflow: Creating a cotton component

  1. Create a new HTML file within your app’s templates/cotton/ directory (e.g., card.html).

  2. Define the outer wrapper and use {{ attrs }} to ensure standard HTML attributes like class or id pass through.

  3. Place the {{ slot }} variable inside the wrapper to define where nested content will be rendered.

  4. Add specific variables (e.g., {{ title }}) for data that should be passed as attributes.

  5. Call the component in your view template using the <c- prefix followed by the filename (e.g., <c-card title="Hello">World</c-card>).

Workflow: Adding SVG to template

  1. Prompt an LLM to generate the SVG code for a specific icon or shape. Use google-ai-mode-create-svg.md

  2. Create the component file templates/cotton/svg/icon-name.html.

  3. Paste the SVG code into the file.

  4. Reference the icon in your templates using the <c-svg.icon-name /> syntax.