Un paio di settimane fa il famoso Quadro di base ha rilasciato la sua quarta versione. Se non hai mai sentito parlare di Foundation, ti guideremo attraverso l'utilizzo di questo framework reattivo.

Poiché la versione 3 di Foundation è stata costruita da zero usando SASS - un pre-processore CSS che aiuta nella scrittura di CSS più efficienti - questa nuova versione è anche ottimizzata per i dispositivi mobili e offre molte funzionalità nella sua griglia che tu non hai t ottenere da altri quadri.

Diamo un'occhiata alla Fondazione e vediamo perché è così popolare ...

La griglia

Foundation usa una griglia di 12 colonne che si adatta a qualsiasi schermo di dimensioni, se hai già usato le griglie questo dovrebbe essere tutto molto familiare a te. Tutti i div in Foundation usano il dimensionamento della scatola: border-box in modo che i bordi e il padding non influenzino la larghezza e l'altezza dell'elemento, rendendo la matematica un po 'più facile per noi. Ma la cosa sorprendente della griglia di Foundation è che ottieni 2 griglie, una grande griglia per quando lo schermo è più grande di 768px in larghezza e una griglia più piccola che puoi controllare altrettanto semplicemente. A tal fine Foundation utilizza le classi # piccole e # grandi, in questo modo:

Lorem Ipsum
Lorem Ipsum
Lorem Ipsum

In questo codice abbiamo creato una riga in cui ci sono 3 div che hanno esattamente la stessa larghezza quando il browser è più largo di 768px ma quando è più piccolo, come puoi vedere da quella piccola classe nelle div, l'ultima occuperà metà della schermo mentre gli altri due occuperanno il 25% ciascuno, questo ti dà un controllo immenso sul modo in cui il nostro sito web apparirà su tutti gli schermi.

Foundation ti permette anche di compensare una colonna, con la quale intendo che puoi avere una riga con 2 colonne che sono solo 3 colonne di larghezza ma puoi compensare la seconda che fluttua a destra e per farlo usiamo la classe offset o classe offset piccolo:

3, offset 6

Blocca la griglia

La griglia a blocchi è solo un piccolo extra in più, è un modo per dividere il contenuto di una lista all'interno della griglia, è utile quando desideri che questa particolare parte del tuo sito rimanga uniformemente distanziata, indipendentemente dalle dimensioni della browser. Questo tipo di griglia utilizza le classi small-block-grid e large-block-grid, se si imposta solo il primo, la griglia manterrà la spaziatura desiderata indipendentemente da quale sia il viewport ma se si utilizza solo il blocco grande- classe della griglia quando la finestra raggiunge il breakpoint di 768px gli elementi della griglia si impilano uno sopra l'altro, puoi sempre avere più controllo usando entrambe queste classi, in questo modo:

Usando questo, le immagini saranno distribuite uniformemente indipendentemente dalla dimensione. Quando il viewport è più grande di 768px occupano solo una riga e quando è più piccolo occupano due righe con 2 immagini ciascuna.

La navigazione principale

Ora che abbiamo coperto la griglia in Foundation e in che modo ti dà il massimo controllo in tutti gli ambienti, parleremo di qualcosa che quasi sempre useremo sui nostri siti: una barra di navigazione in alto. E naturalmente questa navigazione può anche essere flessibile con poco o nessun lavoro usando questo framework. Per creare una navigazione reattiva semplice usando Foundation si usa:

Questo bit di HTML crea una semplice barra di navigazione che ha il titolo del sito Web sulla sinistra e quindi sulla destra ha quattro voci di menu. Si noti inoltre che quando il viewport è più piccolo di 768px questo menu sarà sostituito da un'icona di lista che rende questo menu reattivo. Se vuoi che questa griglia abbia la sua posizione fissa mentre scorri verso il basso della pagina devi solo avvolgerla in un div con una classe di fixed. Per aggiungere i menu a discesa alla tua navigazione devi solo aggiungere qualcosa di simile al luogo in cui desideri il tuo menu a discesa:

#">  Sottomenu Elemento 1
Sottomenu Elemento 1
Sottomenu Elemento 3

C'è anche la possibilità di aggiungere un divisore alla tua voce di lista aggiungendo una piccola linea verticale grigia, per farlo devi solo posizionare una voce di elenco con la classe di divisore tra i due elementi della lista che desideri dividere.

pulsanti

Nessun framework sarebbe completo senza alcuni pulsanti predefiniti e Foundation ha in realtà più di uno stile di pulsante predefinito, ha quello predefinito che utilizza un colore blu e quindi aggiunge gli stili success, alert e secondari. Aggiungendo la classe di raggio si dà a questo pulsante un po 'di raggio di bordo e assegnandogli la classe di arrotondamento si ottiene il pulsante quasi interamente rotondo. Puoi anche aggiungere la classe disabilitata al pulsante e ci sono 4 classi di dimensioni per rendere il pulsante grande quanto ti serve.

Pulsante predefinitoPiccolo pulsantePulsante piccoloPulsante grandePulsante secondarioPulsante di successoPulsante di avvisoPulsante RadiusPulsante rotondoPulsante disabilitato

Per creare un semplice pulsante a discesa devi solo aggiungere la classe dropdown dopo l'ultima classe, in questo modo:

  h1.subheader 
  h1.  Più piccola 
  Elemento dell'elenco 
  Elemento dell'elenco 
  Link 1
Link 2

Come potete vedere, quando si parla di tipografia, Foundation ci fornisce un aiuto di base e poi alcune classi aggiuntive per soddisfare tutte le nostre esigenze.

Altri componenti

Se questa dimostrazione della struttura della Fondazione ha stimolato la tua voglia di saperne di più e di iniziare a costruire con la Fondazione, dovresti dare un'occhiata alla documentazione perché Foundation offre anche componenti CSS aggiuntivi come:

• Caselle di avviso
• pannelli
• Tabelle dei prezzi
• Barre di avanzamento
• tabelle
• miniature
• Flex Video

E anche qualche helper JavaScript come:

• radura
• Cadere in picchiata
• Joyride
• Magellan
• Orbita
• Svelare
• Sezione
• Tooltips

Come puoi vedere, c'è un sacco di Foundation da esplorare e ti consiglio vivamente di dare un'occhiata a tutte le sue proprietà CSS e JavaScript.

Conclusione

Abbiamo analizzato quanto basta in questo articolo per vedere come Foundation può contribuire a costruire siti Web più veloci e reattivi, utilizzando la sua griglia si ottiene un controllo molto maggiore sulla struttura del proprio sito web rispetto a quando si utilizza una normale griglia flessibile e Foundation offre anche molti helper per creare il tuo sito web. Spero che questo articolo ti abbia dato la spinta per imparare e utilizzare la Fondazione per il tuo prossimo progetto.

Hai usato Foundation per un progetto? Quali caratteristiche hai trovato più utili? Fateci sapere nei commenti.