Fondazione è uno dei due framework HTML / CSS / JS di grande nome per gli sviluppatori front-end. Questo non è accaduto per caso. Oggi siamo qui per dirti tutto sul perché dovresti usarlo.

Ora, per prima cosa, per coloro che magari scrivono il proprio codice HTML, ma non hanno mai lavorato prima con un framework, ecco una spiegazione:

I framework sono fondamentalmente grandi mazzi di codice pre-scritto per aiutarti a iniziare i tuoi progetti più velocemente. Nel caso di codice di front-end come HTML e CSS, questo significa che troverai cose come le griglie di layout, gli stili di pulsanti di base e gli elementi di interfaccia di uso comune. I framework più grandi possono includere anche i plugin jQuery.

Non sono pensati per essere utilizzati come modelli o temi di siti Web completi, ma come un insieme di elementi costitutivi. Prendi ciò di cui hai bisogno, modificalo per adattarlo al progetto e generalmente vai avanti con il tuo lavoro (e presumibilmente la tua vita). Sono pensati per essere personalizzati e armati.

Questo può inizialmente essere un compito arduo, come strutture come la Fondazione e il suo principale rivale, bootstrap, sono diventati enormi Ciascuno contiene migliaia di righe di CSS. Prima di impegnarsi a utilizzare qualsiasi framework per qualsiasi progetto, è necessario valutare i suoi potenziali benefici rispetto al costo del tempo.

Detto questo, una volta che ci si abitua a un framework, si può ridurre considerevolmente il tempo impiegato a scrivere markup e CSS.

Un po 'di storia

La fondazione ha iniziato la sua vita come nient'altro che una guida generale di stile e un codice comune. I ragazzi di ZURB ha deciso di accelerare il processo di prototipazione prendendo un po 'di HTML e stili che tendevano a riutilizzare e creare un quadro al di fuori di esso. Questo è tutto. Questo è davvero il modo in cui vengono fatte le cose migliori. Qualcuno ne aveva bisogno, così ce l'hanno fatta.

Nel corso del tempo, hanno deciso che ciò che avevano fatto era troppo bello per essere mantenuto in sé, così hanno rilasciato la versione 2.0.0 al mondo. Hanno reso tutto reattivo, lucidato e aperto a tutti noi. Ora i designer e gli sviluppatori di tutto il mondo usano il codice ZURB per rendere i loro prodotti più veloci e, forse, oserei dire, meglio.

Dalla sua uscita il 18 ottobre 2011, il MIT-licenza quadro è diventato uno dei "due grandi", e visto l'uso su migliaia di siti web.

La sua popolarità parla della sua utilità e versatilità allo stesso modo. Se decidi che la Fondazione è giusta per te, non ti deluderà.

Caratteristiche

La Fondazione è in fase di sviluppo attivo da quasi tre anni. Non sorprende, quindi, che l'elenco delle funzionalità sia esteso.

Al suo interno, il framework comprende file CSS (generati da file SASS, disponibili anche per il download) e diversi plugin jQuery. Non c'è HTML incluso nel download principale (tranne una pagina demo molto semplice, puoi scrivere tutto da solo.

Detto questo, c'è una documentazione dettagliata su ogni singolo componente. Ogni sezione della documentazione viene fornita con HTML di esempio da utilizzare e personalizzare in base alle esigenze. Se vuoi tuffarti direttamente, controlla il documentazione.

Se vuoi personalizzare il framework da zero, ci sono due cose che puoi fare:

opzione 1

Puoi scegliere di scaricare solo i componenti che desideri direttamente su pagina di download principale. Se tutto ciò che vuoi è la griglia, il CSS di navigazione e un plugin jQuery o due, è abbastanza facile. Basta deselezionare tutte le cose che non vuoi includere, e vai!

Questo "generatore di framework" include anche opzioni per personalizzare la griglia, i colori principali e alcune altre opzioni. Questa è l'opzione che scegliere per, per esempio, la prototipazione o lo sviluppo di un'applicazione aziendale interna. Gli stili di presentazione predefiniti sono per lo più abbastanza buoni per queste cose, quindi perché andare e cambiarli quando non è necessario?

