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 sb- to avoid conflicts with your existing styles:
<div class="sb-p-3 sb-mb-3 sb-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:
-
Theme System New! - Complete color theming
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