Semantic UI: framework human-friendly per layout responsive

Il progetto Semantic UI nasce a partire da una considerazione sostanzialmente corretta: le interfacce utente sono ormai diventate il vero linguaggio del Web. Ecco perché questo development framework si presenta come una soluzione appositamente concepita per la creazione di responsive layout attraverso l'utilizzo di markup HTML human-friendly, cioè caratterizzato da un elevato livello di leggibilità.

L'idea è in pratica quella di conciliare le potenzialità della metodologia BEM (Block Element Modifier), per la generazioni di componenti riusabili ed elementi di front-end facilmente condivisibili, con le linee guida dettate da SMACSS (Scalable and Modular Architecture for CSS), per una strutturazione delle regole di stile CSS più improntata alle esigenze di scalabilità, manutenzione e flessibilità.

In Semantic UI si nota in particolare l'impiego di un linguaggio naturale volto a rendere immediatamente comprensibile l'utilizzo dei selettori, ciò risulta evidente dalla sintassi scelta per l'indicazione delle classi. Lo snippet proposto di seguito mostra la semplice procedura richiesta dalla libreria per la creazione di 3 pulsanti allineati orizzontalmente:

Primo
  Secondo
  Terzo

Per quanto riguarda JavaScript, il framework fa ricorso a semplici stringhe di testo, denominate comportamenti ("behaviors"), con cui dare il via alle funzionalità supportate, questo significa che qualsiasi impostazione definita arbitrariamente per un componente può essere inclusa come un settaggio modificabile dallo sviluppatore.

A questo proposito, il codice indica come sia possibile utilizzare Semantic UI per stabilire a priori quali elementi debbano essere selezionati all'interno di un dropdown.

Questo il codice JavaScript:

$('select.dropdown')
  .dropdown('set selected', ['lisa', 'bart'])
;

E questo il markup HTML:

SelezionaHomerMargeLisaBartMaggie

Il framework è dotato di un sistema estremamente intuitivo per l'ereditarietà e di variabili per il theming che lasciano la massima libertà in fase di design, una volta sviluppata la propria interfaccia utente sarà possibile effettuare il deploy indipendentemente dall'ambiente di riferimento.

Via Semantic UI