Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/paulino/django-bootstrap-sidebar
Collapsible Sidebar using Bootstrap for Django
https://github.com/paulino/django-bootstrap-sidebar
bootstrap bootstrap5 django-template theme
Last synced: 3 months ago
JSON representation
Collapsible Sidebar using Bootstrap for Django
- Host: GitHub
- URL: https://github.com/paulino/django-bootstrap-sidebar
- Owner: paulino
- License: apache-2.0
- Created: 2022-01-27T20:36:05.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2024-09-07T14:09:04.000Z (4 months ago)
- Last Synced: 2024-10-01T18:08:40.300Z (3 months ago)
- Topics: bootstrap, bootstrap5, django-template, theme
- Language: HTML
- Homepage:
- Size: 465 KB
- Stars: 13
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Collapsible Sidebar Using Bootstrap for Django
*Collapsible Sidebar Using Bootstrap* is a base template with a bootstrap simple
customization in self-hosted mode (non-CDN).
Features:
- Bootstrap 5.3
- Django 4
- Included demo at [example folder](example)
- Templates included:
- bootstrap_base.html
- snippets/show_err.html
- snippets/show_messages.html
- Templates overridden:
- registration/login.html
- registration/password_change_form.html
- 403.html
- 404.html
- 500.html
- Bootstrap customization available at bootstrap-theme directory.
- Custom font from google-fonts in local static files.
Bootstrap theme and fonts are customizable using scripts included. See details
[bellow](#customize-bootstrap-theme).
## Testing templates with example/demo
An example is included in the [example folder](example) with a Makefile to
initialize the project and preview the templates. More details in
[example/README](example/README.md)
## Template preview
## Installation
The preferred way to install is via pip
pip3 install django-bootstrap-sidebar
but you can install in develop mode cloning this repo but static files are not
included in the repo. See *Customize bootstrap theme section* for details.
After installing your Django instance in `settings.py`, add `bootstrapsidebar`
before `django.contrib.auth` since some auth templates are overridden.
```python
INSTALLED_APPS = [
'bootstrapsidebar'
'django.contrib.auth',
...
]
```
## Blocks available in page layout
The base template (`bootstrap_base.html`) includes the following hierarchical
blocks:
- *block custom-css*
- *block head*
- *block page-wrapper*: to override full page, included sidebar.
- *block sidebar*
- *block navbar*: to override top navbar
- *navbar-links*: only to add links in default template navbar.
- *block messages*: by default this block uses `snippets/show_messages.html`
- *block content*
- *block footer*
- *block after-bootstrap-js*: used to run extra javascript like to enable
Bootstrap Popovers. [See below details](#enable-bootstrap-popovers)
The `registration/login.html` is an example of page using base-template without
sidebar.
## Customize bootstrap theme
Install the package in dev mode is recommended if you want to customize the
Bootstrap Theme. First clone this repo and install in dev mode:
pip install -e ./django-bootstrap-sidebar
Bootstrap static files and fonts are not included in the repo. They are
generated/downloaded with the commands of makefile but the *node* environment
and `npm` are required.
Bootstrap can be customized at file `bootstrap-theme/custom.scss`. An easy way
to create a new customization is some online theme builder
like and download the *custom.scss*.
To generate/upgrade static files makefile automates the process, run make:
make
## Enable Bootstrap Popovers
Due performance reasons popovers are not default enabled. One way is to enable
popovers everywhere, which requires an extra javascript after the Bootstrap
javascript. The last solution is not optimal, but it is a simple way, a detailed
instructions are available at [Bootstrap
Popovers](https://getbootstrap.com/docs/5.2/components/popovers/)
The block `after-bootstrap-js` is intended to enable popovers and
the following code snippet from Bootstrap can be used:
```html
{% block after-bootstrap-js %}
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
{% endblock %}
```
A full example is included in the example folder in page
[popovers.html](example/app/templates/popovers.html)
## License
The project is licensed under the Apache 2.0 license.
## Author
Developed and maintained by Paulino Ruiz de Clavijo Vázquez