Recent Comments

That works flawlessly!
Thanks

I had a problem that, after cropping, all my styles were gone (all the cropped images had the same size). Before applying the cropper processor, they were sized correctly.

Solution was, if you apply a custom processor, processor :thumbnails isn't executed anymore, so you'd have to write
:processors => [:cropper, :thumbnails].

Hope that saves someone some googeling.

If you're looking to experiment between Bootstrap and Foundation there's a "zurb-foundation" gem which is officially supported by ZURB.

Pretty awesome. I've been using RSpec for a while and the tests are really slow. I really like how light weight MiniTest is. Hopefully it'll run faster.

Is someone using this gem with will_paginate? I've tried some initializers (will_paginate.rb) but the problem remains. The only way I found so far is this

http://d.hatena.ne.jp/CortYuming/20120131/p1,

but maybe somebody else solve it

Put it on heroku for some odd reason:
http://quiet-lightning-3439.herokuapp.com/products

+1

I honestly wouldn't advise anyone use Twitter Bootstrap because the JS files in it have hardly any semi-colons.

// js/bootstrap-dropdown.js

function clearMenus() {
  $(toggle).parent().removeClass('open')
}

There's no plausible reason that the end of that method shouldn't have a semi-colon.

I think that the Less pre-compiler compiles it to CSS on the server and then ships it over the wire to the client?

Hi Ryan. Instead of using daemons gem when running 'sciprt/jobs'. Could you just use foreman and have it 'run bundle exec rake jobs:work'?

I use foreman in development and in production too so this would be useful to know.

Thanks for the comments. Although Foundation supported responsive layouts from the beginning. Although it looks like twitter implementation seems a bit more robust.

Thanks again.

The answer lies here

// ## Silent Mode
  //
  // Turning silent mode on will disable asking about unsaved changes before leaving the page.
  silent: false,

  // ## Debug Mode
  //
  // Turning debug mode on will log events and other various things (using console.debug if available).
  debug: false,

  // The onload method is provided as a callback in case you want to override default Mercury Editor behavior.  It will
  // be called directly after the Mercury scripts have loaded, but before anything has been initialized.  It's a good
  // place to add or change functionality.
  onload: function() {
    //Mercury.PageEditor.prototype.iframeSrc = function(url) { return '/testing'; }
    Mercury.on('ready', function() {
      var link = $('#mercury_iframe').contents().find('#edit_link');
    Mercury.saveURL = link.data('save-url');
    link.hide();
    });

    Mercury.on('saved', function() {
      window.location.href = window.location.href.replace(/\/editor\//i, '/');
    });

  }

};

https://gist.github.com/1581146

Does Less run on server-side or client-side using this plugin?

Ryan,

Thanks for this very cool railscast.

If you re-do this railscast, you could re-do it with coffeescript, but also - it would be great if you could show how to implement this with multiple fields in a form using it. Or perhaps there is a better way than using token-input now?

To add to the token-input complexity - you could require three different propertyToSearch items. For example one could use the default "name", but the other two should require something different. In the project I'm working on, I'm trying to use this to populate a work order form, which can have "streets", "buildings", and "units" added to them. Streets have names, but buildings and units have numbers and unit_codes to designate them.

I have seen others modify the javascript to handle multiple fields, where all the options were the same - but I haven't been able to find a solution for what I'm trying to do. I suspect I may be able to declare separate token-input DOM objects... but I"m not sure how to do that yet.

When I tried to just duplicate the javascript for each of my fields - I suspect they stepped all over each other.

yes - coffee script is whitespace sensitive

I too would like to see this with a many-to-many. I have the token-input solution working with one text field entry - but when I try to use multiples, it breaks. I would like to find a solution that has multiple fields doing this sort of thing. I'm sure this is a javacript/jquery deficiency on my part.

thanks ryan, fwiw, here's decent tutorial on how to get bootstrap-sass, formtastic and tabulous working together: http://rubysource.com/too-good-to-be-true-twitter-bootstrap-meets-formtastic-and-tabulous/

Good to know. Thanks

Thanks for the reply. I was thinking more to override things I didn't like by looking at the source. I code in plain css.

I tried that too, but weren't able to get bootstrap running in production. It caused errors when using the rake assets:precompile command. So better use the gems.

It's not bad, but you won't be able to modify variables, and extend css rules with other css rules. (The latter of which I was hoping Ryan would cover, but topic is too wide, and this cast is great still). Basically, with plain files you can't use any dynamic power of sass or less to modify things in bootstrap itself, only override the plain css.

I implemented an account confirmation system using episode 274 as a base.

I didn't really understand why I shouldn't just download the .zip package and add everything myself (to the css and js directories and application.css/js). Why is that such a bad thing?

I've used Foundation and I'm planning to switch to bootstrap.I'm new to Bootstrap, but I can see that it is more feature rich (for example, the dropdown menu on small screens, more buttons styles, nicer popup style). As well, bootstrap seems more integrated. I'm switching mainly because of the fluid layout options. Foundation is good, but I think the responsive menu that bootstrap gives you out of the box is a great feature. I'm still planning to keep some styles from zurb's foundation though. No problem in mixing styles.

