mirror of
https://github.com/tabler/tabler.git
synced 2026-08-30 22:01:28 +04:00
129 lines
3.5 KiB
Plaintext
129 lines
3.5 KiB
Plaintext
---
|
|
title: Django
|
|
order: 8
|
|
summary: Set up Tabler in Django and build a first working page.
|
|
description: Install Tabler in Django - serve the CSS and JS through static files and render a minimal template layout with a Tabler card.
|
|
icon: brand-django
|
|
seoDescription: Install `@tabler/core`, load CSS and optional JS in Django templates, and render a minimal page layout with a Tabler card.
|
|
---
|
|
|
|
import TabsPackage from '@components/TabsPackage.astro'
|
|
import CdnImportPackage from '@components/CdnImportPackage.astro'
|
|
import Steps from '@components/Steps.astro'
|
|
|
|
Django templates render server-side HTML, which makes Tabler a drop-in: add Tabler classes to your markup and serve the compiled CSS and JS through Django's static files system — no Node build step required at runtime.
|
|
|
|
You will install `@tabler/core`, copy its compiled assets into your static directory, and render a first template with a Tabler card.
|
|
|
|
## Setup
|
|
|
|
<Steps>
|
|
|
|
### Install Tabler package
|
|
|
|
Install `@tabler/core` with your preferred package manager:
|
|
|
|
<TabsPackage name="@tabler/core" />
|
|
|
|
You can also use CDN files when you need a quick setup:
|
|
|
|
<CdnImportPackage />
|
|
|
|
### Import styles
|
|
|
|
Django can use Tabler in two common ways:
|
|
|
|
- Build frontend assets with npm and serve compiled files.
|
|
- Copy static CSS/JS files into your Django static directory.
|
|
|
|
If you use static files directly, copy the compiled files from the installed npm package into your static directory:
|
|
|
|
```shell
|
|
mkdir -p static/css static/js
|
|
cp node_modules/@tabler/core/dist/css/tabler.min.css static/css/
|
|
cp node_modules/@tabler/core/dist/js/tabler.min.js static/js/
|
|
```
|
|
|
|
Then add Tabler CSS to your base template:
|
|
|
|
```jinja
|
|
{% load static %}
|
|
<link rel="stylesheet" href="{% static 'css/tabler.min.css' %}" />
|
|
```
|
|
|
|
For full theme customization, build from SCSS sources:
|
|
|
|
```scss
|
|
@import '@tabler/core/scss/tabler';
|
|
```
|
|
|
|
### Import and initialize JavaScript
|
|
|
|
Tabler JavaScript is required for interactive components such as dropdowns, modals, and tooltips.
|
|
|
|
If you use static files, include Tabler JS in your base template:
|
|
|
|
```jinja
|
|
{% load static %}
|
|
<script src="{% static 'js/tabler.min.js' %}"></script>
|
|
```
|
|
|
|
Django-specific note: when serving local static assets in production, run `collectstatic` so Tabler files are included in your final static output.
|
|
|
|
### Minimal working example
|
|
|
|
Create a minimal base template in `templates/base.html`:
|
|
|
|
```jinja
|
|
{% load static %}
|
|
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<link rel="stylesheet" href="{% static 'css/tabler.min.css' %}" />
|
|
</head>
|
|
<body>
|
|
{% block content %}{% endblock %}
|
|
<script src="{% static 'js/tabler.min.js' %}"></script>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
Then add a simple page in `templates/home.html`:
|
|
|
|
```jinja
|
|
{% extends "base.html" %}
|
|
|
|
{% block content %}
|
|
<div class="page">
|
|
<div class="page-wrapper">
|
|
<div class="container-xl py-4">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h3 class="card-title">Django + Tabler</h3>
|
|
<p class="text-secondary mb-0">Your Tabler setup is working.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
```
|
|
|
|
Run the app:
|
|
|
|
```shell
|
|
python manage.py runserver
|
|
```
|
|
|
|
Open the local Django URL and confirm the card is styled with Tabler.
|
|
|
|
### Next steps
|
|
|
|
- Continue with [Customize](/ui/getting-started/customize) to adjust styles and build setup.
|
|
- Explore [Layout](/ui/layout) to choose page structures.
|
|
- Browse [Components](/ui/components) to add UI building blocks.
|
|
|
|
</Steps>
|