Fondazione - Guida rapida

Cos'è la Fondazione?

Foundation è uno dei framework front-end avanzati per la progettazione di bellissimi siti Web reattivi. Funziona su tutti i tipi di dispositivi e fornisce plug-in HTML, CSS e JavaScript.

La fondazione è nata come guida di stile interna, costruita da ZURB nel 2008. ZURB è un'azienda di design di prodotti con sede a Campbell, in California. Ha rilasciato Foundation 2.0 come open source nell'ottobre 2011. L'ultima versione di Foundation è 6.1.1, rilasciata a dicembre 2015.

Perché usare il fondotinta?

Fornisce uno sviluppo più rapido utilizzando il compilatore Sass, che funziona molto più velocemente del compilatore predefinito.
Arricchisce il tuo sito web con tabelle dei prezzi, interruttori, joyride, cursori di intervallo, lightbox e molti altri.
Viene fornito con un pacchetto di sviluppo come Grunt e Libsass per una codifica e un controllo più rapidi.
Foundation for sites fornisce HTML, CSS e JS per creare rapidamente siti Web.
Il framework di posta elettronica fornisce e-mail HTML reattive, che possono essere lette su qualsiasi dispositivo.
Foundation for Apps ti consente di creare app Web completamente reattive.

Caratteristiche

Ha un potente sistema a griglia e alcuni utili componenti dell'interfaccia utente e fantastici plug-in JavaScript.
Fornisce un design reattivo, che serve tutti i tipi di dispositivi.
È ottimizzato per i dispositivi mobili e supporta veramente l'approccio mobile first.
Fornisce modelli HTML, personalizzabili ed estensibili.

Vantaggi

È facile da imparare, una volta acquisita la conoscenza di base di HTML e CSS.
Puoi usare Foundation liberamente poiché è un open source.
Ti fornisce una serie di modelli, che ti aiutano a iniziare subito a sviluppare il sito web.
Foundation supporta preprocessori come SASS e Compass, il che rende lo sviluppo più veloce.

Svantaggi

A causa della popolarità di Twitter Bootstrap, il supporto della community per Twitter Bootstrap è migliore di Foundation.
I principianti potrebbero impiegare del tempo per imparare e sfruttare il supporto del preprocessore.
Mancanza di un supporto più ampio come siti e forum QA per la risoluzione dei problemi.
La fondazione ha meno temi rispetto ad altri.

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 e JS vanilla.
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 (foundation.min. *) Compilati e minimizzati.

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 assicura 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.

Puoi iniziare con lo sviluppo del tuo progetto con alcuni modelli disponibili che possono essere installati tramite Yeti Launch oFoundation CLI. Puoi iniziare con il nuovo progetto utilizzando questi modelli utilizzando il sistema di compilazione Gulp per l'elaborazione di Sass, JavaScript, copia di file ecc.

Modello di base

Il modello di base è qualcosa come il modello SASS, che include la struttura di directory piatta e compila solo file SASS ed è bene avere questo modello semplice mentre si utilizza solo SASS. È possibile utilizzare il modello di base utilizzando Yeti Launch o utilizzando Foundation CLI utilizzando il seguente comando:

$ foundation new --framework sites --template basic

Per configurarlo, esegui prima npm install , bower install e usa il comando npm start per eseguirlo. Puoi anche scaricare i file modello da GitHub .

Modello ZURB

È una combinazione di CSS / SCSS, JavaScript, modello Handlebars, struttura di markup, compressione delle immagini e utilizza l'elaborazione SASS. È possibile utilizzare il modello ZURB utilizzando Yeti Launch o utilizzando Foundation CLI utilizzando il comando seguente:

$ foundation new --framework sites --template zurb

Per eseguire questo modello, segui gli stessi passaggi specificati nel modello di base. Puoi anche scaricare i file modello da GitHub .

Copia delle risorse

Puoi copiare il contenuto nella cartella src / assets usando Gulp in cui assets sarà la cartella del tuo progetto. La cosa importante qui è che i file SASS, i file JavaScript e le immagini non rientreranno in questo processo di copia delle risorse, poiché avranno il proprio processo per copiare il contenuto.

Compilazione della pagina

È possibile creare pagine HTML in tre cartelle, ovvero pagine , layout e parziali che risiedono nella directory src / . È possibile utilizzare il compilatore di file flat Panini che crea layout per le pagine utilizzando modelli, pagine, parziali HTML. Questo processo può essere eseguito utilizzando il linguaggio di creazione dei modelli di Handlebars .

Compilazione SASS

È possibile compilare il SASS in CSS utilizzando Libsass e il file SASS principale verrà archiviato in src / assets / scss / app.scss e anche i parziali SASS appena creati verranno archiviati in questa cartella stessa. L'output del CSS sarà come il normale CSS, che è nello stile annidato. Puoi comprimere il CSS con clean-css e rimuovere il CSS inutilizzato dal foglio di stile usando UnCSS .

Compilazione JavaScript

I file JavaScript verranno archiviati nella cartella src / assets / js insieme a Foundation e tutte le dipendenze saranno legate insieme nel file app.js. I file verranno collegati insieme come specificato nell'ordine seguente:

Dipendenze di fondazione.
I file verranno archiviati nella cartella src / assets / js .
I file sono raggruppati in un unico file chiamato app.js .

Compressione delle immagini

Per impostazione predefinita, tutte le immagini verranno archiviate nella cartella assets / img nella cartella dist . È possibile comprimere le immagini durante la creazione per la produzione utilizzando gulp-imagemin che supporta file JPEG, PNG, SVG e GIF.

BrowserSync

È possibile creare un server BrowserSync che è sincronizzato con il test del browser disponibile suhttp://localhost:8000e in grado di vedere i modelli compilati utilizzando questo URL. Mentre il tuo server è in esecuzione, la pagina si aggiorna automaticamente quando salvi il file e puoi vedere le modifiche apportate alla pagina in tempo reale mentre lavori.

Descrizione

Include gli elementi di base per lavorare senza problemi con le applicazioni web. La tabella seguente elenca alcuni dei componenti della Fondazione:

Sr.No.	Componente e descrizione
1	Fisarmonica Le fisarmoniche contengono schede verticali che vengono utilizzate sui siti Web per espandere e comprimere grandi quantità di dati.
2	Menu della fisarmonica Visualizza il menu pieghevole con effetti a fisarmonica.
3	Distintivo I badge sono simili alle etichette, che vengono utilizzate per evidenziare le informazioni come note e messaggi importanti.
4	Briciole di pane Specifica la posizione corrente di un sito all'interno della gerarchia di navigazione.
5	Bottoni Foundation supporta pulsanti standard con stili diversi.
6	Chiamare Callout è un elemento che può essere utilizzato per posizionare il contenuto all'interno.
7	Pulsante Chiudi Viene utilizzato per chiudere la casella di avviso.
8	Menu di dettaglio Il menu Drilldown cambia gli elenchi nidificati in un menu drilldown verticale.
9	Menu a discesa Il menu a discesa viene utilizzato per visualizzare i collegamenti in un formato elenco.
10	Riquadro a discesa Il riquadro a discesa mostra il contenuto quando si fa clic sul pulsante.
11	Flex Video Viene utilizzato per creare oggetti video nelle pagine web.
12	Classi flottanti Viene utilizzato per aggiungere classi di utilità agli elementi HTML.
13	Forme Viene utilizzato per creare il layout del modulo per raccogliere l'input dell'utente.
14	Etichetta Le etichette sono stili in linea, che definiscono un'etichetta per un elemento di input.
15	Oggetto multimediale Viene utilizzato per aggiungere oggetti multimediali come immagini, video, commenti di blog, ecc. Che possono essere posizionati a sinistra oa destra del blocco di contenuto.
16	Menù Fornisce accesso a diverse modalità nel sito web.
17	Impaginazione È un tipo di navigazione che divide il contenuto in una serie di pagine correlate.
18	Slider Specifica l'intervallo di valori trascinando una maniglia.
19	Interruttore Viene utilizzato per passare dallo stato di accensione a quello di spegnimento.
20	tavolo Rappresenta i dati in formato righe e colonne.
21	Tab È una scheda basata sulla navigazione che visualizza il contenuto in diversi riquadri senza lasciare la pagina.
22	Miniatura Modella le immagini in forma di miniatura.
23	Barra del titolo Viene utilizzato per visualizzare la schermata corrente utilizzata dall'utente con altre voci di menu.
24	Tooltip È una piccola finestra pop-up che descrive le informazioni quando passi il mouse sul collegamento.
25	Bar in alto Viene utilizzato per creare un'intestazione di navigazione nel sito web.
26	Orbita È uno slider facile e potente che fa scorrere gli elementi usando la classe orbita .

