Introduction to Spellbook Styles

Django Spellbook includes a comprehensive set of utility and component classes that make it easy to style your content consistently. These styles were originally created for the built-in blocks, but they're available for you to use in your own templates and custom blocks.

Including the Styles

Add the styles to your template with the spellbook_styles template tag:


{% load spellbook_tags %}
<head>
...
{% spellbook_styles %}
...
</head>

⚠️

Be sure that they are included in the head of your HTML, preferrably in your base template or a `% block extra_css %', to make sure all extended templates will benefit.

Style Categories

Spellbook's styles are divided into two main categories:

1. Utility Classes

Small, single-purpose classes that handle common styling needs:

Spacing (padding, margins)
Borders and shadows
Typography
Colors
Flexbox layouts
Transitions

These are prefixed with spellbook- to avoid conflicts with your existing styles:

<div class="spellbook-p-3 spellbook-mb-3 spellbook-border">
    Padded, with margin and border
</div>

2. Component Classes

Pre-styled components used by the built-in blocks:

Alert components
Card layouts
Navigation elements

These create consistent, polished UI elements:

<div class="sb-card">
    <div class="sb-card-body">
        A nice card layout
    </div>
</div>

A nice card layout

ℹ️

All Spellbook styles use the sb- prefix to prevent conflicts with your project's existing CSS. This means you can safely use them alongside other CSS frameworks.

Want to see the specific classes available? Check out:

Style Philosophy

Spellbook's styles are designed to be:

Predictable: consistent naming patterns
Non-invasive: won't affect your existing styles
Composable: mix and match as needed
Responsive: work well on all devices