Skip to main content

Django application to add the Bulma CSS framework and its extensions

Project description

django-simple-bulma

Build Status Discord

django-simple-bulma is a Django application that makes Bulma and Bulma-Extensions available to use in your Django project with as little setup as possible. The goal of this project is to make it as easy as possible to use Bulma with Django.

This project currently uses Bulma v0.7.2 and Bulma-Extensions v4.0.0. If you want features that are only available in newer versions of these frameworks, please create an issue, and we will be happy to update it.

Installation

To get django-simple-bulma, up and running for your Django project, follow these simple steps:

  • Install it from PyPI with pip install django-simple-bulma (or add it to your Pipfile)

  • In your Django projects settings.py file:

    • Add django_simple_bulma to your INSTALLED_APPS
      INSTALLED_APPS = [
        #...
        'django_simple_bulma',
        #...
      ]
      
    • Add django_simple_bulma.finders.SimpleBulmaFinder to your STATICFILES_FINDERS. This normally holds two default handlers that you will probably want to keep, so unless you have any other custom Finders, it should look like this:
      STATICFILES_FINDERS = [
        # First add the two default Finders, since this will overwrite the default.
        'django.contrib.staticfiles.finders.FileSystemFinder',
        'django.contrib.staticfiles.finders.AppDirectoriesFinder',
      
        # Now add our custom SimpleBulma one.
        'django_simple_bulma.finders.SimpleBulmaFinder',
      ]
      
  • Run python manage.py collectstatic command in order to build Bulma and move it to your staticfiles folder. Please note that you will need to use this command every time you make a change to the configuration, as this is the only way to rebuild the Bulma css file. If you are not using collectstatic, read up on it and start using it.

    This app works fine with Whitenoise, which is a great way to serve static files without needing to mess with your webserver.

  • django-simple-bulma should now be working. In order to import it into your template, simply use the following template tags:

      <head>
          <!-- ... -->
          {% load django_simple_bulma %}
          {% bulma %}
          <!-- ... -->
      </head>
    
  • You're all set! Any Bulma classes you apply should now be working!

Customization

Bulma looks nice by default, but most users will want to customize its look and feel. For this, we've provided a super simple way to change the Bulma variables and to choose which Bulma extensions you want to load into your project.

In order to do this, we'll simply create a dictionary inside your settings.py called BULMA_SETTINGS, and configure it there. Here's an example of what that looks like:

# Custom settings for django-simple-bulma
BULMA_SETTINGS = {
    "extensions": [
        "bulma-accordion",
        "bulma-calendar",
    ],
    "variables": {
        "primary": "#000000",
        "size-1": "6rem",
    }
}

You may here define any variable found on the Bulma variables page, and you may use any valid SASS or CSS as the value. For example, hsl(217, 71%, 53%) would be a valid value for a color variable, as would #ffff00. Please note that any syntactically incorrect values may prevent Bulma from building correctly, so be careful what you add here unless you know exactly what you're doing.

If the extensions key is not found, it will default to loading all extensions. This is 8 js files, so it may add a bit of overhead. If you don't want any extensions, simply set it to an empty list.

Troubleshooting

If you run into any trouble with this app, please create an issue, and we will be happy to help you with it. Alternatively, head over to our discord server at https://discord.gg/python and we'll help you figure it out over chat.

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-bulma-1.0.4.tar.gz (184.3 kB view details)

Uploaded Source

Built Distribution

django_simple_bulma-1.0.4-py3-none-any.whl (227.9 kB view details)

Uploaded Python 3

File details

Details for the file django-simple-bulma-1.0.4.tar.gz.

File metadata

  • Download URL: django-simple-bulma-1.0.4.tar.gz
  • Upload date:
  • Size: 184.3 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/1.12.1 pkginfo/1.4.2 requests/2.21.0 setuptools/39.0.1 requests-toolbelt/0.8.0 tqdm/4.28.1 CPython/3.7.0

File hashes

Hashes for django-simple-bulma-1.0.4.tar.gz
Algorithm Hash digest
SHA256 262900af83213f3ce68fc0920a5827fb71f8a9aded9e9283d52f73325735ff12
MD5 890f374a419f2fae1c0250abbd8fae9e
BLAKE2b-256 b0ce376f4d00eb6ded0e8d16bf4bb16a87bd9b03393e39fd0730edb0d91c819c

See more details on using hashes here.

File details

Details for the file django_simple_bulma-1.0.4-py3-none-any.whl.

File metadata

  • Download URL: django_simple_bulma-1.0.4-py3-none-any.whl
  • Upload date:
  • Size: 227.9 kB
  • Tags: Python 3
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/1.12.1 pkginfo/1.4.2 requests/2.21.0 setuptools/39.0.1 requests-toolbelt/0.8.0 tqdm/4.28.1 CPython/3.7.0

File hashes

Hashes for django_simple_bulma-1.0.4-py3-none-any.whl
Algorithm Hash digest
SHA256 c116e80c9cb75dd25177e6a8fe675f36d0cf60d55783b7151b113ce906528006
MD5 fc83213f126810a8705fad1ee64c0f2a
BLAKE2b-256 550c0a440555943b72a5dc088b151eb33581ba18fa3567167b209b32ba727e69

See more details on using hashes here.

Supported by

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