In questo capitolo studieremo gli stili globali . Il framework globale CSS of Foundation include utili ripristini che assicurano che lo stile sia coerente tra i browser.

Dimensionamento dei caratteri

La dimensione del carattere del foglio di stile del browser è impostata al 100% per impostazione predefinita. La dimensione del carattere predefinita è impostata su 16 pixel. A seconda della dimensione del carattere, viene calcolata la dimensione della griglia. Per avere una dimensione del carattere di base distinta e punti di interruzione della griglia inalterati, impostare $ rem-base sul valore $ global-font-size , che deve essere in pixel.

Colori

Gli elementi interattivi come link e pulsanti utilizzano la tonalità di blu predefinita che proviene dalla variabile SASS $ primary-color . I componenti possono anche avere colori come: secondario, avviso, successo e avviso . Per maggiori informazioni controlla qui .

Riferimento SASS

Variabili

La tabella seguente elenca le variabili SASS, che vengono utilizzate per personalizzare gli stili predefiniti dei componenti nel progetto _settings.scss .

Sr.No.	Nome e descrizione	genere	Valore predefinito
1	$global-width Rappresenta la larghezza globale del sito. Utilizzato per determinare la larghezza delle righe della griglia.	Numero	rem-calc (1200)
2	$global-font-size Rappresenta la dimensione del carattere applicata a <html> e <body> . È impostato al 100% per impostazione predefinita e il valore delle impostazioni del browser dell'utente verrà ereditato.	Numero	100%
3	$global-lineheight Rappresenta tutti i tipi di altezza di linea predefinita. $ global-lineheight è 24px mentre $ global-font-size è impostato su 16px.	Numero	1.5
4	$primary-color Dà colore ai componenti interattivi come link e pulsanti.	Colore	# 2199e8
5	$secondary-color Viene utilizzato con i componenti che supportano la classe .secondary .	Colore	# 777
6	$success-color Rappresenta lo stato o l'azione positivo quando viene utilizzato con la classe .success .	Colore	# 3adb76
7	$warning-color Rappresenta uno stato o un'azione di attenzione quando viene utilizzato con la classe .warning .	Colore	# ffae00
8	$alert-color Rappresenta uno stato o un'azione negativa se utilizzato con la classe .alert .	Colore	# ec5840
9	$light-gray Viene utilizzato per gli elementi dell'interfaccia utente grigio chiaro.	Colore	# e6e6e6
10	$medium-gray Viene utilizzato per gli elementi dell'interfaccia utente grigio medio.	Colore	#cacaca
11	$dark-gray Viene utilizzato per gli elementi dell'interfaccia utente grigio scuro.	Colore	# 8a8a8a
12	$black Viene utilizzato per gli elementi dell'interfaccia utente neri.	Colore	# 0a0a0a
13	$white Viene utilizzato per gli elementi dell'interfaccia utente bianchi.	Colore	#fefefe
14	$body-background Rappresenta il colore di sfondo del corpo.	Colore	$ bianco
15	$body-font-color Rappresenta il colore del testo del corpo.	Colore	$ nero
16	$body-font-family Rappresenta l'elenco dei caratteri del corpo.	Elenco	"Helvetica Neue", Helvetica, Roboto, Arial, sans-serif
17	$body-antialiased Il tipo con antialiasing viene abilitato impostando questo attributo su true usando le proprietà CSS -webkit-font-smoothing e -moz-osx-font-smoothing .	Booleano	vero
18	$global-margin Rappresenta il valore del margine globale sui componenti.	Numero	1rem
19	$global-padding Rappresenta il valore di riempimento globale sui componenti.	Numero	1rem
20	$global-margin Rappresenta il valore del margine globale utilizzato tra i componenti.	Numero	1rem
21	$global-weight-normal Rappresenta lo spessore del carattere globale per il tipo normale.	Parola chiave o numero	normale
22	$global-weight-bold Rappresenta lo spessore del carattere globale per il grassetto.	Parola chiave o numero	grassetto
23	$global-radius Rappresenta il valore globale di tutti gli elementi che hanno un raggio di confine.	Numero	0
24	$global-text-direction Imposta la direzione del testo del CSS su ltr o rtl		ltr

SASS aiuta a rendere il codice più flessibile e personalizzabile in Foundation.

Compatibilità

Per installare la versione basata su SASS per la fondazione, Ruby dovrebbe essere installato su Windows. Foundation può essere compilato con Ruby SASS e libsass. Noi raccomandiamonode-sass 3.4.2+ versione per compilare SASS.

Autoprefixer richiesto

Il prefissatore automatico gestisce i file SASS. gulp-autoprefixer viene utilizzato per costruire il processo. La seguente impostazione di autoprefixer viene utilizzata per ottenere il supporto appropriato del browser.

autoprefixer ({
   browsers: ['last 2 versions', 'ie >= 9', 'and_chr >= 2.3']
});

Caricamento del Framework

Possiamo installare i file del framework utilizzando NPM. Utilizzando l'interfaccia a riga di comando (CLI), possiamo compilare i file Sass. Di seguito è riportato il comando per caricare il framework:

npm install foundation-sites --save

Dopo aver eseguito il codice della riga di comando sopra, otterrai le seguenti righe:

Compilazione manuale

I file framework possono essere aggiunti come percorso di importazione a seconda del processo di compilazione, ma il percorso sarà lo stesso packages_folder / foundation-sites / scss . L' istruzione @import è inclusa nella parte superiore del file foundation-sites.scss . La riga successiva nel codice dato è spiegata inAdjusting CSS Output sezione.

@import 'foundation';
@include foundation-everything;

Utilizzo di CSS compilato

Puoi includere i file CSS precompilati. Esistono due tipi di file CSS, ovvero minimizzati e non minimizzati. La versione ridotta viene utilizzata per la produzione e la versione non ridotta viene utilizzata per modificare direttamente il CSS del framework.

<link rel = "stylesheet" href = "node_modules/foundation-sites/dist/foundation-sites.css">
<link rel = "stylesheet" href = "node_modules/foundation-sites/dist/foundation-sites.min.css">

Regolazione dell'output CSS

Per vari componenti, l'output di Foundation è costituito da molte classi. Viene utilizzato per controllare l'output CSS del framework. Aggiungi la seguente singola riga di codice per includere tutti i componenti contemporaneamente.

@include foundation-everything;

Di seguito è riportato l'elenco dei componenti importati quando si scrive il codice sopra nel file scss. I componenti che non sono necessari possono essere commentati. È possibile visualizzare le righe di codice riportate di seguito nel file Your_folder_name / node_modules / foundation-sites / scss / foundation.scss .

@import 'foundation';

@import 'grid/grid';
@import 'typography/typography';
@import 'forms/forms';
@import 'components/visibility';
@import 'components/float';
@import 'components/button';
@import 'components/button-group';
@import 'components/accordion-menu';
@import 'components/accordion';
@import 'components/badge';
@import 'components/breadcrumbs';
@import 'components/callout';
@import 'components/close-button';
@import 'components/drilldown';
...
...
...
//so on....

Il file delle impostazioni

Un file delle impostazioni è incluso nell'intero progetto di fondazione, ad esempio _settings.scss . Se stai utilizzando Yeti Launch o la CLI per creare un progetto Foundation for Sites, puoi trovare il file delle impostazioni in src / assets / scss /.

Abbiamo installato Foundation utilizzando npm, quindi puoi trovare il file delle impostazioni incluso in your_folder_name / node_modules / foundation-sites / scss / settings / _settings.scss . Puoi spostarlo nei tuoi file Sass con cui lavorare.

Puoi scrivere il tuo CSS, se non sei in grado di personalizzare con le variabili. Di seguito è riportato un insieme di variabili che modificano lo stile predefinito dei pulsanti.

$button-padding: 0.85em 1em;
$button-margin: 0 $global-margin $global-margin 0; $button-fill: solid;
$button-background: $primary-color;
$button-background-hover: scale-color($button-background, $lightness: -15%); $button-color: #fff;
$button-color-alt: #000; $button-radius: $global-radius; $button-sizes: (
   tiny: 0.6rem,
   small: 0.75rem,
   default: 0.9rem,
   large: 1.25rem,
);
$button-opacity-disabled: 0.25;

