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 %} +
My page content
+