Supplemento Modelli CSS

Modelli CSS aggiuntivi che puoi personalizzare senza dover ricostruire tutto

Un modello CSS aggiuntivo è un design di pagina completo che viene fornito con il suo foglio di stile già pronto all'uso: il markup esiste già e i colori, i font, la spaziatura, i pulsanti e il comportamento della griglia sono definiti da regole CSS che puoi modificare. Non stai scrivendo un foglio di stile da zero. Stai modificando quello di qualcun altro, il che è un lavoro diverso con insidie diverse.

Cosa modifichi effettivamente

La maggior parte del lavoro si riduce a un piccolo insieme di valori. I colori del brand sostituiscono la palette del modello, che di solito consiste in una manciata di valori esadecimali. I font cambiano in una o due dichiarazioni di font-family, oltre alle dimensioni e all'interlinea intorno ad essi. La spaziatura è l'aspetto che viene spesso sottovalutato: il padding e i margini delle sezioni sono ciò che impedisce a un modello di assomigliare alla sua demo, ed è qui che si concentrano le modifiche.

Poi ci sono le classi riutilizzabili. Un modello ti fornisce stili per pulsanti, card, badge e livelli di intestazione. Modifica ogni classe una volta e tutte le sue istanze verranno modificate di conseguenza. Modificare la stessa regola quindici volte o inserire override inline su singoli elementi è solitamente segno che qualcuno ha saltato la classe ed è passato direttamente all'elemento.

Il layout si basa sulle regole Grid e Flexbox: numero di colonne, spaziatura, allineamento. Lo stesso vale per il comportamento responsive, all'interno delle media query che ridisegnano gli elementi in base alla larghezza dello schermo di tablet e smartphone. Modificate il numero di colonne su desktop e controllate immediatamente i breakpoint. È qui che il restyling più spesso fallisce.

Vale la pena farlo prima di impegnarsi in un template CSS aggiuntivo: esaminate come è scritto il foglio di stile, se l'anteprima lo consente. Classi e variabili con nome significano un pomeriggio di rebranding. Migliaia di selettori generati significano una settimana.

Dove le regole personalizzate trovano posto

Nicepage mantiene i controlli integrati per lo stile di routine e lascia il codice CSS personalizzato per tutto il resto. Le regole possono essere applicate a un singolo elemento, a una singola pagina o all'intero sito; La guida al CSS personalizzato spiega i tre livelli e come si susseguono. Le regole personalizzate si applicano a uno specifico stato al passaggio del mouse, a una forma che i controlli standard non producono o a una singola eccezione all'interno di una sezione. L'opzione "Esporta CSS minimo per pagina" riduce l'output di ciascuna pagina agli stili effettivamente utilizzati dalla pagina stessa, ed è consigliabile attivarla quando un template complesso alimenta molte pagine semplici.

La maggior parte degli elementi grafici di una pagina supplementare si basa sulla ripetizione di quattro valori: uno stack di font, una tavolozza, una scala di spaziatura e un raggio del bordo. Modificandoli in modo sistematico, il template diventa irriconoscibile. Modificandone otto su dieci, rimane riconoscibile solo nei due punti mancanti.