In questo capitolo, studieremo JavaScript . È facile configurare JavaScript in Foundation; l'unica cosa che ti serve è jQuery.

Installazione di JavaScript

È possibile utilizzare il download ZIP, il gestore di pacchetti o CDN per ottenere il file JavaScript di Foundation. Nel tuo codice puoi fornire collegamenti a jQuery e Foundation come tag <script>, posizionati prima del <body> di chiusura e controllare che Foundation sia caricato dopo jQuery. Per maggiori informazioni clicca qui .

Struttura dei file

Quando installi Foundation tramite la riga di comando, i plug-in di Foundation vengono scaricati come singoli file come foundation.tabs.js , foundation.dropdownMenu.js , foundation.slider.js e così via. Tutti questi file vengono combinati in foundation.js , che fornisce tutti i plugin contemporaneamente. Se desideri utilizzare qualche plugin, devi caricare il primo foundation.core.js .

Ad esempio:

<script src = "js/jquery.min.js"></script>
<script src = "js/foundation.core.js"></script>
<script src = "js/foundation.tabs.js"></script>

Alcuni plugin potrebbero richiedere particolari librerie di utilità, fornite con l'installazione di Foundation. Puoi studiare in dettaglio i requisiti specifici dei plugin nel prossimo capitolo Utilità JavaScript .

Il caricamento di singoli file crea un sovraccarico di rete, in particolare per gli utenti mobili. Per un caricamento più veloce della pagina, si consiglia l'uso di grunt o gulp .

Inizializzazione

La funzione foundation () viene utilizzata per inizializzare tutti i plug-in Foundation contemporaneamente.

Ad esempio:

(document).foundation();

Utilizzo di plugin

Utilizzando gli attributi dei dati, i plug-in sono collegati agli elementi HTML in quanto corrispondono al nome dei plug-in. Un singolo elemento HTML può avere un solo plug-in alla volta, sebbene la maggior parte dei plug-in possa essere annidata all'interno di altri. Ad esempio, il collegamento al tooltip viene creato aggiungendo data-tooltip . Per maggiori informazioni clicca qui .

Configurazione dei plugin

I plugin possono essere personalizzati utilizzando le sue impostazioni di configurazione. Ad esempio, puoi impostare la velocità delle diapositive della fisarmonica su e giù. Le impostazioni del plug-in possono essere modificate a livello globale utilizzando il fileDEFAULTSproprietà. Per maggiori informazioni clicca qui .

Aggiunta di plug-in dopo il caricamento della pagina

Quando viene aggiunto un nuovo HTML al DOM, nessuno dei plugin su quegli elementi non verrà inizializzato per impostazione predefinita. Puoi verificare la presenza di nuovi plugin richiamando la funzione .foundation () .

Ad esempio:

$.ajax('assets/partials/kitten-carousel.html', function(data) {
   $('#kitten-carousel'</span>).html(data).foundation();
});

Uso programmatico

In JavaScript, i plug-in possono essere creati in modo programmatico e ogni plug-in è la classe dell'oggetto Foundation globale , con un costruttore che accetta due parametri come un elemento e un oggetto.

var $accordion = new Foundation.Accordion($('#accordion'), {
   slideSpeed: 600, multiExpand: true
});

La maggior parte dei plugin viene fornita con un'API pubblica, che ti consente di manipolarla tramite JavaScript. È possibile consultare la documentazione del plugin per studiare le funzioni disponibili e metodi che possono essere richiamati facilmente.

Ad esempio:

$('.tooltip').foundation('destroy');
// this will destroy all Tooltips on the page.

$('#reveal').foundation('open'); // this will open a Reveal modal with id `reveal`. $('[data-tabs]').eq(0).foundation('selectTab', $('#example'));
// this will change the first Tabs on the page to whatever panel you choose.

Puoi scegliere qualsiasi selettore jQuery e se il selettore contiene più plugin, allora tutti avranno lo stesso metodo scelto chiamato.
Gli argomenti possono essere passati proprio come il passaggio di argomenti a JavaScript.
I metodi preceduti da un carattere di sottolineatura (_) sono considerati come una parte dell'API interna, il che significa che senza preavviso possono rompersi, cambiare o addirittura scomparire.

Eventi

Ogni volta che una funzione specifica termina, DOM attiva un evento. Ad esempio, ogni volta che le schede vengono modificate, è possibile ascoltarle e creare una risposta di ritorno. Ogni plugin può attivare un elenco di eventi, che sarà documentato nella documentazione del plugin. In Foundation 6, i plug-in di callback vengono rimossi e devono essere presi come listener di eventi.

Ad esempio:

$('[data-tabs]').on('change.zf.tabs', function() {
   console.log('Tabs are changed!');
});

Foundation include utilità JavaScript utilizzate per aggiungere funzionalità comuni. È molto utile e facile da usare. Questa libreria di utilità JavaScript può essere trovata nella cartella Your_folder_name / node_modules / foundation-sites / js

Scatola

La libreria Foundation.Box consiste in un paio di metodi.
Il js/foundation.util.box.js è il nome del file dello script, che può essere incluso durante la scrittura del codice.
Ad entrambi i metodi possono essere passati oggetti jQuery o semplici elementi JavaScript.

var dims = Foundation.Box.GetDimensions(element);

L'oggetto restituito specifica la dimensione dell'elemento come -

{
   height: 54,
   width: 521,
   offset: {
      left: 198,
      top: 1047
   },

   parentDims: {
      height: ...    //The same format is share for parentDims and windowDims as the element dimensions.
   },

   windowDims: {
      height: ...
   }
}

La funzione ImNotTouchingYou è inclusa.
In base all'elemento passato, viene restituito un valore booleano, che è un conflitto con il bordo della finestra o facoltativo o un elemento genitore.
Le due opzioni specificate nella riga riportata di seguito, ovvero leftAndRightOnly, topAndBottomOnly vengono utilizzate per identificare la collisione su un solo asse.

var clear = Foundation.Box.ImNotTouchingYou (
   element [, parent, leftAndRightOnly, topAndBottomOnly]);

Tastiera

Esistono molti metodi in Foundation.Keyboard , che aiutano a semplificare l'interazione con gli eventi della tastiera.
Il js/foundation.util.keyboard.js è il nome del file dello script, che può essere incluso durante la scrittura del codice.
L'oggetto Foundation.Keyboard.keys è costituito da coppie chiave / valore, le cui chiavi vengono utilizzate più frequentemente nel framework.
Ogni volta che viene premuto il tasto , viene chiamato Foundation.Keyboard.parseKey per ottenere una stringa. Questo aiuta a gestire i propri input da tastiera.

Il codice seguente viene utilizzato per trovare tutti gli elementi attivabili all'interno dell'elemento $ specificato . Pertanto, non è necessario scrivere alcuna funzione e selettore da parte dell'utente.

var focusable = Foundation.Keyboard.findFocusable($('#content'));

La funzione handleKey è una funzione principale di questa libreria.
Questo metodo viene utilizzato per gestire l'evento della tastiera; può essere chiamato ogni volta che un plugin è registrato con l'utilità.

Foundation.Keyboard.register('pluginName', {
   'TAB': 'next'
});

...//in event callback
Foundation.Keyboard.handleKey(event, 'pluginName', {
   next: function(){
      //do stuff
   }
});

La funzione Foundation.Keyboard.register può essere chiamata quando si desidera utilizzare le proprie associazioni di tasti.

MediaQuery

La libreria MediaQuery è una spina dorsale di tutta la tecnica CSS reattiva.
Il js/foundation.util.mediaQuery.js è il nome del file dello script, che può essere incluso durante la scrittura del codice.
Il Foundation.MediaQuery.atLeast ( 'grande') viene utilizzata per verificare se lo schermo è almeno largo quanto un punto di interruzione.
Il Foundation.MediaQuery.get ( 'medium') ottiene la media query di un punto di interruzione.
I Foundation.MediaQuery.queries sono una serie di media query, Fondazione utilizza per i punti di interruzione.
Il Foundation.MediaQuery.current è una stringa della dimensione arresto corrente.

Foundation.MediaQuery.get('medium');
Foundation.MediaQuery.atLeast('large');
Foundation.MediaQuery.queries;
Foundation.MediaQuery.current;

Il codice seguente trasmette la modifica della query multimediale nella finestra.

$(window).on('changed.zf.mediaquery', function(event, newSize, oldSize){});

Movimento e movimento

