Using Twitter Bootstrap to build a front-end for TikTokTweet

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.

Screen Shot 2015-03-20 at 2.58.14 PM

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

In comes everything you’ll be needing in the bower_components folder,

bower_components|⇒ ls
bootstrap jquery

There is a whole lot of stuff in here. The bootstrap/dist folder contains most of the necessary the CSS and Javascript I need.

bootstrap/dist
├── css
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ └── bootstrap.min.css
├── fonts
│ ├── glyphicons-halflings-regular.eot
│ ├── glyphicons-halflings-regular.svg
│ ├── glyphicons-halflings-regular.ttf
│ ├── glyphicons-halflings-regular.woff
│ └── glyphicons-halflings-regular.woff2
└── js
├── bootstrap.js
├── bootstrap.min.js
└── npm.js

So now that I had my bootstrap files, how would make my HTML “Bootstrapped”? Let’s take a look at one of my original HTML files that allows a user to input a tweet.

<!DOCTYPE html>
<html>
<body>

<form action="{% url 'tiktokadmin:create_post'  %}" method="post">
    {% csrf_token %}
    <h2>Create a Tweet</h2>
    <textarea class="medium" name="tweettext" cols="20" rows="5" ></textarea>

<br>

    <label>Add to queue:</label>
    <select name = "queue_id">
        <option value = 0>Do not add to queue</option>
        {% for queue in queue_list %}
        <option value = "{{queue.id}}">{{queue.name}}</option>
        {% endfor %}
    </select>
    <br><br>
    <label>Time to tweet in the form yyyy-mm-dd hh:mm:ss</label>
    <div class="element-input"><label class="title"></label><div class="item-cont"><input class="large" type="datetime" name="when_to_tweet" placeholder="yyyy-mm-dd hh:mm:ss"/><span class="icon-place"></span></div></div>

    <br>

    <input type="submit" value="Submit"/>

</form>
<br>
<form action="/tiktokadmin/">
    <input type="submit" value="Home" id="jsSubmit1" >
</form>

</body>
</html>

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.

<!DOCTYPE html>
<html>
<head>
    <!-- ... -->
    <script type="text/javascript" src="/static/bower_components/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="/static/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/static/bower_components/bootstrap/dist/css/bootstrap.min.css" />
</head>

<body>
....

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.

Screen Shot 2015-03-19 at 12.30.57 PM

 <div class="row">
  <div class="col-md-1"><p>.col-md-1</p></div>
  <div class="col-md-1"><p>.col-md-1</p></div>
  <div class="col-md-1"><p>.col-md-1</p></div>
  <div class="col-md-1"><p>.col-md-1</p></div>
  <div class="col-md-1"><p>.col-md-1</p></div>
  <div class="col-md-1"><p>.col-md-1</p></div>
  <div class="col-md-1"><p>.col-md-1</p></div>
  <div class="col-md-1"><p>.col-md-1</p></div>
  <div class="col-md-1"><p>.col-md-1</p></div>
  <div class="col-md-1"><p>.col-md-1</p></div>
  <div class="col-md-1"><p>.col-md-1</p></div>
 <div class="col-md-1"><p>.col-md-1</p></div>
</div>
  <div class="row">
    <div class="col-md-6"><p>.col-md-6</p></div>
    <div class="col-md-6"><p>.col-md-6</p></div>
</div>
  <div class="row">
    <div class="col-md-4"><p>.col-md-4</p></div>
  <div class="col-md-4"><p>.col-md-4</p></div>
    <div class="col-md-4"><p>.col-md-4</p></div>
</div>
  <div class="row">
    <div class="col-md-8"><p>.col-md-8</p></div>
    <div class="col-md-4"><p>.col-md-4</p></div>
</div>

One can also make offset columns if you would like to move your columns to the right., using the .col-md-offset-* classes. This increases the left margin of a column by *

Screen Shot 2015-03-19 at 12.48.58 PM

 <div class="row">
      <div class="col-md-4"><p>.col-md-4</p></div>
      <div class="col-md-4 col-md-offset-4"><p>.col-md-4 .col-md-offset-4</p></div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3"><p>.col-md-3 .col-md-offset-3</p></div>
  <div class="col-md-3 col-md-offset-3"><p>.col-md-3 .col-md-offset-3</p></div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3"><p>.col-md-6 .col-md-offset-3</p></div>
</div>

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

Screen Shot 2015-03-20 at 2.58.14 PM

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.

Screen Shot 2015-03-20 at 3.04.41 PM

Simple adding .form-control to my queue selection drop down menu brings its from this:

Screen Shot 2015-03-19 at 2.39.11 PM
to this:

Screen Shot 2015-03-19 at 2.40.07 PM

<select class = "form-control" name = "queue_id">
        <option value = 0>Do not add to queue</option>
        {% for queue in queue_list %}
        <option value = "{{queue.id}}">{{queue.name}}</option>
        {% endfor %}
    </select>

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!!

Advertisements

About Rebecca Mills

Biochemist by trade, transitioning to computer engineering.
This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s