How to beautify the Starter website

[lprimak]

@FlipWarthog suggestions from Discord:

• Use a consistent font. The PrimeFaces components use a sans sarif font but the plain HTML elements use browser defaults
• Center form layout into a "card" or shadow box that's offset from the background
• Use 2-column layout for larger screens, with 1-column for mobile

[lprimak]

body .main-panel > .ui-panel-content {
    border-radius: 20px;
    box-shadow: 5px 10px 10px 0 #00000026;
    padding: 5rem 10rem;
    background-color: #F9F9F9;
}

That gives it the "card" look. For the font and other layout, it might be as simple as

body {
    font-family: var(--font-family);
}

[lprimak]

Use PrimeFlex Grid? Need some examples how to do that...

[FlipWarthog]

PrimeFlex Grid docs:
https://primeflex.org/gridsystem
https://primeflex.org/formlayout

Simplest example:

<div class="grid">
    <div class="col-12 md:col-6">
        <p:inputText ... />
    </div>
    <div class="col-12 md:col-6">
        <p:inputText ... />
    </div>
</div>

This will set up a 2-column layout (each element takes up 6 of the 12 columns) on Medium or larger screens, but smaller screens will put each in their own row (12 of 12 columns wide).

[lprimak]

Thanks, I'll try that. Messing around with AI to see what that gives me. So far not bad results too. The above way is simpler though :)

[lprimak]

I got AI to work with PrimeFlex, looks like progress is being made

[lprimak]

Fixed by 241ac1b
@FlipWarthog What do you think? Is this too complicated or is this what pretty much needs to happen?