Bulma theme for Django

  • By Tim Kamanin
  • Last update: Dec 30, 2022
  • Comments: 16

A Bulma Theme for Django Projects

Django Bulma

A Django base theme based on Bulma (bulma.io). Bulma is a modern CSS framework based on Flexbox.

*** work in progress ***

Installation

  1. Install the python package django-bulma from pip

pip install django-bulma

Alternatively, you can install download or clone this repo and call pip install -e ..

  1. Add to INSTALLED_APPS in your settings.py:

'bulma',

  1. If you want to use the provided base template, extend from bulma/base.html:
{% extends 'bulma/base.html' %}

{% block title %}Bulma Site{% endblock %}

{% block content %}
  Content goes here...
{% endblock content %}

  1. If you want to customize bulma sass and your own components:

    4.1 Copy bulma static files into your project's STATIC_ROOT:

    python manage.py copy_bulma_static_into_project

    You should see bulma dir appeared in your STATIC_ROOT. It contains two dirs:

    • sass - this is the place where you can put your own sass code and customize bulma variables
    • css - this is where compiled sass output goes, you should link this file in your base.html

    4.2 Install npm packages for sass compilation to work:

    python manage.py bulma install

    4.3 Start sass watch mode:

    python manage.py bulma start

  2. For forms, in your templates, load the bulma_tags library and use the |bulma filters:

    Example template
    {% load bulma_tags %}

