Skip to main content

Django application to add Buefy, Bulma and Vue to your project

Project description

django-simple-buefy

Build Status

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.6, Bulma 0.75 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:

  1. Install it via Pip (pip install django-simple-buefy) or other dependency management tool
  2. In your settings.py file:
    • Add django_simple_buefy to your INSTALLED_APPS
    • Add django_simple_buefy.finders.SimpleBuefyFinder to your STATICFILES_FINDERS
  3. Run python manage.py collectstatic in order to build and collect all of the assets handled by django-simple-buefy; please note that you'll need to do this again when you change your django-simple-buefy configuration
  4. 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 files django-simple-buefy provides
  5. 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.

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

  1. If you have the Python module sass installed, please note that it is incompatible with this project. There is a namespace conflict between sass and libsass which will make django-simple-buefy crash when you attempt to do a collectstatic. To solve this, just uninstall sass and use libsass instead.
  2. 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

django-simple-buefy-1.0.2.tar.gz (1.5 MB view details)

Uploaded Source

Built Distribution

django_simple_buefy-1.0.2-py3-none-any.whl (1.7 MB view details)

Uploaded Python 3

File details

Details for the file django-simple-buefy-1.0.2.tar.gz.

File metadata

  • Download URL: django-simple-buefy-1.0.2.tar.gz
  • Upload date:
  • Size: 1.5 MB
  • Tags: Source
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/2.0.0 pkginfo/1.5.0.1 requests/2.22.0 setuptools/40.8.0 requests-toolbelt/0.9.1 tqdm/4.36.1 CPython/3.7.4

File hashes

Hashes for django-simple-buefy-1.0.2.tar.gz
Algorithm Hash digest
SHA256 6ac9d02283149207b2a77e0977a858213af838dd88551c3a614ebcce9722f37c
MD5 a3ff4508553b9d7610f6b36b4871a77b
BLAKE2b-256 69ffd98c2c44838e1b8f757d303b53e550963221e48691a212d220bed7f6d7eb

See more details on using hashes here.

File details

Details for the file django_simple_buefy-1.0.2-py3-none-any.whl.

File metadata

  • Download URL: django_simple_buefy-1.0.2-py3-none-any.whl
  • Upload date:
  • Size: 1.7 MB
  • Tags: Python 3
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/2.0.0 pkginfo/1.5.0.1 requests/2.22.0 setuptools/40.8.0 requests-toolbelt/0.9.1 tqdm/4.36.1 CPython/3.7.4

File hashes

Hashes for django_simple_buefy-1.0.2-py3-none-any.whl
Algorithm Hash digest
SHA256 1168309df6b0d5021b4acb6f61e547ff8aef2932d9a2c583cd47328e14590cba
MD5 83d53fc142310129b6834438fcc08ded
BLAKE2b-256 599bb13865eb69aa863c3923197a504e346b088e838c13ce7b0feba757df7c5e

See more details on using hashes here.

Supported by

AWS Cloud computing and Security Sponsor Datadog Monitoring Fastly CDN Google Download Analytics Pingdom Monitoring Sentry Error logging StatusPage Status page