Fondation - Projets de démarrage

Vous pouvez commencer le développement de votre projet avec certains modèles disponibles qui peuvent être installés via Yeti Launch ouFoundation CLI. Vous pouvez commencer avec le nouveau projet en utilisant ces modèles en utilisant le système de construction Gulp pour le traitement du Sass, JavaScript, la copie de fichiers, etc.

Modèle de base

Le modèle de base est quelque chose comme le modèle SASS, qui comprend la structure de répertoire plat et ne compile que les fichiers SASS et il est bon d'avoir ce modèle simple tout en utilisant uniquement SASS. Vous pouvez utiliser le modèle de base en utilisant Yeti Launch ou en utilisant Foundation CLI à l'aide de la commande suivante -

$ foundation new --framework sites --template basic

Pour configurer cela, exécutez d'abord l' installation npm , bower install et utilisez la commande npm start pour l'exécuter. Vous pouvez également télécharger les fichiers de modèle à partir du Github .

Modèle ZURB

Il s'agit d'une combinaison de CSS / SCSS, JavaScript, de modèle de guidon, de structure de balisage, de compression d'image et utilise le traitement SASS. Vous pouvez utiliser le modèle ZURB en utilisant Yeti Launch ou en utilisant Foundation CLI en utilisant la commande ci-dessous -

$ foundation new --framework sites --template zurb

Pour exécuter ce modèle, suivez les mêmes étapes que celles spécifiées dans le modèle de base. Vous pouvez également télécharger les fichiers de modèle à partir du Github .

Copie d'actifs

Vous pouvez copier le contenu dans le dossier src / assets en utilisant Gulp dans lequel les assets seront votre dossier de projet. La chose importante ici est que les fichiers SASS, les fichiers JavaScript et les images ne seront pas soumis à ce processus de copie d'actifs, car ils disposeront de leur propre processus pour copier le contenu.

Compilation de pages

Vous pouvez créer des pages HTML sous trois dossiers à savoir les pages , les mises en page et les partiels qui résident dans le répertoire src / . Vous pouvez utiliser le compilateur de fichiers plats Panini qui crée des mises en page pour les pages à l'aide de modèles, de pages et de partiels HTML. Ce processus peut être effectué à l'aide du langage de création de modèles Handlebars .

Compilation SASS

Vous pouvez compiler le SASS en CSS en utilisant Libsass et le fichier SASS principal sera stocké sous src / assets / scss / app.scss et les partiels SASS nouvellement créés seront stockés dans ce dossier lui-même. La sortie de CSS sera comme le CSS normal, qui est dans le style imbriqué. Vous pouvez compresser le CSS avec clean-css et supprimer le CSS inutilisé de la feuille de style en utilisant UnCSS .

Compilation JavaScript

Les fichiers JavaScript seront stockés dans le dossier src / assets / js avec Foundation et toutes les dépendances sont liées ensemble dans le fichier app.js. Les fichiers seront liés ensemble comme spécifié dans l'ordre ci-dessous -

  • Dépendances de la Fondation.
  • Les fichiers seront stockés dans le dossier src / assets / js .
  • Les fichiers sont regroupés dans un seul fichier appelé app.js .

Compression d'image

Par défaut, toutes les images seront stockées dans le dossier assets / img sous le dossier dist . Vous pouvez compresser les images lors de la construction pour la production à l'aide de gulp-imagemin qui prend en charge les fichiers JPEG, PNG, SVG et GIF.

BrowserSync

Vous pouvez créer un serveur BrowserSync dont les tests de navigateur synchronisés sont disponibles surhttp://localhost:8000et capable de voir les modèles compilés en utilisant cette URL. Pendant que votre serveur est en cours d'exécution, la page s'actualise automatiquement lorsque vous enregistrez le fichier et vous pouvez voir les modifications apportées à la page en temps réel pendant que vous travaillez.