Il javascript Foundation.Motion è simile alla libreria Motion UI, inclusa in Foundation 6. Viene utilizzato per creare transizioni CSS e animazioni personalizzate.
Il js/foundation.util.motion.js è il nome del file dello script, che può essere incluso durante la scrittura del codice.
Foundation.Move è utilizzato per rendere l'animazione supportata da CSS3 semplice ed elegante.
requestAnimationFrame();il metodo dice al browser di eseguire un'animazione; richiede che la funzione di animazione venga chiamata prima che il browser esegua il successivo ridisegno.

Foundation.Move(durationInMS, $element, function() {
   //animation logic
});

Quando l'animazione è stata completata, finished.zf.animate viene licenziato.

Timer e immagini caricate

Orbit utilizza entrambi, la funzione timer e l'immagine caricata. Iljs/foundation.util.timerAndImageLoader.js è il nome del file dello script, che può essere incluso durante la scrittura del codice.

var timer = new Foundation.Timer($element, {duration: ms, infinite: bool}, callback);

Il metodo caricato con immagini esegue una funzione di callback nella raccolta jQuery quando le immagini sono completamente caricate.

Foundation.onImagesLoaded($images, callback);

Toccare

I metodi vengono utilizzati per aggiungere pseudo eventi di trascinamento e scorrere agli elementi.
Il js/foundation.util.touch.js è il nome del file dello script, che può essere incluso durante la scrittura del codice.
Il metodo addTouch viene utilizzato per associare elementi a eventi di tocco nel plug-in Slider per dispositivi mobili.
Il metodo spotSwipe lega gli elementi agli eventi di scorrimento nel plug-in Orbit per dispositivi mobili.

$('selector').addTouch().on('mousemove', handleDrag); $('selector').spotSwipe().on('swipeleft', handleLeftSwipe);

Trigger

Attiva l'evento specificato per gli elementi selezionati.
Il js/foundation.util.triggers.js è il nome del file dello script, che può essere incluso durante la scrittura del codice.
I trigger sono utilizzati in molti plugin Foundation.

$('selector').on('open.zf.trigger', handleOpen); $('selector').on('close.zf.trigger', handleClose);
$('selector').on('toggle.zf.trigger', handleToggle);

In questa libreria vengono utilizzati i due metodi seguenti, ovvero ridimensionamento e scorrimento.

Il metodo resize () attiva l'evento resize quando si verifica un evento resize.
Il metodo scroll () attiva l'evento scroll quando si verifica un evento scroll.

$('#someId').on('scrollme.zf.trigger', handleScroll);
$('#someId').on('resizeme.zf.trigger', handleResize);

Miscellanea

Foundation contiene poche funzionalità nella libreria principale, che vengono utilizzate in molti luoghi.
Il js/foundation.core.js è il nome del file dello script, che può essere incluso durante la scrittura del codice.
Foundation.GetYoDigits ([numero, spazio dei nomi]) restituisce un uid casuale in base 36 con spaziatura dei nomi. Restituisce la lunghezza della stringa di 6 caratteri per impostazione predefinita.
Foundation.getFnName (fn) restituisce un nome di funzione JavaScript.
Foundation.transitionend si verifica quando la transizione CSS è completata.

Le media query sono moduli CSS3 che includono funzionalità multimediali come larghezza, altezza, colore e visualizzano il contenuto secondo la risoluzione dello schermo specificata.

Foundation utilizza le seguenti media query per creare intervalli di suddivisione:

Small - Utilizzato per qualsiasi schermo.
Medium - Viene utilizzato per schermi di 640 pixel e più grandi.
Large - Viene utilizzato per schermi di 1024 pixel e più grandi.

È possibile modificare le dimensioni dello schermo utilizzando le classi dei punti di interruzione . Ad esempio, puoi usare .small-6 class per schermi di piccole dimensioni e .medium-4 class per schermi di medie dimensioni come mostrato nel seguente frammento di codice:

<div class = "row">
   <div class = "small-6 medium-4 columns"></div>
   <div class = "small-6 medium-8 columns"></div>
</div>

Modifica dei punti di interruzione

È possibile modificare i punti di interruzione, se l'applicazione utilizza la versione SASS di Foundation. È possibile posizionare il nome dei punti di interruzione sotto la variabile $ punti di interruzione nel file delle impostazioni come mostrato di seguito -

$breakpoints: (
   small: 0px,
   medium: 640px,
   large: 1024px,
   xlarge: 1200px,
   xxlarge: 1440px,
);

È possibile modificare le classi dei punti di interruzione nel file delle impostazioni modificando la variabile $ breakpoint-classes . Se vuoi usare la classe .large nel CSS, aggiungila alla fine dell'elenco come mostrato di seguito -

$breakpoints-classes: (small medium large);

Supponiamo di voler utilizzare la classe .xlarge nel CSS, quindi aggiungere questa classe alla fine dell'elenco come mostrato di seguito -

$breakpoints-classes: (small medium large xlarge);

SASS

Il Breakpoint Mixin

Puoi scrivere le media query utilizzando breakpoint () mixin insieme a @include .
Utilizza le parole chiave in basso o solo insieme al valore del punto di interruzione per modificare il comportamento della media query come mostrato nel seguente formato di codice:

.class_name {
   // code for medium screens and smaller
   @include breakpoint(medium down) { }

   // code for medium screens only
   @include breakpoint(medium only) { }
}

È possibile utilizzare tre dei media query ritratto , paesaggio e della retina per l'orientamento del dispositivo o densità di pixel e non sono la larghezza base media query.

Funzione breakpoint

È possibile utilizzare la funzionalità di breakpoint () mixin utilizzando la funzione interna.
La funzionalità breakpoint () può essere utilizzata direttamente per scrivere le proprie media query -

@media screen and #{breakpoint(medium)} {
   // code for medium screens and up styles
}

JavaScript

Lavorare con le media query

Il JavaScript Foundation fornisce la funzione MediaQuery.current per accedere al nome del punto di interruzione corrente sull'oggetto Foundation.MediaQuery come specificato di seguito:

Foundation.MediaQuery.current

La funzione MediaQuery.current visualizza piccoli , medi , grandi come nomi dei punti di interruzione correnti.
È possibile ottenere la media query del punto di interruzione utilizzando la funzione MediaQuery.get come mostrato di seguito:

Foundation.MediaQuery.get('small')

Riferimento Sass

Variabili

La tabella seguente elenca le variabili SASS, che possono essere utilizzate per personalizzare gli stili predefiniti del componente:

Sr.No.	Nome e descrizione	genere	Valore predefinito
1	$breakpoints È un nome di punto di interruzione che può essere utilizzato per scrivere le query multimediali utilizzando breakpoint () mixin.	Carta geografica	piccolo: 0px medio: 640 px grande: 1024 px xlarge: 1200px xxlarge: 1440px
2	$breakpoint-classes Puoi cambiare l'output della classe CSS modificando la variabile $ breakpoint-classes .	Elenco	piccolo medio grande

Mixins

Mixins crea un gruppo di stili per costruire la struttura della classe CSS per i componenti Foundation.

BREAKPOINT

Utilizza breakpoint () mixin per creare query multimediali e include le seguenti attività:

Se viene passata stringa, mixin ricerca la stringa nella mappa $ breakpoints e crea la media query.
Se stai usando il valore pixel, convertilo in valore em usando $ rem-base .
Se viene passato il valore rem, cambia la sua unità in em.
Se stai usando il valore em, allora può essere usato così com'è.

La tabella seguente specifica il parametro utilizzato dal punto di interruzione:

Sr.No.	Nome e descrizione	genere	Valore predefinito
1	$value Elabora i valori utilizzando il nome del punto di interruzione, i valori px, rem o em.	parola chiave o numero	Nessuna

Funzioni

BREAKPOINT

Utilizza breakpoint () mixin per creare query multimediali con valore di input corrispondente.

La tabella seguente specifica il possibile valore di input utilizzato dal breakpoint -

Sr.No.	Nome e descrizione	genere	Valore predefinito
1	$val Elabora i valori utilizzando il nome del punto di interruzione, i valori px, rem o em.	parola chiave o numero	piccolo

Riferimento JavaScript

Funzioni

Esistono due tipi di funzioni:

.atLeast- Controlla lo schermo. Deve essere ampio almeno come punto di interruzione.
.get - Viene utilizzato per ottenere la media query del punto di interruzione.

La tabella seguente specifica il parametro utilizzato dalle funzioni precedenti:

Sr.No.	Nome e descrizione	genere
1	size Controlla e ottiene il nome del punto di interruzione rispettivamente per le funzioni specificate.	Corda

