Questions about basic layout components

Hello! Been testing around with hilla for a while, and decided to try making some views from scratch, no vaadin flow involved. But something that’s confusing me a bit is how to handle layouts.

I see the hilla documentation links to vaadin’s for the components included, and I saw the old and . I intended to make use of these, but even following the examples I’m struggling to get much done with them. I managed to arrange some stuff through utility css classes but i don’t see how that really makes use of the given components, over using them in a div

Am I missing something here? I wondered if perhaps there’s no support for these in hilla or something, since it’s on a separate page and may not match the split project, and the idea is to use flex and grid through utility classes. Thanks for reading.

You can certainly use the horizontal and vertical layout components if you wish, but you might find it easier to work directly with CSS in Hilla instead of the components as an abstraction.

When it comes to layouting in CSS, you can either define CSS in a .css file or use the utility classes – whichever makes more sense to you

Do you have an example of what you’re trying to build?

Nothing too fancy, just a generic profile page based on a mockup image.

I might give it another shot later, now being aware of this. Thanks a lot!

From what I see, I could make use of an imported css file, or a css`[...]` literal, either of them added to the styles static prop right?

If you have a project generated by the CLI, you can use the css files in the theme folder and you don’t need to import them in any way. Just remember to scope your styles with view-name if you want them to only apply in one view

This sounds like a good topic for a tutorial video, I’ll try to get one recorded tomorrow if I have time.

Sounds great! Will be looking forward to it <:crafterMoney:797088121955155979>

Just to confirm, are these horizontal/vertical/form layout components meant to work, or would they be just tags without effect in a hilla view specifically?

They do work with Hilla. If you don’t see any effect when using them, it’s likely because you haven’t imported them in your view.

Ahh, now I feel pretty dumb ngl :person_facepalming:

Though it’s interesting that no feedback was offered, as far as I can tell. No console error/warning, no IDE/linter warning (not hilla’s fault), etc.

VS Code does offer autocomplete for the vaadin component tags, but with no auto-import

Yeah, that’s an unfortunate limitation of the plugin still :frowning_with_open_mouth:

Ahh, that’s a shame to hear. Curious on this topic, though it might be worth a separate thread. Will make it and edit this reply with the link for future reference <:crafterMoney:797088121955155979>