Vaadin 10 is just for Vaadin designers users?

Flow
1

Hi,

i try to start a project using vaadin 10 and i wanted to know if this big change is all about using Polymer Templates (Vaadin Designer) and Flow?

How can i start a project without Vaadin designer? . I try to add some css style (scss no used anymore in Vaadin 10) but is not rendered , i miss something?.

Is there an example of using responsive css and Vaadin Components with and no Polymer templates?.

@Route
@PageTitle(“My Title”)
@Theme(Lumo.class)
@StyleSheet(value = “frontend://styles/main-styles.css”, loadMode = LoadMode.EAGER)
@Viewport(VIEWPORT)
public class MainView extends Div implements RouterLayout, BeforeEnterObserver {
…

2

I just went through all the documentation and found it fairly straight forward using Polymer templates but yes a huge amount of reading. Read the part on ThemableMixins to add style to web components. Styling is a little different due to the shadow dom but I’ve found it much cleaner and modularised than before.

3

Hi @Joksan Nempu ,

Could you precise which IDE are you running? I’m also trying to get the latest Flow feature without using Designer and PRO LICENCE.

regards

4

Hi Joksan,

How can i start a project without Vaadin designer?

I’d recommend looking into one of the [starters]
(https://vaadin.com/start/latest). Download one and import it using your favorite IDE, and off you go.

I try to add some css style (scss no used anymore in Vaadin 10) but is not rendered , i miss something?

In your example, you should be able to add styles to main-styles.css. You can also look into how [Beverage Buddy]
(https://vaadin.com/start/latest/simple-ui) does its theming (see MainLayout.class).

Is there an example of using responsive css and Vaadin Components with and no Polymer templates?

Responsive styles are implemented with [media queries]
(https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries). If you want to theme individual Vaadin components, you can use [DOM modules]
(https://github.com/vaadin/vaadin-themable-mixin/wiki/4.-Scoping-Styles-in-a-Theme-Module), e.g.

<dom-module id="my-text-field-theme" theme-for="vaadin-text-field">
  <template>
    <style>
      [part="input-field"]
 {
        background-color: blue;
      }
    </style>
  </template>
</dom-module>