opzione 2

Ora questo è per le persone che useranno il framework per progetti pubblici. Non vorrai utilizzare gli stili di presentazione predefiniti, poiché, con ogni probabilità, non corrisponderanno al tuo marchio. Per una personalizzazione approfondita, devi andare alla fonte.

E dalla fonte, intendo i file Sass. Con quelli, puoi entrare e personalizzare ogni variabile a tuo piacimento, rendendo il framework davvero tuo.

( Una nota sui file Sass: ancora una volta, per coloro che potrebbero non avere familiarità con il termine, insolenza è un preprocessore CSS, che introduce cose come variabili, mixin e altre funzioni di programmazione in normali CSS.

Fai una ricerca su Google per qualcosa come "Sass compilatore per [il tuo sistema operativo qui]" e troverai ciò di cui hai bisogno. Personalmente, non posso raccomandare la cross-platform Koala App abbastanza.)

Una volta che i tuoi file Sass sono compilati in un normale file CSS, basta collegarli ad esso nella tua sezione come faresti con qualsiasi altro file CSS. L'app Koala, ad esempio, compila automaticamente i file Sass ogni volta che li salvi, quindi il tuo browser vedrà sempre le ultime modifiche.

Struttura

La griglia

Non posso dire con certezza che tutti i framework HTML siano dotati di un sistema di grid per il layout, ma la maggior parte lo fa. La griglia della Fondazione, senza alcuna personalizzazione, è un classico a dodici colonne, nidificabile e reattivo.

Il markup e le classi sono semplici, incluse le classi per personalizzare il layout in base alla dimensione dello schermo. Se hai già lavorato con i sistemi di grid, come il 960 Grid System, non troverai la griglia di Foundation difficile da padroneggiare.

Nota: è codificato per un approccio mobile-first, quindi tienilo a mente mentre imposti il ​​layout del tuo sito.

La griglia del blocco

Pensa a questo come a una "mini griglia". È progettato per mantenere un numero fisso di elementi uniformemente dimensionati e distanziati indipendentemente dalle dimensioni dello schermo.

Esempio: hai tre elementi di dimensioni identiche che vuoi mantenere affiancati su tutti i dispositivi. Per farlo, dovresti usare questo esempio di blocco di blocco che ho rubato senza vergogna direttamente dalla documentazione:

Si noti che, se lo si desidera, è possibile specificare un numero diverso di colonne per le diverse dimensioni dello schermo. Gli elementi manterranno il loro stesso dimensionamento. Questo componente è perfetto per cose come gallerie fotografiche.

Roba reattiva

Le richieste dei media sono semplici, ma sono progettate per adattarsi a un numero di dimensioni dello schermo, dagli smart-phone agli incredibili enormi schermi iMac.

Essere progettati da zero per essere mobili prima è un ottimo inizio. La Fondazione fa un passo avanti includendo componenti specifici per aiutarti a perfezionare ulteriormente le parti sensibili dei tuoi siti.

Innanzitutto, ci sono le solite classi per nascondere o mostrare elementi diversi con dimensioni di viewport differenti. Quindi, ottieni cose leggermente più avanzate, come Interchange.

Interchange è una libreria JS che caricherà dinamicamente contenuti diversi in base alle query multimediali. Puoi utilizzare questa libreria per decidere se caricare, ad esempio, un'immagine .JPG di una mappa o un incorporamento di Google Maps. O un'immagine normale invece di un'immagine di dimensioni di una retina.

Usando questa libreria, puoi salvare alcuni dati e alcuni RAM. Assicurati di implementare un fallback per quegli utenti con JavaScript disabilitato.

Navigazione

Le opzioni di navigazione sono abbondanti nelle fondamenta, che vanno dalla barra di navigazione multiuso (completa di menu a discesa), alle barre delle icone, alla navigazione con breadcrumb, all'impaginazione, alle barre laterali e altro.

Ci sono però due componenti di navigazione che fanno risaltare la Fondazione rispetto ad altri framework.

Magellan

