As a rehearsal for my workshop at GWT.create 2013, I gave an internal presentation/workshop last year about responsive layouts in Vaadin. The workshops at the conference weren’t recorded, but fortunately we record all of our internal presentations and trainings, so you have a chance to see this workshop after all (the content has only small differences to the actual workshop at the conference).
During the two hour session I briefly introduce the concept of responsive layouts and then proceed to implement a very typical collapsing header-sidebar-content layout – which works across desktop, tablet and phone browsers – using Vaadin, Sass, media queries and the Vaadin Responsive add-on.
If you’re interested in the source code for the example, you can get that from GitHub. The slides are available there as well: https://github.com/jounik/GWT.create-workshop
Jouni Koivuviita is the main CSS and graphic wizard at Vaadin. He’s been responsible for the core themes since 2006, when he joined Vaadin, but he also enjoys playing with GWT and JavaScript when creating great web apps. You can follow him on Twitter – @jouni