Twitter's Bootstrap

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 :D

Yes. And me too :grin:

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.

Daniel McGreal: 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 ?

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.

@Jouni - you are my hero.

I think, vaadin needs a new 'modern' default theme and you are the person which encourages my hopes that this will happen one day.

I have problems to use it in my own project if I just copy and paste the theme and the enum. I will get lots of warning, errors and file not found exceptoions.

I'm very new in vaadin. It would be cool to have a simple and quick 'how to use' document. I'll try it on my own and provide such a document if i was successful.

Regards

Tobias Scholze: I think, vaadin needs a new 'modern' default theme and you are the person which encourages my hopes that this will happen one day.

Well, that's what we think as well, and I've been working on a new Sass based theme for quite a while now, which should be ready for beta when 7.2 is released.

Tobias Scholze: I have problems to use it in my own project if I just copy and paste the theme and the enum. I will get lots of warning, errors and file not found exceptoions.

I'm very new in vaadin. It would be cool to have a simple and quick 'how to use' document. I'll try it on my own and provide such a document if i was successful.

Sorry to hear that. The only thing you should need to do is to copy the "bootstrap" theme folder over to your projects VAADIN/themes folder and copy the Bootstrap.java to your src folder. Then set the theme for your UI instance with the @Theme annotation.

If you wish to extend the theme, I would recommend that you just import the "styles.css" file directly, and not the "bootstrap.scss" file, there aren't really any useful mixins, functions or variables that you can use from it.

Good evening Jouni,
I'm looking forward to test the 7.2 beta! Three more month to go (Roadmap).

I did your steps before my post. It's the sass compiler which means that it does not find files like typography.css. I have to investigate this.

Thanks for your fast reply! Vaadin has a vital community. Great to feel the spirit. :)

Regards,
- Tobi

I would love to have this feature... For some people and businesses, how your application looks (sadly) is as important as functionality...

I can't stress out how important Themes and making us java developers "look good" is.  By enabling tools to help us to that end is crucial when deciding which tool/framework to use.

~rick

I've found that without too much fuss (obviously objectional :D) you can integrate Twitter's bootstrap components with the CustomLayout. An example below shows adding a dropdown button component.

First
Make the bootstrap.css or bootstrap.min.css file somewhere accessible to your theme's css via an @import "path/to/file";

Second
Make sure jquery and boostrap js files are available to your CustomLayout via the @JavaScript annotation. You can add this at the UI class so that the javascript is added to the head of the base html page. Make sure that you put the javascript files in the same src directory that your UI class is in (i.e src/com/example/bootstraptest/javascript.js). They won't load correctly if they're somewhere under your WebContent folder. Also, it's important to put the jquery file first in the array since bootstrap requires it to run.

@JavaScript( value = { "jquery-1.11.0.min.js", "bootstrap.min.js" })

Third
Make sure you have the html file available under your /VAADIN/themes/<theme>/layouts directory

button.html:
Note: I'll be inserting a button where bootstrap demo code had an <a> tag. I wanted to be able to have a ClickListener that would allow me to act however I wanted with the click on the dropdown menu item.

<div class="btn-group">
  <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
  <ul class="dropdown-menu">
    <li><div location="userBtn"><a href="#"><i class="icon-pencil"></i></a></div></li>
    <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
    <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
    <li class="divider"></li>
    <li><a href="#"><i class="i"></i> Make admin</a></li>
  </ul>
</div>

Fourth
You'll need to make some custom css wrappers for the Vaadin component to play nicely with the bootstrap styles. You can simply add these to your <theme-name>.scss file, make some mixins, or whatever.

.dropdown-menu-button {
color: #333;
  display: block;
  padding: 3px 20px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.428571429;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border: none;
  border-radius: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
       -o-user-select: none;
          user-select: none;
}
    
.dropdown-menu-button:hover {
background: #fdfdfd;
}