Il primo è il Magellan Sticky Nav. Metti questa barra di navigazione ovunque nella pagina, e una volta che scorri la posizione iniziale, ti seguirà. Se lo si utilizza per collegarsi alla sezione all'interno della pagina corrente, può evidenziarne uno (nella barra stessa) mentre si scorre verso il basso.

Offcanvas

Il secondo è Offcanvas, che è una barra di navigazione verticale che è nascosta per impostazione predefinita. Premi il pulsante menu e il menu scorre sulla pagina per il tuo piacere di navigazione.

Tieni presente che, come tutti i componenti di Foundation, questi possono essere implementati con una quantità minima di markup. I ragazzi di ZURB hanno lavorato molto per rendere questi elementi di interfaccia utente abbastanza avanzati facili da implementare, e lo dimostra.

Media

Le componenti relative ai media di qualsiasi quadro sono spesso quelle in cui i costruttori di quadri tendono a mostrare un po 'di ritardo, e la Fondazione non fa eccezione.

Ad esempio, incluso di default è il Lightbox chiaro. È davvero una galleria di immagini lightbox semplice. È sufficiente inserire alcune miniature, includere le classi pertinenti e una galleria di immagini con funzionalità touch che gestisca immagini di altezza variabile senza problemi di sorta.

Un altro è Flex Video, che può, in teoria, essere utilizzato per quasi tutti gli oggetti integrabili. Basta avvolgere un div con la classe flex-video intorno al tuo video Youtube, iframe, embed o elemento object e sei a posto. Questi oggetti non si scaleranno automaticamente con le dimensioni del browser.

Infine, ci sono degli stili inclusi per le miniature delle immagini. Niente di speciale o speciale da vedere qui ... sono semplicemente belli da avere.

Ma per quanto riguarda l'orbita?

Le persone che hanno utilizzato Foundation prima della versione 5 potrebbero chiedersi il plugin Orbit di ZURB. È un carosello, a volte chiamato anche slideshow, componente reattivo, con funzionalità caricate e funziona piuttosto bene.

Tuttavia, mentre è ancora nel framework, non è più supportato da ZURB, né è in fase di sviluppo attivo.

I creatori della stessa Fondazione raccomandano la ricerca di alternative, come ad esempio Giostra del gufo, o Slick.

Forme

Naturalmente, gli stili di base per le forme non sono stati dimenticati. In effetti, sono stati perfezionati nel corso degli anni in opere di bellezza sommamente sottovalutata. Potresti pensare che stia esagerando, ma non penso di esserlo. Anni di esperienza sono stati trasformati in stili di forme di base che credo possano essere applicati a quasi tutti i progetti, con un minimo di modifiche.

Ci vuole abilità per rendere qualcosa noioso quanto le forme sembrano generiche e graziose allo stesso tempo. Non c'è da meravigliarsi se molti dei framework che ho provato hanno imitato lo stile di Foundation.

Detto questo, non sono tutti noiosi campi di testo e pulsanti di opzione. Sai che dovevano fare qualcosa di loro.

Prendi il componente di scorrimento, ad esempio: puoi implementare i cursori di intervalli con HTML5, ma sono noiosi e utilizzare l'aspetto predefinito del sistema operativo che stai utilizzando. La Fondazione, d'altra parte, include cursori che possono essere abbinati a CSS per il piacere della personalizzazione.

Inoltre è inclusa una libreria di convalida dei form (più JavaScript qui ...) che ti consente di assicurarti che i tuoi utenti inseriscano i dati giusti. Quando inseriscono qualcosa di sbagliato, ad esempio un indirizzo e-mail non valido, verrà visualizzata una notifica e gli verrà comunicato.

pulsanti

Non è possibile avere un framework senza alcuni stili di pulsante predefiniti. Voglio dire che puoi, ma non sarebbe giusto, in qualche modo. I pulsanti di base predefiniti non differiscono molto da qualsiasi altro framework. Vale a dire, sono implementati con un markup minimo e hanno classi di dimensioni e colori diversi.

Puoi, tuttavia, raggrupparli in gruppi di pulsanti per ordinare insieme azioni correlate. Questi gruppi di pulsanti (quelli orizzontali, comunque) sono progettati per funzionare perfettamente con la griglia. Hanno anche lezioni extra per dimensioni, colori e angoli arrotondati ... tutte le solite cose.

