Saturday, May 25th, 2013

Django bootstrap theme is ready!

You can download a project template for this now: http://www.pythondiary.com/templates/bootstraptheme

It's finally ready for developer consumption, my Django bootstrap theme Django app. With this super simple app in your Django project, you can easily apply a site-wide Bootstrap theme in a matter of minutes. Here's an example base.html you would use in your project's templates directory:

{% extends 'bootstrap_theme/starter.html' %}

{% block title %}Bootstrap Django site{% endblock %}

{% block branding %}Django Project{% endblock %}

{% block content %}
Yes Folks, this is how easy it is to implement bootstrap in Django now.  Be sure to look at the other templates available to see what <b>blocks</b> you can override.
{% endblock %}

Be sure to add bootstrap_theme to your INSTALLED_APPS, and this will work like a charm. Here is a list of available base templates you can extend:

base.html
This is the main template which the ones below extend to create the Bootstrap experience.
starter.html
This is the exact starter template from the Bootstrap documentation, it's the most basic and easiest to extend.
fluid.html
Similar to starter, except it allows users to sign in and out, and has a left navigation bar.
marketing.html
The marketing template directly from the bootstrap examples page tailored to work with Django.
marketing_narrow.html
From the bootstrap example page, another version of a marketing page you can try out.
marketing_clean.html
Yet another marketing page example, also from the bootstrap examples page.
carousel.html
The bootstrap carousel example made for Django, the bonus is that the Carousel is driven from the database, so it's easy to add and edit the big Carousel banner.

Wait, there's more... There's a large amount of templatetags at your disposal as well in the bootstrap library which you can load into any template you need it in. Here's what's included:

buttonlink url icon
You can create bootstrap themed buttons with this tag.
emphasis filter
This filter will add special styling to the text, such as muted which is the default, or anything in the text- CSS components.
abbrev filter
This handy filter will create an abbreviation text.
yesnoicon filter
Depending if the value is True or False a different icon is displayed.
ratingicon filter
This super handy filter will create a specific amount of star icons depending on the value.
link filter
Pass in any model object which has a get_absolute_url and it will automatically make it click-able.
carousel group_name
This is used to display a database driven Carousel. The group_name parameter is which group in the database model to display for this instance.
navbar_gradient first_color last_color
This super handy tag will automatically generate the required CSS style needed for the navbar gradient.
modal title modal_id form_action
This block tag is used to generate a modal dialog box, the last 2 options are optional. The first is the title of the dialog box, the second is the unique div ID for the modal, and the last one is the URL which the form inside the modal will be posted to, if the user saves the changes.
icon slug
This is used to display bootstrap icons easily.
modal_button title modal_id icon
This is used to generate the required A tag to display a modal dialog box generated above. The first option is what to display on the button itself, the second is the div ID chosen, and the last one is an icon slug to place on the button. The last two options are optional and have reasonable defaults.

Don't leave yet, there's still one last thing... An include-able template which can display a Django form very elegantly in bootstrap! Finally you can make your Django generated forms look great and functional with very little effort. Here's an example contact form to get you started:

          <form action="{% url 'contact-form' %}" method="post">{% csrf_token %}
            <fieldset>
              <legend>Contact form</legend>
              {% include "bootstrap_form.html" %}
              <button type="submit" class="btn btn-primary">Send Message</button>
            </fieldset>
          </form>

Wow, that's a lot to take in, in the next release I will be adding a bunch of ready made templates for django-registration so that you can get a new Django website up and running in a matter of hours.

Comment #1: Posted 1 year, 6 months ago by ralph lauren

Thank you for the good writeup. It in fact was a amusement account it. Look advanced to far added agreeable from you! However, how could we communicate?

About Me

My Photo
Names Kevin, hugely into UNIX technologies, not just Linux. I've dabbled with the demons, played with the Sun, and now with the Penguins.




Kevin Veroneau Consulting Services
Do you require the services of a Django contractor? Do you need both a website and hosting services? Perhaps I can help.

If you like what you read, please consider donating to help with hosting costs, and to fund future books to review.

Python Powered | © 2012-2014 Kevin Veroneau