Ruby Intro

SENG2021

Prettifying With Bootstrap

Since Twitter open sourced their CSS framework several years ago, Bootstrap has become the benchmark for CSS. As a terrible designer, I’ve very much relied on Bootstrap to make my web pages decent looking, not great – just OK.

I’ve opted for a slightly older version (2.3.2) here since the new version 3 is not yet stable at the time of writing. The documentation for 2.3.2 can be found here. Regardless, there’s only 3 files to change.

app/views/layouts/application.html.erb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
  <title>TwitterApp</title>
  <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
  <%= stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true %>
  <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
  <%= csrf_meta_tags %>
</head>
<body>
  <div class="container">
    <div class="navbar">
      <div class="navbar-inner">
        <a class="brand" href="/">Twitter App</a>
        <ul class="nav">
          <li><a href="/proposals">JB Proposals</a></li>
          <li><a href="/ausvotes">#ausvotes</a></li>
        </ul>
      </div>
    </div>
<%= yield %>
  </div>
</body>
</html>

And add class="table" to the 2 table tags

app/views/twitter/ausvotes.html.erb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<h1>Last 200 Tweets with #ausvotes</h1>

<table class="table">
  <tr>
    <th>User</th>
    <th>Text</th>
  </tr>
<% @tweets.each do |tweet| %>
  <tr>
    <td><%= tweet.user.name %></td>
    <td><%= tweet.text %></td>
  </tr>
<% end %>
</table>
app/views/twitter/proposals.html.erb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<h1>Last 200 Justin Bieber Proposals</h1>

<table class="table">
  <tr>
    <th>User</th>
    <th>Text</th>
  </tr>
<% @tweets.each do |tweet| %>
  <tr>
    <td><%= tweet.user.name %></td>
    <td><%= tweet.text %></td>
  </tr>
<% end %>
</table>
  1. Twitter Bootstrap