Django
Use AdminKit in a Django project with a base template that loads the CSS and JavaScript from the CDN and a dashboard page that extends it.
Django projects have no JavaScript build step by default, so the simplest integration loads the compiled AdminKit files from the CDN in a base template that your pages extend.
Install
Create a project and a project-level templates/ directory:
pip install django
django-admin startproject config my-app
cd my-app
mkdir templatesRegister the directory in the template settings:
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [BASE_DIR / 'templates'],
# ...
},
]The AdminKit files load from https://unpkg.com/@adminkit/core/dist/. To serve them yourself, copy dist/ (from npm pack @adminkit/core, or from the AdminKit PRO download) into a static directory, because Django serves files only from its static directories, and reference the files with {% static %}.
Import the CSS and JavaScript
The base template loads the stylesheet in <head> and app.js at the end of <body>.
<link href="https://unpkg.com/@adminkit/core/dist/css/app.css" rel="stylesheet">
<!-- ... -->
<script src="https://unpkg.com/@adminkit/core/dist/js/app.js"></script>Optional: avoid a color mode flash
Without head.js, app.js applies the stored color mode once it runs, so a visitor who picked the mode opposite to their operating system briefly sees the other one. head.js applies it before the first paint. Load it as a plain script in <head>, before the stylesheet:
<script src="https://unpkg.com/@adminkit/core/dist/js/head.js"></script>Minimal layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>{% block title %}Dashboard{% endblock %}</title>
<link href="https://unpkg.com/@adminkit/core/dist/css/app.css" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<nav id="sidebar" class="sidebar js-sidebar offcanvas-lg offcanvas-start" tabindex="-1" aria-label="Sidebar">
<div class="sidebar-content js-simplebar">
<a class="sidebar-brand" href="{% url 'dashboard' %}">
<span class="align-middle">AdminKit</span>
</a>
<ul class="sidebar-nav">
<li class="sidebar-header">Pages</li>
<li class="sidebar-item {% if request.path == '/' %}active{% endif %}">
<a class="sidebar-link" href="{% url 'dashboard' %}">
<i class="align-middle" data-lucide="sliders-vertical"></i> <span class="align-middle">Dashboard</span>
</a>
</li>
<li class="sidebar-item {% if request.path == '/admin/' %}active{% endif %}">
<a class="sidebar-link" href="/admin/">
<i class="align-middle" data-lucide="user"></i> <span class="align-middle">Admin</span>
</a>
</li>
</ul>
</div>
</nav>
<div class="main">
<nav class="navbar navbar-expand navbar-light navbar-bg">
<button type="button" class="sidebar-toggle js-sidebar-toggle" aria-controls="sidebar" aria-expanded="true" aria-label="Collapse sidebar">
<i class="hamburger align-self-center"></i>
</button>
</nav>
<main class="content">
<div class="container-fluid p-0">
{% block content %}{% endblock %}
</div>
</main>
</div>
</div>
<script src="https://unpkg.com/@adminkit/core/dist/js/app.js"></script>
</body>
</html>{% extends "base.html" %}
{% block content %}
<h1 class="h3 mb-3">Dashboard</h1>
<div class="card">
<div class="card-body">Hello from AdminKit.</div>
</div>
{% endblock %}from django.contrib import admin
from django.urls import path
from django.views.generic import TemplateView
urlpatterns = [
path("", TemplateView.as_view(template_name="dashboard.html"), name="dashboard"),
path("admin/", admin.site.urls),
]Run
python manage.py runserverOpen http://127.0.0.1:8000. You should see the dark sidebar, the navbar with the hamburger toggle and the card.
Notes
- The CDN URLs above are unpinned and serve the latest published version. Pin a version in production, for example
https://unpkg.com/@adminkit/core@<version>/dist/js/app.js. - Django's admin at
/admin/keeps its own styling. AdminKit applies only to pages that extendbase.html.
Last updated on