Descrizione

Il sistema a griglia di fondazione scala fino a 12 colonne nella pagina. I sistemi a griglia vengono utilizzati per creare layout di pagina attraverso una serie di righe e colonne che ospitano il contenuto.

Opzioni griglia

La tabella seguente spiega brevemente come funziona il sistema a griglia Foundation in più dispositivi.

	Telefoni per piccoli dispositivi (<640 px)	Tablet dispositivi medi (> = 640px)	Dispositivi di grandi dimensioni Laptop e desktop (> = 1200 px)
Comportamento della griglia	Sempre orizzontale	Compresso all'inizio, orizzontale sopra i punti di interruzione	Compresso all'inizio, orizzontale sopra i punti di interruzione
Prefisso di classe	.piccolo-*	.medio-*	.grande-*
Numero di colonne	12	12	12
Inseribile	sì	sì	sì
Offset	sì	sì	sì
Ordinamento delle colonne	sì	sì	sì

Struttura di base di una griglia di fondazione

Quella che segue è la struttura di base di una griglia di fondazione:

<div class = "row">
   <div class = "small-*"></div>
   <div class = "medium-*"></div>
   <div class = "large-*"></div>
</div>

<div class = "row">
   ...
</div>

Innanzitutto, crea una classe di riga per creare gruppi orizzontali di colonne.
Il contenuto deve essere posizionato all'interno delle colonne e solo le colonne possono essere le figlie immediate delle righe.
Le colonne della griglia vengono create specificando il numero di dodici colonne disponibili che si desidera estendere. Ad esempio, per quattro colonne uguali useremmo .large-3

Le seguenti sono le tre classi utilizzate nel sistema di griglie di fondazione:

Sr.No.	Classi e descrizione della griglia di base
1	Grande Le classi large- * vengono utilizzate per i dispositivi di grandi dimensioni.
2	medio La classe medium- * viene utilizzata per i dispositivi medi.
3	Piccolo small- * class viene utilizzata per i dispositivi piccoli.

Griglia avanzata

Di seguito sono riportati i formati griglia avanzati utilizzati in Foundation.

Sr.No.	Griglie e descrizione avanzate
1	Colonna / riga combinate Le classi di colonna e riga vengono utilizzate sullo stesso elemento per ottenere la colonna a larghezza intera da utilizzare come contenitore.
2	Nidificazione Possiamo annidare le colonne della griglia all'interno di altre colonne.
3	Offset Usando la classe large-offset- * o small-offset- * , puoi spostare le colonne a destra.
4	Righe incomplete La base sposta automaticamente l'ultimo elemento a destra quando le righe non includono colonne fino a 12.
5	Comprimi / apri righe Utilizzando la dimensione della media query, le classi di compressione e di annullamento del collasso vengono incluse nell'elemento riga per mostrare i padding.
6	Colonne centrate Includendo la classe piccola centrata nella colonna, puoi rendere la colonna al centro.
7	Ordine di origine La classe di ordinamento della sorgente viene utilizzata per spostare le colonne tra i punti di interruzione.
8	Griglie a blocchi Block-grid viene utilizzato per dividere il contenuto.

Costruire semanticamente

Utilizzando il set di mixin SASS, viene generato un CSS griglia che viene utilizzato per costruire la propria griglia semantica. Per maggiori informazioni clicca qui

Riferimento SASS

Di seguito sono riportati i riferimenti SASS per la griglia utilizzata in Foundation.

Sr.No.	Griglie e descrizione di base
1	Variabili Usando le variabili sass possiamo modificare gli stili di default di questo componente.
2	Mixins L'output CSS finale viene creato utilizzando il mixin.

La griglia dipende dalla proprietà di visualizzazione flessibile . Consiste in una serie di funzioni disponibili con il flexbox, come impilamento automatico, ordinamento sorgente, allineamento verticale e allineamento orizzontale.

Supporto browser

La griglia flessibile è supportata in Chrome, Firefox, Internet Explorer 10+, Safari 6+, Android 4+ e iOS 7+.

La tabella seguente descrive le caratteristiche di Flex Grid insieme alla descrizione.

Sr.No.	Caratteristiche e descrizione
1	Importazione Include il mixin di esportazione per la griglia flessibile per utilizzare il CSS predefinito.
2	Nozioni di base La struttura della griglia Flex è simile a quella della griglia flottante.
3	Dimensionamento avanzato Se la classe di dimensionamento non è inclusa nella colonna, si espande e riempie lo spazio rimanente nella colonna.
4	Adeguamenti reattivi Se non viene specificata la dimensione esplicita della colonna nella griglia flessibile, le colonne verranno ridimensionate automaticamente
5	Allineamento delle colonne Le colonne della griglia flessibile possono essere allineate sull'asse orizzontale o verticale nella riga principale.
6	Ordine di origine L'ordinamento della sorgente aiuta a riorganizzare la colonna in schermate di dimensioni diverse.
7	Riferimento Sass SASS (Syntactically Awesome Stylesheet) è un pre-processore CSS che aiuta a ridurre la ripetizione con CSS e fa risparmiare tempo.

In questo capitolo, studieremo Forms. Foundation fornisce un sistema di layout potente, facile e versatile per Moduli , che combina stili di modulo e supporto della griglia.

La tabella seguente elenca gli elementi del modulo utilizzati in Foundation.

Sr.No.	Elemento del modulo e descrizione
1	Nozioni di base sui moduli La creazione di moduli è facile e molto flessibile, che sono costruiti con una combinazione di elementi di modulo standardizzati e un potente sistema di griglia.
2	Testo guida Viene utilizzato per informare l'utente sullo scopo dell'elemento e di solito è posizionato sotto un campo.
3	Posizionamento dell'etichetta Puoi posizionare le tue etichette a sinistra oa destra dei tuoi input.
4	Etichette e pulsanti in linea È possibile aggiungere testo o controlli aggiuntivi a sinistra / destra di un campo di input.
5	Controlli personalizzati I controlli personalizzati come selettori di data, interruttori o cursori richiedono una certa attenzione per accedervi.
6	Riferimento SASS È possibile modificare gli stili dei componenti utilizzando SASS Reference.

Descrizione

Foundation utilizza classi di visibilità per mostrare o nascondere elementi in base all'orientamento del dispositivo (verticale e orizzontale) o alle dimensioni dello schermo (schermo piccolo, medio, grande o xlarge).
Consente a un utente di utilizzare elementi basati sull'ambiente di navigazione.

La tabella seguente elenca le classi di visibilità di Foundation, che controllano gli elementi in base al loro ambiente di navigazione:

Sr.No.	Classe di visibilità e descrizione
1	Mostra per dimensione dello schermo Mostra gli elementi in base al dispositivo utilizzando la classe .show .
2	Nascondi per dimensione dello schermo Nasconde gli elementi in base al dispositivo utilizzando la classe .hide .

Foundation supporta alcune classi in cui è possibile nascondere il contenuto utilizzando le classi .hide e .invisible e non visualizza nulla sulla pagina.

Rilevamento dell'orientamento

I dispositivi possono determinare diversi orientamenti utilizzando la funzionalità orizzontale e verticale . I dispositivi portatili come i telefoni cellulari specificano i diversi orientamenti quando vengono ruotati. Per desktop, l'orientamento sarà sempre orizzontale.

Accessibilità

La tabella seguente elenca le tecniche di accessibilità per gli screen reader che nascondono il contenuto rendendolo leggibile dagli screen reader -

Sr.No.	Classe e descrizione di accessibilità
1	Mostra per lettori di schermo Utilizza la classe show-for-sr per nascondere il contenuto impedendo ai lettori di schermo di leggerlo.
2	Nascondi per lettori di schermo Utilizza l' attributo aria-hidden che rende il testo visibile ma non può essere letto da uno screen reader.
3	Creazione di collegamenti di salto L'utilità per la lettura dello schermo creerà un collegamento di salto per ottenere la navigazione al contenuto del tuo sito.

Riferimento Sass

Foundation utilizza i seguenti mixin per visualizzare l'output CSS, che consente di creare la propria struttura di classi per i componenti:

