Twitter Bootstrap styles for Devise

devise.coffee

$ ->
  $('.close').live 'click', (e) ->
    e.preventDefault()
    $(this).parent().hide()
  $('.devise form div i').each ->
    $this = $(this)
    text = $this.text()
    sibling = $this.prev('label')
    a = $("<a>").text("*").attr('title', text)
    a.prependTo(sibling)
  devise_errors = $('.devise #error_explanation')
  if devise_errors.length
    close_link = $('<a>').addClass('close').attr('href', '#').text('\u00d7')
    devise_errors.prepend(close_link)

devise.css.less

form {
	/* This is all copy/pasted. I can't get element-based rulesets to work */
	input[type=email] {
		display: inline-block;
	    width: 210px;
	    margin: 0;
	    padding: 4px;
	    font-size: 13px;
	    line-height: @baseline;
	    height: @baseline;
	    color: @gray;
	    border: 1px solid #ccc;
	    .border-radius(3px);
	}
	
	// Focus states
	input[type=email] {
		@transition: border linear .2s, box-shadow linear .2s;
		.transition(@transition);
		.box-shadow(inset 0 1px 3px rgba(0,0,0,.1));
	}
	input[type=email]:focus {
		outline: none;
		border-color: rgba(82,168,236,.8);
		@shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);
		.box-shadow(@shadow);
	}
}

.devise {
	margin-top:20px;
	.columns(7);
	.offset(4);
	.well;
	h2 {
		margin-left: 150px;
		margin-bottom: 15px;
		font-size: 20px;
		font-weight:normal;
		color: @grayDark;
	}
	form {
		div {
			margin-bottom: @baseline;
			a {
				margin:0;
				&:after { content:'\0000a0'; }
				&:before { content:none; }
			}
		}
		br, i {
			display:none;
		}
		input {
			margin-left: 20px;
		}
		/* Oh, dear... */
		label[for=user_remember_me] {
			padding:0;
			position:relative;
			left:130px;
		}
		input[type=submit] {
			margin-left:150px;
			.btn;
			.primary;
		}
	}
	a, h3, p{
		margin-left:150px;
	}
	p {
		a {
			margin:0;
			&:before { content:none; }
		}
	}
	a:before, p:before {
		content:'\002022\0000a0';
	}
	#error_explanation {
		.alert-message.error;
		.block-message;
		margin-left:150px;
		
		text-shadow:none;
		h2 {
			font-size:13px;
			line-height:18px;
			font-weight:bold;
			margin:0 0 6px 0;
		}
		h2, li {
			color:white;
		}
		a {
			.alert-message.close
		}
	}
}

devise.html.erb

<% content_for :content do %>
<div class="devise">
	<%= yield %>
</div>
<% end %>
<%= render :template => 'layouts/application' %>

Nevermind, figured it out. For anyone trying this, I had to change the yield statement in my application layout to this:

        <%= content_for?(:content) ? yield(:content) : yield %>

Where is this devise.html.erb file located? Could not find it anywhere. Thanks!

@marshmallowcreme, that's exactly how I had it set up in my application layout. Sorry that wasn't clear from the gist.

@maralcbr, it's the last file in the gist. I'm just choosing that as the layout (per the devise docs) when i need to like so:

class ApplicationController < ActionController::Base
  protect_from_forgery

  layout :layout_by_resource

  protected

  def layout_by_resource
    if devise_controller?
      "devise"
    else
      "application"
    end
  end
end

I'm getting a less error:

.border-radius is undefined
  (in /Users/giovanni/my_app/app/assets/stylesheets/devise.css.less)

The only solution I've found is to put devise.css.less code inside bootstrap.css.less and update a couple of classes:

1. at line 83 replace .block-message; with .border-radius(3px);
2. at line 66 remove .primary; and at line 65 replace .btn; with .btn.primary;

Hope it helps.

@potomak, @rupertfisher - I wrote this against Bootstrap 1.3, and recall a couple things breaking with 1.4. I ended up not using Devise in the project this came from, so I haven't kept it up to date. Since it looks like there's a bit of interest in this thing, I'll set aside some time to clean it up and doc it better.

@bigbento - Would be awesome!

I ended up rewriting this for Bootstrap 2.0 and released it as a gem: https://github.com/bigbento/less-rails-bootstrap-devise