A metà del 2013 Yahoo ha reso pubblica Pure.CSS, una struttura di base per lo sviluppo di front end per il web, che a ragione non solo vale come buona alternativa a Bootstrap, ma che può anche essere utilizzata in combinazione con il framework di Twitter. Pure.CSS si basa su SMACSS, acronimo per “Scalable and Modular Architecture for CSS”, un’architettura per CSS che fa sì che elementi ricorrenti come tabelle, pulsanti o formulari di contatto, siano divisi dal design di base (font, layout, ecc.) e che rispondano quindi alle proprie convenzioni.
Per questo motivo all’interno del framework di Yahoo ogni modulo possiede un nome standard della classe con il prefisso “pure-” per la creazione regolare, come anche nomi di classi aggiuntivi per regole specifiche che valgono per i sotto-moduli. Ad esempio, un formulario di contatto in cui il codice è scritto tutto di seguito, può essere incluso in Pure.CSS inserendo la classe “pure-form” o anche la sotto-classe “pure-form-stacked”.
Il framework per front end, scaricabile sia come variante responsive sia come variante non responsive, contiene le seguenti sezioni, che in forma compressa o zippata, hanno una dimensione di appena 4 KB (estratti diventano 16 KB):
- Base (base-min.css): framework di base, incluso il regolamento;
- Grids (grids-responsive-min.css): sistema a griglia fluida flessibile e responsive;
- Forms (forms-min.css/forms-nr-min.css): formulario di contatto;
- Buttons (buttons-min.css): diversi pulsanti;
- Tables (tables-min.css): tabelle;
- Menus (menus-min.css/menus-nr-min.css): menu.
Come anche le componenti di Bootstrap e molti altri framework per CSS, tutte le sezioni si strutturano sulla base del foglio di stile open source Normalize.css, il quale sostituisce lo stile standard degli elementi HTML con uno stile ottimizzato e adatto a tutti i tipi di browser. Rispetto al framework di front end di Twitter, l’appendice di Yahoo tuttavia non contiene applicazioni JavaScript, anche se naturalmente possono essere inserite di proprio pugno.
Pure.CSS più che un front end completo che deve essere adeguato alle proprie esigenze, è piuttosto un punto di partenza per il vostro progetto offrendo in questo modo anche una libertà decisamente più grande.
Yahoo hosta il framework sul proprio Content Delivery Network (Yahoo CDN), accessibile liberamente, così che possiate includerlo indirizzandolo all’interno del campo <head-> del vostro progetto. Naturalmente potete anche scaricare Pure.CSS e hostarlo voi stessi. Il link aggiornato al CDN, come anche i file per il download, lo trovate sul sito web ufficiale purecss.io.