CSS layout - how?

Vaadin 6 / 7 / 8 Framework UI
1

Hello all,

I am looking for help or suggestion with using CSS layout. I use all Vaadin layouts with no problem, but I have no idea where to start with CSS layout. Example in the “book of vaadin” for CSS layout does not look like anything you would use in real life so I still haven’t seen CSS layout example. Recently I improved my CSS knowledge and now I am eager to try to use it in my Vaadin aps. I have couple of questions:

  1. Is it possible to use CSS layout without overriding its getCss() method? Overriding it and doing “if component return …” looks cumbersome if you have more than few components. Are there any alternatives? Why can’t I use addStyleName and define style in styles.css file?

  2. Would it be possible to build complex screens using CSS layout? For example:
    [size=1]

[font=courier new]
+---------------------------------------------------------+
|                                                         |
+---------+-----------------------------------------------+
|         |                                               |
|         |    +-------+    +---------+  +----------+     |
|         |    +-------+    +---------+  +----------+     |
|         |                                               |
|         |    +----------------------+  +----------+     |
|         |    +----------------------+  +----------+     |
|         |                                               |
|         |    +------------------------------------+     |
|         |    |table                               |     |
|         |    +------------------------------------+     |
|         |    |------------------------------------|     |
|         |    |------------------------------------|     |
|         |    |------------------------------------|     |
|         |    |------------------------------------|     |
|         |    +------------------------------------+     |
|         |                                               |
+---------+-----------------------------------------------+ 
[/font]

[/size]

This is a screen with side bar, top bar few fields and a table. I can easyly build this by combinig Vertical and horizontal layouts but I hope CSS layout could be more effcient. There are two types of problem here: a) general screen layout and b) fields layout. Would it be posisible to solve problem a) or b) or both using CSS layout?

Thanks for any reply!

2

  1. yes, that is how most people actually use it :slight_smile:

  2. yes; but you need to understand how the browser flows the elements. Creating a layout like the one you have involves a lot of CSS, and might just be easier to do with normal layouts if you aren’t familiar with the selectors involved.

3

Thanks,

“yes” for getCss() or “yes” for addStyleName()? :slight_smile:

Would it be possible to use 3rd party css modules for layout, e.g. http://purecss.io/layouts?

4

Yes, using addStyleName and putting the CSS in your theme files. And yes, you should be able to use those modules; but be aware that they might need some slight tweaking to get the correct results. e.g. making sure the parent Div has the correct styles, and that each child element (component) has styles that allow for the flow. For most of those you’ll need multiple CSSlayouts inside eachother to get all the DIV elements in place.