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' %>

I posted some background and pictures on my blog:
http://scraps.bigbento.com/styling-devises-templates-in-silverhail-with

any chance you could provide the css this produces please... this is indeed very cool - thank you

I'm still using an older version of Bootstrap, and still working out the kinks of using multiple Less libraries along side the Rails 3.1 asset pipeline. I'm using the Anyway, I updated Bootstrap to 1.4 and threw in my devise styles here: https://gist.github.com/1344196. You'll still need to use the .devise class for them to work right, per the markup example.

Where do you put <%= yield(:content) %> ?

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