Skip to main content

Bulma CSS Framework for Django projects

Project description

# A Bulma Theme for Django Projects

<a href="https://github.com/timonweb/django-bulma"><img src="https://raw.githubusercontent.com/timonweb/django-bulma/master/demo/static/images/django-bulma-logo.png" alt="Django Bulma"></a>

A Django base theme based on Bulma (<a href="https://bulma.io/">bulma.io</a>). 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 .``.

2. Add to INSTALLED_APPS in your **settings.py**:

`'bulma',`

3. 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 %}

```

4. 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
three dirs:
* **lib** - where we put original and untouched bulma package, in most cases
you shouldn't mess with it
* **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
```

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

##### Example template

```django

{% 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,
* django-allauth account 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](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.5.3.0.tar.gz (743.3 kB view details)

Uploaded Source

File details

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

File metadata

  • Download URL: django-bulma-0.5.3.0.tar.gz
  • Upload date:
  • Size: 743.3 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/1.9.1 pkginfo/1.4.1 requests/2.18.4 setuptools/40.0.0 requests-toolbelt/0.8.0 tqdm/4.19.1.post1 CPython/3.6.0

File hashes

Hashes for django-bulma-0.5.3.0.tar.gz
Algorithm Hash digest
SHA256 6e495c69dc0e08e0e2812da37999b01198bc2959cdc993f63a3ee6d2da227e23
MD5 234abe2ece0268b47923e3ba49a709d1
BLAKE2b-256 33af6ec5ca8a60aabadc17dfd1a5c52e4c41e7a0b98f025a51c69fc7fbb88343

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