Sr.No.	Mixin e descrizione	Parametro	genere
1	show-for Per impostazione predefinita, nasconde un elemento e lo visualizza al di sopra di determinate dimensioni dello schermo.	$ size	Parola chiave
2	show-for-only Per impostazione predefinita, nasconde un elemento e lo visualizza all'interno del punto di interruzione.	$ size	Parola chiave
3	hide-for Per impostazione predefinita, mostra un elemento e lo nasconde sopra una certa dimensione dello schermo.	$ size	Parola chiave
4	hide-for-only Per impostazione predefinita, mostra un elemento e lo nasconde sopra una certa dimensione dello schermo.	$ size	Parola chiave

Il valore predefinito di tutti questi mixin sarà impostato su nessuno .

Descrizione

La tipografia in Foundation definisce titoli, paragrafi, elenchi e altri elementi in linea che creano stili predefiniti attraenti e semplici per gli elementi.

La tabella seguente elenca i diversi tipi di tipografia utilizzati in Foundation:

Sr.No.	Tipografia e descrizione
1	Paragrafi Il paragrafo è un gruppo di frasi definite con diverse dimensioni del carattere, parole evidenziate, altezza della riga ecc.
2	Intestazione Definisce le intestazioni HTML da h1 a h6.
3	Collegamenti Crea un collegamento ipertestuale che apre un altro documento quando fai clic sul testo o su un'immagine.
4	Divisori È usato per dare una pausa tra le sezioni usando il tag <hr>.
5	Elenchi ordinati e non ordinati Foundation supporta elenchi ordinati, elenchi non ordinati per elencare le cose.
6	Elenchi di definizioni Gli elenchi di definizioni vengono utilizzati per visualizzare le coppie di valori dei nomi.
7	Blockquotes Rappresenta un blocco di testo, che definisce molto più grande del normale.
8	Abbreviazioni e codice L'abbreviazione definisce un termine abbreviato di parola o frase e il codice rappresenta un pezzo di codice.
9	Sequenze di tasti Viene utilizzato per eseguire una funzione specifica.
10	Accessibilità Foundation fornisce alcune linee guida per accedere al contenuto della pagina.

Riferimento Sass

È possibile modificare gli stili dei componenti utilizzando le seguenti variabili SASS come elencato nella tabella.

Di seguito sono riportati gli stili dei componenti utilizzando le seguenti variabili SASS.

Sr.No.	Nome e descrizione	genere	Valore predefinito
1	$header-font-family Specifica la famiglia di caratteri per gli elementi dell'intestazione.	Stringa o elenco	$ body-font-family
2	$header-font-weight Specifica lo spessore del carattere delle intestazioni.	Corda	$ peso-globale-normale
3	$header-font-style Fornisce lo stile del carattere delle intestazioni.	Corda	normale
4	$font-family-monospace Stack di caratteri utilizzato per elementi che utilizzano caratteri a spaziatura fissa, ad esempio esempi di codice.	Stringa o elenco	Consolas, 'Liberation Mono', Courier, monospace
5	$header-sizes Definisce le dimensioni dello schermo delle intestazioni e ogni chiave è un punto di interruzione e ogni valore è una mappa delle dimensioni delle intestazioni.	Carta geografica	`small: ( 'h1': 24 'h2': 20 'h3': 19 'h4': 18 'h5': 17 'h6': 16 ) medium: ( 'h1': 48 'h2': 40 'h3': 31 'h4': 25 'h5': 20 'h6': 16 )`
6	$header-color Fornisce il colore delle intestazioni.	Colore	ereditare
7	$header-lineheight Definisce l'altezza della riga delle intestazioni.	Numero	1.4
8	$header-margin-bottom Fornisce il margine inferiore delle intestazioni.	Numero	0.5rem
9	$header-text-rendering Definisce il metodo per il rendering del testo.	Corda	optimLegibility
10	$small-font-size Specifica la dimensione del carattere per gli elementi <small>.	Numero	80%
11	$paragraph-margin-bottom Specifica il margine inferiore dei paragrafi.	Numero	1rem
12	$paragraph-text-rendering Metodi per il paragrafo rendering del testo.	Corda	optimLegibility
13	$code-color Fornisce il colore del testo agli esempi di codice.	Colore	$ nero
14	$code-font-family Fornisce la famiglia di caratteri agli esempi di codice.	Stringa o elenco	$ font-family-monospace
15	$code-border Specifica il bordo attorno al codice.	Elenco	1px solido $ medio-grigio
16	$code-padding Specifica il riempimento intorno al testo.	Numero o elenco	rem-calc (2 5 1)
17	$anchor-color Colore predefinito per i collegamenti.	Colore	$ colore-primario
18	$anchor-color-hover Specifica il colore predefinito per i collegamenti al passaggio del mouse.	Colore	scale-color ($ anchor-color, $ lightness: -14%)
19	$anchor-text-decoration Decorazione di testo predefinita per i collegamenti.	Corda	nessuna
20	$anchor-text-decoration-hover Decorazione del testo predefinita per i collegamenti al passaggio del mouse.	Corda	nessuna
21	$hr-width Definisce la larghezza massima di un divisore.	Numero	$ larghezza globale
22	$hr-border Specifica il bordo predefinito per un divisore.	Elenco	1px solido $ medio-grigio
23	$hr-margin Margine predefinito per un divisore.	Numero o elenco	rem-calc (20) auto
24	$list-lineheight Definisce l'altezza della riga per gli elementi in un elenco.	Numero	$ altezza linea paragrafo
25	$list-style-type Fornisce il tipo di punto elenco per elenchi non ordinati.	Corda	disco
26	$list-style-position Definisce il posizionamento dei punti elenco su elenchi non ordinati.	Corda	al di fuori
27	$list-side-margin Definisce il margine del lato sinistro (o destro).	Numero	1.25rem
28	$defnlist-term-weight Fornisce lo spessore del carattere per gli elementi <dt>.	Corda	$ global-weight-bold
29	$defnlist-term-margin-bottom Fornisce la spaziatura tra gli elementi <dt> e <dd>.	Numero	0.3rem
30	$blockquote-color Applica il colore del testo degli elementi <blockquote>.	Colore	$ grigio scuro
31	$blockquote-padding Fornisce imbottitura all'interno di elementi <blockquote>.	Numero o elenco	rem-calc (9 20 0 19)
32	$blockquote-border Fornisce il bordo laterale per gli elementi <blockquote>.	Elenco	1px solido $ medio-grigio
33	$cite-font-size Definisce la dimensione del carattere per gli elementi <cite>.	Numero	rem-calc (13)
34	$cite-color Fornisce il colore del testo per gli `<cite>`elementi.	Colore	$ grigio scuro
35	$keystroke-font Definisce la famiglia di caratteri per gli elementi <kbd>.	Stringa o elenco	$ font-family-monospace
36	$keystroke-color Definisce il colore del testo per gli elementi <kbd>.	Colore	$ nero
37	$keystroke-background Fornisce il colore di sfondo per gli elementi <kbd>.	Colore	$ grigio chiaro
38	$keystroke-padding Specifica il riempimento per gli elementi <kbd>.	Numero o elenco	rem-calc (2 4 0)
39	$keystroke-radius Visualizza il raggio del bordo per gli elementi <kbd>.	Numero o elenco	$ raggio-globale
40	$abbr-underline Fornisce lo stile del bordo inferiore per gli elementi <abbr>.	Elenco	1px puntato $ nero

In questo capitolo, studieremo Typography Helpers. Gli helper tipografici vengono utilizzati per formattare il testo in modi semanticamente rilevanti. Le classi di supporto in Foundation ti consentono di impalcare alcuni stili tipografici più rapidamente.

La tabella seguente elenca gli helper tipografici utilizzati in Foundation.

Sr.No.	Supporto e descrizione della tipografia
1	Allineamento del testo Aiuta a modificare l'allineamento del testo dell'elemento come sinistra , destra , centro e giustificazione .
2	Sottotitolo I sottotitoli possono essere aggiunti a qualsiasi elemento di intestazione utilizzando la classe .subheader .
3	Paragrafo principale È un blocco di testo notevolmente più grande rispetto al testo normale, che può essere utilizzato per pubblicità o altro testo descrittivo.
4	Elenco non puntato Per impostazione predefinita, <ul> è un elenco puntato in Foundation. Per rimuovere i punti elenco, puoi utilizzare la classe .no-bullet .
5	Statistiche Ogni volta che hai a che fare con il dashboard, devi evidenziare alcuni numeri importanti. Puoi ottenere questo risultato usando .stat class.

Riferimento Sass

Variabili

La tabella seguente elenca le variabili SASS nel file delle impostazioni del progetto che rendono personalizzati gli stili predefiniti del componente.

