La Foundation 6 è quasi pronta per uscire dalla beta, ed è migliore dei suoi predecessori in quasi tutti i modi possibili: è più snella, più semplice e, in qualche modo, più sofisticata. ZURB hanno superato se stessi.

Come vedrai da solo quando finalmente lo installerai - abbastanza semplice su OSX o Linux, ma su Windows, Node può essere pignolo - Foundation 6 può essere installato solo tramite il gestore pacchetti in questi giorni. Mi sento come se stessi invecchiando, sognando i bei vecchi tempi quando i framework CSS arrivavano in file .zip, e non da un comando terminale.

Tuttavia, non stavo mentendo quando ho detto che la Fondazione 6 è fantastica. Bene, dovrei dire "Foundation for Sites", perché Foundation non è più solo un framework. Oltre a Foundation for apps, Zurb è stata anche impegnata a creare alcuni strumenti per accelerare lo sviluppo.

Questa versione riguarda esclusivamente le prestazioni ... puoi creare siti più velocemente, i siti verranno scaricati più velocemente e il JavaScript verrà eseguito più velocemente.

Innanzitutto, c'è il Fondazione CLI , che può installare qualsiasi versione di Foundation per te, completa di progetti di avviamento. I CSS precompilati in Foundation for Sites saranno disponibili per il download separatamente al momento del rilascio finale. Per ora, tuttavia, la CLI è il modo per ottenerla e rimanere aggiornata con qualsiasi modifica prima della versione finale.

Poi c'è Panini , un compilatore di pagine statiche con i modelli di Handlebars e molte altre funzionalità per aiutarti a creare prototipi statici e / o siti veloci. Compila il Sass, inserisce tutti i JavaScript in un unico file, può comprimere tutto il tuo codice e altro ancora.

Caratteristiche di Foundation 6

Ora, non si ha l'idea che questa versione di Foundation sia meno ricca di funzionalità - ha ancora tutto ciò di cui hai bisogno e altro ancora - ma occorre notare che alcuni elementi più adatti alle app rispetto ai siti sono stati rimossi. Questi elementi sono ora parte di Fondazione per app .

Il resto del lavoro in questa versione consisteva nel liberarsi del codice ridondante e nello snellire tutto ciò che era rimasto.

Ad esempio, invece di creare tre diversi componenti di menu per tre diversi progetti di menu, c'è solo un componente di menu, con diverse varianti. Per la persona che scrive HTML, c'è poca differenza: aggiungi una classe e hai un menu; cambia alcune classi e hai un menu che sembra completamente diverso.

In effetti, per tutte le differenze, molte classi e markup avranno un aspetto molto familiare, se non lo stesso. È tutto costruito su Sass, quindi puoi personalizzarlo come sempre.

Questa versione è stata interamente dedicata alle prestazioni. Una volta che hai imparato come, puoi costruire siti più velocemente, questi siti verranno scaricati più velocemente e JavaScript funzionerà più velocemente. La Fondazione ora ha circa la metà di quanto era pesante in termini di dimensioni del file. Metà

Nuove caratteristiche

Supporto esplicito per le lingue RTL

Versioni precedenti supportavano in un certo senso le lingue RTL (da destra a sinistra) come l'arabo; ma avevano bisogno di qualche ritocco. La Fondazione 6 ha il supporto integrato.

Griglia flessibile

La griglia Flex è esattamente ciò che pensi: è il componente Grid rifatto con Flexbox. Da un lato, questo gli dà un numero di caratteristiche e opzioni che una normale griglia basata sul float non può gestire. D'altra parte, probabilmente non è così ben supportato, specialmente da IE. È un trade-off.

Classi helper tipografiche

Sono stati aggiunti un paio di fantastici miglioramenti per la tipografia in stile sito Web. Nello specifico, ci sono classi di helper progettate per rendere i layout tipografici un po 'più semplici da gestire:

  • Classi di allineamento del testo
  • Classi del sottotitolo - applica un colore più chiaro a qualsiasi intestazione con la classe .subheader .
  • Stili di paragrafo guida
  • Elenchi non puntati
  • Statistiche: applica una dimensione del carattere maggiore a numeri importanti

