From b2e70c370279fc4e12e1e4795ab34042c1aa2628 Mon Sep 17 00:00:00 2001
From: Peter Pfeufer <info@ppfeufer.de>
Date: Mon, 18 Dec 2023 01:22:48 +0100
Subject: [PATCH] [ADD] Docu for templates and bundles

---
 docs/development/custom/aa-framework.md       |  1 +
 .../development/custom/framework/templates.md | 46 +++++++++++++++++++
 2 files changed, 47 insertions(+)
 create mode 100644 docs/development/custom/framework/templates.md

diff --git a/docs/development/custom/aa-framework.md b/docs/development/custom/aa-framework.md
index b2fa5022..071d9eb8 100644
--- a/docs/development/custom/aa-framework.md
+++ b/docs/development/custom/aa-framework.md
@@ -8,4 +8,5 @@ Alliance Auth is providing its own CSS framework with a couple of CSS classes.
 
 framework/api
 framework/css
+framework/templates
 :::
diff --git a/docs/development/custom/framework/templates.md b/docs/development/custom/framework/templates.md
new file mode 100644
index 00000000..bcbe19a2
--- /dev/null
+++ b/docs/development/custom/framework/templates.md
@@ -0,0 +1,46 @@
+# Templates
+
+## Bundles
+
+As bundles, we see templates that load essential CSS and JavaScript and are used
+throughout Alliance Auth. These bundles can also be used in your own apps, so you don't
+have to load specific CSS or JavaScript yourself.
+
+These bundles include DataTables CSS and JS, jQuery Datepicker CSS and JS, jQueryUI CSS and JS, and more.
+
+A full list of bundles we provide can be found here: https://gitlab.com/allianceauth/allianceauth/-/tree/master/allianceauth/templates/bundles
+
+To use a bundle, you can use the following code in your template (Example for jQueryUI):
+
+```django
+{% block extra_css %}
+    {% include "bundles/jquery-ui-css.html" %}
+{% endblock %}
+
+{% block extra_javascript %}
+    {% include "bundles/jquery-ui-js.html" %}
+{% endblock %}
+```
+
+## Template Partials
+
+To ensure a unified style language throughout Alliance Auth and Community Apps,
+we also provide a couple of template partials. This collection is bound to grow over
+time, so best have an eye on this page.
+
+### Page Header
+
+On some pages you want to have a page header. To make this easier, we provide a template partial for this.
+
+To use it, you can use the following code in your template:
+
+```django
+{% block content %}
+    <div>
+        {% translate "My Page Header" as page_header %}
+        {% include "framework/header/page-header.html" with title=page_header %}
+
+        <p>My page content</p>
+    </div>
+{% endblock %}
+```