django-bulma-form-templates

Fork of Django Bulma (timonweb)

This fork moves more functionality into the templates, instead of adding CSS in python code.
It is also more extensible, since templates can be included and blocks can be overriden.

For the added functionality, look at section New Additions

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/nkay08/django-bulma/issues

New Additions

The form and fields can be rendered in exactly the same way as before. However, fields can now also be used by simply including a template.

Templates

• bulma/forms/field.html: The basic field template that is included by django-bulma's form.html
• bulma/forms/field_include.html: Can be included directly with a with field=form.<your_field> statement. Does NOT add markup classes, but they can be provided manually.
• bulma/forms/bulma_field_include.html: Can be included directly with a with field=form.<your_field> statement, and adds markup classes like the bulma template filter
• bulma/forms/bulma_inline_field_include.html: Can be included directly with a with field=form.<your_field> statement, and adds markup classes like the bulma_inline template filter
• bulma/forms/bulma_horizontal_field_include.html: Can be included directly with a with field=form.<your_field> statement, and adds markup classes like the bulma_horizontal template filter

You can customize the fields, e.g. by extending bulma/forms/field_include.html and overriding its blocks and then changing the respective setting.

Settings

You can specify which templates django-bulma uses for rendering forms and fields, and thus allow extensibility and customization. These affect django-bulma's rendering template filters, but also all field templates that are prefixed with bulma_.

Options for settings.py:

• BULMA_FIELD_TEMPLATE: Specifies which field template is used by bulma rendering. Default "bulma/forms/field_include.html".
• BULMA_FIELD_WRAPPER_TEMPLATE: Specifies which field wrapper template is used by bulma rendering. This wrapper coverts some context dicts to flat variables. Default "bulma/forms/field.html".
• BULMA_FORM_TEMPLATE: Specifies which form template is used by bulma rendering. Default "bulma/forms/form.html".
• BULMA_FORMSET_TEMPLATE: Specifies which formset template is used by bulma rendering. Default "bulma/forms/formset.html".

Bulma CSS

• Inline icons: You can now generate inputs that have inline icons
  • Add has-icons-left or has-icons-right or both as classes_value when including or providing them as parameter when using the bulma template tag
  • You can specify the icon css class with the context icon_left_class and icon_right_class (currently only possible when including template)