In this video, Marcus Hellberg shows you how to use the new Vaadin Lumo CSS utility classes to easily create layouts without having to write custom CSS. The utility classes conform to Tailwind CSS classes to make them easy to pick up.

0:00​ - Intro
0:33​ - How to style Vaadin Fusion views with CSS
1:38​ - Installing the Vaadin Lumo CSS framework
2:42​ - Sizing and alignment
5:03​ - Responsive horizontal layout with flexbox
7:00​ - Vertical layout with flexbox
10:10​ - Grid layout
11:10​ - Example layout with toolbar and grid
11:25​ - Setting class names on the view element
15:19​ - Outro

Source code: https://github.com/marcushellberg/vaa… ​

Subscribe: https://www.youtube.com/channel/UCsGakFIbOsj-fgPFLf1QlQA

#css #vaadin