design system starter
1.0.0
Das Australian Government Design System wurde auf unserer Community -Seite stillgelegt, um weitere Informationen zu erhalten
Beginnen Sie mit vollständigen Seitenvorlagen mit dem Australian Government Design -System.
Durchsuchen Sie die vollständigen Seitenvorlagen mit dem Australian Government Design -System.
Klonen Sie dieses Repository, um eine lokale Entwicklungsumgebung zu schaffen und die Vorlagen zu ändern.
Das Starter Pack verwendet NPM (Node Paket Manager), um eine lokale Entwicklungsumgebung einzurichten und die Konstruktionssystemkomponenten zu installieren. Der Standardpaket -Manager für Node ist NPM. Wenn Sie den Knoten herunterladen, wird NPM vorinstalliert.
Stellen Sie sicher, dass Sie NPM und Knoten auf Ihrem Computer installiert haben. Sie können den NPM -Anweisungen befolgen, wenn Sie sich nicht sicher sind.
Laden Sie dieses Repository in einen Ordner auf Ihrem Computer herunter, klonen oder geben Sie diesen Repository.
Gehen Sie in der Befehlszeile in diesen Ordner und führen Sie npm install aus. Dadurch werden Abhängigkeiten installiert, die für die lokale Entwicklungsumgebung erforderlich sind.
Sie sollten jetzt bereit sein, Ihren lokalen Server zu starten, indem Sie npm run watch ausführen. Dies wird nach Änderungen an *.scss -Dateien beobachten, neue *.css -Dateien erstellen und den Browser aktualisieren.
Erstellen Sie das Bild:
$ docker build -t ds-starter .Führen Sie dann das Bild aus und kartieren Sie die Lautstärke. Hinweis: $ PWD wird in Windows nicht unterstützt.
$ docker run --rm --volume= " $PWD :/app " -p 3000:3000 -it ds-starter⬆ Zurück nach oben
In Ihrem Verzeichnis haben Sie eine package.json -Datei. Diese Datei verweist auf Abhängigkeiten zu installieren, wenn npm install ausgeführt wird. Wenn Sie npm install installieren Sie alle Konstruktionssystemkomponenten und zusätzlichen Pakete im Zusammenhang mit der lokalen Entwicklungsumgebung.
Nachdem npm install Pancake ausgeführt wurde, prüft dies, dass Ihre Abhängigkeiten zusammenarbeiten und die docs/js/script.min.js und src/sass/_uikit.scss erstellen.
Das src/sass/main.scss importiert die generierte _uikit.scss . Sie sollten die Datei _uikit.scss nicht berühren, wie sie generiert wird, sondern können die main.scss -Datei ändern.
Wenn der Benutzer npm run build oder npm run watch ausführt, verwenden wir Node-Sass, um die Datei src/sass/main.scss in die Datei docs/css/main.css umzuwandeln. AutoPrefixer wird nach der Zusammenstellung durchgeführt, um die Präfixe von Anbietern zur main.css -Datei hinzuzufügen.
Siehe die Skripte
package.jsonum die Einrichtung zu erhalten
Mit diesem Einrichten können Sie die Variablen in der Designsystemdatei aus der main.scss -Datei ändern. Sie können Ihr eigenes Farbschema hinzufügen oder die Typografie und den Abstand ändern. Optimierungen an den oder zusätzlichen Komponenten sollten unter dem Import von _uikit.scss hinzugefügt werden. Änderungen an diesen Dateien werden in Ihren Browser injiziert, sodass Sie dank der Browser -Synchronisierung nicht einmal aktualisieren müssen.
Der docs -Ordner in den enthält alle Dateien, die für die Veröffentlichung einer Website erforderlich sind. Die Datei index.html verweist auf die main.css -Datei und script.min.js Assets, um die Seite zu generieren. Wir nennen die docs , da GitHub -Seiten den Ordner docs verwendet, um statische Websites zu hosten.
⬆ Zurück nach oben
Node.js 8 oder höher , vorzugsweise die aktuelle LTS -Version.Hinweis: Wenn Sie sich unter Windows entwickeln, stellen Sie bitte sicher, dass Ihre lokale
npm-Konfiguration eine Shell verwendet, die Unix -ähnliches Ordnerpfad unterstützt (dha/unix/pathanstatta\windows\path).
⬆ Zurück nach oben
Um zum Australian Government Design System Starter Pack beizutragen:
⬆ Zurück nach oben
Copyright (c) Commonwealth of Australia. Mit Ausnahme des Commonwealth -Wappens und bei sonstiger Hinsicht ist diese Arbeit unter der MIT -Lizenz lizenziert.
⬆ Zurück nach oben
