Basic tasteful designs for your Django project, with sensible defaults.
Features:
- Themes for plain CSS and Bootstrap 5
- App layout for content with a complex UI
- Basic menu support
This project won't replace a proper design, but can help make your prototypes pretty.
Pairs particularly well with nanodjango.
To see a live example, clone this repository and run:
uvx nanodjango run example.py
Install:
pip install django-style
Add to settings.INSTALLED_APPS:
INSTALLED_APPS = [
...
"django_style",
]
and optionally configure using the settings below.
Now just extend base.html in your templates, and
- define a
{% block content %} - pass a
titleand asite_titlein your context - maybe add
site_navorfooter_navlists of menu objects - see how menus work below
Settings are defined globally in your Django settings.
Django-style comes with several themes to fit your development style.
Options:
simple- a plain CSS themebootstrap- a Bootstrap 5 theme
Default: STYLE_THEME = "simple"
App layout is intended for a template where the content has a complex UI layout, like a dashboard or email application which needs toolbars, sidebars and multiple panes. (These elements are left for you to implement).
If STYLE_IS_APP = False, the theme will use the normal layout, where the header and
footer scroll with the content.
If STYLE_IS_APP = True, put the theme into app layout; take up the full window height,
header always visible (and footer if defined), and only the content area is scrollable.
Default: STYLE_IS_APP = False
You can override the theme and layout in your template context:
from django_style import get_base
def my_view(request)
return render(
request,
"my_template.html",
context={
"STYLE_BASE": get_base("bootstrap"),
"STYLE_IS_APP": True,
},
)
Path to the theme's base template.
This can be any string, but you can use the django_style.get_base(theme) helper to
generate the django-style path from the theme name.
Default: f"django_style/{settings.STYLE_THEME}/base.html"
Override the STYLE_IS_APP setting
Default: settings.STYLE_IS_APP
The themes have basic support for a simple single-level menu in the header and footer.
Define your links in your template context with site_nav for header links, and
footer_nav for footer links.
These should be lists of objects with a url and label attribute (or a dict with
those keys). For convenience django-style comes with a Nav(label, view_name) object,
where view_name is automatically resolved to a url using django.urls.reverse.
Example:
from django_style import Nav
def my_view(request)
return render(
request,
"my_template.html",
context={
"site_nav": [
Nav("Home", "index"),
Nav("About", "about"),
Nav("Contact", "contact"),
],
"footer_nav": [
Nav("Privacy policy", "privacy"),
Nav("Contact", "contact"),
],
},
)