Hey folks! I’m back again with another update on my Cassandra/Django project, TikTokTweet! Has you may recall from my last couple blog posts, my UI was pretty sad/non-existent, and so once I felt the backend of the this app was working pretty good, the frontend was definitely in need of some love and attention.

This looks similar to a Tech.ed project i did when I was twelve. My CSS/Javascript skills are questionable at best. Enter Twitter Bootstrap, like a knight in shining “UI” armor. Bootstrap is a very popular HTML, CSS and JavaScript framework. With its free and open-source tools, it makes frontend development quick and easy for everyone. It’s great for people who want to sleek looking websites or apps, but don’t have the skill or aptitude to design them. It has predefined CSS classes and HTML designed templates for a bunch of components, like forms, buttons, navigation, and lots more, as well as Javascript extensions to make any website look pro and stylish. Since the arrival of Bootstrap 3.0, the focus has been on responsive design by default, to give mobile users the best experience possible.

To get going with Bootstrap on my Django project, I first need to set up a file to serve my static files from within the project, and make configuration changes to my settings.py file. This is necessary due to the dynamic nature of Django. I used these blog post as a guideline, and it seemed to work out well. First, I went into my settings.py file and make these changes:

import os
PROJECT_DIR = os.path.dirname(os.path.abspath(__file__))
STATIC_ROOT = os.path.join(PROJECT_DIR, '../static')
# Set this:
STATIC_URL = ‘/static/’
# This is what my TEMPLATE_CONTEXT_PROCESSORS looked like:
TEMPLATE_CONTEXT_PROCESSORS = (
'django.core.context_processors.static',
'django.contrib.auth.context_processors.auth'
)
# In the urls.py folder (the one in the same folder as settings.py) I added this line to the end of import statments:
from tiktoktweet.settings import STATIC_ROOT
# And added this to the end of the file:
urlpatterns += patterns('',
url(r'^static/(.*)$', 'django.views.static.serve', {'document_root': STATIC_ROOT, 'show_indexes' : True}),

Now I would be able to serve my bootstrap files from the static folder.

I then went into this file and install bootstrap using Bower. Bower is a package management system for client-side programming. It requires Node, npm, and Git. It should bring in any other required dependencies as well with your download.
bower install bootstrap

Now in the , lets include all the files we need to make this thing Bootstrap saavy if we want to. Remember these files are being served from our static folder. Bootstrap makes use of HTML5 doctype, so be sure to include it at the beginning.

We can now start adding the magic of bootstrap to our template. One of the really powerful things about Bootstrap is the responsive grid system, allowing your app to look just as nice on a desktop’s browser as a mobile device. This grid system will scale up to 12 columns, and so your content will be compartmentalized into rows and columns on the page. Having control over the number and arrangement of these “blocks” allows us to organize the layout of our page quite easily. For example, top row here, made up of .col-md-* grid classes, will start off stacked on a mobile phone, but become horizontal on a desktop browser.

Using the various predefined CSS classes in bootstrap, I was able to bring TikTokTweet from something like this:

To something a little more like this, in a matter of a few hours. Maybe not the most striking example you’ll find, but pretty good for someone with some with nearly no experience in frontend development I think.

I’m really glad someone recommended Bootstrap. It took me a bit to get the hang of, but once I caught, it became clear as day, and I know without it, doing the frontend of my app would have been a real uphill battle. I’d really like to know a bit more about implementing templates, like some of the really sleek looking ones on Start Bootstrap. In my next blog post, I’m gonna talk a bit about how I changed my date/time input, as well as form validation. See you then!!