Anyone interested in implementing
Twitter’s Bootstrap
in Vaadin? Shouldn’t be too difficult because there is already a
gwt-bootstrap
implementation available.
Advantages:
That would be great!
If we can help, please give us more info…
Hi all,
We would be interested by using Vaadin with the “bootstrap” CSS made by Twitter, so that all our applications have the same design.
http://twitter.github.com/bootstrap/
Content of bootstrap.zip :
=>
foler css = bootstrap.css + bootstrap.min.css + bootstrap-responsive.css + bootstrap-responsive.min.css
folder img = … png
folder js = bootstrap.js + bootstrap.min.js
Have we to transform this bootstrap into a Vaadin theme in order to use it ?
Or can we put these 3 folders “as it” in /WebContent/VAADIN/themes ?
Eric
You will need to rewrite almost all the CSS selectors in order to make it work (in the 6-series).
In the Vaadin 7 nighties you might be able to change the component primary style names to match the ones in the Bootstrap CSS, so it might work a bit better out of the box. But still you will need to tweak lots of selectors since the DOM structures of the Vaadin components are totally different from the ones that the Bootstrap expects.
Also, to make the custom JavaScript components work you will need to wrap them into Vaadin components. This is easier in Vaadin 7 than in Vaadin 6, but requires some work still.
I’m not saying “don’t do it”, but rather, be prepared for actual work in order to get Bootstrap incorporated into Vaadin. If I had any more time, I’d be happy to help in this, but I can’t make any promises at this time 
Hi,
If you want to try this, i’m in.
I think it could be a good functionality, Vaadin should contribute.
Mobile devices are taking a bigger part of web browsing.
2 years ago, i decided to take vaadin as web developement framework as it was, to me, the best framework to do web development.
Now, I have to consider mobile devices and I don’t want to do twice the job, by developing all my applications in Vaadin then duplicate them in Vaadin Touchkit.
I’d prefer to use an unique application by using fluid grids and media queries.
Bootstrap is perfect to do layouts but i’d prefer to use Vaadin for forms development in order to keep all my logic on server side with java development.
Currently, i think it’s quite dificult to do it as Jouni said and this lack of responsive design functionalities could make developers quite Vaadin to other frameworks.
Fluid grids and other responsive stuffs in Vaadin would make Vaadin even more attractive. 
I’m too 
Yes. And me too 
Is anyone working on this? I’d love to try it out.
Count me in too! I was just about to start a thread on this. My CSS skills are not great, but you need a code monkey, I’m furry, got a tail and eat bananas.
I also think it would take pressure off the Vaadin team in terms of design of themes and open Vaadin up at the design level to the wider market, as has been done with the Javascript API level.
The problem with being a “developer” oriented toolset is that clients are more and more inclined to say “I want it to look like X” which is often Twitter-like, Facebook-y, or more “modern” in general.
By integrating Bootstrap CSS (Vaadin already has SASS in 7) it would mean that themes could be purchased or downloaded (see http://bootswatch.com). I think this would be a
huge
positive step forward for Vaadin.
Really looking forward to this feature. Any updates now? I create a feature vote on this topic. Please vote for it.
http://vaadin.uservoice.com/forums/20474-general/suggestions/4109656-vaadin-support-twitter-s-bootstrap
I wonder if Jouni, or another authority could give any more hints, given we’re now in a post-7 world.
agree with daniel. is something going ?
Hi all,
I started looking into this again with a bit more scrutiny. I’ll add my observations here as I go along with all the parts of Bootstrap (looking at Bootstrap 3 RC1).
But as I said earlier, don’t expect any quick wins here, since Bootstrap was designed and built in a way that expects you are in control of the HTML output of you project, and just sprinkle in the correct CSS class names. The LESS that produces the final CSS doesn’t really offer much flexibility in altering those CSS class names, making it hard to match Vaadin’s HTML output to those class names. But let’s see what can be done, as we all agree it would be great to have these two awesome frameworks working together
So, after a couple of hours, here’s the initial result:
Source:
github.com/jounik/bootstrap-for-vaadin/
Demo:
dev.jouni.me/bootstrap
Jouni, thank you!
Thanks Jouni. Are you planning to get full CSS support? and what about availability of bootstrap.js components to comparable vaadin ui components.
We currently have a Spring MVC web application that uses twitter bootstrap, but now are starting to migrate code over to a Vaadin 7 web app project.
Jouni, the demo app looks good!
As a Java developer I chose Vaadin for the obvious reason to program web apps in java code. Seeing themes such as Bootstrap or other JSF frameworks eg. PrimeFaces they seem to me a bit fresher and modern than the standard Vaadin themes.
Of course Vaadin provides the ability to create your own themes, but as a java developer I try to avoid CSS as much as possible, unless I really have too and in most projects this is necessary.
As Stephen already asked, is there any plans to support the full Bootstrap CSS? I think this would be a welcomed feature.
Well, to be honest, the plans are such that there aren’t really plans, just hopes
I hope that I can find more of my 5% time in Vaadin to contribute more to this project, but since I’m currently very involved with the new Sass based Vaadin theme, finding that time will be hard.
If I mange to find the time, then the plan is to work towards full Bootstrap CSS support (as much as possible). And after that we could start planning how to integrate the Bootstrap JS widgets to Vaadin.
And as I said earlier, please, feel free to start hacking away with the source. I can also provide pointers and help to get you started.