3: CSS

Phlo heeft zijn eigen compacte CSS-syntaxis: geen puntkomma's, geen accolades vereist voor enkele regels, en $variables die compileren naar CSS aangepaste eigenschappen. In dit hoofdstuk geef je de poll een donkere kaartlay-out en een klein thema, in een speciale stijlbestand.

3.1: Een stijlbestand

Stijl kan in elk .phlo-bestand leven, maar een speciaal bestand houdt dingen netjes. Maak poll.style.phlo:

<style ns=app>
body {
    margin: 0
    background: #0d0f12
    font-family: system-ui, sans-serif
}
main.poll {
    max-width: 560px
    margin: 8vh auto
    padding: 0 24px
}
</style>

De ns=app namespace vertelt de build bij welke bundel deze CSS hoort; alles in de app namespace wordt gecompileerd in www/app.css, waar view() automatisch naar linkt. ns=app is ook de standaard, maar het uitschrijven houdt grotere apps leesbaar.

Herlaad http://localhost/poll: gecentreerde kolom, donkere achtergrond. De build werd automatisch uitgevoerd op het verzoek en genereerde app.css opnieuw.

3.2: Één verklaring per regel

De CSS-parser behandelt elke regel als één complete declaratie, en de dubbele punt heeft een dubbele functie als zowel selector-nesting als eigenschapsseparator:

.card {
    background: #16181d
    border-radius: 12px
    padding: 24px
    margin-bottom: 16px
}
h1: margin: 0 0 24px
.card: p: line-height: 1.6em

h1: margin: 0 0 24px is een complete regel op één regel. .card: p: ... nestelt: het compileert naar .card p { line-height: 1.6em; }. Wrap nooit een waarde over meerdere regels tenzij je de eigenschapsregel eindigt met een blote : of elke vervolgregel eindigt met een komma; alles wat anders is, is een build-fout.

Voeg het .card-blok en de h1-regel toe aan poll.style.phlo en herlaad: de knoppen zitten nu in een kaart.

3.3: Thema-variabelen

$name in een stijlblok wordt de CSS aangepaste eigenschap --name, en elke plaats waar je het gebruikt wordt var(--name). Definieer het thema eenmaal in :root en gebruik het overal. Dit is de volledige poll.style.phlo voor de rest van de tutorial:

<style ns=app>
:root {
    $text: #f4f4f5
    $surface: #16181d
    $primary: #ff4a00
    $border: #2a2e36
    $muted: #9aa0aa
}
body {
    margin: 0
    background: #0d0f12
    color: $text
    font-family: system-ui, sans-serif
}
main.poll {
    max-width: 560px
    margin: 8vh auto
    padding: 0 24px
}
h1: margin: 0 0 24px
.card {
    background: $surface
    border: 1px solid $border
    border-radius: 12px
    padding: 24px
    margin-bottom: 16px
}
form: display: inline
button {
    background: $primary
    color: $text
    border: none
    border-radius: 8px
    padding: 10px 18px
    margin-right: 8px
    cursor: pointer
}
</style>

Vijf variabelen dragen het hele thema: $text, $surface, $primary, $border, en $muted (je gebruikt $muted in het volgende hoofdstuk voor de stemtellingen). Wil je later een licht thema? Verander vijf regels in :root.

3.4: Controleer de output

Kijk naar wat de compiler heeft geproduceerd:

docker run --rm -v $(pwd)/app:/app ghcr.io/q-ainl/phlo cat /app/www/app.css

Je ziet reguliere CSS: :root { --text: #f4f4f5; ... }, button { background: var(--primary); ... }. Phlo schrijft de puntkomma's, de accolades en de var() wrappers; jij schrijft één declaratie per regel.

Herlaad http://localhost/poll: een donkere kaart met de vraag en vier oranje knoppen. De pagina ziet er nu uit als een poll. Het kan alleen nog niet tellen.