Upgrading to Bootstrap 2.0 (Implementation discussion)
addyosmani opened this issue · 48 comments
This issue is to discuss how we're going to implement the upgrade to 2.0 and follows from the conversations started in #52.
We probably need to hash out the LESS solution we're going to try using and decide on what we do want to target from Bootstrap 2.0, whether what we target can be matched against a jQuery UI widget or stable third party plugin etc.
//cc @panosru
What I was thinking was to serve a bridge where we would have bootstrap and jquery along with custom css methods, so the file would look something like this:
@import "path/to/bootstrap.less";
/* If we want to override or add any variable to
be used for jquery ui bootstrap theme should be under this line
*/
@import "path/to/jquery-ui-bootstrap-theme.less";
/* Our custom css that would help to override
anything we need from bootstrap goes under this line
*/
@import "path/to/users/custom.less"; /* or .css */The above would help to keep bootstrap and jquery ui in vendor structure so would be easier updated by the user and by developers. Also would allow to not hack the core files of each vendors resulting in easier maintenance for everyone.
@addyosmani what do you think about that?
@addyosmani I did an attempt here I changed the structured to be more clear than before I used the jquery-ui less files by @t1gr0u lot's of things need to be changed in the example page (index.html) also regarding wijmo need some care in order to work properly with new bootstrap...
I believe I will play with those today a bit more :)
@panosru the structure you proposed sounds fairly reasonable for our first foray into this. As for the Wijmo components, I think I'll reach out to Wijmo again and see if they'd like to take part in some of our conversations about the update to Bootstrap 2.0. It may help to avoid issues later on!
@addyosmani great! What do you think regarding wijmo 2 ? should we use it if we decide to update wijmo?
I uploaded integration progress in my dropbox account so you could check it out. Of course there is still work to be done in order get this fully integrated.
Sliders seems to be working fine, also I removed outline from a tags because I find it annoying :)
@panosru there is a little typo in "variable.less" last line
"@ui-yellow: e4c652;" needs to be "@ui-yellow: #e4c652;"
@panosru thanks for your efforts on this so far! It looks like we'll need to tweak up the namespacing as it's affecting the wijmo menu at the moment and the toolbar is a little broken, but the rest looks good!.
@addyosmani I didn't worked at all on wijmo, I believe we need to discuss about wijmo a bit more, if we will use the v2 or if we'll stick with current version. Regarding toolbar it need some tweeking to work, it works on firefox though. Basically many things need to be tweeked here and there.
Let me know how do you prefer me to continue on that one, maybe you should create a dev branch and I send a pull request of what I've done so far? Let me know :)
Bootstrap2-Dev branch created in case anyone want to contribute into integration of bootstrap 2 with jquery ui bootstrap, so far lot's of things are already done but lot's of things need to be done too :)
@addyosmani Thank you for letting me contribute on the project directly :) I appriciate it :)
Sorry for not being very active lately, I got few personal things to take care of :)
cheers !
Added tabs support, but I had to use !important in some places and I couldn't find any other way to avoid it... I'll re-visit it again once everything will be done and the clean-up process will begin, in mean-while if anyone could fork/suggest something it would be appreciated :)
PS: Sorry for not being active for a week, I just moved to my new flat and I don't have internet connection yet! :)
@panosru No worries! I've been held up on a few other projects recently and I know how hard it can be to contribute consistently :) With respect to most of the work going into the B2-dev branch, I think I'll probably spend this next weekend going through it all and patching (if needed) or completing as much as possible of what is outstanding.
With respect to Wijmo, I would say let's keep it as an aside for the time being. B2 has significantly more components we need to match with jQuery UI widgets and configurations and to be honest, the third party plugins were almost all added to this project after the first initial release. We can take a similar approach to how we upgrade.
I agree on wijmo and third party components, lets focus first on jquery ui components to match bootstrap 2 theme and then we can work on third party components :)
[offtopic]
I wonder why bootstrap 2 menu don't give an option for drop downs to show on hover, ok I get that the on-hover even won't work on touch devices, but what if I don't care? I believe they should provide an on-hover event for drop-downs, this was actually the only reason that I used wijmo with bootstrap 1.
[/offtopic]
If you need any help or any clarification with less files let me know, I maybe got it a bit complex because I tend to write less in that complex way... :/
@panosru On the offtopic: I too found that a little strange, but it may be something they address in the next version.
I'll definitely give you a shout if I need help with the less files. It might be useful for us to get someone else in just to do a sanitation review on them to make sure they're readable etc, but great job getting the baseline in place so far!
@addyosmani thanks mate, you also done a great job on getting this project live ;)
Regarding tabs, the support is only for top positioned tabs for now... other positions like left, right, bottom are not yet tested and probably won't work currently.
That's cool. 1.0 only supported top positioned tabs, but using something like http://keith-wood.name/uiTabs.html we can probably get support for everything Bootstrap 2.0 does at the moment.
yes since B2 supports 4 way positioned tabs we could have it too.
On the offtopic:
It's because they feel that user intended actions should require a click. Mark Otto (creator of Bootstrap) writes about it on his blog.
@sindresorhus well this is not an excuse for not giving at least the option to have it on hover, even if it's not by default like this... but thanks for letting us know about it :)
@sindresorhus thanks, I just did :)
guys, thanks for working to save the world...i'm eager to see how this framework matures...i need it!
It's been a few months since I last had time to work on upgrading the project and I think it will probably be another few weeks before I can put time into doing this for Bootstrap V2. Its probably something that would require a weekend sprint of some sort in late June or early July, but we could do it properly, document and test it etc. If anyone on this thread is interested in helping with that effort, let me know :)
Count me in ;)
\o/
On Sunday, 20 May 2012, Sindre Sorhus wrote:
Count me in ;)
Reply to this email directly or view it on GitHub:
Addy Osmani
Developer Programs Engineer at Google
Blogger at: http://addyosmani.com
Phone: +44 7501 594 382
I'm definitely interested in contributing my time.
I would like to aim for us to restart work on the Bootstrap 2.0 LESS branch soon with the aim for wrapping up in time for an end of July or early August release. Based on initial reviews, we have a number of components we still have left to work on but I'd love to get this project kick-started again.
@panosru would you be available to help? Would be great to start looking at specifically what in B2 we don't yet support and need to start placing into issues to address.
@addyosmani Hi, I really would love to but unfortunately I won't be available during summer :(
First time i am looking at this and I am definitely interested. What has to be done until the project is ready for 2.0? Maybe I can help.
@maklemenz completion of the move over to LESS and of course working on getting all the changes in UI components over. Quite a few changes there between 1 and 2.
@addyosmani is it easier if you create a new branch & we submit pull requests to you?
@addyosmani I've tried to correct some issues with the Bootstrap2-dev branch: Pull89
The topbar, layout, icons and bootstrap2 itself should be included in a working way now. I've updated jquery and jqueryui to the current versions.
Did not know much about the project update status, but it seems you have already done a huge part of the work.
I miss ui-dialog autoreposition on window resize by default and the enhanced upload button is not working now.
There is a stylebug with the class .ui-widget-overlay: with:100% would make it too large.
Whats the current status on this?
It looks like this guy had a pretty good start with LESS and Bootstrap 2.
https://github.com/t1gr0u/jquery-ui-bootstrap
Is this the direction you are headed?
Current status is that I've started work again on a Bootstrap 2 port (although, mostly starting from scratch rather than continuing the work done in the current Bootstrap2-dev branch, sans LESS) - very small preview http://addyosmani.com/gyazo/c778c.png. This will result in a quicker, usable port from me in the next few weeks, however, if people really want the LESS version enough (and are happy to help with it) we can definitely do that instead.
The challenge is that there isn't just the task of converting UI Bootstrap 1.0 over to using LESS. There's a huge amount of work involved in getting the visual overrides, states, animations etc in Bootstrap 2.0 working with the existing theme and getting much of the form setups etc confining to jQuery UI's way of doing things cross-browser. This isn't a trivial amount of work for the port.
It'll take time either way, but there's definitely a new version in the works.
I think using LESS (and the variables.less) is a pretty good feature, because this way all your elements look the same, and colors/styles can be changed with just setting a couple of variables. (Like the border-radius, and the blue color in the links/sliders)
I am looking forward for LESS, too but a first working version without LESS is also nice.
from what I see, t1gr0u has a really good start.
he was on 0.14 from Jan but his index-less2.html works with bootstrap 2 and has the css less already broken out.
We would need to just merge any fixes and features from Jan on.
addyosmani, what can I do to help? I have 2 days between now and Monday that I can dedicate to this. We too could really use it in the next couple of weeks.
@basejump If you have time to fork + merge the changes from Jan on, I could pull them back into the Dev branch or create a new one we can focus on. Appreciate any help at all really.
I'm all for us using LESS if it means we have a stable base we can build on. You might be interested in seeing what I was trying to achieve with Bootstrap2-addy. Some of those changes could be better adapted to use LESS variables and we could continue work on from a single point (rather than multiple forks/branches) then.
I've been looking at it. Perhaps it may be easier to take what you have and convert back to less using something like http://css2less.cc/. Is the best approach to do a diff on jquery-ui-1.8.16.custom.css with the one from master to get my arms around what you have done? I have a handfull of design questions too. Perhaps we can do a skype or some direct emails to get the ball rolling? my skype name base.jump
Is the best approach to do a diff on jquery-ui-1.8.16.custom.css with the one from master to get my arms around what you have done
I believe so.
I have a handfull of design questions too
Because there are a few developers and designers interested in helping out, I think it would be more effective if you could create new issues on the tracker with specific questions or concerns and we can then discuss/flesh out solutions or decisions to them. Sound good?
Perhaps it may be easier to take what you have and convert back to less using something like http://css2less.cc/.
I've been wondering about this. One of the concerns I had with my approach to just going directly for a CSS implementation was how difficult it might be to clean it up into a more manageable LESS version of the project. Do you have much experience with the css2less tool?. One possible thing we could do is continue implementing using just CSS and convert to LESS prior to release. That does sound a little like doing things backwards, but might be quicker.
#95
I got most of it working with less. Take a look and let me know what you think. Still some minor inconsitencies and I have not tested IE but it looks good on Firefox/Safari/Chrome
https://github.com/basejump/jquery-ui-bootstrap/tree/Bootstrap2-less
Nice work @basejump! I also noticed you did some further cleanups. I'll test out your changes today and hopefully we can land them in a single Dev branch we can continue working off of. Appreciate your help!
Closing as this has already been done. We're mostly just making tweaks and doing coverage testing on the rest of Twitter Bootstrap 2.