Costruisci siti Web Superfast con Foundation 5 [Una guida]
L'uso di un framework di frontend può migliorare il flusso di lavoro della tua web design in molti modi. Può aiutarvi a seguire i principi del design moderno come l'approccio mobile-first, markup semantico e design reattivo. Puoi fare leva su molti elementi CSS e JavaScript pronti all'uso e in modo significativo velocizza il tuo processo di sviluppo, liberare più tempo per concentrarsi sulla progettazione visiva e sull'esperienza utente.
Zurb Foundation 5 è uno dei più potenti framework di frontend disponibili sul mercato. È costruito in modo logico, facile da usare e completamente gratuito. Ti consente di utilizzare a griglia flessibile CSS quello facilita la creazione di un layout pulito e user-friendly. Anche il framework Foundation è fortemente testato, quindi si prende cura della compatibilità cross-browser e cross-device.
In questo tutorial ti mostrerò come puoi costruire un sito Web superveloce con Zurb Foundation 5. Puoi dare un'occhiata al risultato finale sulla pagina demo.
Creerò il layout del sito web, il compito di aggiungere elementi di design sottili ti sta aspettando. Il sito web che creeremo insieme in questo tutorial realizzerà il sogno del moderno designer UX: sarà reattivo, mobile-first, user-friendly e semantico.
A causa della lunghezza di questa guida, ecco le scorciatoie per arrivare rapidamente alla sezione desiderata:
- Download della Fondazione 5
- Capire la griglia
- Quando utilizzare le classi Large-N, Medium-N e Small-N
- Aggiunta della barra del menu principale
- Popolazione della parte principale
- Aggiunta di un pannello per i post popolari
- Aggiunta di altri 3 post al pannello popolare
- Preparare il CSS
- Aggiunta di alcuni altri contenuti
- Aggiungere l'impaginazione
- Popolazione della barra laterale
- Il modulo per la newsletter
- Flex Video
- Il menu della barra laterale
- Conclusione
1. Download di Foundation 5
Puoi scaricare Foundation 5 in 4 diverse forme:
- il codice completo
- una versione più leggera con solo il codice essenziale
- una versione personalizzata in cui puoi personalizzare ciò che ti serve e cosa no
- una versione Sass se si desidera impostare le variabili e i mix in SCSS.
In questo tutorial sceglierò il codice completo con vanilla CSS, ma ovviamente puoi scegliere qualsiasi altra versione se desideri semplificare il tuo sito e utilizzare solo ciò di cui hai veramente bisogno.
Dopo aver scaricato e decompresso il file zip, apri il file index.html nel tuo browser e vedrai qualcosa di simile a questo:
Sì, gli sviluppatori includevano utili collegamenti nel file indice. Puoi lasciarlo in questo modo e creare un nuovo file per il tuo prototipo con il nome home.html o qualcosa di simile, ma non è necessario conservarlo come puoi facilmente raggiungere la Documentazione della Fondazione ogni volta che vuoi.
Apri il file index.html nel tuo editor di codice preferito e cancella tutto dentro il sezione, ma prima della chiusura Le regole di stile che aggiungiamo al app.css file per abbellire il nostro prototipo sono questi: Come Foundation 5 usa unità relative, dobbiamo usare “em”-s o “rem”-s invece di pixel per tenere il passo con le regole. (Puoi leggere le unità CSS: Pixel vs ems vs% qui.) Ho usato l'estensione Firebug di Firefox per determinare dove devo sovrascrivere le regole CSS di Foundation 5, puoi usare qualsiasi altra estensione del browser di sviluppo web se vuoi. Qui in questo breve snippet CSS abbiamo dovuto ignorare il CSS predefinito della Foundation solo una volta, nell'ultima regola (.row .row.popular-main). Ecco come appare ora il sito demo: Usando le stesse regole di prima aggiungeremo altri contenuti alla sezione principale della pagina. Il contenuto che aggiungeremo ora sarà il ultimi post con piccole miniature. La Foundation 5 ha degli stili di anteprima pre-preparati davvero interessanti che utilizzeremo in questo passaggio. Le anteprime della Fondazione usano a classe CSS precostruita chiamata “esimo” che dobbiamo aggiungere alle immagini che vogliamo visualizzare come miniature nel modo in cui potete vederle nello snippet di codice qui sotto. Per ogni post più recente aggiungiamo una nuova riga sotto il pannello popolare con il nostro classe CSS personalizzata chiamata “l'ultimo post”. Su tablet e dimensioni del desktop mostreremo una piccola miniatura usando la classe delle miniature di Foundation a sinistra, e il titolo e una breve descrizione a destra. Sul cellulare, il titolo e la descrizione andranno sotto la miniatura. Ora ho usato il “colonne medio-3” e “colonne di media-9” classi per renderli dividere lo schermo in 1: 3, 25% per l'immagine e 75% per il testo in alto da medie dimensioni. Inserisci il seguente frammento di codice sotto il pannello Popolare tre volte (per i tre Post recenti). Qui includo semplicemente il codice di una riga Latest Post, poiché tutti usano lo stesso markup HTML, solo il contenuto è diverso. Contenuto dell'ultimo post ... Il nostro file CSS personalizzato creato nel passaggio 4.3, app.css ottiene anche alcune nuove regole di stile per mantenere in ordine l'aspetto della demo. Nota: Se vuoi aggiungere il tuo CSS personalizzato alla Fondazione, non dimenticare di controllare, con uno strumento di sviluppo web, dove devi sostituire le regole predefinite. Nel frammento di codice CSS qui sotto abbiamo bisogno di sovrascriverli nella prima regola (.row .row.latest-post). Nella seconda regola è sufficiente utilizzare il nostro selettore personalizzato (.latest-post h4). Il nostro prototipo ora si presenta così: In questo passaggio aggiungeremo un'impaginazione interessante sotto gli ultimi post. La Fondazione 5 ci dà una mano grazie alle sue convenienti classi di impaginazione pronte all'uso. Usiamo lo stesso codice in questo passaggio che puoi trovare in “Avanzate” sezione all'interno di Pagination Docs. Ecco i post più recenti con la sezione di impaginazione appena aggiunta: Ora che siamo pronti con il contenuto principale del nostro sito demo, è tempo di compilare la barra laterale destra. La barra laterale destra scivolerà sotto il contenuto principale su dispositivi mobili e tablet. È necessario inserire tutti i frammenti di codice in questa sezione all'interno di La barra laterale di sinistra conterrà un modulo di iscrizione alla newsletter (1), un video più recente (2) e un menu della barra laterale in stile fisarmonica sotto il soprannome “Il nostro ricettario” (3). Alla fine di questo passaggio saremo pronti con la nostra demo che sarà simile a questa: Per costruire un modulo in Foundation 5, non devi fare altro, basta posizionare la griglia all'interno di a Tag HTML. Se dai un'occhiata al frammento di codice qui sotto, vedrai che inseriamo il modulo in una riga in cui impostiamo diversi selettori CSS per tutte e 3 le griglie: “piccolo-12”, “medio-9”, e “larga 12”. Abbiamo scelto questa soluzione perché un modulo per newsletter al 100% è perfetto per le dimensioni dei dispositivi mobili, ma è davvero davvero imbarazzante per le dimensioni del tablet che diventa molto largo. Fortunatamente la Fondazione 5 ci lascia usare “Righe incomplete”: dobbiamo solo aggiungere il “fine” classe alla definizione della classe CSS della colonna incompleta. Quindi, questo è ciò che succederà qui: nelle dimensioni mobili la barra laterale verrà visualizzata sotto il contenuto principale con un modulo di iscrizione alla newsletter che copre l'intero schermo. A livello medio la barra laterale rimarrà sotto il contenuto principale, ma il modulo Newsletter coprirà solo il 75% dello schermo e il restante 25% rimarrà vuoto. Nelle dimensioni del desktop, la barra laterale sarà proprio accanto al contenuto principale e il modulo Newsletter coprirà di nuovo l'intera larghezza della barra laterale. Vedere Grid Docs per ulteriori informazioni su Righe incomplete. Ora dai uno sguardo al header margin-bottom: 2em; .popular-additional h4 font-size: 1.125em; margin-top: 0.4em; .row .row.popular-main margin-bottom: 1.5em;
4.4 Aggiunta di alcuni altri contenuti
Titolo dell'ultimo post
.row .row.latest-post margin-bottom: 1.5em; .latest-post h4 margin-top: 0; font-size: 1.125em;
4.5 Aggiunta dell'impaginazione
5. Popolazione della barra laterale
5.1 Il modulo per la newsletter
Iscriviti alla nostra newsletter
I moduli di base hanno molte altre opzioni di layout come Etichetta prefisso, Etichetta raggio prefisso, Pulsante Postfix e Etichetta Postfix. Abbiamo scelto l'opzione Pulsante Postfix perché è più user-friendly: gli utenti possono fare clic su di esso e inviare il modulo in una sola volta.
All'interno del modulo aggiungeremo una nuova riga annidata che divide lo schermo in 2: 1. L'input di testo otterrà 8 colonne e il pulsante postfix otterrà 4. Siccome vogliamo avere questo layout anche sullo schermo mobile, imposteremo il “small-8 colonne” e “piccolo-4 colonne” Selettori CSS qui, la Griglia Piccola è la dimensione più piccola in cui vogliamo implementare questo markup.
Puoi vedere un'altra cosa nuova nel codice HTML sopra il quale è il “fila collasso” classe. Questo è lo stile integrato di Foundation 5. Di default c'è una grondaia tra due colonne adiacenti, ma se aggiungiamo il “crollo” classe alla nostra fila, la grondaia sparirà. Lo facciamo perché vogliamo che il pulsante si trovi direttamente accanto all'input di testo senza spazi tra loro.
Ora è il momento di inserire questo snippet di codice nel file
5.2 Video flessibile
Sotto la sezione Newsletter aggiungeremo una Ricetta Video giornaliera alla nostra barra laterale. La Fondazione 5 ci aiuta rendere i video incorporati reattivi e forzarli a scalare automaticamente con la sua funzione Flex Video.
I video Flex utilizzano il built-in “flex-video” Classe CSS Creiamo una nuova riga per la sezione della barra laterale Daily Video Recipe e inseriamo una colonna larga in essa con il “small-12 medium-9 large-12 columns end” Selettori CSS per lo stesso motivo per cui abbiamo utilizzato una riga incompleta nella griglia media nel passaggio precedente.
Ecco il codice che devi incollare sotto la sezione Newsletter. Puoi usare qualsiasi video da Youtube, Vimeo ecc.
Ricetta Video giornaliera
5.3 Il menu della barra laterale
Per il menu Sidebar useremo la funzione Fisarmonica di Foundation 5. Le fisarmoniche sono elementi web che espandono e comprimono il contenuto in sezioni logiche.
Nel nostro sito demo queste sezioni logiche sono i 3 diversi gruppi di alimenti (Piatti principali, Piatti laterali, Dessert) e ogni gruppo contiene gruppi più piccoli come “Pollame”, “Maiale”, “Manzo”, “Vegetariano”.
Poniamo l'intera barra laterale della fisarmonica in un'unica colonna con la stessa logica dei precedenti punti 5.1 e 5.2. Inseriamo la fisarmonica al suo interno come una lista non ordinata con le appropriate classi CSS incorporate come “fisarmonica” e “accordion-navigazione”.
Poiché le fisarmoniche di base funzionano con JavaScript, puoi personalizzare il suo comportamento con l'aiuto di variabili JavaScript predefinite, se lo desideri. Per fare ciò, guarda il “Configurazione JavaScript opzionale” sezione nei documenti sulla fisarmonica. Il seguente frammento di codice arriva sotto la sezione Flex Video all'interno del file index.html.
Il nostro ricettario
Conclusione
Ora che siamo pronti con il nostro sito demo, vediamo che altro è possibile realizzare con Foundation 5. Gli elementi che abbiamo utilizzato in questa demo sono solo un piccolo insieme delle funzionalità del framework Foundation. Ci sono molte altre cose che puoi utilizzare nel tuo progetto, come ad esempio barre delle icone personalizzabili, breadcrumb, lightbox, intervalli di scorrimento, convalida dei form e molti altri. I documenti sono abbastanza ben scritti e aiutano gli sviluppatori con molti esempi di codice.
Se hai familiarità con Sass hai ancora più opzioni dato che ogni sezione del documento spiega come puoi creare i tuoi mix e quali variabili di Sass puoi usare per personalizzare il tuo sito. Prima di iniziare a progettare la tua pagina web, non dimenticare di verificare la compatibilità del framework Foundation per assicurarti che funzioni su tutti i browser che devi creare per.
- Visualizza la demo
- Scarica fonte