Come accennato in precedenza, tutti i precedenti componenti di navigazione sono stati uniti in un unico componente flessibile. Ciò significa che tutti i tipi di navigazione giocheranno bene tra loro. Significa anche che puoi scegliere diversi tipi di navigazione per diverse dimensioni dello schermo.

Vuoi una navigazione drill-down su uno smartphone e una barra orizzontale su un desktop? Facilmente fatto con le classi specifiche della dimensione dello schermo. Vuoi il tuo "Top bar" indietro? Basta aggiungere un div wrapper attorno ai componenti del menu predefinito.

Ma sebbene sia più semplice da usare nel complesso, è ancora caricato con funzionalità. Assicurati di controllare la documentazione su menu e navigazione .

Distintivo

Conoscete quei piccoli cerchi o quadrati - di solito posti sopra o vicino a icone di qualche tipo - con piccoli numeri in loro? Come quando hai le notifiche di Facebook? Questi sono chiamati distintivi.

Si impara qualcosa di nuovo ogni giorno. Inoltre, la Fondazione li ha ora.

Appiccicoso

Hai bisogno di far rimanere qualcosa sullo schermo mentre l'utente scorre? Vuoi farlo smettere ad un certo punto? Sticky è il tuo plugin! Questa è anche la cosa da usare se vuoi far funzionare il menu Magellan come ha fatto in Foundation 5.

Toggler

Nel caso in cui dropdown, fisarmoniche, drilldown, tooltip e modali non siano abbastanza per te, ecco un modo generico per far apparire o sparire le cose. È un semplice evento di attivazione basato su JavaScript che può essere applicato praticamente a qualsiasi cosa.

Immagino che sia per quei tempi in cui nessuno degli altri componenti si adatta allo scopo, o sarebbe eccessivo. Integra la libreria di Motion UI, in modo da poter animare l'atto di scomparire praticamente in qualsiasi modo tu voglia.

Oggetto multimediale

Bene, il nome suona come se fosse un elemento in cui è possibile incorporare un video o un oggetto Flash (yuck), e si potrebbe farlo immagino. Ciò a cui è destinato in realtà è la visualizzazione di qualsiasi oggetto multimediale, come un'immagine, accanto a informazioni di testo.

Ad esempio, potresti mettere l'avatar di un utente accanto al loro nome utente e il loro commento in una sezione dei commenti. Oppure, potresti usarlo per posizionare la data di uscita di un film, i principali attori e altri metadati accanto a una recensione del film. Controlla la documentazione per esempio.

Funzionalità che sono sostanzialmente le stesse di prima

Ogni funzione è stata aggiornata o riscritta. Tuttavia, molti sono funzionalmente invariati. Controlla la documentazione per assicurarti di avere le classi giuste, controllare alcuni degli aggiornamenti e andare. Ecco queste funzionalità più o meno identiche, in ordine alfabetico:

  • Abide - convalida del modulo
  • Fisarmoniche
  • Stili globali di base
  • Navigazione breadcrumb
  • pulsanti
  • didascalie
  • Mix di colori
  • Menu a discesa
  • Equalizzatore - allineamento della colonna
  • Flex Video
  • Forme
  • Scambia i contenuti sensibili
  • Etichetta
  • Magellan: non è più appiccicoso per impostazione predefinita
  • Media query (si noti che i punti di interruzione sono cambiati)
  • Fuori-canvas
  • paginatura
  • Barre di avanzamento
  • Svelare
  • Sliders
  • Interruttori
  • tabelle
  • Tabs
  • La griglia
  • miniature
  • tooltip
  • Stili tipografici
  • Visibilità e classi di utilità

Quindi è davvero buono?

Sì. La rinnovata attenzione ai cantieri edili (al contrario di un framework che cerca di soddisfare le esigenze di entrambi i siti e le app) è rinfrescante e le dimensioni ridotte sono sempre un vantaggio.

Attendo con ansia che possa essere pubblicato molto presto.