Django application to add Buefy, Bulma and Vue to your project
Project description
django-simple-buefy
This project aims to provide an easy, automatic way to include Buefy, Bulma and Vue alongside your Django project.
This project currently make use of Buefy 0.8.7, Bulma 0.7.5 and Vue 2.6.10. If you need something in a newer version of these libraries, please feel free to create an issue and we'll get around to it when we can.
This project is a direct fork of Python Discord's excellent django-simple-bulma project, and it therefore has many similarities with it. Big thanks to the Python Discord team for their work on that project!
Setup
To get django-simple-buefy
up and running for your Django project,
follow these simple steps:
- Install it via Pip (
pip install django-simple-buefy
) or other dependency management tool - In your
settings.py
file:- Add
django_simple_buefy
to yourINSTALLED_APPS
- Add
django_simple_buefy.finders.SimpleBuefyFinder
to yourSTATICFILES_FINDERS
- Add
- Run
python manage.py collectstatic
in order to build and collect all of the assets handled bydjango-simple-buefy
; please note that you'll need to do this again when you change yourdjango-simple-buefy
configuration - In your templates, load
django_simple_buefy
to make use of its template tags:{% buefy %}
placed in your template's<head>
will insert script and link tags for the filesdjango-simple-buefy
provides
- Create your Vue app and get hacking!
Please note that unlike django-simple-bulma
, django-simple-buefy
does not provide
any icon sets. Buefy recommends Material Design Icons,
but Font-Awesome 5 is also fully compatible.
Customisation
Like django-simple-bulma
, this project supports customisation of the SASS variables
that are used by Bulma and Buefy. You can do this in a similar fashion, by creating
the BUEFY_SETTINGS
dictionary within your setup.py
.
BUEFY_SETTINGS = {
"variables": {
"primary": "#000",
"size-1": "6rem"
}
}
All values must be valid SASS or CSS. For more information on the variables you can customise, please see the Buefy documentation.
Template Tag Settings
Added in version 1.0.3
Because there are many different situations that need to be addressed by a
library like this, django-simple-buefy
contains some additional settings
for your project.
Module Mode
By default, django-simple-buefy
will assume that you'd like to make use of
ES6 modules, and the {% buefy %}
tag
will only include the relevant Buefy <script>
tags to support this. To change
this behaviour, you can set the following values:
BUEFY_SETTINGS = {
# Include both ES6 "module" and vanilla "nomodule" tags
"modules": None,
}
BUEFY_SETTINGS = {
# Include only vanilla "text/javascript" tags, without "nomodule"
"modules": False,
}
If you'd like to ensure the default behaviour, then you can set this value
to True
as well.
BUEFY_SETTINGS = {
# Include only ES6 "module" tags
"modules": True,
}
Please note that the setting above also affects Vue <script>
tags. If you're
using Vue as a module, it's still up to you to import
it in your own scripts.
This library does not support CommonJS
modules.
Debug Mode
By default, the {% buefy %}
template tag will insert <script>
tags pointing
to minified versions of the relevant libraries. When you're developing, it can
be useful to use the non-minified versions of your JavaScript libraries - so
you can use the debug
setting below to do exactly that.
from os import environ
BUEFY_SETTINGS = {
"debug": "DEBUG" in environ # For example
}
Additional SCSS Files
If your project also includes additional SCSS files, you may specify them in your
settings.py
file in a similar manner.
BUEFY_SETTINGS = {
"custom_scss": [
"myapp/static/css/base/base.scss",
],
}
Please note: The default Django behavior when collecting static files is to keep
the containing file structure for them when they're copied over to the final static
files directory. We attempt to do the same thing by parsing the given path to your
.scss
file, using the following strategy:
- If a containing path exists in the
STATICFILES_DIRS
setting, assume that this is the base path to use, and the directory structure below it will be used to contain the resulting.css
file - Otherwise, if the path contains
static/
, assume that the base path ends there and use the rest of the path below it to contain the resulting.css
file.
If both of these strategies fail to figure out what base path to use, an exception will be raised.
Troubleshooting
- If you have the Python module
sass
installed, please note that it is incompatible with this project. There is a namespace conflict betweensass
andlibsass
which will makedjango-simple-buefy
crash when you attempt to do acollectstatic
. To solve this, just uninstallsass
and uselibsass
instead. - If you're having trouble getting your Vue apps and components correctly, remember to double-check that Buefy has been loaded in advance of your own JavaScript being loaded.
If you run into any other problems with this app, please create an issue and we'll be happy to help you out.
Project details
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Hashes for django-simple-buefy-1.0.4.tar.gz
Algorithm | Hash digest | |
---|---|---|
SHA256 | cad4484735940dc80ae33f01852cf8737ed9af4079e895fd6cb2b5faa0470d0a |
|
MD5 | db21c2a2c3cdbf545f20af5762ce90dc |
|
BLAKE2b-256 | c8c1f802fe2050f867d901229ae3135d9954e5c904d1134a4ec94982aac2ad03 |
Hashes for django_simple_buefy-1.0.4-py3-none-any.whl
Algorithm | Hash digest | |
---|---|---|
SHA256 | 11c579ac2169d8e6bc9ba58c07d806e39916ef000c48e99e4c379dd91556832d |
|
MD5 | 24fb9e2c30c9b49bf8b23e7d7e65603a |
|
BLAKE2b-256 | cefc0f254a2332712a6248ffc89992b34b1a7f8cf239973818b4c67234e9bca3 |