Finally
Put it all together! The good news is that once you figure out how to do it once, you can more quickly integrate components all over. The custom css wrappers typically only need to be set up once and then you can re-use them as needed.

@Theme("theme-name")
@JavaScript( value = { "jquery-1.11.0.min.js", "bootstrap.min.js" })
public class BootstrapTestUI extends UI {

    @WebServlet(value = "/*", asyncSupported = true)
    @VaadinServletConfiguration(productionMode = true, ui = BootstrapTestUI.class)
    public static class Servlet extends VaadinServlet {
    }

  @Override
    protected void init(VaadinRequest request) {
  CssLayout layout = new CssLayout();
  layout.setSizeFull();
  setContent(layout);
 
  final Button btn = new Button("User");
btn.setPrimaryStyleName("dropdown-menu-item");
btn.addClickListener(new ClickListener() {
@Override
   public void buttonClick(ClickEvent event) {
   Notification.show("You clicked the dropdown-menu-item!");
   }
});
        
CustomLayout cl = new CustomLayout("button");
cl.setSizeFull();
cl.addComponent(btn, "userBtn");

layout.addComponent(cl);
}
}

Some things to be aware of:
One thing to note when using the CustomLayout, if you haven't accounted for that responsive html content popping on screen, you'll need to make room for them. If the CssLayout I used in the example didn't have the setSizeFull() (or at least some setHeight() size to increase the size) method called, I wouldn't be able to see the dropdown menu offered by the button when clicked.

Adding static content is always easier of course. If you wanted to add a button and just style it like a bootstrap button you could stick with using the setPrimaryStyleName() / setStyleName() / addStyleName() for whatever was appropriate.

One project I'm working on right now is integrating a bootstrap ui with CustomLayout as my primary layout containers and judiciously using my location=" tags. This essentially lets me work with an html layout and css (check out layoutit.com for some cool layout helpers for us non web designer guys), yet handle my server side business logic with my vaadin components, and more importantly JAVA!.

