Accessibility Now
Join our upcoming webinar about building accessible web applications! June 7, 2022.
Blog

Responsive layouts with Vaadin and Sass

By  
Jouni Koivuviita
Jouni Koivuviita
·
On Feb 25, 2014 8:22:00 AM
·

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 KoivuviitaJouni 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

Jouni Koivuviita
Jouni Koivuviita
Hi! I’m a long time Vaadiner since 2006. My goal has always been to provide you with the best UI components in the world for mobile and desktop web applications. Still hoping to get there eventually :D
Other posts by Jouni Koivuviita