Cambia il markup un po 'di più, e Foundation può anche darti pulsanti a discesa , e quelli pulsanti divisi . Sai, per lo più pulsante, menu a tendina parte?

Questi ultimi due componenti utilizzano il plug-in dropdown integrato di Foundation. Ciò significa, tra le altre cose, che sono dipendenti da JavaScript. Anche così, sono semplici da implementare. Riguarda le classi.

Tipografia

La Fondazione utilizza una semplice configurazione tipografica sans-serif per iniziare. È semplice, facile da personalizzare con alcune variabili di base di Sass, ed è tutto di dimensioni relativamente grandi. Esatto, la Fondazione usa rem .

Dal momento che i creatori della Fondazione credono nell'usabilità, tutto è abbastanza grande per essere facilmente letto su schermi di piccole dimensioni. Anche la lettura a distanza moderata sui normali schermi laptop / desktop non mi dà problemi.

Altre caratteristiche tipografiche includono:

Elenchi in linea

Vuoi un elenco di testo orizzontale? Sai, il tipo che potresti mettere in un footer del sito web? Sei coperto. Secondo i creatori, dovresti:

Hanno ragione.   fa schifo per il controllo spaziale.

etichette

Questi sono essenzialmente piccoli frammenti di testo con sfondi colorati. Per cosa potresti usarli? Tag e altri metadati, o come suggerisce il loro nome, potresti usarli per etichettare le cose, es. campi modulo.

Sono incluse etichette regolari, etichette di avviso, etichette di avvertenza. È solo un'altra di quelle piccole cose utili che amo della Fondazione.

Guarda anche: Combinazioni di tasti

Callout e richieste

A volte su un sito web e molto più spesso in un'applicazione, hai bisogno di modi per attirare l'attenzione di un utente. Lo fai per presentare loro le informazioni necessarie, per attirare gli occhi su un campo o un'azione incompleta, o per insegnare loro come utilizzare un'applicazione.

Se sei cattivo, potresti farlo per riprodurre annunci ... con audio.

Potresti farlo con una finestra modale. Foundation ha grandi finestre modali con ampie opzioni comportamentali, opzioni di dimensionamento, associazioni di eventi ... anche un'opzione per rimuovere lo sfondo.

Quindi, ci sono gli avvisi. Queste caselle di avviso grandi e colorate sono posizionate in modo statico e si estendono fino alla larghezza del contenitore. Tuttavia, puoi sempre renderli una posizione fissa per gli avvisi a livello di sito. Ho già menzionato il colore, gli angoli arrotondati e altre classi di presentazione? Mi fermerò, perché lo fanno per un sacco di cose.