They can also dynamically update my html with page by injecting different CustomLayout templates... you get the picture hopefully. Tie that in with a Navigator component, and you can serve what seems to be a purely html/css/javascript driven project with Vaadin and Java behind the scenes (even though that's technically what Vaadin ultimately spits out anyways). I guess its a psuedo .jsp ... but without having to learn jsp.
 

I started learning Java about 5 months ago and have zero web design experience. In fact, I'm relatively new to coding/programming in general, so regardless of Java, any web framework would take time to learn and understand for me. The Vaadin paradigm was very appealing because the framework is very user friendly for people like me, but it's complex enough for the people who really know what they are doing as well. The first project we did with Vaadin is very similar to the Dashboard demo. The layout was done completely with the Vaadin server side approach, no crazy gimmicks.

However, doing a lot of customization on the CSS theme proved to be difficult if we were trying to closely immitate some example site we'd seen. I needed to come up with a way that would allow me to benefit from some of the other web development tools that were out there, like quickly mocking up a page design with an html/css tool and figuring out an easy way to implement that skeleton design into our project. Several tools often allow you to build and then download on the spot, and getting that into Vaadin wasn't easy for me to do initially.

I definitely agree this is not a conventional approach to using Vaadin. However, this opens the door for me to use anyone's theme regardless of it being bootstrap. And, since most themes are built with the html and css closely intertwined, its difficult to just adopt just css side on its own. This also provides a way to take care of importing the javascript needed to accompany these other themes with relative ease.

All in all, I just think that Vaadin is a really versatile framework. It allows users to not only follow the guidelines laid out in documentation, but it also allows users to do unconventional and completely ludicrious things like I've tried, and get results.

Hi all

Do you know if a tutorial to integrate the Official Sass port of Bootstrap in Vaadin is available somewhere?
Sorry but I'm new to Vaadin the Readme on github didn't help me a lot :(

Thanks,
Paolo

Hi,

Sorry, I'm quite sure there's no good tutorial on that subject for now. If you plan to start the integration, you can ask for some help here if you want.

I'm trying to integrate the Official Saas port of Bootstrap. I encountered a problem when the '@import "bootstrap.scss' is performed by vaadin.

When parsing varaibles:
$state-success-bg:               #dff0d8 !default;
$state-success-border:           darken(adjust-hue($state-success-bg, -10), 5%) !default;

the ColorUtil.class (line 270) method  public static float[] colorToHsl(LexicalUnitImpl color)  gets 'Lexical unit node [adjust-hue(#dff0d8, -10)]' as the color argument. (As i debugged, this method should receive #rgb or #rrggbb) This is some kind of parser error? Or simply lack of adjust-hue method?

As you said, It looks like adjust-hue function might be missing. If you can create a reduced test for that, and create a ticket about it, it would great!

Jouni Koivuviita: As you said, It looks like adjust-hue function might be missing. If you can create a reduced test for that, and create a ticket about it, it would great!

There's actually a 4 month old ticket about adjust-hue() not working: http://dev.vaadin.com/ticket/13982
 

Hello guys,

Is there any new progress in integrating bootstrap in Vaadin?

Thanks.

I'm trying to integrate Boostrap-sass with Vaadin, but the Vaadin Sass compiler can't compile boostrap ... 

You might want to try this approach, to replace the Vaadin Sass compiler with libsass:  https://github.com/pleku/vaadin-libsass

Thanks, I'll try that ;-)
 

Ok guys, I manage to make it work ! Here is my solution
            

<!-- Sass Compiler -->
            <plugin>
               <groupId>com.github.warmuuh</groupId>
               <artifactId>libsass-maven-plugin</artifactId>
               <version>0.2.8-libsass_3.4.4</version>
               <executions>
                  <execution>
                     <phase>generate-resources</phase>
                     <goals>
                        <goal>compile</goal>
                     </goals>
                  </execution>
               </executions>
               <configuration>
                    <enableClasspathAwareImporter>true</enableClasspathAwareImporter>
                    <outputStyle>compressed</outputStyle>
                    <inputPath>${basedir}/src/main/resources/VAADIN/themes/mytheme/</inputPath>
                    <outputPath>${basedir}/src/main/resources/VAADIN/themes/mytheme/</outputPath>
               </configuration>
            </plugin>

The following line in the config allow libsass to find scss file on the classpath (for Instance the Valo theme)

<enableClasspathAwareImporter>true</enableClasspathAwareImporter>

And my SCSS file starts with:

@import "VAADIN/themes/valo/valo";

.mytheme {
    @include valo;
    
    @import "META-INF/resources/webjars/bootstrap-sass/3.3.7/stylesheets/_bootstrap.scss";
}

I needed to wrap Bootstrap in my theme so that it does not interfere with the site embedding the App (I'm using the CORS integration)
As you can see, I use the WebJar dependency for Bootstrap

<!-- https://mvnrepository.com/artifact/org.webjars/bootstrap-sass -->
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>bootstrap-sass</artifactId>
    <version>3.3.7</version>
</dependency>

I hope it may help others trying to achieve similar things

Adrien

Just giving my first steps with Vaadin, I've been trying to workout the "responsive design which could provide a vaadin interface working well in desktop, tablets and phones" part with Bootstrap 4 and Vaadin 14 and came up with a simple and straightforward solution.

In a documentation page explaining what's include in Bootstrap, in a section dedicated to CSS Files, they state that "Bootstrap includes a handful of options for including some or all of our compiled CSS.", which comes in 3 flavors:

• All included - everything for Layout, Content, Components and Utilities;
• Grid - Only grid system for Layout and Only flex utilities for Utilities;
• Reset - Only Reboot for Content.

By only including their Grid CSS, I can now play with CSS classes to create responsive layouts. For those not familiar with Boostrap I recommend going through the following sections of their documentation:

• Grid system;
• Flex;
• Display property.