Share
Lo Yeti è tornato! La Fondazione 6 è stata rilasciata oggi e siamo tutti morti per la nuova etica del design, le funzionalità e gli strumenti potenti che questa incarnazione del famoso framework ZURB ci porta! C'è anche qualcosa di speciale in questa versione, quindi immergiti in questo articolo per ottenere il completo.
Foundation 6 non è solo un'iterazione visiva, una ristrutturazione del codice o un semplice cambiamento nel numero di versione. Il team di ZURB si è seduto per questo a completamente ripensare la struttura e vedere cosa doveva accadere per renderlo più fantastico. La Fondazione 6 riguarda l'intero processo; dal prototipo alla produzione.
Passare dal prototipo alla produzione è ora un gioco da ragazzi!Alcuni degli obiettivi principali del team di sviluppo erano:
"Per Foundation 6, abbiamo ridotto della metà le dimensioni del file CSS completo, ottimizzando in modo aggressivo il nostro utilizzo di Sass e rendendo i componenti più semplici nella struttura e nello stile."
- Designer di prodotti Geoff Kimball, ZURB
Quindi, in che modo questi obiettivi hanno influito sul nostro framework preferito per la realizzazione di siti Web fantastici? Scopriamolo! Per prima cosa analizzeremo alcune delle caratteristiche principali di Foundation 6 e quindi approfondiremo il CSS / Sass e il JavaScript.
Il processo di installazione della versione Sass di Foundation 6 è stato migliorato, in modo da poter far partire i progetti più velocemente. Ci sono molte meno dipendenze e gli errori sono gestiti in modo molto più intelligente, quindi avrai meno problemi a capire l'errore in questione.
Un altro vantaggio è che ZURB offre uno stack truccato completo di un proprio generatore di siti statici, un server live-reload e tantissimi modi per ottimizzare meglio il codice con UNCSS e UglifyJS. È lo stesso stack che i ragazzi di ZURB usano per i propri progetti (ne parleremo più avanti!).
"Fondazione per Sites 6 the Movie" in arrivo nel 2018. Possibilmente.C'è stata molta preoccupazione per il codice utilizzato dai framework (come Bootstrap e Foundation) che non sono stati utilizzati in un progetto. Anche il 90% del codice CSS non viene utilizzato, il che è veramente superfluo e un problema per le prestazioni. Con questo in mente, Foundation 6 ha una riduzione del codice enorme del 50% per iniziare!
Lo Yeti ha funzionato e ha pagato!ZURB ha affrontato questo problema due volte con Foundation 6, applicando meno stili dall'inizio e fornendo gli strumenti per rimuovere anche i file. Ora puoi aggiungere più facilmente i tuoi stili per la versione di produzione del tuo progetto. Gli stili Foundation 6 fa l'offerta può essere facilmente aggiornata con variabili via Sass.
Inoltre, molte delle classi di presentazione sono state rimosse in modo che il CSS generato rimanga pulito. Questa versione di Foundation non ha classi stilistiche come margini, paddings e round e radius. Attraverso il familiare _settings.scss file ora è stato reso ancora più semplice importare selettivamente i tuoi moduli. Commentando selettivamente i componenti che non usi, rimuovi facilmente un sacco di codice CSS inutilizzato.
Quindi, con un file più leggero da prendere, meno classi stilistiche e più controllo su cosa includere e cosa no, ora sei pronto per spostare il tuo prototipo in codice pronto per la produzione e leggero.
La documentazione aggiornata fornita con Foundation 6, insieme a un modulo di ricerca potenziato AJAX, ti consente di trovare rapidamente qualcosa:
Il modulo di ricerca ti dà suggerimenti mentre scrivi.Digita semplicemente il componente o l'argomento che stai cercando e il modulo di ricerca ti fornisce gli argomenti pertinenti. È un piccolo extra in più che rende l'immersione nella documentazione un'esperienza piacevole.
Anche il Top Bar ha visto un grande aggiornamento. Nelle versioni precedenti era fantastico per quello che era destinato, ma era un po 'inflessibile. Non più! La Fondazione 6 introduce componenti per la barra in alto per renderlo più flessibile e facile per voi per aggiungere e rimuovere determinati elementi per diversi dispositivi come:
In Foundation 6 ZURB ha creato una griglia di mixin più flessibile che consente di controllare il conteggio delle colonne su una riga. Potresti fare qualcosa del genere:
.container // definiremo questa classe per utilizzare 16 colonne @include grid-row (16) .sidebar // 5/16 = 31.25% @include grid-column (5); .main-content // 11/16 = 68,75% @include grid-column (11);
O qualcosa del genere:
.sidebar // questo renderà .sidebar occupa 2 colonne di una griglia a 5 colonne @include grid-column (2 di 5); .main-content // questo renderà .main-content occupa 3 colonne di una griglia a 5 colonne @include: grid-column (3 of 5);
Crea il conteggio delle colonne per un elemento specifico o crea una riga di cinque colonne senza modificare il conteggio delle colonne per l'intero progetto. Questa nuova funzionalità ti darà un controllo più granulare sulla griglia in modo da rendere il tuo layout più adatto ai tuoi contenuti.
La Foundation 6 ha riportato il cursore Orbit, ma con un approccio diverso questa volta: è progettato per essere uno strumento wireframing. Questa versione comprende solo un po 'di HTML e un po' di JavaScript. Il codice per personalizzarlo sarà fatto all'interno del markup della pagina ed è molto più facile da eseguire.
Felice di riaverti vecchio amico!Quando cerchi un cursore nella tua fase di produzione, il team di ZURB consiglia di utilizzare un dispositivo di scorrimento come ad esempio il cursore Owl. Come accennato, il cursore Orbit è puramente inteso come uno strumento wireframe.
Lavorando con i propri clienti, ZURB ha creato un modello personalizzato per fornire progetti. Compreso il manubrio e costruito su Libsass, questo è lo stack truccato che abbiamo toccato in precedenza. È qui che tu usi e ottimizzi il tuo flusso di lavoro, e va sotto il nome Panini:
Un progetto prefabbricato, pronto per essere utilizzato nel prossimo progetto Questo sistema di build Gulp fa molto:
Il modello può anche creare codice pronto per la produzione, aggiungendo in questi passaggi aggiuntivi:
I modelli di manubri e gli helper rendono la scrittura di codice dinamico per pagine statiche un gioco da ragazzi!
La novità di Foundation 6 è una griglia potenziata di Flexbox, che è possibile utilizzare al posto della tradizionale griglia galleggiante. Funziona in modo simile alla griglia standard, ma include un numero di funzioni utili possibili solo con Flexbox, come l'allineamento orizzontale e verticale, il dimensionamento automatico e l'ordinamento della fonte più semplice. Conosciamo Flexbox Grid da Foundation for Apps ed è fantastico vedere che ora possiamo utilizzarlo anche in Foundation for Sites!
Motion UI è una libreria di animazioni ed è stata originariamente costruita e utilizzata in Foundation for Apps. Ora, felicemente, puoi usarlo per creare transizioni e animazioni CSS personalizzate anche in Foundation for Sites!
Aggiungi tutti i diversi tipi di transizioni e animazioni ai tuoi progetti della Fondazione!Questa versione aggiornata include opzioni di transizione più robuste, un sistema di accodamento dell'animazione e pattern CSS flessibili che possono funzionare con qualsiasi libreria di animazione Javascript.
Regolare le diverse transizioni e animazioni è una questione di manomissione dei mixin di Sass che vengono con questa versione di Motion UI. Motion UI include anche un gran numero di classi CSS predefinite per ottenere rapidamente i prototipi.
La libreria è stata progettata per essere utilizzata con i framework Foundation, ma può essere adattata per funzionare con qualsiasi libreria di animazioni di framework, come Angular o React.
Come accennato, il grande obiettivo di Foundation 6 era quello di rendere più facile l'utilizzo e più facile per voi sovrascrivere il framework con il vostro codice di produzione pronto. Diamo un'occhiata ad alcune delle fantastiche funzionalità che Foundation 6 ci offre riguardo al CSS e al Sass.
Crea le tue guide di stile più facilmente nella nuova FondazioneNella Fondazione 5, è possibile modificare i punti di interruzione, ma non era del tutto ovvio dove trovarli e come procedere. Non più. Foundation 6 offre una panoramica (una mappa dei punti di interruzione) in cui è possibile regolare, aggiungere e rimuovere facilmente i punti di interruzione dal progetto.
Mancia: cerca di rimanere il più possibile con i breakpoint predefiniti; la dimensione del file aumenta con ulteriori punti di interruzione.
Esempio della mappa dei punti di interruzione utilizzando la nuova funzione Mappe di SassCon Foundation 5 è stato necessario eseguire l'interpolazione delle stringhe per utilizzare le query multimediali nei file Sass. Poiché questo non era sempre chiaro e le persone dovevano spesso visitare la documentazione per copiare e incollare il codice giusto, il team di ZURB pensava che ciò potesse essere fatto più facilmente. Così ora, invece dell'interpolazione delle stringhe, puoi usare differenti @includes includere diversi punti di interruzione. utilizzando medio ad esempio, è per i punti di interruzione medio e alto, solo media per, bene, solo media, e medio verso il basso per medie, piccole ecc. Puoi anche includere il tuo pixel, em di punti di interruzione rem e usare retina, orizzontale e verticale.
"Volevamo sapere come la gente usava davvero Foundation, quindi abbiamo viaggiato in tutto il mondo e fatto centinaia di chiamate per vedere realmente come la comunità usava il Framework e discuteva di ciò di cui avevano bisogno: era incredibile!"
- Brandon Arnold Foundation Lead, ZURB
Anche il JavaScript ha avuto una grande revisione. Un modo per ridurre la quantità di codice nei plugin JavaScript di Foundation 6 era di separarli in utility più piccole che gestiscono eventi su plugin più grandi. E rendendo queste utility pubblicamente accessibili, ora puoi usarle per creare i tuoi plugin! Quindi, quali plugin possiamo trovare in Foundation 6? Scopriamolo:
Plug and play con i nuovi plugin di supporto di Foundations.Foundation 6 include una nuova API di toggler in modo che le persone possano rendere i propri siti più dinamici e facilmente visualizzabili. Toggler rende gli elementi di commutazione e l'aggiunta di classi un gioco da ragazzi. È ottimo per la costruzione veloce e non richiede alcuna conoscenza di JavaScript.
Attiva / disattiva le classi con un attributo dati. Per esempio:
Espandere!
Questa è una funzione pubblica per determinare le collisioni con il bordo di un contenitore. Questo rilevamento dei bordi manterrà i suggerimenti, i dropdown e altro nella finestra o nel contenitore di tua scelta.
Un generatore di numeri casuali. Puoi usare questo per aggiungere A11Y attributi "aria" che richiedono ID, per esempio.
Questa è una funzione per aggiungere un listener di eventi a finestra se applicato, spara un evento non-ribollente ai singoli elementi del plugin con [-Yeti-casella dati = 'idOfElement'] chiudere. Se si apre un altro elemento dello stesso tipo di plugin, ad esempio se la descrizione Tooltip si apre e la descrizione strumento A è aperta, chiudere la descrizione comando A prima di aprire B.
Qui ci viene assegnata una funzione pubblica per aggiungere un onscroll ascoltatore di eventi a finestra. Il markup è il seguente: [Data-scroll = 'idOfElement']
Una funzione per aggiungere a ridimensionare ascoltatore di eventi a finestra.
ho fatto questo!Quasi tutto il codice JavaScript è stato creato con utility separate che gestiscono funzioni comuni come gli esempi precedenti. Ciò consente ai plug-in di essere più piccoli e con essi ora puoi creare facilmente i tuoi!
Come un piccolo extra, ZURB ha anche rilasciato una nuova app per desktop companion! Con esso puoi ruotare i progetti con un solo clic del mouse. Sali e vai più veloce che mai con: Yeti Launch. Bello!
Spin up progetti con un solo clic del mouse!Foundation for Sites 6 ha visto una revisione davvero grande, che riflette il modo in cui ZURB costruisce i propri siti web accessibili. La condivisione delle loro conoscenze ed esperienze facilita la realizzazione di prototipi e la rapida produzione di altri sviluppatori e progettisti.
Il più veloce yeti ancoraPer riassumere, cosa otteniamo con Foundation 6?
Oltre 125 temi su Envato Market sono compatibili con Foundation 5: sarai il primo a vendere qualcosa costruito su Foundation 6?!
Accentsconagua