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à.

Cattura

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:

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.

Cattura

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:

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

CommentaDi' la tua

Il tuo indirizzo email non sarà mostrato pubblicamente. I campi obbligatori sono contrassegnati da *