Fondazione - Progetti per principianti

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 all'interno della 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 collegate 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 dell'immagine

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.