Wenn Sie an der Entwicklung von Webschnittstellen interessiert sind, haben Sie sicherlich schon von dem Pure-Framework gehört. Es ist eines der beliebtesten CSS-Frameworks und bietet eine einfache und elegante Lösung zum Erstellen von responsiven Websites. In diesem Artikel erfahren Sie, wie Sie Pure installieren und mit dem Erstellen stilvoller und reaktionsschneller Weboberflächen beginnen.
Der erste Schritt bei der Installation von Pure besteht darin, die Framework-Dateien herunterzuladen. Sie können sie auf der offiziellen Website von Pure im Abschnitt "Downloads" finden. Wählen Sie die gewünschte Version des Frameworks aus und klicken Sie auf den Download-Link. Die Dateien werden als Archiv auf Ihrem Computer gespeichert.
Nachdem Sie das Archiv heruntergeladen haben, entpacken Sie es in das gewünschte Verzeichnis. Sie können einen beliebigen Ordner auswählen, der für Sie geeignet ist, Hauptsache, Sie können diese Dateien später leicht finden. Die entpackten Framework-Dateien enthalten mehrere CSS-Dateien und ein Bildverzeichnis. Sie sind einsatzbereit!
Vorbereitung für die Installation von Pure
Bevor Sie Pure installieren, müssen Sie einige vorläufige Schritte ausführen:
| 1. | Stellen Sie sicher, dass Sie über die erforderlichen Tools für die Entwicklung von Webanwendungen wie Git, Node verfügen.js und npm. Wenn Sie sie noch nicht installiert haben, tun Sie dies bitte, bevor Sie fortfahren. |
| 2. | Wählen Sie die Entwicklungsumgebung aus, in der Sie mit Pure arbeiten möchten. Sie können einen beliebigen Texteditor oder eine integrierte Entwicklungsumgebung (IDE) verwenden, die HTML, CSS und JavaScript unterstützt. Es wird empfohlen, Tools wie Visual Studio Code, Sublime Text oder Atom zu verwenden. |
| 3. | Definieren Sie die Struktur Ihres Projekts. Pure enthält mehrere verschiedene Dateien und Ordner, daher ist es wichtig, die Struktur Ihres Projekts im Voraus zu berücksichtigen. Es wird empfohlen, einen separaten Ordner für Ihr Projekt zu erstellen und die darin enthaltenen Dateien und Ordner so zu organisieren, dass Sie bequem mit ihnen arbeiten können. |
Nachdem Sie diese vorläufigen Schritte ausgeführt haben, sind Sie bereit, Pure zu installieren und mit der Entwicklung zu beginnen. Im Folgenden finden Sie eine detaillierte Anleitung zur Installation von Pure in Ihrem Projekt.
Herunterladen und Installieren der erforderlichen Programme
Um Pure zu installieren, müssen Sie mehrere Programme herunterladen und installieren. Im Folgenden finden Sie grundlegende Anweisungen zum Herunterladen und Installieren.
1. Node.js
Der erste Schritt besteht darin, den Node zu installieren.eine js - Plattform, die JavaScript außerhalb des Browsers ausführt. Dafür:
- Gehen Sie zur offiziellen Website von Node.js unter https://nodejs.org /.
- Wählen Sie die empfohlene Version zum Herunterladen aus (Recommended For Most Users).
- Laden Sie die Installationsdatei für Ihr Betriebssystem (Windows, macOS, Linux) herunter.
- Führen Sie die Installationsdatei aus, und folgen Sie den Anweisungen des Installationsassistenten.
- Stellen Sie sicher, dass Node.js wurde erfolgreich installiert, führen Sie den Befehl an der Eingabeaufforderung aus:
node -v2. Git
Um mit Pure zu arbeiten, empfehlen wir auch, Git zu installieren, ein verteiltes Versionskontrollsystem. Dafür:
- Gehen Sie zur offiziellen Git-Website unter https://git-scm.com /.
- Wählen Sie die empfohlene Version zum Herunterladen aus (Windows, macOS, Linux).
- Laden Sie die Installationsdatei für Ihr Betriebssystem herunter.
- Führen Sie die Installationsdatei aus, und folgen Sie den Anweisungen des Installationsassistenten.
- Stellen Sie sicher, dass Git erfolgreich installiert wurde, führen Sie den Befehl an der Eingabeaufforderung aus:
git --version3. Globales Paket Pure
Wenn Node.js und Git sind auf Ihrem Computer installiert, Sie können das globale Paket Pure mit folgendem Befehl installieren:
npm install -g pure-cliNachdem Sie alle notwendigen Programme erfolgreich installiert haben, sind Sie bereit, Pure zu verwenden und erstaunliche Webprojekte zu erstellen!
Anschließen von Pure an das System
Um mit Pure zu beginnen, müssen Sie es an Ihr System anschließen. Folgen Sie den Anweisungen unten, um die Installation durchzuführen:
- Laden Sie Pure herunter - Gehen Sie zur offiziellen Website von Pure und laden Sie die neueste Version der Bibliothek herunter
- Entpacken Sie die Dateien - Entpacken Sie die heruntergeladene Datei mit dem Archivierer. Nach dem Entpacken stehen Ihnen mehrere Ordner und Dateien zur Verfügung.
- Verschieben Sie die Dateien an den gewünschten Speicherort - Sie müssen die Dateien und Ordner von Pure an den richtigen Ort auf Ihrem System verschieben. Dies ist normalerweise das Verzeichnis mit Ihrem Projekt oder ein Ordner mit Bibliotheken.
- Stile verbinden - Fügen Sie in Ihrer HTML-Datei den folgenden Code hinzu, um die Stile von Pure zu verbinden:
- Skripte verbinden - Für bestimmte Pure-Funktionen müssen Sie Skripte einbinden. Fügen Sie am Ende Ihrer HTML-Datei den folgenden Code hinzu:
- Fertig! - Pure ist jetzt erfolgreich mit Ihrem System verbunden und Sie können seine Klassen und Funktionen in Ihrem Projekt verwenden.
Jetzt, da Pure mit Ihrem System verbunden ist, können Sie damit ansprechende und stilvolle Webseiten erstellen.
Konfigurieren und Ausführen von Pure
Um mit Pure zu beginnen, müssen Sie die folgenden Schritte ausführen:
- Downloaden und installieren Sie Pure: Gehen Sie zur offiziellen Website von Pure und laden Sie die neueste Version der Bibliothek herunter. Dann können Sie Pure über die Befehlszeile installieren oder es mit dem Paketmanager zu Ihrem Projekt hinzufügen.
- Verbinden Sie Pure mit Ihrem Projekt: Um Pure in Ihrem Projekt zu verwenden, müssen Sie seine CSS-Datei einbinden. Fügen Sie dazu den folgenden Code zum Abschnitt hinzu head ihr HTML-Dokument:
Jetzt wissen Sie, wie Sie Pure in Ihrem Projekt einrichten und ausführen. Wenn Sie diese einfachen Schritte befolgen, können Sie die leistungsstarken Funktionen von Pure einfach nutzen, um schöne und ansprechende Websites zu erstellen.
Weitere Tipps zur Verwendung von Pure
Wenn Sie Pure zum Erstellen Ihrer Website verwenden, ist es wichtig, einige zusätzliche Tipps zu beachten, die Ihnen auf Ihrem Weg zu einem leichten und modernen Markup helfen.
1. Bleib einfach und minimalistisch. Pure impliziert Einfachheit und Minimalismus im Design. Vermeiden Sie übermäßige Verwendung von Stilen und lassen Sie nur die erforderlichen Elemente und Komponenten übrig.
2. Verwenden Sie ein flexibles Netz. Eines der Schlüsselelemente von Pure ist das flexible Raster, mit dem Sie ansprechende Websites erstellen können. Verwenden Sie Pure Tabellenklassen wie pure-g, um ein adaptives Raster zu erstellen.
| Die Klasse | Die Beschreibung |
|---|---|
| pure-u-sm-1-2 | Nimmt bei Geräten mit kleinen Bildschirmen die halbe Breite des Gitters ein. |
| pure-u-md-1-4 | Nimmt bei Geräten mit mittleren Bildschirmen ein Viertel der Rasterbreite ein. |
| pure-u-lg-1-3 | Nimmt ein Drittel der Breite des Gitters bei Geräten mit großen Bildschirmen ein. |
3. Verwenden Sie die Font Awesome Icons. Pure enthält Unterstützung für Font Awesome Vektor-Icons. Verwenden Sie die Font Awesome-Icon-Klassen, um Symbole zu Ihrer Website hinzuzufügen.
4. Unterstützen Sie die Kompatibilität mit verschiedenen Browsern. Pure ist bestrebt, die Kompatibilität mit allen modernen Browsern aufrechtzuerhalten. Überprüfen Sie Ihre Website jedoch immer in verschiedenen Browsern, um sicherzustellen, dass sie korrekt angezeigt wird.
Wenn Sie diese zusätzlichen Tipps befolgen, können Sie das Beste aus den Möglichkeiten von Pure machen und eine stilvolle und moderne Website erstellen.
