Algemeen
p3.css CSS is van toepassing.
--var: zijn variabelen;
op breakpoints
@media (min-width: 444px) { ..
--gap: 16px
veranderdt de lege tussenafstand tussen cellen van de grid. wat de grid doet herberekenen.
grid
1 - 5 - 1 is verhouding cell tov ruimtes ernaast.
0 - 720px mobile
4 cell breed
16px -- 16px x 6 x 4 + 16px = 400px grid
24px -- 24px x 6 x 4 +16px = 592px grid
720px - 1296px tablet
12 cell breed (A4 zonder A6)
10px -- 10px x 6 x 12 + 10px = 736px
18px -- 1269px x 6 x12 + 18px = 1314px
1296px - 4k screen
18 cell (A4 + A6)
12px -- 12px x 6 x 12 + 12px = 1308px
24px -- 24px x 6 x 18 + 24px = 2616px
Fonts
:root {
font-size: calc(var(--sFont) * var(--gap));
}
deze regel staat helemaal onderaand p3.css en heeft voorrang op al erboven. --sFont blijft 1 altijd.
rem (root em) krijgt ook deze grootte.
em is de gekozen grootte van elementen doorheen het document. kan als maat gebruikt worden net als rem. em en rem zijn relatief volgens mij.
16px =* 12pt
1 pt == 1.3281472327365 px
Waar, welke lettertype + grootte. (ifv rem, dit veranderdt per breakpoint naar --gap, of per breakpoint(3) in px of pt)
Kleur, links en knoppen
Kleur ik stel een palet op ( 9 subkleuren per hoofdkleur, ook voor grijs )
Ruimtegebruik
mag luchtiger, kan ook op een blad zelf door positie van elementen vast te klikken.
titel / naam / context van een pagina zou ook een plaats kunnen krijgen in de navigatie. voorbeeld dataveyes.com
Menu / navigatie
bruikbaar, opent als men in de buurt hovert. geeft aan waar je bent in de site. helpt mensen hun weg vinden.
