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ò aiutarti a seguire i principi del design moderno come l'approccio mobile-first, il markup semantico e il design reattivo. Puoi fare leva su molti elementi CSS e JavaScript pronti all'uso e velocizzare significativamente il tuo processo di sviluppo, liberando più tempo per concentrarti sulla progettazione di esperienze visive e degli utenti.

Zurb Foundation 5 è uno dei più potenti framework di frontend disponibili sul mercato. È costruito logicamente, facile da usare e completamente gratuito. Ti consente di utilizzare una griglia CSS flessibile che facilita la creazione di un layout pulito e intuitivo . Anche il framework Foundation è fortemente testato, quindi si prende cura della compatibilità cross-browser e cross-device.

In questo tutorial ti mostrerò come 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 progettista di 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:

1. il codice completo
2. una versione più leggera con solo il codice essenziale
3. una versione personalizzata in cui puoi personalizzare ciò che ti serve e cosa no
4. 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 hai davvero bisogno di tenerlo poiché puoi facilmente raggiungere la Documentazione della Fondazione ogni volta che vuoi.

Apri il file index.html nel tuo editor di codice preferito ed elimina tutto all'interno del file sezione, ma prima della chiusura

Le regole di stile che aggiungiamo al file app.css per arricchire il nostro prototipo sono queste:

 header {margin-bottom: 2em; } .popular-additional h4 {font-size: 1.125em; margin-top: 0.4em; } .row .row.popular-main {margin-bottom: 1.5em; } 

Poiché Foundation 5 utilizza unità relative, dobbiamo usare "em" -s o "rem" -s anziché i 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 scavalcare le regole CSS di Foundation 5, puoi usare qualsiasi altra estensione del browser di sviluppo web, se vuoi.

Qui in questo breve snippet di CSS abbiamo dovuto ignorare il CSS predefinito di Foundation solo una volta, nell'ultima regola (.row .row.popular-main). Ecco come appare il sito demo ora:

4.4 Aggiungere alcuni altri contenuti

Usando le stesse regole di prima aggiungeremo altri contenuti alla sezione principale della pagina. I contenuti che aggiungeremo ora saranno gli ultimi post con piccole miniature.

La Foundation 5 ha degli stili di anteprima pre-preparati davvero interessanti che utilizzeremo in questo passaggio. Le anteprime di base utilizzano una classe CSS preconfigurata chiamata "th" che dobbiamo aggiungere alle immagini che vogliamo visualizzare come anteprime nel modo in cui potete vederle nello snippet di codice seguente.

Per ogni post più recente aggiungiamo una nuova riga sotto il pannello popolare con la nostra classe CSS personalizzata chiamata "latest-post" .

Su tablet e dimensioni del desktop mostreremo una piccola miniatura usando la classe thumbnail 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 le classi "medium-3 columns" e "medium-9 columns" per farle 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.

  4.5 Aggiunta dell'impaginazione 
In questo passaggio aggiungeremo un'impaginazione interessante sotto i Post più recenti. La Fondazione 5 ci dà una mano grazie alle sue convenienti classi di impaginazione pronte all'uso. In questo passaggio utilizziamo lo stesso codice che puoi trovare nella sezione "Avanzate" all'interno di Pagination Docs.
Ecco i post più recenti con la sezione di impaginazione appena aggiunta:
 5. Popolazione della barra laterale 
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 
  
  



Articoli Interessanti






			
	
				

					Convertire i collegamenti dei brani in collegamenti universali riproducibili da chiunque tramite Songwhip
					

			
	
				

					Come aggiungere frammenti di codice personalizzati ad Atom
					
						







			
	
				

					20 bellissimi UI e UX Designer Portfolio per l'ispirazione
					

			
	
				

					Aiuta a cercare MH370 attraverso le immagini satellitari Tomnod