css-styling

name	css-styling
description	Apply DjangoSpire app CSS variables in templates instead of inline styles

CSS Styling in Django Spire

Overview

DjangoSpire provides a layered CSS system that allows your project to define a theme, and DjangoSpire components automatically adapt.

Never use:

• Inline style attributes for colors/backgrounds
• Hardcoded color values like #198754 or rgba(0,0,0,0.1)

Example

<!-- DO -->
<div class="card shadow border-0 rounded-3 bg-app-layer-two text-center text-app-default-text-color p-4">
    Content
</div>

<!-- DON'T -->
<div class="card" style="background-color: #FBFCF8; color: #2C3E36;">
    Content
</div>

How to Find Available Classes

DjangoSpire defines CSS classes that reference theme variables. To find what classes exist:

1. DjangoSpire Core (built-in classes):

   • .venv/Lib/site-packages/django_spire/core/static/django_spire/css/
   • app-background.css → bg-app-* classes
   • app-text.css → text-app-* classes
   • app-border.css → border-app-* classes

2. Your Project Theme (custom variables):

   • static_files/django_spire/css/themes/default/app-light.css
   • static_files/django_spire/css/themes/default/app-dark.css

All app-* classes automatically use your theme's CSS variables, so they work in both light and dark modes.

Common Patterns

<!-- Text colors -->
<span class="text-app-primary">Primary</span>
<span class="text-app-success">Success</span>
<span class="text-app-danger">Danger</span>
<span class="text-app-default-text-color">Default text</span>

<!-- Backgrounds -->
<div class="bg-app-layer-one">...</div>
<div class="bg-app-layer-two">...</div>
<div class="bg-app-primary-soft">Soft primary</div>

<!-- Borders -->
<div class="border-app-primary">...</div>
<div class="border-0">No border</div>

<!-- Combined -->
<div class="card shadow bg-app-layer-two text-app-default-text-color rounded-3">

Exceptions (When Inline Styles Are OK)

• Calculated values: max-height: calc(100vh - 120px)
• Print-only styles: style="background-color: #000" for labels
• Positioning overlays: Fixed positions that can't be expressed in classes

Code Review Checklist

1. No hardcoded colors - Search for # hex codes, rgb(, rgba( in HTML
2. No inline styles for theming - If you see style="color: ...", it should be a class
3. Use app- classes* - Prefer bg-app-layer-two over custom CSS
4. Variable fallbacks - When referencing variables, include fallbacks: var(--app-border-color, rgba(0,0,0,0.1))
5. Check dark mode - App classes work in both themes; inline colors may not