Web Design WordPress

CSS Framework per WordPress

Tiziano Fogliata

Scritto da: Tiziano Fogliata

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 migliori, 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.

Segnalo inoltre che probabilmente in futuro Automatic.css sarà compatibile anche con il plugin GenerateBlocks.

Automatic CSS

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.

Interfaccia di Winden

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.

Winden porta Tailwind CSS su WordPress

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.

Core Framework

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

Al momento ritengo che l’utilizzo di questi framework abbia senso soprattutto per chi ha scelto Bricks Builder o Oxygen Builder per la realizzazione di siti WordPress. Tra i framework citati in questo articolo, al momento, preferisco Automatic.css perché offre quel giusto mix di semplicità, potenza e flessibilità.

L’impiego di uno di questi framework con l’editor a blocchi Gutenberg è ancora poco integrato. Inoltre, con l’editor a blocchi, a seconda del tema utilizzato o degli eventuali plugin che forniscono blocchi aggiuntivi all’editor, ci potrebbero essere sovrapposizioni tra diverse regole CSS che potrebbero complicare le cose.

Inoltre, forse ti starai chiedendo come mai questi framework non supportano page builder come Elementor, Beaver Builder, Thrive Architect o Breakdance.

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.

Breakdance invece, supporta le classi globali, che però sono più limitate rispetto a quelle di Bricks e Oxygen e non permettono di gestire tutte le proprietà di un elemento.

Ti segnalo inoltre che Cwicly, qui trovi un articolo dedicato a questo page builder, ha annunciato il supporto al framework Tailwind, che sarà quindi utilizzabile direttamente all’interno dell’interfaccia di Cwicly.

Scegli di ricevere gratuitamente via email consigli utili per creare, gestire e migliorare il tuo sito WordPress

Questo campo serve per la convalida e dovrebbe essere lasciato inalterato.

Lascia un commento