Sr.No.	Nome e descrizione	genere	Valore predefinito
1	$lead-font-size Dimensione del carattere per i paragrafi principali per impostazione predefinita.	Numero	$ global-font-size * 1.25
2	$lead-lineheight Altezza della riga per il paragrafo iniziale per impostazione predefinita.	Corda	1.6
3	$subheader-lineheight Altezza della riga predefinita del sottotitolo.	Numero	1.4
4	$subheader-color Colore del carattere predefinito del sottotitolo.	Colore	$ grigio scuro
5	$subheader-font-weight Spessore del carattere predefinito del sottotitolo.	Corda	$ peso-globale-normale
6	$subheader-margin-top Margine superiore predefinito del sottotitolo.	Numero	0.2rem
7	$subheader-margin-bottom Margine inferiore predefinito del sottotitolo.	Numero	0.5rem
8	$stat-font-size Dimensione carattere predefinita del numero statico	Numero	2.5rem

In questo capitolo, studieremo basic controls. Foundation fornisce controlli di base come pulsanti , cursori e interruttori .

La tabella seguente elenca i controlli di base utilizzati in Foundation.

Sr.No.	Controllo e descrizione di base
1	Pulsante Foundation supporta molti stili di pulsanti che possono essere personalizzati in base alle tue esigenze.
2	Gruppo di pulsanti Sono contenitori per elementi di azione corrispondenti. Funziona bene quando un gruppo di azioni viene visualizzato in una barra.
3	Pulsante Chiudi Il pulsante Chiudi viene utilizzato quando si desidera che qualcosa vada via facendo clic su di esso.
4	Slider I cursori sono molto utili per impostare determinati valori all'interno di un intervallo.
5	Interruttore Ti consente di disattivare o attivare l'interruttore facendo clic su di esso.

Descrizione

Foundation fornisce alcune opzioni diverse per definire gli elementi di navigazione. Molti modelli di navigazione semplici sono raggruppati; può essere integrato nel modulo per una robusta soluzione di navigazione reattiva.

La tabella seguente descrive i diversi tipi di navigazione insieme alla descrizione.

Sr.No.	Tipo e descrizione
1	Panoramica della navigazione La navigazione contiene collegamenti all'altra sezione e consiste in molti modelli di navigazione.
2	Menù Menu viene utilizzato per creare molti componenti di navigazione.
3	Menu a discesa Il plug-in del menu a discesa viene utilizzato per creare sottomenu sotto il menu principale.
4	Menu di dettaglio Il plug-in del menu drilldown viene utilizzato per creare sottomenu nel menu principale nel formato cursore.
5	Menu della fisarmonica Visualizza il menu comprimibile con effetti a fisarmonica e fornisce supporto per la compressione automatica utilizzando il plug-in Menu a fisarmonica.
6	Bar in alto La barra superiore aiuta a visualizzare facilmente la complessa barra di navigazione su diverse dimensioni dello schermo.
7	Navigazione reattiva Il plug-in del menu reattivo alloca il menu in diverse dimensioni dello schermo.
8	Magellan Magellan crea una navigazione, che è in una posizione fissa; traccia automaticamente l'elenco di navigazione su una pagina, in base alla posizione di scorrimento.
9	Impaginazione Impaginazione, un elenco non ordinato viene gestito da Bootstrap come molti altri elementi dell'interfaccia.
10	Briciole di pane Un breadcrumb specifica la posizione corrente di un sito all'interno della gerarchia di navigazione.

I contenitori di base vengono utilizzati per rendere sempre l'intera larghezza dei browser per il sito e avvolgere il contenuto del sito.

La tabella seguente elenca alcuni dei contenitori utilizzati in Foundation:

Sr.No.	Contenitore e descrizione
1	Fisarmonica Le fisarmoniche contengono schede verticali che vengono utilizzate sui siti Web per espandere e comprimere grandi quantità di dati.
2	Chiamare Posiziona il contenuto all'interno del componente.
3	Riquadri a discesa Visualizza il contenuto quando si fa clic sul pulsante.
4	Oggetto multimediale Aggiunge oggetti multimediali come immagini, video, commenti di blog, ecc. Insieme ad alcuni contenuti.
5	Fuori tela Avvia il menu di navigazione dall'area visibile e visualizza il contenuto principale.
6	Reveal-Modal Foundation consente di creare dialoghi modali o finestre pop-up utilizzando la classe reveal .
7	Tabelle Foundation fornisce layout per la visualizzazione dei dati in formato tabulare.
8	Tab È una scheda basata sulla navigazione che visualizza il contenuto in diversi riquadri senza lasciare la pagina.

In questo capitolo studieremo i media in Foundation. La Fondazione è composta da diversi tipi di media come Flex Video , Etichetta , orbita , barra di avanzamento e descrizione comando . La tabella seguente elenca tutti i tipi di supporto.

Sr.No.	Tipo di supporto e descrizione
1	Flex Video Viene utilizzato per incorporare video in un contenitore video flessibile per mantenere le giuste proporzioni nonostante le dimensioni dello schermo.
2	Etichetta Può essere utilizzato per lo stile inline che può essere inserito nel corpo per richiamare una sezione specifica o per allegare metadati.
3	Orbita È uno slider potente e reattivo, che consente a un utente di scorrere sui dispositivi touch-screen.
4	Barra di avanzamento Viene utilizzato per visualizzare i tuoi progressi e può essere aggiunto ai tuoi layout.
5	Descrizioni comandi Viene utilizzato per visualizzare informazioni aggiuntive per un termine o un'azione su una pagina.

Descrizione

Plugin è un software che fornisce funzionalità aggiuntive che non erano state originariamente completate dalle funzionalità principali di Foundation. I plugin Foundation possono essere caricati per espandere le funzionalità del sito. I plugin vengono utilizzati per semplificare il tuo lavoro.

La tabella seguente descrive i diversi tipi di plugin insieme alla descrizione.

Sr.No.	Tipo e descrizione
1	Rispettate Abide viene utilizzato nella libreria di convalida dei moduli HTML5 con API nativa utilizzando gli attributi e i modelli richiesti.
2	Equalizzatore L'equalizzatore è un modo per creare più contenuti con la stessa altezza sulla tua pagina.
3	Interscambio Viene utilizzato per caricare il contenuto reattivo in base al dispositivo dell'utente.
4	Toggler Toggle viene utilizzato per passare da un'impostazione all'altra.
5	Appiccicoso Il plug-in appiccicoso viene utilizzato per creare un contenuto o un'immagine costante nel sito Web.

Foundation fornisce una serie di funzioni di utilità SASS, che possono essere utilizzate con util , color , selector , unit , value e molte altre.

È possibile importare tutti i file dell'utilità contemporaneamente utilizzando la seguente riga di codice:

@import 'util/util';

È inoltre possibile importare singoli file di utilità come mostrato di seguito:

@import 'util/color';
@import 'util/selector';
@import 'util/unit';
@import 'util/value';

Riferimento Sass

È possibile modificare gli stili dei componenti utilizzando le seguenti funzioni SASS.

primo piano

Fornisce il colore di primo piano agli elementi in base al colore di sfondo. Utilizza il seguente formato per assegnare diversi tipi di parametri:

foreground($color, $yes, $no, $threshold)

I parametri di cui sopra sono specificati nella seguente tabella -

Sr.No.	Parametro e descrizione	genere	Valore predefinito
1	$color Controlla la luminosità del colore.	Colore	Nessuna
2	$yes Se il colore è chiaro, restituisce $ yes color.	Colore	$ nero
3	$no Se il colore è scuro, restituisce $ no color.	Colore	$ bianco
4	$threshold Rappresenta la soglia della leggerezza.	Percentuale	60%

scala intelligente

Fornisce un colore appropriato agli elementi in base alla sua leggerezza. Utilizza il seguente formato per specificare il colore appropriato:

smart-scale($color, $scale, $threshold)

I parametri sopra indicati sono specificati nella tabella seguente:

Sr.No.	Parametro e descrizione	genere	Valore predefinito
1	$color È usato per ridimensionare il colore.	Colore	Nessuna
2	$scale Specifica la percentuale da aumentare o diminuire.	Percentuale	5%
3	$threshold Rappresenta la soglia della leggerezza.	Percentuale	40%

input di testo

Crea un selettore durante l'utilizzo del tipo di input di testo. Utilizza il seguente formato per specificare i tipi di input:

text-inputs($types)

Utilizza il parametro come specificato nella tabella seguente -

