Styling Devise with Twitter Bootstrap -::- OctoLabs

I’ve recently been working on a project to demonstrate useage of Devise with SimpleDB. Today I’m going to take a short side trip to add Twitter Bootstrap to the project to get things looking a little nicer. I’ll cover add the framework to a rails project, initial page setup, and the specifics of modifying Devise views to be more bootstrapish.

In Part 1 I covered creating a new app and setting up Devise to use SimpleDB with the User model. It included some dirty hacks that were cleaned up in Part 2. The app still doesn’t have much of an interface, so in this post I’m going to add Twitter bootstrap to make things look a little nicer, and will add some conditional navigation to allow users to sing up, sign in, and log out. The instructions in this post are applicable to any rails app, not just the Devise/SimpleDB demo.

Install Twitter bootstrap

Add this to the Gemfile

$ gem "bootstrap-sass-rails", "~> 2.2.2.0"

Then run

$ bundle install

Then open app/assets/javascripts/application.js and add this line

//= require twitter/bootstrap

Then open app/assets/stylesheets/application.css and add a couple of lines on either side of the existing require lines so that it looks like this.

 *= require twitter/bootstrap
 *= require_self
 *= require_tree .
 *= require twitter/bootstrap/responsive

That’s all there is for installation.

Tweak the layout

Now we’re going to make the layout look a little nicer and we’ll add some links for “Sign in”, “Sign up”, and “Sign out”.

Open apps/views/layouts.html.erb and update the <body> section to look like this:

<div class="container-narrow">
  <div class="masthead">
    <%= render 'layouts/user_header' %>
    <h3 class="muted"><%= link_to "SimpleDevise", root_path %></h3>
    <h5 class="muted">A demo of using SimpleDB with Devise</h5>
  </div>
  <hr />
  <%= yield %>
</div>

Then create a new file at app/views/layouts/_user_header.html.erb that contains this:

<ul class="nav nav-pills pull-right">
  <% if user_signed_in? %>
    <li><%= link_to "Sign out", destroy_user_session_path, :method => :delete %></li>
  <% else %>
    <li><%= link_to "Sign in", new_user_session_path %></li>
    <li><%= link_to "Sign up", new_user_registration_path %></li>
  <% end %>
</ul>

Update the home page

Open app/views/static_pages/home.html.erb and replace the contents of the file with this:

<div class="jumbotron">
  <% if user_signed_in? %>
    <h1>Welcome back, trusted user!</h1>
    <p class="lead">
      You have signed in!  If this were a real app some sweet conent
      would go here.  But it's just a test.  You might want to sign out now.
    </p>
    <%= link_to "Sign Out", destroy_user_session_path, :method => :delete, :class => 'btn btn-large btn-danger' %>
  <% else %>
    <h1>Welcome, new user!</h1>
    <p class="lead">
      You must sign in or sign up before you can access our super sweet,
      top secret content.
    </p>
    <div class="row-fluid">
      <div class="span6">
        <%= link_to "Sign In", new_user_session_path, :class => "btn btn-success" %>
      </div>
      <div class="span6">
        <%= link_to "Sign Up", new_user_registration_path, :class => "btn btn-success" %>
      </div>
    </div>
  <% end %>
</div>

Now we have a nice looking home page.

Logged Out

You can click on the “Sign up” link to get a sign up form (which could use some tweaking).

And finally, you have the awesome ‘protected’ content.

Logged In

Updating the Devise views

The forms generated by Devise could use a little polish. First we have to get Devise to generate a version of the views that we can modify. Just run this :

rails generate devise:views

That will generate a bunch of views in `app/views/devise`.

First we’ll tweak the sign up form which is in `app/views/devise/registrations/new.html.erb`. Twitter Bootstrap offers a nice looking style that will work well for this. After tweaking the markup, the form code looks like this:

<div class="border-form-div">
  <h2>Sign up</h2>
  <%= form_for(resource, :as => resource_name, :url => registration_path(resource_name)) do |f| %>
    <%= devise_error_messages! %>
    <%= f.email_field :email, :autofocus => true, :placeholder => 'Email address' %>
    <%= f.password_field :password, :placeholder => 'Password' %>
    <%= f.password_field :password_confirmation, :placeholder => 'Password confirmation' %>
    <%= f.submit "Sign up",:class=>'btn btn-primary' %>
  <% end %>
  <%= render "devise/shared/links" %>
</div>

Then open `app/views/devise/sessions/new.html.erb` and alter it to look like this:

<div class="border-form-div">
  <h2>Sign in</h2>
  <%= form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f| %>
    <%= f.email_field :email, :autofocus => true %>
    <%= f.password_field :password %>
    <% if devise_mapping.rememberable? -%>
      <label class="checkbox"> <%= f.label :remember_me %> Rembmer me </label>
    <% end -%>
    <%= f.submit "Sign in" %>
  <% end %>
  <%= render "devise/shared/links" %>
</div>

Then add just a bit of css to `app/assets/stylesheets/application.css`:

/* User sign in and sign forms. */
.border-form-div {
  max-width: 300px;
  padding: 19px 29px 29px;
  margin: 0 auto 20px;
  background-color: #fff;
  border: 1px solid #e5e5e5;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
     -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
          box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.border-form-div .form-signin-heading,
.border-form-div .checkbox {
  margin-bottom: 10px;
}
.border-form-div input[type="text"],
.border-form-div input[type="email"],
.border-form-div input[type="password"] {
  font-size: 16px;
  height: auto;
  margin-bottom: 15px;
  padding: 7px 9px;
}

Now the sign in and sign up pages are looking pretty good.

You can find this project on Github.