Skip to main content

Bulma CSS Framework for Django projects

Project description

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

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

Uploaded Source

Built Distribution

If you're not sure about the file name format, learn more about wheel file names.

django_bulma-0.8.2-py3-none-any.whl (131.1 kB view details)

Uploaded Python 3

File details

Details for the file django-bulma-0.8.2.tar.gz.

File metadata

  • Download URL: django-bulma-0.8.2.tar.gz
  • Upload date:
  • Size: 125.0 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? No
  • Uploaded via: poetry/1.1.4 CPython/3.9.1 Darwin/19.6.0

File hashes

Hashes for django-bulma-0.8.2.tar.gz
Algorithm Hash digest
SHA256 779e23c2b7fe59d7d67b7d9f86c2e097a3128a910331fb78e71f2f93841f7a3a
MD5 373b7c833b0c9b7e32235dde4025ebf1
BLAKE2b-256 df7f622f39a960ac58cff5e619bd9e5928695639561c9610f4dd9760bdb6da57

See more details on using hashes here.

File details

Details for the file django_bulma-0.8.2-py3-none-any.whl.

File metadata

  • Download URL: django_bulma-0.8.2-py3-none-any.whl
  • Upload date:
  • Size: 131.1 kB
  • Tags: Python 3
  • Uploaded using Trusted Publishing? No
  • Uploaded via: poetry/1.1.4 CPython/3.9.1 Darwin/19.6.0

File hashes

Hashes for django_bulma-0.8.2-py3-none-any.whl
Algorithm Hash digest
SHA256 7c682a0f9e15491f9cbebc8867d1d0592e660804962b4ca35bf550731df01321
MD5 5d8a19413c5bb0efbdae0b3086bace53
BLAKE2b-256 ac0e7d78a72abd37a81aed54f75bf1e6734d57c19339b92dc4f68b750f026ed3

See more details on using hashes here.

Supported by

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