{# Display a form #}

<form action="/url/to/submit/" method="post">
   {% csrf_token %}
   {{ form|bulma }}
   <div class="field">
     <button type="submit" class="button is-primary">Login</button>
   </div>
   <input type="hidden" name="next" value="{{ next }}"/>
</form>

Included templates

django-bulma comes with:

  • a base template,
  • django core registration templates,

Bugs and suggestions

If you have found a bug or if you have a request for additional functionality, please use the issue tracker on GitHub.

https://github.com/timonweb/django-bulma/issues

Github

https://github.com/timonweb/django-bulma

Comments(16)

  • 1

    Issue with help text in Signup page template

    Hi @timonweb, firstly really really great job on the Django Bulma integration. Really love the work you've put into this.

    I am however getting a formatting issue when I am trying to render the Signup page:

    I am attaching the screenshot of what I mean.

    The help text below the Password field is not getting rendered properly. I think the issue is because of this template file

    screen shot 2018-01-31 at 6 07 50 pm
  • 2

    Error running python manage.py bulma install on rasp pi

    Hi all, I'm trying to install django-bulma in my django project.

    After I executed "python manage.py copy_bulma_static_into_project" on my rasp pi, I had this issue:

    FileNotFoundError [Errno 2] no such file or directory 'npm'

    Could anyone try to help me?

  • 3

    Add basic js functions

    Bulma does not come with the required javascript for some things, unlike Bootstrap. It is necessary to write it to get modals, menu toggle, tabs to work ...

    I've seen a Bulmajs lib on github but all the examples are in ES6 and I dislike the api. It should not be difficult to write a few simple functions to do the job.

    Would you be open to integrate basic js functions in this module so that we get an all in one ready to use Bulma engine for Django? I can contribute: I need some of these now and I am going to start writing them.

  • 4

    Error running python manage.py bulma install on Windows

    File "c:\python\python36-32\Lib\subprocess.py", line 997, in _execute_child startupinfo) FileNotFoundError: [WinError 2] The system cannot find the file specified

  • 5

    Possible conflict with AllAuth?

    I'm setting up a Django project using AllAuth for user authentication, and django-bulma to provide styling on forms.

    The Signup and Login pages work well, however, when I include "{{form**|bulma**}}" in the Logout form, an error message is generated (pls see attached).

    If I remove the "|bulma" the Logout page functions

    The code on my form is

    {% extends '_base.html' %} {% load bulma_tags %} {% block content %}

    Log Out

    Are you sure you want to Log Out?

    {% csrf_token %} {{form|bulma}}

    {% endblock content %}

    error
  • 6

    customise bulma/base.html

    Hey, I'm new to Django/Bulma, so sorry if this question is stupid. I'd like to customise the bulma/base.html if it is possible, any ideas on how to approach this problem?

    Thank you

  • 7

    Broken translation in allauth templates

    I have noticed that some translations in allauth/account are broken after overriding them with bulma/account.

    See for instance If you have not created an account yet, then please sign up first. in bulma/account/login.html.

    From what I can tell it's because templates in bulma/account have slightly different line breaks and whitespaces, making the string different enough that the i18n machinery is not able to match them.

  • 8

    login template is not working

    I am using django 1.11.5 with python 3.5.3

    When going on the /login url that is using the registration/login.html I have the following error:

    'dict' object has no attribute 'flatten'

    It seems to be linked to context = context.flatten() in bulma_tags.py

    My context seems ok ?

    Variable | Value -- | -- context | {'classes': {'label': '', 'single_value': '', 'value': ''}, 'form': <AuthenticationForm bound=False, valid=False, fields=(username;password)>}

  • 9

    Support for Django 4.0

    Hello, django-bulma does not seem to be fully compatible with Django 4.0 (e.g. The id attribute is missing on rendered fields).

    Also, Template based form rendering should help with forms customization.

  • 10

    Bulma v0.9.3 released

    Hi Timon,

    First of all... thank you for creating this Django extension. Much appreciated.

    Bulma v0.9.3 was released a few months ago. Perhaps you missed it.

    Not sure if you intend to keep this extension updated. Hopefully you do.

    Thanks again for spending your time, skills, and knowledge on this.

    https://github.com/jgthms/bulma/releases/tag/0.9.3

  • 11

    Bump path-parse from 1.0.6 to 1.0.7 in /bulma/static/bulma/sass

    Bumps path-parse from 1.0.6 to 1.0.7.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 12

    Bump qs from 6.5.2 to 6.5.3 in /bulma/static/bulma/sass

    Bumps qs from 6.5.2 to 6.5.3.

    Changelog

    Sourced from qs's changelog.

    6.5.3

    • [Fix] parse: ignore __proto__ keys (#428)
    • [Fix] utils.merge: avoid a crash with a null target and a truthy non-array source
    • [Fix] correctly parse nested arrays
    • [Fix] stringify: fix a crash with strictNullHandling and a custom filter/serializeDate (#279)
    • [Fix] utils: merge: fix crash when source is a truthy primitive & no options are provided
    • [Fix] when parseArrays is false, properly handle keys ending in []
    • [Fix] fix for an impossible situation: when the formatter is called with a non-string value
    • [Fix] utils.merge: avoid a crash with a null target and an array source
    • [Refactor] utils: reduce observable [[Get]]s
    • [Refactor] use cached Array.isArray
    • [Refactor] stringify: Avoid arr = arr.concat(...), push to the existing instance (#269)
    • [Refactor] parse: only need to reassign the var once
    • [Robustness] stringify: avoid relying on a global undefined (#427)
    • [readme] remove travis badge; add github actions/codecov badges; update URLs
    • [Docs] Clean up license text so it’s properly detected as BSD-3-Clause
    • [Docs] Clarify the need for "arrayLimit" option
    • [meta] fix README.md (#399)
    • [meta] add FUNDING.yml
    • [actions] backport actions from main
    • [Tests] always use String(x) over x.toString()
    • [Tests] remove nonexistent tape option
    • [Dev Deps] backport from main
    Commits
    • 298bfa5 v6.5.3
    • ed0f5dc [Fix] parse: ignore __proto__ keys (#428)
    • 691e739 [Robustness] stringify: avoid relying on a global undefined (#427)
    • 1072d57 [readme] remove travis badge; add github actions/codecov badges; update URLs
    • 12ac1c4 [meta] fix README.md (#399)
    • 0338716 [actions] backport actions from main
    • 5639c20 Clean up license text so it’s properly detected as BSD-3-Clause
    • 51b8a0b add FUNDING.yml
    • 45f6759 [Fix] fix for an impossible situation: when the formatter is called with a no...
    • f814a7f [Dev Deps] backport from main
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 13

    switch to dart sass

    node-sass is deprecated (and wouldn't install on my M1 mac ;)) https://www.npmjs.com/package/node-sass/v/7.0.1 Dart's sass was an almost drop-in replacement

  • 14

    Bump minimist from 1.2.5 to 1.2.6 in /bulma/static/bulma/sass

    Bumps minimist from 1.2.5 to 1.2.6.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 15

    Bump node-sass from 4.14.1 to 7.0.0 in /bulma/static/bulma/sass

    Bumps node-sass from 4.14.1 to 7.0.0.

    Release notes

    Sourced from node-sass's releases.

    v7.0.0

    Breaking changes

    Features

    Dependencies

    Community

    • Remove double word "support" from documentation (@​pzrq, #3159)

    Misc

    Supported Environments

    OS Architecture Node
    Windows x86 & x64 12, 14, 16, 17
    OSX x64 12, 14, 16, 17
    Linux* x64 12, 14, 16, 17
    Alpine Linux x64 12, 14, 16, 17
    FreeBSD i386 amd64 12, 14

    *Linux support refers to major distributions like Ubuntu, and Debian

    v6.0.1

    Dependencies

    Misc

    Supported Environments

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 16

    Remove delete button from general form error

    Since bulma doesn't ship with javascript included, the delete/close button does not function. On top of this the delete/close will actually submit the form when clicked. This means the button does not only fail to perform its expected behavior, it also has unintended side effects. It's probably best that the button is removed or that a general message header replaces the button.

    This pull request just removes the malfunctioning button.

Popular Tag

Related