These docs are a work-in-progress and are currently undergoing a major rewrite!

Quickstart templates

A new Forge project will come with a base.html to get you started. The look and feel of your app is totally up to you, and you can immediately start customizing it by changing the Tailwind classes.

The blocks in the default base.html are just suggestions. But you should keep a {% block content %} and {% block html_title %} as those are used in the Forge authentication templates.

The quickstart base.html looks something like this:

{% load static %}
<!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 html_title %}{{ html_title }}{% endblock %}</title>

    <link href="{% static 'dist/tailwind.css' %}" rel="stylesheet">

    {% block head_scripts %}{% endblock %}
  </head>
  <body class="{% block body_class %}flex flex-col bg-gray-50 min-h-screen{% endblock %}">

    {% block header %}
    {% if request.user.is_authenticated %}
    <div class="flex bg-white border-b border-gray-200">
        <div class="container flex items-center justify-between px-4 py-4 mx-auto">
            <a class="px-3 py-2 text-gray-800 rounded hover:bg-gray-200" href="/">Home</a>
            <div class="flex space-x-2">
                <a class="flex items-center px-3 py-2 text-gray-800 rounded hover:bg-gray-200" href="{% url 'my_account' %}">
                    My Account
                </a>
                <a class="flex items-center px-3 py-2 text-gray-800 rounded hover:bg-gray-200" href="{% url 'logout' %}">
                    Log out
                </a>
            </div>
        </div>
    </div>
    {% endif %}
    {% endblock %}

    {% block content_container %}
    <div class="container flex flex-col flex-grow px-4 pt-4 mx-auto">
        {% block content %}{% endblock %}
    </div>
    {% endblock %}

    {% block footer %}
    <div class="container px-4 mx-auto mt-10">
        ...
    </div>
    {% endblock %}

    {% block footer_scripts %}{% endblock %}

  </body>
</html>