I am more of a systems level developer trying to build up my skills developing nice looking UI. I’ve been using Vaadin for a while building basic apps without much UI. Now I need to build some better looking functional web sites. I’m looking for UI help.
Does anyone have a basic shell example that would have the following
Left Side Menu with a header along the top, content in the middle and a footer on the bottom. I've seen simple examples like
Div menu = new Div()
Div header = new Div()
Div content = new Div()
Div footer = new Div()
What I don’t know is how to style the Divs with css etc. to make it look nice and standard across all my applications as well as make it responsive so it works nice on a mobile device.
I’ve picked apart sample applications on line however, they are too complex to glean any solid basic UI best practices. I am hopeful someone has a simple sample application to start with that shows some best practice UI layout guidelines.
I have and I find them complicated and difficult to strip out just a basic UI framework. I see Vaadin just released the new business app which is also quite complex and seems amazingly overkill.
Perhaps I am wrong in my assumption that Vaadin is a simple UI framework. I find it surprising the amount of UI related code required to build a basic web site that runs on any browser on any device.
Being a big fan of the mvc pattern I thought it would be much easier to build a simple application layout as I described. It seems you have to know a lot more about css and so many details about the framework to build a simple application. I’m frustrated!
The component App Layout is under development for version 2.0 right now. Beta should land within a week. It is a component that provides you with a styled left side drawer and header. I guess a Project Base from the start page and App Layout 2.0 would get you quite far. Footer you still have to add yourself.
That’s much more what I have been looking for thank you so much. I will try to take your DivLayout sample into a quick project and see what happens.
I think it’s important to publish “best practice” guides that are easy to understand for people trying to learn a monolithic framework.
Another thought would be for the developers who create these large complicated demo’s to comment the code with simple lines saying why they are doing what they are doing. It takes a few extra minutes to add comments to the code but invaluable for developers like me trying to learn why they did things.