Foundation - Starterprojekte

Sie können mit Ihrer Projektentwicklung mit einigen verfügbaren Vorlagen beginnen, die über Yeti Launch oder installiert werden könnenFoundation CLI. Sie können mit dem neuen Projekt beginnen, indem Sie diese Vorlagen verwenden, indem Sie das Gulp- Build-System für die Verarbeitung von Sass, JavaScript, das Kopieren von Dateien usw. verwenden.

Grundvorlage

Die Basisvorlage ist so etwas wie eine SASS-Vorlage, die die flache Verzeichnisstruktur enthält und nur SASS-Dateien kompiliert. Es ist gut, diese einfache Vorlage zu haben, wenn Sie nur SASS verwenden. Sie können die Basisvorlage mithilfe von Yeti Launch oder Foundation CLI mit dem folgenden Befehl verwenden:

$ foundation new --framework sites --template basic

Um dies einzurichten, führen Sie zuerst die npm-Installation und die Bower-Installation aus und verwenden Sie den Befehl npm start , um sie auszuführen. Sie können die Vorlagendateien auch vom Github herunterladen .

ZURB-Vorlage

Es ist eine Kombination aus CSS / SCSS, JavaScript, Lenkervorlage, Markup-Struktur, Bildkomprimierung und verwendet die SASS-Verarbeitung. Sie können die ZURB-Vorlage mithilfe von Yeti Launch oder Foundation CLI mit dem folgenden Befehl verwenden:

$ foundation new --framework sites --template zurb

Befolgen Sie zum Ausführen dieser Vorlage die gleichen Schritte wie in der Basisvorlage angegeben. Sie können die Vorlagendateien auch vom Github herunterladen .

Kopieren von Assets

Sie können den Inhalt mit Gulp in den Ordner src / assets kopieren, in dem Assets Ihr Projektordner sein wird. Wichtig hierbei ist, dass die SASS-Dateien, JavaScript-Dateien und Bilder nicht unter diesen Vorgang zum Kopieren von Assets fallen, da sie über einen eigenen Prozess zum Kopieren des Inhalts verfügen.

Seitenzusammenstellung

Sie können HTML-Seiten unter drei Ordnern erstellen , nämlich Seiten , Layouts und Partials, die sich im Verzeichnis src / befinden . Sie können den Panini -Flatfile-Compiler verwenden, der Layouts für Seiten mithilfe von Vorlagen, Seiten und HTML-Partials erstellt. Dieser Vorgang kann mithilfe der Vorlagen-Sprache für Lenker durchgeführt werden.

SASS-Zusammenstellung

Sie können den SASS mit Libsass zu CSS kompilieren. Die Haupt-SASS-Datei wird unter src / assets / scss / app.scss gespeichert, und auch neu erstellte SASS-Partials werden unter diesem Ordner selbst gespeichert. Die Ausgabe von CSS erfolgt wie normales CSS im verschachtelten Stil. Sie können das CSS mit clean-css komprimieren und das nicht verwendete CSS mit UnCSS aus dem Stylesheet entfernen .

JavaScript-Kompilierung

Die JavaScript-Dateien werden zusammen mit Foundation im Ordner src / assets / js gespeichert, und alle Abhängigkeiten werden in der Datei app.js verknüpft . Die Dateien werden wie in der folgenden Reihenfolge angegeben zusammengebunden -

Abhängigkeiten der Stiftung.
Dateien werden im Ordner src / assets / js gespeichert .
Die Dateien werden in einer Datei namens app.js gebündelt .

Bildkompression

Standardmäßig werden alle Bilder im Ordner Assets / IMG unter dem Ordner dist gespeichert . Sie können die Bilder beim Erstellen für die Produktion mit gulp-imagemin komprimieren, das JPEG-, PNG-, SVG- und GIF-Dateien unterstützt.

BrowserSync

Sie können einen BrowserSync- Server erstellen, auf dem synchronisierte Browsertests verfügbar sindhttp://localhost:8000und in der Lage, die kompilierten Vorlagen unter Verwendung dieser URL zu sehen. Während Ihr Server ausgeführt wird, wird die Seite automatisch aktualisiert, wenn Sie die Datei speichern, und Sie können die an der Seite vorgenommenen Änderungen in Echtzeit sehen, während Sie arbeiten.