Fondazione - Installazione

In questo capitolo, discuteremo su come installare e utilizzare Foundation sul sito web.

Scarica la Fondazione

Quando apri il collegamento foundation.zurb.com , vedrai una schermata come mostrato di seguito:

Clicca il Download Foundation 6 pulsante, verrai reindirizzato a un'altra pagina.

Qui puoi vedere quattro pulsanti:

  • Download Everything - Puoi scaricare questa versione di Foundation, se desideri avere tutto nel framework, cioè CSS vanilla e JS.

  • Download Essentials - Scaricherà la versione semplice che include la griglia, i pulsanti, la tipografia ecc.

  • Custom Download - Questo scaricherà la libreria personalizzata per Foundation, include elementi e definisce la dimensione delle colonne, la dimensione del carattere, il colore ecc.

  • Install via SCSS - Questo ti reindirizzerà alla pagina della documentazione per installare Foundation per i siti.

Puoi fare clic su Download Everythingpulsante per ottenere tutto nel framework cioè CSS e JS. Poiché i file sono costituiti da tutte le cose nel framework, ogni volta non è necessario includere file separati per funzionalità individuali. Al momento della stesura di questo tutorial, è stata scaricata l'ultima versione (Foundation 6).

Struttura dei file

Una volta scaricato Foundation, estrai il file ZIP e vedrai la seguente struttura di file / directory:

Come puoi vedere, ci sono CSS e JS compilati (foundation. *), Nonché CSS e JS compilati e minimizzati (foundation.min. *).

Stiamo utilizzando le versioni CDN della libreria durante questo tutorial.

Modello HTML

Un modello HTML di base che utilizza Foundation è come mostrato di seguito:

<!DOCTYPE html>
<html>
   <head>
      <title>Foundation Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">

      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA==" crossorigin="anonymous">

      <!-- Compressed JavaScript -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js" integrity="sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw==" crossorigin="anonymous"></script>
   </head>

   <body>
      <h1>Hello, world!</h1>
   </body>
</html>

Le sezioni seguenti descrivono in dettaglio il codice precedente.

Doctype HTML5

Foundation è costituito da alcuni elementi HTML e proprietà CSS che richiedono l'uso del doctype HTML5. Pertanto, il seguente codice per il doctype HTML5 dovrebbe essere incluso all'inizio di tutti i progetti che utilizzano Foundation.

<!DOCTYPE html>
<html>
   ....
</html>

Mobile First

Aiuta a essere reattivo ai dispositivi mobili. Devi includere il fileviewport meta tag all'elemento <head>, per garantire un rendering corretto e lo zoom al tocco sui dispositivi mobili.

<meta name = "viewport" content = "width = device-width, initial-scale = 1">

  • La proprietà width controlla la larghezza del dispositivo. Impostandolo sulla larghezza del dispositivo si assicurerà che venga visualizzato correttamente su vari dispositivi (cellulari, desktop, tablet ...).

  • initial-scale = 1.0 garantisce che, una volta caricata, la tua pagina web verrà visualizzata in scala 1: 1 e non verrà applicato alcuno zoom fuori dalla scatola.

Inizializzazione dei componenti

Lo script jQuery è richiesto in Foundation per componenti come modals e menu a discesa.

<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</script>

Produzione

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra indicato:

  • Salva il codice html sopra indicato firstexample.html file.

  • Apri questo file HTML in un browser, viene visualizzato un output come mostrato di seguito.