In questo articolo voglio affrontare il tema dei framework CSS e del loro impiego nella creazione di un sito con WordPress. Mi concentrerò esclusivamente su quelle soluzioni che sono utilizzabili con i principali builder visuali per WordPress, in particolare Bricks Builder e Oxygen Builder.
Iniziamo però col vedere che cos’è e a cosa può servire un framework CSS.
Per proseguire con la lettura di questo articolo è utile avere almeno un minimo di familiarità con il linguaggio CSS (Cascading Style Sheets). Se il concetto di CSS ti è ignoto, ti invito a fare qualche ricerca in rete per capire meglio di cosa si tratta. In poche parole il CSS è un linguaggio che permette di definire gli stili e l’aspetto dei vari elementi presenti in una pagina HTML.
Un framework CSS è un set di regole CSS che può facilitare la vita del web designer e ridurre i tempi necessari alla realizzazione di siti e pagine web.
Esistono diverse tipologie di framework CSS. Ci sono quelli super essenziali, come sanitize.css, che servono giusto come base di partenza, ma senza offrire molto di più. Ci sono poi quelli più completi che offrono numerosi stili già pronti all’uso, come ad esempio Bootstrap, Foundation o UIKit.
Esistono poi quelli che vengono definiti utility-first CSS framework, come Tailwind e Open Props.
Quelli di quest’ultima tipologia, hanno l’enorme vantaggio di offrire un elevato livello di personalizzazione, non costringendo a utilizzare degli stili predefiniti. Offrono, in pratica, uno strumento per utilizzare i CSS in modo più organizzato ed efficiente.
Senza regole arrivano i problemi
Spesso, chi si avvicina a WordPress e inizia a utilizzare un page builder oppure l’editor a blocchi di WordPress, ha l’abitudine di impostare i colori, le spaziature e i caratteri del testo, manualmente su ogni singolo elemento di una pagina.
Non è colpa sua, è lo strumento che, nella maggior parte dei casi, lo induce a questo.
Inserisce un testo e vede che ha la possibilità di modificare il carattere, la dimensione, il colore, le spaziature… È normale che l’utente pensi: “Perché non dovrei farlo?” 😉
Mancanza coerenza e uniformità nel design
Lavorando in questo modo, è facile ottenere risultati poco coerenti tra i vari elementi di una pagina e tra le varie pagine dell’intero sito. Si iniziano a impostare colori simili ma non uguali, font leggermente diversi, spaziature differenti…
Chi non ha esperienza in ambito di web design, HTML e CSS, ignora alcune regole basilari, come ad esempio quelle relative alle dimensioni dei font, alle spaziature, alla lunghezza delle righe di testo.
Difficoltà di manutenzione
Oltre ai problemi di coerenza e uniformità tra i vari elementi presenti nelle pagine di un sito, un’ulteriore grave conseguenza di questo modus operandi è la difficolta di manutenzione futura. Senza regole CSS globali, ogni cambiamento richiederebbe interventi manuali su ogni singolo elemento di ogni singola pagina.
Chi invece è pratico di web design, conosce l‘importanza delle regole e ne apprezza i vantaggi. Ad esempio, sa che se prevede di utilizzare un tipo di intestazione in varie pagine del sito, è preferibile utilizzare una classe CSS che definisce l’aspetto di quell’elemento, piuttosto che impostare manualmente la dimensione del testo, il tipo di carattere, il colore e la spaziatura a mano ogni volta che inserisce quel tipo di intestazione.
Un framework CSS può aiutarti a ottenere un design più consistente e omogeneo nelle varie pagine e sezioni di un sito.
Framework CSS per i page builder di WordPress
Inizio col dire che un framework CSS non è indispensabile. Puoi sempre creare un tuo set di regole CSS personalizzate da utilizzare ed eventualmente riutilizzare su tutti i siti che crei.
Un framework CSS però, ti offre una base solida e già pronta all’uso che rende molto più rapido ed efficiente il lavoro. Questo è vero soprattutto per chi ha la necessità di sviluppare numerosi siti.
Utilizzare in modo proficuo un framework CSS richiede un minimo di tempo e di pratica. Ha quindi senso se intendi incorporare questo framework nel tuo flusso di lavoro come web designer. Se invece hai solo la necessità di realizzare un sito per te, probabilmente non vale la pena dedicare del tempo per imparare come utilizzare un framework CSS.
Vediamo ora quali sono alcuni dei principali framework CSS disponibili per i vari page builder utilizzabili con WordPress.
Automatic.css
Disponibile per: Bricks Builder, Oxygen Builder, Gutenberg
Prezzo: da $69/anno. Solo a pagamento.
Automatic.css è uno dei framework più noti, soprattutto per chi utilizza Bricks Builder. I suoi principi fondamentali sono: non fare troppo, non fare troppo poco e lasciare all’utente la libertà di personalizzazione. Inoltre, a differenza di altri framework, è espressamente ideato per l’utilizzo su WordPress.
Il framework ti permette di gestire le spaziature, la tipografia, la palette di colori e sfumature da utilizzare sul sito e molto altro ancora. Rende semplicissimo impostare una scala tipografica fluida, sia per desktop che per dispositivi mobili.
Una volta acquisita una certa familiarità con questo framework, ci si rende conto di quanto sia comodo essere supportati da una soluzione che automaticamente rende uniformi le spaziature, le dimensioni dei caratteri e che soprattutto renda facile modificare questi aspetti sull’intero sito.
Automatic.css è rende disponibili una serie di classi di utilità, come ad esempio:
text--xl
da utilizzare quando si vuole un testo di grandi dimensioni;- text–accent quando si vuole utilizzare il colore di accento per il testo;
- pad–none quando si vuole impostare a zero il padding di un elemento.
Ma dà accesso anche una serie di variabili CSS, permettendo una maggiore libertà. Variabili per le spaziature, come var(--space-m)
. Variabili per i colori, come var(--accent-light-trans-10)
. Variabili per le griglie CSS, come var(--grid-3)
.
Automatic.css si installa come un plugin e, una volta attivato, mette a disposizione un’interfaccia che permette la completa personalizzazione del framework.
Pur essendo utilizzabile in qualche modo anche con il semplice editor a blocchi Gutenberg, il principale ambito di utilizzo di questo framework è con i builder visuali come Bricks e Oxygen. Questo framework è compatibile anche con altri page builder come Breakdance e col plugin GenerateBlocks e anche con l’editor a blocchi di WordPress. Bricks Builder rimane però il builder di riferimento per il quale questo framework è stato sviluppato.

