YUI: Open Hours Thurs May 31st
By Luke SmithMay 29th, 2012
Twitter Bootstrap, Powered by YUI?
Twitter Bootstrap has been wildly successful since its debut a year ago. It has a nice consistent look and fills many gaps web developers get stuck in when getting started with a new site or project. As you probably know, its JavaScript layer is based on jQuery. But is that a hard requirement?
YUI Community member J. Shirley decided to find out, and with a little help from Juan Dopazo and other YUIers, created the YUI 3 fork of Twitter Bootstrap.
It’s certainly an interesting product, worth checking out, theming, forking, and contributing to. But in this hour, I’d like to not only have J and Juan introduce the product, but also talk about the process of adapting it from jQuery—what were the easy parts, complicated parts, and if there were any broader learnings they want to share.
Recording
The recording is available in the YUILibrary YouTube channel.
July 6, 2012 at 7:38 am
I’ve been trying to use this per the instructions at http://iinteractive.github.com/bootstrap/javascript.html:
YUI().use(‘gallery-bootstrap’);
Here’s my code:
YUI().use(‘gallery-bootstrap’, ‘node’, ‘event’, function (Y) {
…
}
When I do this, I get a bad request (400). When I replace gallery-bootstrap with gallery-bitly, for example, everything works like a champ.
What’s going on? Am I doing something wrong? Has bootstrap been removed from the gallery? What am I missing?
I’m using Twitter Bootstrap 2.0.3 and have tried this with YUI 3.5.1 and YUI 3.6.0 pr3.
Thanks.
July 9, 2012 at 6:20 am
Hi Travis,
Right now I haven’t solidified the YUI bootstrap code enough for it to be on the YUI CDN (as a published gallery module).
It’s still under active development (and I’m doing some restructuring of the code).
If you want to contribute to the development or work with a moving target, that’s excellent and you can use my CDN configuration (Take a look at my YUI_config at http://jshirley.github.com/bootstrap/assets/yui/config.js to see the required configuration).
If you’re looking for something to use in production, I’d recommend holding off for a bit longer until I get the code completely stable and it’s available on the main YUI CDN as a published gallery module.
Thanks!
-Jay
July 16, 2012 at 3:44 pm
What is the chance of YUI team officially supporting twitter-bootstrap?
I don’t want to be using this product if it falls behind the original jQuery based twitter-boostrap version…
July 24, 2012 at 7:40 pm
Hi Jay,
Thanks for responding.
OK. I’m still struggling to get the basics to work.
First, I include the following files:
Then, I have the following script:
YUI().use(‘gallery-bootstrap’, function (Y) {
var eventsTabView = new Y.Bootstrap.TabView({
node: ‘#eventsTabs’
});
eventsTabView.selectChild(2);
});
When I do this, it fails with the following error: “Uncaught TypeError: Object # has no method ‘selectChild’”
This appears to be because selectChild isn’t a valid function.
I guess my question isn’t so much on how to select a child/tab, but in where I can find current and correct documentation.
I really like Twitter Bootstrap and I really like YUI, so I’m especially excited about using the two together with what you’re building.
My concern is that I’ll be spending a great deal of time trying to figure out the basics of how to use this and not be able to focus on building my application. I hope that you can appreciate this.
I would also love to contribute to the development, but JS is not my forte, unfortunately…which makes trying to use this even more difficult than it might be for a better JS developer.
I’m looking forward to hearing back from you…and hope you’ll address Trung’s questions, too. :-)
Thanks again.
July 24, 2012 at 7:42 pm
Looks like some lines were stripped from my previous post. Here are the files I include, sans markup:
– http://jshirley.github.com/bootstrap/assets/yui/config.js
– /js/yui/3.5.1/build/yui/yui-min.js
I had included the full markup before when I listed the files. Sorry.
August 1, 2012 at 7:59 am
This YUI is total crap , it took me a whole week to get it barely working with bootstrap and hardly a day in JQuery , with all the functionalities .
Even something as simple as a accordion in YUI takes a lot of lines of code compared to JQuery.
August 1, 2012 at 12:15 pm
Hi Mattew,
I’m not exactly sure where you had problems with Bootstrap. The code that I’ve been working on isn’t released to the gallery, so unless you know how to load directly from a CDN that can be a problem. It isn’t hard, but does have some learning associated to it.
If you could help me explain what your issue was, I’d appreciate it, though. It doesn’t help any open source project to just bash it and move on. We have a very active community.
You can see the working Bootstrap+YUI code here: http://jshirley.github.com/bootstrap/javascript.html#collapse
Until this work does make it out to the best thing to do is follow the configuration at http://jshirley.github.com/bootstrap/assets/yui/config.js
This will be kept up to date as I get more time to work on the bootstrap port.
Thanks,
-Jay
August 23, 2012 at 1:18 pm
Now that 2.1.0 is out, is there any idea as to when this will be updated to work with it? Some of the changes seems substantial with regards to the work required to keep YUI 3 Bootstrap up-to-date.
Thanks,
Travis
October 8, 2012 at 5:19 pm
Very good job, unfortunately, its still not pushed to gallery!
October 26, 2012 at 12:00 pm
Are there plans/roadmaps/timelines for this hitting gallery?
December 7, 2012 at 4:45 am
Don’t understand this project. Why not port the missing YUI features to jQuery / Bootstrap instead?