Quindi abbiamo suggerimenti. Questi possono essere applicati praticamente a qualsiasi elemento e impostati per essere visualizzati solo su schermi di grandi dimensioni o su tutti gli schermi. (Sui dispositivi mobili, dovresti toccare l'elemento in questione per vedere il suggerimento.) Possono anche essere posizionati su qualsiasi lato dell'elemento.

Joyride porta i tooltips al livello successivo. È un plug-in che sfrutta i tooltip (e altre cose) per offrire agli utenti un tour del tuo sito Web o applicazione. Ottimo per gli utenti principianti, se l'interfaccia è necessariamente complessa.

Soddisfare

I framework HTML / CSS di base ti daranno un modo per organizzare i tuoi contenuti su una pagina e darle un po 'di stile. Questo è uno dei grandi framework, però, il che significa componenti extra, anche per il contenuto.

Per prima cosa, abbiamo tabelle dei prezzi: i ragazzi di ZURB conoscono abbastanza bene il loro pubblico. Un sacco di persone vogliono modi semplici per visualizzare le informazioni sui prezzi per i loro vari prodotti e servizi. La Fondazione dà loro in un formato abbastanza standard.

Quindi, il barre di avanzamento . Non ho intenzione di approfondire questi. Sono esattamente ciò che ti aspetteresti.

Foundation include anche il plug-in di fisarmonica di base e il plug-in previsto per i contenuti a schede. Penso che sia interessante notare che puoi inserire contenuti a schede in una sezione di fisarmonica.

Infine, questo è qualcosa che ho visto in pochi altri framework, e lo trovo incredibilmente interessante: un componente di altezza colonna uguale. Lo chiamano il Equalizzatore , un nome solo per metà talmente duro come la sua funzione. Richiede JavaScript, ovviamente, ma è un modo molto semplice per far sì che tutte le colonne di una determinata sezione mantengano l'altezza uguale in modo reattivo.

Basta aggiungere un paio di attributi di dati e sei a posto. Ecco come appare se combinato con il componente della tabella dei prezzi:

Come iniziare

Quindi ora hai esaminato l'ampio elenco di funzionalità e desideri le loro funzionalità! Destra? Bene, se sono davvero corretto, ecco come iniziare.

Creeremo un modello semplice, semplice, di base per la pratica. Puoi seguire il tuo editor di testo, copiare e incollare il codice o semplicemente scaricare il modello che ho reso disponibile perché sei un imbroglione.

Dopo questa sezione, inserirò una serie di altri fantastici tutorial e risorse di formazione per aiutarti a diventare un maestro della Fondazione.

Vai a scaricare il pacchetto predefinito su pagina di download e iniziamo

Includere i file di base nel progetto

Ora, quando scarichi il pacchetto, la struttura del file al suo interno sarà simile a questa:

project-folderindex.html (Demo file.)humans.txt (Like a readme file.)robots.txt (Just leave this alone.)/cssfoundation.cssfoundation.min.css *normalize.css */img (Note: Empty)/jsfoundation.min.js */foundationfoundation.abide.jsfoundation.accordion.jsfoundation.alert.js(Etc. Huge list here.You can keep these files to see/playwith the source, but you don't actuallyneed them to use the framework.)/vendorfastclick.jsjquery.cookie.jsjquery.js *modernizr.jsplaceholder.js

Noterai che ho inserito un asterisco dopo alcuni di questi file. Questi sono gli unici file effettivamente necessari per far funzionare il framework. Il resto sono file sorgente o utilità extra. Queste utility possono certamente aiutarti a fare cose fantastiche, ma non sono strettamente necessarie.

Ad esempio, placeholder.js implementa l'attributo segnaposto dei moduli HTML5 per i browser che non lo supportano.

I file che ho segnato sono gli unici a cui devi assolutamente collegarti nella sezione della tua pagina web / applicazione. Ai fini di questo tutorial, eliminerò la maggior parte di questi file e manterrò solo quelli essenziali. Anche io partirò da zero con un index.html vuoto.

Per cominciare, la nostra "home page" sarà simile a questa:

< !DOCTYPE html>

Potresti aver notato un file CSS extra lì. Ne avremo bisogno per gli stili personalizzati.

Crea un layout semplice

Quindi, dal momento che questa è una home page, prendiamo ulteriormente il concetto. La renderemo una pagina di destinazione eccezionalmente generica per alcune attività o altro. Nessun layout a due colonne per questo tutorial! Sono così fuori moda.

Nota che sto saltando includendo qualcosa come una barra di navigazione o un invito all'azione in questo esempio. Queste sono cose totalmente che dovresti fare nei progetti reali.

L'intestazione

Secondo le attuali leggi delle tendenze del design, dobbiamo creare un'intestazione enorme con il nome della nostra società, uno slogan e una massiccia immagine di sfondo (non inclusa in questo tutorial).

L'HTML per questo è abbastanza semplice:

Our Company Name
Insert a pithy slogan here

La classe fila non solo definisce i limiti esterni della nostra griglia, ma la centra per noi. L'elemento header è lì sia per ragioni semantiche sia per fornire un placer per aggiungere successivamente un'immagine di sfondo.

Vogliamo che la colonna della griglia di intestazione torni al cento per cento indipendentemente dalle dimensioni dello schermo, quindi è necessario utilizzare solo la classe small-12 . Gli schermi di medie e grandi dimensioni erediteranno questi stili a meno che non siano specificati altri.

Abbiamo il nostro header e il nostro testo centrato. Questo, tuttavia, non ci dà l'intestazione high-ish che vogliamo. Per questo, avremo bisogno di alcuni stili personalizzati:

/*  HEADER STYLES  */header#page-header {height: 500px;background: #cecece;}header#page-header > div.row {position: relative;top: 50%;transform: translateY(-50%);}

Come puoi vedere, ho dato al nostro header un colore di sfondo al posto di un'immagine reale e centrato verticalmente il nostro contenuto di intestazione. Abbastanza pulito, eh? Ecco come appare la nostra pagina finora:

L'introduzione e i servizi

Quindi ti sei proclamato audacemente con la tua intestazione. È ora di dire al tuo utente chi sei e cosa fai. Una piccola descrizione di ogni servizio o prodotto ... è così che lo facciamo in questa età moderna.

Iniziamo.

Who We Are
Lorem ipsum dolor sit amet, ut has offendit probatus laboramus, ludus affert omnesque nec ex. Ubique postea audiam quo eu, ut sea tempor accusam. Facer noster usu no, duo sumo maiorum eu. Sea id semper maluisset iracundia.
What We Do
Service Name
Lorem ipsum dolor sit amet, ut has offendit probatus laboramus, ludus affert omnesque nec ex. Ubique postea audiam quo eu, ut sea tempor accusam.
Service Name
Lorem ipsum dolor sit amet, ut has offendit probatus laboramus, ludus affert omnesque nec ex. Ubique postea audiam quo eu, ut sea tempor accusam.
Service Name
Lorem ipsum dolor sit amet, ut has offendit probatus laboramus, ludus affert omnesque nec ex. Ubique postea audiam quo eu, ut sea tempor accusam.
Service Name
Lorem ipsum dolor sit amet. ut has offendit probatus laboramus, ludus affert omnesque nec ex. Ubique postea audiam quo eu, ut sea tempor accusam.

Bene, come puoi vedere, tutto ciò che ho fatto è aggiungere più righe e colonne al contenuto. Ho applicato le classi appropriate per rendere le colonne scalabili al dispositivo su cui vengono visualizzate.

Nella sezione #introduction , non ho solo creato la colonna centrale a tutta larghezza. Invece, per essere sicuro che il paragrafo introduttivo fosse leggibile, l'ho ridotto e gli ho dato le classi di offset appropriate per ogni dimensione dello schermo.

La spaziatura verticale delle sezioni di contenuto è qualcosa che devi fare per te in ogni framework, quindi, ancora una volta, avevo bisogno di un CSS personalizzato:

section#page-content, section#page-content > #services {padding-top: 3em;}section#page-content {padding-bottom: 3em;}

Niente di speciale lì. Dato che praticamente tutto, inclusa la griglia, è distanziato di ems, li ho usati per il padding per mantenere le cose visivamente coerenti. Pensa alla spaziatura degli elementi basata su em come una griglia di base incorporata che puoi facilmente sfruttare.

Ecco come appare l'intera cosa ora:

Il piè di pagina

Dedichiamoci un semplice footer, con un paio di link di navigazione e un avviso di copyright, perché no?

Qui, ho incluso un elenco in linea (vedi sopra) per i collegamenti a piè di pagina e due colonne che diventano verticali a dimensioni del telefono. Ecco il CSS che ho usato:

footer#page-footer {padding-top: 3em;padding-bottom: 3em;border-top: 1px solid #cecece;}

E voilà! Una landing page semplice da personalizzare per il tuo cuore. Ecco come appare l'intera cosa:

Prendi il file zip, se vuoi, e gioca con il codice che è già lì. Inizia da zero e dai un'occhiata alla fonte. Oppure, puoi solo dare un'occhiata ai materiali di formazione che altri hanno fatto ...

Tutorial e formazione

Materiali di formazione di ZURB

Come ci si potrebbe aspettare, i ragazzi di ZURB hanno superato la documentazione fornendoci alcuni materiali di formazione propri. Questi prendono la forma del Corso base , e il Corso avanzato di base . Questi materiali di formazione devono essere scaricati e visualizzati localmente.

ZURB offre anche corsi di formazione a pagamento che possono essere presi online. Puoi trovare maggiori informazioni a riguardo sul loro sito web .

Screencast di Webdesigner Depot

Giusto! Abbiamo realizzato dei video di formazione per conto nostro, con un focus speciale su Foundation 5. Controllali su Youtube: Fondazione 5 Introduzione , e Utilizzo delle funzionalità avanzate di Foundation

Iniziare con la griglia ZURB Foundation 5

Questo set di screencast di James Stone copre tutte le basi. Gli argomenti includono: Impostazione del progetto, a partire dalla griglia del desktop, griglie desktop annidate, aggiunta di immagini segnaposto, creazione dell'esperienza mobile e perfezionamento dell'esperienza tablet.

Tutorial sulla struttura di ZURB Foundation 5

I ragazzi di ieatcss.com è andato e ha scritto un intero e-book tutto sulla Fondazione 5. Puoi trovare le loro esercitazioni per principianti Qui. Se vuoi qualcosa di più avanzato, puoi scaricare il loro ebook per 29 USD.

Perché lo paghi? Perché invece di dirti come usare il framework, spiegano come funziona tutto . E intendo tutto, inclusi i plugin JavaScript.

Mastering Foundation Zurb. tutorial dalla A alla Z.

Questo è un altro serie di esercitazioni, seguito da un ebook opzionale. Questi sono forniti da MonsterPost, il blog TemplateMonster.

Gli stili sfacciati della Fondazione hanno spiegato

Se hai desiderato un tutorial leggermente più avanzato e approfondito, Ecco qui ! In questo post, i nostri amici di Tuts + descrivere, in grande dettaglio, come personalizzare FOUNDATION dai file Sass in su.

Se non hai mai lavorato con i file Sass, inizia qui.

Come creare tabelle reattive in Foundation

Infine, i ragazzi geniali di Sitepoint ci mostrano come creare tavoli reattivi . Intendiamoci, questa è una soluzione che Foundation implementa di default. In questo tutorial, puoi imparare come prendere un componente specifico di Foundation e integrarlo in un altro progetto.

(Se sei nuovo al web design, potresti aver sentito qualcosa sul fatto che le tabelle sono "malvagie". Beh, se le utilizzi per il layout del tuo sito Web, è assolutamente vero, tuttavia a volte i dati vengono rappresentati al meglio in un formato tabellare, quindi è bene imparare come rendere le tabelle leggibili sui dispositivi mobili.)

forchette

Gumby - una forchetta Foundation

Una cosa bella dei framework open source come Foundation è che le loro licenze consentono alle persone di prenderli, cambiarli e persino chiamarli loro. I designer e gli sviluppatori di Chirurghi digitali fatto proprio questo

Hanno mantenuto le parti strutturali di Foundation e quindi hanno incluso alcuni interessanti nuovi componenti dell'interfaccia utente e plugin jQuery. Il risultato è stato nominato Gumby ed è una struttura fantastica a sé stante.

Laddove Foundation è progettato per essere flessibile e adatto sia a siti Web basati sul contenuto che a applicazioni Web, Gumby è più specializzato. Si concentra su una cosa: i siti web basati sui contenuti e la loro facile creazione.

UI quasi piatta

Le modifiche alla Fondazione in questa forcella sono così sottili che non sono sicuro se chiamarlo forcella o tema. È, in sostanza, la Fondazione 5.2.2 con pochi, piccoli cambiamenti estetici.

Ciò che mi rende interessante è che questi cambiamenti riducono la tendenza del "design piatto" in piccolissimi modi. Il ragionamento dietro sembra essere che alcuni elementi dell'interfaccia utente, come i pulsanti, dovrebbero mantenere un sottile riferimento alla terza dimensione.

È un design leggermente snouomorfo, e penso che potrebbe effettivamente migliorare l'usabilità. Bene, per alcuni utenti, comunque.

Risorse e strumenti vari

Ecco alcuni interessanti strumenti correlati alla Fondazione e cose che non si adattano perfettamente ad altre categorie:

Building Blocks di ZURB

Il Costruzioni sono frammenti di codice creati con e / o per Foundation. Questi includono nuovi componenti dell'interfaccia utente, layout riutilizzabili dei contenuti e altro ancora.

Snippet di testo sublime

Testo sublime è un fantastico editor di testo usato dai programmatori di tutto il mondo. Questi frammenti (pezzi di codice pensati per un facile inserimento in qualsiasi file) sono fondamentalmente pensati per rendere i layout degli edifici con Foundation molto più veloci. Sono compatibili con entrambi i testi Sublime 2 e 3.

Generatore di griglia sperimentale

La griglia di dodici colonne predefinita non è di tuo gradimento o non è adatta al tuo progetto? Allora creane uno nuovo! Basta andare su questo generatore di griglia , inserisci i tuoi valori e prendi il tuo CSS.

Intendiamoci, il CSS sembra essere basato su una versione precedente di Foundation, quindi potrebbe essere necessario adattarlo ai nuovi nomi di classi e classi responsive. Eppure, fa tutti i calcoli più difficili per te.

bookmarklets

I segnalibri sono piccoli strumenti, di solito creati con JavaScript, che possono essere inseriti nella barra dei preferiti. Una volta avviati, possono condividere la pagina corrente, visualizzare informazioni utili in una sovrapposizione e molte altre piccole cose utili.

Il Grid Displayer booklet di Antoine Lefeuvre può essere utilizzato per sovrapporre una griglia visiva in cima a qualunque pagina stai lavorando al momento. La griglia è personalizzabile, ma è possibile impostarla facilmente sui valori predefiniti della base.

Il Bookmarklet Griglia verticale di Kevin Altman fa la stessa cosa del Grid Displayer. La differenza è che invece di linee verticali, ottieni un po 'di linee orizzontali per aiutarti a gestire lo spazio verticale tra gli elementi.

Il [Responsive Design Bookmarklet] di Victor Coulon ricaricherà la pagina corrente su cui ti trovi all'interno di uno strumento che ti consentirà di visualizzare rapidamente i tuoi progetti con risoluzioni diverse.

Uno sguardo a quello che sta arrivando

Faresti meglio a credere che ZURB non sia ancora seduto. Insieme a tutte le altre cose che fanno, sono al lavoro. Hanno delle cose interessanti, come:

Fondazione per app

ZURB sta creando una nuova versione della Fondazione che non sostituirà la Fondazione 5, ma lavorerà insieme. Comprenderà funzionalità specifiche per la progettazione, la prototipazione e la creazione di applicazioni Web.

Le funzionalità includeranno una nuova griglia, l'integrazione con Angular.js, nuove funzionalità progettate specificamente per la prototipazione e altro ancora. Per saperne di più su quello che stanno facendo, guarda cosa hanno da dire per te: The Next Foundation .

Motion UI

Tecnicamente, Motion UI farà parte di questa nuova versione di Foundation basata sull'app, ma immagino che sarà disponibile come componente separato da utilizzare ovunque. (Quella è un'ipotesi educata, niente di più ...) Che cos'è? È una libreria di animazione.

Le app moderne fanno un uso pesante dell'animazione, non solo per impressionare gli utenti, ma anche per migliorare l'usabilità. Motion UI è progettato per rendere più facile a chi costruisce interfacce complesse.

Secondo gli stessi ragazzi della ZURB:

E mentre penso che la deliberata, completa eliminazione dello skeuomorphism potrebbe essere stata una leggera reazione eccessiva in primo luogo (vedi quello che ho detto prima su "Almost Flat UI"), sono contento che stiamo arrivando con alternative . Abbiamo bisogno di nuovi modi per dire ai nostri utenti come ottenere il massimo dai nostri prodotti e l'animazione è un ottimo modo per gestirli.

Conclusione

La Fondazione è proprio quello che suggerisce il suo nome. È un punto di partenza, ed è fantastico. Non è l'unica grande struttura là fuori, ma è una scelta solida per chiunque voglia costruire più velocemente prodotti belli.

È giusto per te e per i tuoi progetti? Dai un'occhiata dentro e scoprilo.