Winden
Disponibile per: Bricks Builder, Oxygen Builder, Gutenberg e Full Site Editing, Cwicly, Zion Builder
Prezzo: da $79/anno. Solo a pagamento.
Winden è un plugin che permette di utilizzare su WordPress le classi messe a disposizione dal framework Tailwind. Soprattutto è in grado di generare un file CSS che contiene solo le classi effettivamente utilizzate.
Tailwind è un framework molto vasto e completo che contiene migliaia di classi. Non avrebbe senso incorporare sul sito un file CSS enorme quando magari sono necessarie solo qualche decina di classi.

Con Winden è possibile utilizzare le classi di Tailwind anche all’interno dell’editor a blocchi Gutenberg. Va detto però che il plugin è decisamente più integrato con Bricks Builder.

OxyProps
Disponibile per: Bricks Builder, Oxygen Builder
Prezzo: da €39/anno. Solo a pagamento.
OxyProps è un plugin basato sul progetto Open Props, una collezione open source di proprietà CSS personalizzate.
È un plugin utilizzabile esclusivamente con Bricks Builder o Oxygen Builder. È infatti perfettamente integrato con questi due builder e mette a disposizione un menu contestuale per la scelta delle classi. Questo è un aspetto che ne facilita molto l’utilizzo, evitando di dover cercare o ricordare il nome delle varie classi.
Core Framework
Disponibile per: Bricks Builder, Oxygen Builder, Gutenberg. Disponibile anche per siti non WordPress.
Prezzo: €99. Per Gutenberg è disponibile gratuitamente.
Core Framework è un progetto relativamente giovane, ma comunque interessante. È sviluppato dagli autori di Motion.page.
Pur offrendo già una soluzione preconfigurata con diverse regole CSS, Core Framework permette di creare facilmente nuove regole globali e componenti personalizzati. Permette di gestire tipografia fluida, palette di colori e spaziature.

La versione per Gutenberg è disponibile gratuitamente, anche se al momento è ancora molto acerba, tanto da essere praticamente inutilizzabile.
Sono a pagamento invece la versione per Bricks Builder e Oxygen Builder. Entrambe le versioni sono acquistabili con licenza lifetime e per un utilizzo su un numero illimitato di siti.
Considerazioni finali
Ritengo che, al momento, soprattutto chi ha scelto Bricks Builder o Oxygen Builder per la realizzazione di siti WordPress può trarre beneficio dall’utilizzo di questi framework. Sebbene possa sembrare superfluo sottolinearlo, è importante ricordare che sviluppare siti WordPress con un visual builder e un framework CSS comporta l’aggiunta di sovrastrutture e un aumento della dipendenza da strumenti esterni.
L’integrazione di questi framework con l’editor a blocchi Gutenberg, invece, è ancora limitata. Inoltre, l’uso di Gutenberg, in combinazione con determinati temi o plugin che aggiungono blocchi personalizzati, potrebbe generare sovrapposizioni di regole CSS, creando potenziali complicazioni.
Inoltre, forse ti starai chiedendo come mai questi framework non supportano page builder come Elementor, Beaver Builder o Thrive Architect.
Una delle ragioni principali è che questi page builder non supportano l’utilizzo e la gestione delle classi globali come invece è possibile con Bricks e Oxygen.
Elementor, ad esempio, permette di definire degli stili globali per i caratteri e dei colori globali, ma nulla per gestire stili globali relativi ad altri elementi del sito. Inoltre, Elementor permette di assegnare delle classi ai vari widget, ma queste classi vengono sempre assegnate al div che contiene l’elemento e non all’elemento stesso.
Al massimo, con Elementor è possibile ricorrere a plugin come Style Kits for Elementor per avere a disposizione di stili globali su un maggior numero di widget.
Personalmente ho utilizzato alcuni di questi framework come Core e Automatic CSS per realizzare alcuni siti, ma preferisco sicuramente la libertà di poter definire i miei stili, le mie classi CSS ed evitare l’eccessiva dipendenza da strumenti esterni.