<

Css

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:

DispositiviRisoluzione
smartphonefino a 781px
tabletda 782px a 1279px
laptop/desktopda 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 schermoSi traduce in
fino a 781pxfino a 209mm
da 782px a 1279pxda 210mm a 296mm
da 1280px in poida 210mm
Calcolare che un foglio A4 ha una dimensione di 297mmx210mm.

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

DipositivoRisoluzioneMedia query cssCostante equivalente
Smartphonefino a 781px@media only screen and (max-width:781px)@media PHONE
Tabletda 782px a 1279px@media screen and (min-width:782px) and (max-width:1279px)@media TABLET
Laptop/desktopda 1280px@media only screen and (min-width:1280px)@media DESKTOP
Tablet/desktopda 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
ClasseTipoDescrizioneCss corrispondente o esempio
hiddenonphonemedia queriesNasconde l'elemento su smartphone@media only screen and (max-width:781px){
display:none !important;
}
hiddenontabletmedia queriesNasconde l'elemento su tablet@media screen and (min-width:782px) and (max-width:1279px){
display:none !important;
}
hiddenondesktopmedia queriesNasconde l'elemento su desktop@media only screen and (min-width:1280px){
display:none !important;
}
hiddenontabletdesktopmedia queriesNasconde l'elemento su tablet e desktop@media only screen and (min-width:782px){
display:none !important;
}
gpci-ok-messagesmessaggiMessaggio a sfondo verde e colore bianco per notificare un esito corretto.Messaggio
gpci-yellow-messagesmessaggiMessaggio a sfondo giallo e colore bianco per notificare un esito che necessita attenzioneMessaggio
gpci-error-messagesmessaggiMessaggio a sfondo rosso e colore bianco per notificare un esito non a buon fineMessaggio
gpci-grey-messagesmessaggiMessaggio a sfondo grigio e colore bianco per notificare una condizione iniziale o nessun esitoMessaggio
wp-element-buttongutenbergAssegna lo stile grafico di un pulsante wordpressin base alle regole css del pulsante corrente
alignwidegutenbergImposta la larghezza massima uguale come proprietà wideSize del theme.json (se impostata)max-width: var(--wp--style--global--wide-size)
alignfullgutenbergImposta 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):

ValoriElementi validiElementi usati attualmente
0-20Elementi comunemente visualizzati, come: html, body, titoli, paragrafi, gruppi)Nessuno
21-40Menu personalizzatiMenu classic default: 30
41-60Elementi in sovraimpressione dopo interazioni, come modal aperti, tooltips, ecc..Modal: 51
101+Elementi forzatamente davanti a tutti gli altri(es: cookie modal)Sezione cookies