A Bulma Theme for Django Projects
A Django base theme based on Bulma (bulma.io). Bulma is a modern CSS framework based on Flexbox.
*** work in progress ***
Installation
- 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 .
.
- Add to INSTALLED_APPS in your settings.py:
'bulma',
- 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 %}
-
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
-
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
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
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?
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.
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
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?
{% endblock content %}
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
Broken translation in allauth templates
I have noticed that some translations in
allauth/account
are broken after overriding them withbulma/account
.See for instance
If you have not created an account yet, then please sign up first.
inbulma/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.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.pyMy context seems ok ?
Variable | Value -- | -- context |
{'classes': {'label': '', 'single_value': '', 'value': ''}, 'form': <AuthenticationForm bound=False, valid=False, fields=(username;password)>}
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.
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
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 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 languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
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.
Commits
298bfa5
v6.5.3ed0f5dc
[Fix]parse
: ignore__proto__
keys (#428)691e739
[Robustness]stringify
: avoid relying on a globalundefined
(#427)1072d57
[readme] remove travis badge; add github actions/codecov badges; update URLs12ac1c4
[meta] fix README.md (#399)0338716
[actions] backport actions from main5639c20
Clean up license text so it’s properly detected as BSD-3-Clause51b8a0b
add FUNDING.yml45f6759
[Fix] fix for an impossible situation: when the formatter is called with a no...f814a7f
[Dev Deps] backport from mainDependabot 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 languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
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
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
7efb22a
1.2.6ef88b93
security notice for additional prototype pollution issuec2b9819
isConstructorOrProto adapted from PRbc8ecee
test from prototype pollution PRDependabot 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 languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
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.
... (truncated)
Commits
918dcb3
Lint fix0a21792
Set rejectUnauthorized to true by default (#3149)e80d4af
chore: Drop EOL Node 15 (#3122)d753397
feat: Add Node 17 support (#3195)dcf2e75
build(deps-dev): bump eslint from 7.32.0 to 8.0.0bfa1a3c
build(deps): bump actions/setup-node from 2.4.0 to 2.4.180d6c00
chore: Windows x86 on GitHub Actions (#3041)566dc27
build(deps-dev): bump fs-extra from 0.30.0 to 10.0.0 (#3102)7bb5157
build(deps): bump npmlog from 4.1.2 to 5.0.0 (#3156)2efb38f
build(deps): bump chalk from 1.1.3 to 4.1.2 (#3161)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 languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
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.