Sr.No.	Parametro e descrizione	genere	Valore predefinito
1	$types Fornisce una serie di tipi di input di testo per generare un selettore.	Colore	-

strip-unit

Rimuove l'unità dal valore e restituisce solo il numero. Utilizza il seguente formato per rimuovere l'unità dal valore:

strip-unit($num)

Utilizza il parametro come specificato nella tabella seguente -

Sr.No.	Parametro e descrizione	genere	Valore predefinito
1	$num Specifica il numero quando si rimuove l'unità dal valore.	Colore	Nessuna

rem-calc

Modifica il valore del pixel in modo che corrisponda ai valori rem. Utilizza il seguente formato per convertire i valori dei pixel in valori rem:

rem-calc($values, $base)

Utilizza i seguenti parametri come specificato nella tabella:

Sr.No.	Parametro e descrizione	genere	Valore predefinito
1	$values Converte i valori dei pixel in valori rem e li separa utilizzando gli spazi. Se stai convertendo un elenco separato da virgole, avvolgi l'elenco tra parentesi.	Numero o elenco	Nessuna
2	$base Fornisce il valore di base durante la conversione del pixel in valore rem. Se è presente un valore nullo per la base, la funzione utilizza la variabile $ base-font-size come base.	Numero	nullo

ha valore

Specifica il valore se non è falso. I valori falsi includono null, nessuno, 0 o un elenco vuoto. Utilizza il seguente formato per specificare il valore:

has-value($val)

Utilizza il parametro come specificato nella tabella seguente -

Sr.No.	Parametro e descrizione	genere	Valore predefinito
1	$val Controlla il valore specificato.	Misto	Nessuna

get-side

Specifica il lato di un valore e definisce i valori superiore / destro / inferiore / sinistro su riempimento, margine ecc. Utilizza il seguente formato per specificare il lato di un valore:

has-value($val)

Utilizza i seguenti parametri come specificato nella tabella:

Sr.No.	Parametro e descrizione	genere	Valore predefinito
1	$val Specifica il lato di un valore.	Elenco o numero	Nessuna
2	$side Determina su quale lato deve tornare il valore (in alto / a destra / in basso / a sinistra).	Parola chiave	Nessuna

get-border-value

Determina il valore del bordo di un elemento. Utilizza il seguente formato per specificare il valore del bordo:

get-border-value($val, $elem)

Utilizza i seguenti parametri come specificato nella tabella:

Sr.No.	Parametro e descrizione	genere	Valore predefinito
1	$val Trova un valore specifico del confine.	Elenco	Nessuna
2	$elem Viene utilizzato per estrarre il componente bordo.	Parola chiave	Nessuna

Importazione

Importa il contenuto dei mixin SASS che sono posti nel file scss / util / _mixins.scss . È possibile importare i mixin SASS utilizzando la seguente riga di codice:

@import 'util/mixins';

Riferimento Sass

È possibile modificare gli stili dei componenti utilizzando le funzioni SASS.

Mixins

È possibile utilizzare i seguenti mixin per creare la struttura delle classi CSS per i componenti.

CSS-TRIANGLE

Viene utilizzato per creare frecce a discesa, punti a discesa e molti altri. Utilizza il selettore <i> & :: before </i> o <i> & :: after </i> per collegare un triangolo a un elemento esistente. Utilizza il seguente formato:

@include css-triangle($triangle-size, $triangle-color, $triangle-direction);

Utilizza i seguenti parametri come specificato nella tabella:

Sr.No.	Parametro e descrizione	genere	Valore predefinito
1	$triangle-size Definisce la larghezza del triangolo.	Numero	Nessuna
2	$triangle-color Definisce il colore del triangolo.	Colore	Nessuna
3	$triangle-direction Definisce la direzione del triangolo come su, destra, giù o sinistra.	Parola chiave	Nessuna

HAMBURGER

Viene utilizzato per creare icone di menu con larghezza, altezza, numero di barre e colori. Utilizza il seguente formato:

@include hamburger($color, $color-hover, $width, $height, $weight, $bars);

Utilizza i seguenti parametri come specificato nella tabella:

Sr.No.	Parametro e descrizione	genere	Valore predefinito
1	$color Definisce il colore dell'icona.	Colore	Nessuna
2	$color-hover Definisce il colore quando passi il mouse sull'icona.	Colore	Nessuna
3	$width Definisce la larghezza dell'icona.	Numero	Nessuna
4	$height Definisce l'altezza dell'icona.	Numero	Nessuna
5	$weight Definisce il peso delle singole barre nell'icona.	Numero	Nessuna
6	$bars Definisce il numero di barre nell'icona.	Numero	Nessuna

BACKGROUND-TRIANGLE

Viene utilizzato per specificare l'immagine di sfondo di un elemento. Utilizza il seguente formato:

@include background-triangle($color);

Utilizza il parametro come specificato nella tabella -

Sr.No.	Parametro e descrizione	genere	Valore predefinito
1	$color Definisce il colore del triangolo.	Colore	$ nero

CLEARFIX

Questo mixin cancella automaticamente gli elementi figli, quindi non c'è bisogno di markup aggiuntivo. Utilizza il seguente formato:

@include clearfix;

AUTO-WIDTH

Ridimensiona automaticamente gli elementi in base al numero di elementi presenti nel contenitore. Utilizza il seguente formato:

@include auto-width($max, $elem);

Utilizza i seguenti parametri come specificato nella tabella:

Sr.No.	Parametro e descrizione	genere	Valore predefinito
1	$max Identifica il numero massimo di articoli nel contenitore.	Numero	Nessuna
2	$elem Utilizza un tag per i selettori di pari livello.	Parola chiave	li

DISABLE-MOUSE-OUTLINE

Viene utilizzato per disabilitare il contorno attorno all'elemento quando identifica l'azione di input del mouse. Utilizza il seguente formato:

@include disable-mouse-outline;

ELEMENT-INVISIBLE

Viene utilizzato per nascondere gli elementi e può essere disponibile per tastiere e altri dispositivi. Utilizza il seguente formato:

@include element-invisible;

ELEMENT-INVISIBLE-OFF

Viene utilizzato per rimuovere gli elementi invisibili e inverte l'output CSS utilizzando il mixin element-invisible () . Utilizza il seguente formato:

@include element-invisible-off;

VERTICAL-CENTER

Viene utilizzato per posizionare gli elementi centrati verticalmente all'interno dell'elemento padre non statico utilizzando il seguente formato:

@include vertical-center;

HORIZONTAL-CENTER

Viene utilizzato per posizionare gli elementi centrati orizzontalmente all'interno dell'elemento padre non statico utilizzando il seguente formato:

@include horizontal-center;

ABSOLUTE-CENTER

Viene utilizzato per posizionare gli elementi assolutamente centrati all'interno dell'elemento padre non statico utilizzando il seguente formato:

@include absolute-center;

Foundation fornisce la libreria Motion UI per creare transizioni e animazioni dell'interfaccia utente e viene utilizzato dai componenti Foundation come Toggler , Reveal e Orbit .

Installazione di Motion UI

Puoi installare la libreria Motion UI nel tuo progetto usando npm o bower come mostrato nella seguente riga di codice:

$ npm install motion-ui --save-dev
bower install motion-ui --save-dev

Puoi aggiungere un percorso per la libreria dell'interfaccia utente di Motion in Compass utilizzando config.rb come mostrato nella seguente riga di codice:

add_import_path 'node_modules/motion-ui/src'

Puoi includere il percorso nel gulp-sass usando le seguenti righe di codice:

gulp.src('./src/scss/app.scss')
   .pipe(sass( {
      includePaths: ['node_modules/motion-ui/src']
   }));

Importa la libreria Motion UI nel file SASS utilizzando il codice seguente:

@import 'motion-ui'

Transizioni integrate

Foundation fornisce effetti di transizione utilizzando classi di transizione create dalla libreria Motion UI. Creiamo un semplice esempio utilizzando gli effetti di transizione.

Transizioni personalizzate

Puoi impostare le classi di transizione personalizzate utilizzando la libreria Motion UI. Ad esempio, imposteremo classi personalizzate per la transizione mui-hinge () , che ruota l'elemento -

@include mui-hinge(
   $state: in, $from: right,
   $turn-origin: from-back, $duration: 0.5s,
   $timing: easeInOut
);

Animazione

È possibile utilizzare gli effetti di transizione dell'interfaccia utente di movimento per creare animazioni CSS. Fare clic su questo collegamento per verificare come funziona l' animazione sulla classe modale utilizzando l'animazione dei dati .