MooTools and Twitter’s Bootstrap

Monday, October 3rd, 2011 @ 6:58 am | filed under: Code Releases

Bootstrap, from Twitter is a heaping serving of awesomeness. In addition to it’s easy to use grid system, layouts, good looking typography, and the fact that the whole thing is written in Less, it includes a handful of JavaScript plugins for jQuery and Ender to bring a lot of the CSS components to life. We’re talking tips, popups, drop down menus and more.

Enter MooTools

For those of us who prefer MooTools, the JS included in Bootstrap isn’t so useful. I whipped a little something together for the MooTooler’s out there. No doubt you are itching to see a demo, to here ’tis:

http://anutron.github.com/mootools-bootstrap/

Getting the Library

Included in the repo are numerous MooTools plugins that depend on MooTools Core, MooTools More, Clientcide, MooTools Behavior, and Behaviors for MooTools More. Building all these takes some configuration on your part (check out the MooTools Packager – here’s a nice blog post on it by Ryan Florence), or you can just go to dev.clientcide.com and build it with the online tools there, which is what I recommend. Just click in the select box at the very top and choose “Bootstrap”. Be sure to check out the demos there as well as the docs.

This Is Beta Territory

I haven’t had a chance to test all this stuff in IE as I don’t have access to it right now (new Macbook, no Windows installed yet). Anyone who can help me test and debug any issues in IE would have my gratitude. As a quick start, specs can be run here.

15 Responses to “MooTools and Twitter’s Bootstrap”

  1. Clientcide 3.0.8 » Clientcide (Formerly CNET's Clientside) Says:

    […] using Clientcide, Behavior, or Twitter’s Bootstrap. If you missed it, be sure to read up on MooTools for Boostrap which I released […]

  2. Michael Russell Says:

    This isn’t much but I figured it might be worth sharing for anyone curious of current IE results… I ran the specs on IE 7/8/9. The 53 specs ran for IE8 all passed and I made some screen grabs of the IE7/9 errors which can be found here: IE7 IE9

    Also, thanks sooo much for releasing this and Behaviors. I was doing something similar on a current project at work and am now looking at porting it over to use Behaviors instead. Awesome work man!

  3. Aaron N. Says:

    Crap. Stupid IE. Clearly I have some work to do.

    Can you go hit the bootstrap demo with IE and see if it works at all?

  4. Michael Russell Says:

    Sure thing.

    All the examples work for IE 9

    As for IE 7/8 they’re throwing a fit at line ~5026 char 9 stating that this Object doesn’t support this property or method within the mootools-bootstrap.js file preventing anything from functioning.

  5. Aaron N. Says:

    Joy. True joy. I don’t have windows but I just ordered a copy. Probably a week before I can install it and debug it. If you were feeling charitable, you could dig into that error and see if you can fix it. You can download the repo from github and get a static, built version of the JS in the /Example dir so it’s easy for you to play with (otherwise you can clone the https://github.com/anutron/mootools-development repo, switch to the clientcide branch, run ./install and then ./go run and develop locally against the actual repo files).

  6. Aaron N. Says:

    …but to be clear, you’ve already done me a huge favor in running those tests, so thank you. If you don’t have the time or inclination it’s not a big deal. I’ll get to it.

  7. Aaron N. Says:

    FYI, that line seems doubtful. It maps to a line in BehaviorAPI that isn’t doing much:

    _getElements: function(container){
      if (typeOf(this.options.selector) == 'function') return this.options.selector(container);
      else return document.id(container).getElements(this.options.selector);
    },
    
  8. Aaron N. Says:

    Sorry, that’s in Behavior.js, not BehaviorAPI.js

  9. Michael Russell Says:

    I’ll see what I can do, I would definitely love to help out if I can. I’ve already got a clone of your mootools-development repo on my github account, freaking awesome I must say. I’ll see what I can do to contribute!

  10. Michael Russell Says:

    Ok cool, I’ll see about getting some better debug tools going for the IEs (just using the vanilla installs ATM) and dig more into it tonight when I get off work.

  11. Rolf Says:

    Nice!

  12. Thomas Allmer Says:

    nice stuff…

    best info ever :)
    “Selectors in Behavior filters and Delegator triggers are always relative to the element they modify. So if you want to find an element that is a child of that element, you can just use a regular selector, but if you need to find an element that is somewhere else in the DOM, use Slick’s reverse combinators (!.someParent #someChildOfThatParent – e.g. !body #foo).”

  13. Clientcide Libs for MooTools 1.4.1 » Clientcide (Formerly CNET's Clientside) Says:

    […] you’ve been playing with Bootstrap or Behavior in general, there have been a few changes over the past week or two. Since my last […]

  14. storeman Says:

    Awesome work Aaron. I also started to create a Moo version of Bootstrap, but as far as I can see, I can still learn a lot from your code. Great to see this! Makes the lifes of PHP developers much easier :)

  15. Clientcide 3.0.9: The IE Edition » Clientcide (Formerly CNET's Clientside) Says:

    […] my previous release of bootstrap I complained about my inability to test in IE. A few of you were kind enough to hit my specs and […]