Dropping in latest Bootstrap & Styling for RailsGirls

move_to_bootstrap.md

Now, let's make it pretty!

1: Clean out the old stuff

First, delete the file app/assets/stylesheets/scaffolds.css.scss

Then, in app/assets/stylesheets/application.css

Remove:

table, td, th { vertical-align: middle !important; border: none !important; }
th { border-bottom: 1px solid #DDD !important; }

Replace:

body { padding-top: 100px; }

With:

body { padding-top: 60px; }

But leave:

footer { margin-top: 100px; }

2: Drop in Twitter Bootstrap

In app/views/layouts/application.html.erb

Replace:

<link rel="stylesheet" href="http://railsgirls.com/assets/bootstrap.css">

With:

<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" />

And after:

<li class="active"><a href="/ideas">Ideas</a></li>

Add:

<li><%= link_to 'New Idea', new_idea_path %></li>

-- Yep, that's it. Look around the site a bit. Big difference, right?

3: Change the "List all Ideas" page

In app/views/ideas/index.html.erb

Replace everything with:

<h1>All ideas</h1>

<% @ideas.in_groups_of(3) do |group| %>
  <div class="row">
    <% group.compact.each do |idea| %>
      <div class="span4">
        <%= image_tag idea.picture_url, :width => '100%' if idea.picture.present?%>
        <h4><%= link_to idea.name, idea %></h4>
        <%= idea.description %>
      </div>
    <% end %>
  </div>
<% end %>

-- Simpler than the table layout, no? But what's that span4 stuff? -- Also, why "in_groups_of(3)"? (Hint, it has to do with creating new rows)

4: Change the form submit button

In app/views/ideas/_form.html.erb

Replace:

<%= f.submit %>

With:

<%= f.submit "Submit Idea", class: "btn btn-large btn-primary" %>

-- What's that btn business all about?

5: Change the "Show an Idea" page

In app/views/ideas/show.html.erb

Replace everything with:

<p id="notice"><%= notice %></p>

<div class="row">
  <div class="span9">
    <%= image_tag(@idea.picture_url, :width => "100%") if @idea.picture.present? %>
  </div>

  <div class="span3">
    <p><b>Name: </b><%= @idea.name %></p>
    <p><b>Description: </b><%= @idea.description %></p>
    <p>
      <%= link_to 'Edit', edit_idea_path(@idea) %> |
      <%= link_to 'Destroy', @idea, confirm: 'Are you sure?', method: :delete %> |
      <%= link_to 'Back', ideas_path %>
    </p>
  </div>
</div>

-- What is up with the two differently-sized span things here?

-- We've changed the style dramatically but written no CSS so far. That's the magic of Bootstrap

6: Let's have some fun with it (writing our own CSS)

Create a new file in app/assets/stylesheets called bootstrap_overrides.css.

In this file, put:

textarea#idea_description {
  width: 50%;
  height: 240px;
}

input#idea_name {
  width: 50%;
  height: 40px;
  font-size: 20px;
}

label {
  font-weight: bold;
  font-size: 18px;
}

.field {
  padding-bottom: 20px;
}

-- What's the danger in overriding styles for generic things like textarea?