Hey Eric,
I thought Ryan mentioned that you have to define the variables up top before imports when you use SCSS as against Less? Is that the problem?
Just a guess.
Bharat

+1

This has been my latest UI interest - and go figure there's suddenly a railscast for it. Ooooooo Weeeeeee what up with that?

Yes, Ryan is really a spy for the CIA. He watches over us. Seeing our struggles. Then, he releases a podcast on the subject we need most.

I for one welcome our Ryan overlord.

I am having a hell of a time trying to change out the gutter width and column width using the sass overrides. Here is my code:

@import "twitter/bootstrap/bootstrap";
@import "twitter/bootstrap/responsive";

// Set the correct sprite paths
@iconSpritePath: asset-path('twitter/bootstrap/glyphicons-halflings.png');
@iconWhiteSpritePath: asset-path('twitter/bootstrap/glyphicons-halflings-white.png');

@fluidGridColumnWidth: 4.78723404225%;
@fluidGridGutterWidth: 2.6595744675%;

Has anyone else had success with this?

I get the following error when using it:

ActiveRecord::DangerousAttributeError (create is defined by ActiveRecord):
  app/controllers/payment_notifications_controller.rb:8:in `create'

I'm using Rails 3.2.

Setting @gridColumnWidth or @navbarHeight variables (dont know if any else), seems not working. Anyone has similar problems? Have any solutions for this?

And second question, how correctly i should use mixins? If I create products.css.less file and i want to use .box-shadow() property, 'less' returns errors that this function is not defined. That works if i put:

@import "twitter/bootstrap/bootstrap";
@import "twitter/bootstrap/responsive";

in product.css.less file but then i have this code defined twice.

Exactly! We decided to use Bootstrap for a project on Monday afternoon, we started it last night and then Ryan posts two railscasts on it?! I can only assumed you're spying on us Ryan, it's the only logical conclusion. : )

Cheers for your hard work.

Ryan, do you use integration tests exclusively? Do you every write model tests? I'm trying to wrap my head around the entire testing process. This video has been a huge help, so thanks!

Use https://github.com/thomas-mcdonald/bootstrap-sass

It's just uncanny how every time I'm looking at something Ryan does a railscast on that very topic. This has happened at least 5x in the recent months...

Looking forward to seeing if my thoughts about Bootstrap match up with Ryan's!

Definitely should set password_reset_token to nil after successful password reset to prevent reusing the link, especially for long expiration time.

thanks, bharat!
Hm... what was causing some trouble eventually were some left overs in the /public/stylesheets directory from pre-asset pipeline times in the project.

I got somewhat customization working with help of:

http://www.opinionatedprogrammer.com/2011/11/twitter-bootstrap-on-rails/

let's see how the learnings continue :)

Patrick,
Time to go "Pro". He covers this in the Pro episode :)

Hi... when I want to use custom variables as defined here: http://twitter.github.com/bootstrap/less.html

1. Do I need to include "less-rails" in the :assets block of the Gemfile? Why (not)?

2. How can I debug whether my variables are set properly? I am currently experimenting with variables in app/assets/stylesheets/bootstrap_and_overrides.css.less

@orange: #FF2400
@linkColor: #ff0000
@baseColor: @orange
@navbarBackground: @orange

hmm... i also get a:

/bootstrap_and_overrides.css - 304 Not Modified

in the logs
however, none of these seems to have an effect.
What are your experiences in tracking the problem? (tracers, logs are difficult to get in Less/assets pipeline as far I know)

Ryan

This is right on time. Do you plan on doing a comparison with Foundation from the guys at Zurb? Foundation

I am having a tough time deciding which solution to go with mostly because of the less vs sass issue.

Thanks again.

I don't know if Ryan covers it in the pro version, but you can customize your own theme using http://stylebootstrap.info

How set the domain name in my application instead of localhost:3000.I'm using ubuntu os.plz tell any gem to set the domain name in my app.

Rookie error!

I discovered the problem.

I had capitalized the first letter of the _pdf.rb files in the app/pdfs directory. Worked OK on the MAC. Completely confused Ubuntu.

Many Thanks Ryan. Please keep up the good work. May be you want to consider adding datatable jQuery plugin to further improve the user experience when working with Rails/Bootstrap? Here is the link:

http://datatables.net/blog/Twitter_Bootstrap

If not no worries though. I have already watched both the Bootstrap episodes twice and they are a hugh help for someone getting started with Bootstrap in the Rails environment.

I highly recommend bootstrap-sass.

I think the routes.rb code needs to change for Rails 3 apps to something like this:

resources :orders do
get 'express', :on => :collection
end

and then use the express_orders_path rather than express_new_order_path

Twitter Bootstrap is also available as plain CSS. Infact, im quite sure the default download package is using CSS?

what if you have validations on the associated model?

in the model i have

  def spot_name=(name)
    self.spot = Spot.find_or_create_by_name(name, :address => name) if name.present?
  end

and a geocoder like in episode #273 attached to spot.
when i have a spot_name that i cannot geocode i want the form to display the error but how do i do that?

There's also https://github.com/stouset/twitter_bootstrap_form_for for forms

could you explain what exactly you remove? Have problems with private pub also using simple_form but no idea to what line you are referring to, thx!