# DBCA Django web template
This project consists of a basic Django application containing HTML
templates that provide a starting point for web applications used by the
[Department](http://www.dbca.wa.gov.au). The base template consists of a mobile-friendly
HTML5 template with a fixed top navbar, plus static assets.
The project also contains functional examples of **login** and
**logged out** templates.
The base templates are based upon [HTML5 Boilerplate](https://html5boilerplate.com).
# Installation
1. Install via pip: `pip install webtemplate-dbca`.
1. Add `'webtemplate_dbca'` to `INSTALLED_APPS`.
1. Ensure that the `staticfiles` application is included and configured
correctly.
1. (Optional) Ensure that you have defined the following named URLs: `login` and
`logout` (this requirement can be overriden, see below).
1. Extend the included base template by placing the following at the head
of your own templates, e.g. `{% extends "webtemplate_dbca/base_b4.html" %}`
1. Place page content within the required blocks (see below).
# Included CSS and JavaScript
The base/base_b4/base_b5 templates include the following CSS and JavaScript assets:
- Modernizr (HTML5 polyfills)
- Bootstrap 3, 4 or 5 (CSS & JS)
- jQuery
Additional styling can be included using the `extra_style` or `extra_js`
blocks, like so::
{% load static from staticfiles %}
{% block extra_style %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'css/custom.css' %}">
{% endblock %}
You can also overide the `base_style` and `base_js` blocks completely to
use different CSS or JS libraries. Note that you will also need to replace the
`top_navbar` block contents if you replace the base Bootstrap CSS & JS.
The version of jQuery which is loaded in the base is by default a slimmed-down
minimal version of the library. To include a different specific version, override
the `jquery_version` block. Example::
{% block jquery_version %}
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
{% endblock %}
**NOTE**: There is no jQuery loaded with the base_b5 template, as it was dropped
as a requirement of Bootstrap.
# Template blocks
The base template contains a number of block tags that are used to render the
content of your project. The main template content blocks are as follows:
- `navbar_links` - used to define navigation links in the top navbar.
- `navbar_auth` - used to display either a **Login** or **Logout** link.
- `page_content` - used to contain the page's main content.
- `page_footer` - used to contain a page footer area.
Note that the `navbar_auth` block contains `{% url %}` templatetags with
named URLs called *login* and *logout*. If this is not required or
inappropriate for your project, simply override the `navbar_auth` block
in a base template like so::
{% block navbar_auth %}{% endblock %}
In addition, a number of context variables are defined:
- `page_title` - used to populate the page **<title>** tags.
- `site_title` - used to populate the projects's title in the top navbar.
- `site_acronym` - used to populate a shorter title in the navbar (B4 template).
Context variables should be passed to templates in every view.
# Bootstrap 4 & 5 examples
The following examples apply to the `base_b4.html` and `base_b5.html` templates.
To extend the base template with an optional row to display alert messages plus
a shaded footer div, try the following (further page content is then injected to
the `page_content_inner` block)::
{% extends "webtemplate_dbca/base_b4.html" %}
{% block extra_style %}
<style>
.footer {background-color: lightgrey}
</style>
{% endblock %}
{% block page_content %}
<div class="container-fluid">
<!-- Messages -->
{% if messages %}
<div class="row">
<div class="col">
{% for message in messages %}
<div class="alert{% if message.tags %} alert-{{ message.tags }}{% endif %}">
{{ message|safe }}
</div>
{% endfor %}
</div>
</div>
{% endif %}
<div class="row">
<div class="col">
{% block page_content_inner %}{% endblock %}
</div>
</div>
</div>
{% endblock %}
{% block page_footer %}
<footer class="footer mt-auto py-3">
<div class="container-fluid">
<div class="row">
<div class="col">
<small class="float-right">© Department of Biodiversity, Conservation and Attractions</small>
</div>
</div>
</div>
</footer>
{% endblock page_footer %}
# Bootstrap 3 examples
The following examples apply to the `base.html` template.
To populate the main content area with a narrow left sidebar and content
area that fills the whole screen width and will collapse elegantly on
narrow or mobile displays::
{% block page_content %}
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-2" id="sidebar">
{% include "sidebar.html" %}
</div>
<div class="col-xs-12 col-sm-8 col-md-9 col-lg-10">
{% block page_content_inner %}{% endblock %}
</div>
</div>
</div>
{% endblock %}
To include a right-aligned copyright line in the footer area::
{% block page_footer %}
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<p class="pull-right">© Department of Biodiversity, Conservation and Attractions</p>
</div>
</div>
</div>
{% endblock %}
To include no navigation links in the top navbar and to prevent the automatic
"navbar button" from showing on narrow displays, overide the `navbar_button`
and `navbar_links` blocks to be empty::
{% block navbar_button %}{% endblock %}
{% block navbar_links %}{% endblock %}
# Development
1. Create a virtualenv and install local requirements using `python setup.py -q install`
1. Run unit tests using `python runtests.py`
Raw data
{
"_id": null,
"home_page": "https://github.com/dbca-wa/webtemplate",
"name": "webtemplate-dbca",
"maintainer": "Ashley Felton",
"docs_url": null,
"requires_python": "",
"maintainer_email": "asi@dbca.wa.gov.au",
"keywords": "django,html,template,bootstrap",
"author": "Ashley Felton",
"author_email": "asi@dbca.wa.gov.au",
"download_url": "https://files.pythonhosted.org/packages/88/fd/519f751fed220d900f80c24a7d354585c584692430d6d9f1c7bee33f897d/webtemplate-dbca-1.7.0.tar.gz",
"platform": null,
"description": "# DBCA Django web template\n\nThis project consists of a basic Django application containing HTML\ntemplates that provide a starting point for web applications used by the\n[Department](http://www.dbca.wa.gov.au). The base template consists of a mobile-friendly\nHTML5 template with a fixed top navbar, plus static assets.\nThe project also contains functional examples of **login** and\n**logged out** templates.\n\nThe base templates are based upon [HTML5 Boilerplate](https://html5boilerplate.com).\n\n# Installation\n\n1. Install via pip: `pip install webtemplate-dbca`.\n1. Add `'webtemplate_dbca'` to `INSTALLED_APPS`.\n1. Ensure that the `staticfiles` application is included and configured\n correctly.\n1. (Optional) Ensure that you have defined the following named URLs: `login` and\n `logout` (this requirement can be overriden, see below).\n1. Extend the included base template by placing the following at the head\n of your own templates, e.g. `{% extends \"webtemplate_dbca/base_b4.html\" %}`\n1. Place page content within the required blocks (see below).\n\n# Included CSS and JavaScript\n\nThe base/base_b4/base_b5 templates include the following CSS and JavaScript assets:\n\n- Modernizr (HTML5 polyfills)\n- Bootstrap 3, 4 or 5 (CSS & JS)\n- jQuery\n\nAdditional styling can be included using the `extra_style` or `extra_js`\nblocks, like so::\n\n {% load static from staticfiles %}\n\n {% block extra_style %}\n {{ block.super }}\n <link rel=\"stylesheet\" href=\"{% static 'css/custom.css' %}\">\n {% endblock %}\n\nYou can also overide the `base_style` and `base_js` blocks completely to\nuse different CSS or JS libraries. Note that you will also need to replace the\n`top_navbar` block contents if you replace the base Bootstrap CSS & JS.\n\nThe version of jQuery which is loaded in the base is by default a slimmed-down\nminimal version of the library. To include a different specific version, override\nthe `jquery_version` block. Example::\n\n {% block jquery_version %}\n <script src=\"https://code.jquery.com/jquery-3.4.1.js\"></script>\n {% endblock %}\n\n**NOTE**: There is no jQuery loaded with the base_b5 template, as it was dropped\nas a requirement of Bootstrap.\n\n# Template blocks\n\nThe base template contains a number of block tags that are used to render the\ncontent of your project. The main template content blocks are as follows:\n\n- `navbar_links` - used to define navigation links in the top navbar.\n- `navbar_auth` - used to display either a **Login** or **Logout** link.\n- `page_content` - used to contain the page's main content.\n- `page_footer` - used to contain a page footer area.\n\nNote that the `navbar_auth` block contains `{% url %}` templatetags with\nnamed URLs called *login* and *logout*. If this is not required or\ninappropriate for your project, simply override the `navbar_auth` block\nin a base template like so::\n\n {% block navbar_auth %}{% endblock %}\n\nIn addition, a number of context variables are defined:\n\n- `page_title` - used to populate the page **<title>** tags.\n- `site_title` - used to populate the projects's title in the top navbar.\n- `site_acronym` - used to populate a shorter title in the navbar (B4 template).\n\nContext variables should be passed to templates in every view.\n\n# Bootstrap 4 & 5 examples\n\nThe following examples apply to the `base_b4.html` and `base_b5.html` templates.\n\nTo extend the base template with an optional row to display alert messages plus\na shaded footer div, try the following (further page content is then injected to\nthe `page_content_inner` block)::\n\n {% extends \"webtemplate_dbca/base_b4.html\" %}\n\n {% block extra_style %}\n <style>\n .footer {background-color: lightgrey}\n </style>\n {% endblock %}\n\n {% block page_content %}\n <div class=\"container-fluid\">\n <!-- Messages -->\n {% if messages %}\n <div class=\"row\">\n <div class=\"col\">\n {% for message in messages %}\n <div class=\"alert{% if message.tags %} alert-{{ message.tags }}{% endif %}\">\n {{ message|safe }}\n </div>\n {% endfor %}\n </div>\n </div>\n {% endif %}\n\n <div class=\"row\">\n <div class=\"col\">\n {% block page_content_inner %}{% endblock %}\n </div>\n </div>\n </div>\n {% endblock %}\n\n {% block page_footer %}\n <footer class=\"footer mt-auto py-3\">\n <div class=\"container-fluid\">\n <div class=\"row\">\n <div class=\"col\">\n <small class=\"float-right\">© Department of Biodiversity, Conservation and Attractions</small>\n </div>\n </div>\n </div>\n </footer>\n {% endblock page_footer %}\n\n# Bootstrap 3 examples\n\nThe following examples apply to the `base.html` template.\n\nTo populate the main content area with a narrow left sidebar and content\narea that fills the whole screen width and will collapse elegantly on\nnarrow or mobile displays::\n\n {% block page_content %}\n <div class=\"container-fluid\">\n <div class=\"row\">\n <div class=\"col-xs-12 col-sm-4 col-md-3 col-lg-2\" id=\"sidebar\">\n {% include \"sidebar.html\" %}\n </div>\n <div class=\"col-xs-12 col-sm-8 col-md-9 col-lg-10\">\n {% block page_content_inner %}{% endblock %}\n </div>\n </div>\n </div>\n {% endblock %}\n\nTo include a right-aligned copyright line in the footer area::\n\n {% block page_footer %}\n <div class=\"container-fluid\">\n <div class=\"row\">\n <div class=\"col-xs-12\">\n <p class=\"pull-right\">© Department of Biodiversity, Conservation and Attractions</p>\n </div>\n </div>\n </div>\n {% endblock %}\n\nTo include no navigation links in the top navbar and to prevent the automatic\n\"navbar button\" from showing on narrow displays, overide the `navbar_button`\nand `navbar_links` blocks to be empty::\n\n {% block navbar_button %}{% endblock %}\n {% block navbar_links %}{% endblock %}\n\n# Development\n\n1. Create a virtualenv and install local requirements using `python setup.py -q install`\n1. Run unit tests using `python runtests.py`\n",
"bugtrack_url": null,
"license": "Apache License, Version 2.0",
"summary": "Base HTML templates for DBCA Django projects",
"version": "1.7.0",
"project_urls": {
"Homepage": "https://github.com/dbca-wa/webtemplate"
},
"split_keywords": [
"django",
"html",
"template",
"bootstrap"
],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "88fd519f751fed220d900f80c24a7d354585c584692430d6d9f1c7bee33f897d",
"md5": "067078314a0dcc9c3f0667b51454e011",
"sha256": "36d0cf2110b948f4008d0761d770409ddd069c16fec4f539ab1bfaeb834ca23b"
},
"downloads": -1,
"filename": "webtemplate-dbca-1.7.0.tar.gz",
"has_sig": false,
"md5_digest": "067078314a0dcc9c3f0667b51454e011",
"packagetype": "sdist",
"python_version": "source",
"requires_python": null,
"size": 44385,
"upload_time": "2024-02-15T05:56:05",
"upload_time_iso_8601": "2024-02-15T05:56:05.276252Z",
"url": "https://files.pythonhosted.org/packages/88/fd/519f751fed220d900f80c24a7d354585c584692430d6d9f1c7bee33f897d/webtemplate-dbca-1.7.0.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2024-02-15 05:56:05",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "dbca-wa",
"github_project": "webtemplate",
"travis_ci": false,
"coveralls": false,
"github_actions": true,
"lcname": "webtemplate-dbca"
}
JSON
