Il wordpress Gpci framework comprende alcune classi predefinite per aiutare gli utenti a gestire le visualizzazioni degli elementi sullo schermo, i patterns e le risposte ajax dei form. Inoltre comprende un sistema di costanti css collegato direttamente ai breakpoints principali del tema. Questa pagina serve a dare una panoramica sul css, classi utili, i breakpoint e le media queries del framework.
Breakpoints
Nel wordpress Gpci framework, al momento, i breakpoints css principali sono 3:
| Dispositivi | Risoluzione |
|---|---|
| smartphone | fino a 781px |
| tablet | da 782px a 1279px |
| laptop/desktop | da 1280px in poi |
Quasi tutto è già preconfigurato da wordpress ma, per definire graficamente elementi o blocchi personalizzati (come nel caso del blocco gutenberg menu classico), utilizzeremo media queries con regole css.
Breakpoints di stampa
Menzione a parte meritano i breakpoints relativi la stampa, chiaramente a nel caso in cui sia attivato il modulo di stampa:
| Risoluzione su schermo | Si traduce in |
|---|---|
| fino a 781px | fino a 209mm |
| da 782px a 1279px | da 210mm a 296mm |
| da 1280px in poi | da 210mm |
Media queries
Le media queries servono a definire codice css per una certa risoluzione o per un certo dispositivo, hanno però lo svantaggio (a mio avviso) di essere scomode e poco intuitive da scrivere. Dato che abbiamo 3 breakpoints ho deciso di creare delle costanti css che saranno sostituite automaticamente con la media query corrispondente, è possibile utilizzare le costanti a livello globale/pagina/blocco nelle zone css corrispondenti. Non usare le stesse parole chiave nel css per le vostre regole personalizzate (anche se dovrebbe essere piuttosto difficile) per evitare che vengano sostituite involontariamente. Ora vediamo la tabella delle costanti css:
Costanti css
| Dipositivo | Risoluzione | Media query css | Costante equivalente |
|---|---|---|---|
| Smartphone | fino a 781px | @media only screen and (max-width:781px) | @media PHONE |
| Tablet | da 782px a 1279px | @media screen and (min-width:782px) and (max-width:1279px) | @media TABLET |
| Laptop/desktop | da 1280px | @media only screen and (min-width:1280px) | @media DESKTOP |
| Tablet/desktop | da 782px | @media only screen and (min-width:782px) | @media TABLET-DESKTOP |
Esempi
/*Questa regola è utilizzata nel classic menu default*/
@media PHONE{
#menu-classic-default-container{ display:block; }
}/*ed è l'equivalente di:*/
@media only screen and (max-width:781px){
#menu-classic-default-container{ display:block; }
}Le altre costanti css seguono la stessa logica che è piuttosto semplice.
Classi predefinite
Le classi css predefinite sono la somma delle classi generate da gutenberg e quelle preinserite dal framework. In questa tabella inserirò man mano le classi che possono trovare un utilizzo attivo e comune. Al momento le classi predefinite si possono dividere in 3 tipi:
- classi per media queries - nascondono un elemento su un certo dispositivo in base alla larghezza
- classi per messaggi - notificano visivamente un esito, come potrebbe essere l'invio di una mail tramite form o la compilazione di un messaggio in una textarea
- classi predefinite gutenberg - classi generate da gutenberg che possiamo utilizzare per dare uniformità grafica generale
| Classe | Tipo | Descrizione | Css corrispondente o esempio |
|---|---|---|---|
| hiddenonphone | media queries | Nasconde l'elemento su smartphone | @media only screen and (max-width:781px){ |
| hiddenontablet | media queries | Nasconde l'elemento su tablet | @media screen and (min-width:782px) and (max-width:1279px){ |
| hiddenondesktop | media queries | Nasconde l'elemento su desktop | @media only screen and (min-width:1280px){ |
| hiddenontabletdesktop | media queries | Nasconde l'elemento su tablet e desktop | @media only screen and (min-width:782px){ |
| gpci-ok-messages | messaggi | Messaggio a sfondo verde e colore bianco per notificare un esito corretto. | |
| gpci-yellow-messages | messaggi | Messaggio a sfondo giallo e colore bianco per notificare un esito che necessita attenzione | |
| gpci-error-messages | messaggi | Messaggio a sfondo rosso e colore bianco per notificare un esito non a buon fine | |
| gpci-grey-messages | messaggi | Messaggio a sfondo grigio e colore bianco per notificare una condizione iniziale o nessun esito | |
| wp-element-button | gutenberg | Assegna lo stile grafico di un pulsante wordpress | in base alle regole css del pulsante corrente |
| alignwide | gutenberg | Imposta la larghezza massima uguale come proprietà wideSize del theme.json (se impostata) | max-width: var(--wp--style--global--wide-size) |
| alignfull | gutenberg | Imposta la larghezza massima al 100% | max-width: 100% |
Z-index
la proprietà css z-index in questo framework ha l'idea di avere un raggio controllato per ogni categoria di elemento per evitare di dover impostare dei valori inutilmente alti e creare caos nel foglio di stile e negli elementi mostrati sullo schermo. Se possibile utilizzare sempre questa tabella come riferimento (che verrà aggiornata man mano) quando si imposta la proprietà z-index a un elemento, in questo modo sarà più semplice allinearli correttamente sull'asse z minimizzando effetti non voluti (come menu che rimangono sotto alle sezioni o ai gruppi):
| Valori | Elementi validi | Elementi usati attualmente |
|---|---|---|
| 0-20 | Elementi comunemente visualizzati, come: html, body, titoli, paragrafi, gruppi) | Nessuno |
| 21-40 | Menu personalizzati | Menu classic default: 30 |
| 41-60 | Elementi in sovraimpressione dopo interazioni, come modal aperti, tooltips, ecc.. | Modal: 51 |
| 101+ | Elementi forzatamente davanti a tutti gli altri(es: cookie modal) | Sezione cookies |