design system starter
1.0.0
Le système de conception du gouvernement australien a été mis hors service, visitez notre page communautaire pour plus d'informations
Commencez avec des modèles pleine page en utilisant le système de conception du gouvernement australien.
Parcourez les modèles pleine page à l'aide du système de conception du gouvernement australien.
Clone ce référentiel pour créer un environnement de développement local et commencer à modifier les modèles.
Le Pack Starter utilise NPM (Node Package Manager) pour configurer un environnement de développement local et installer les composants du système de conception. Le gestionnaire de package par défaut pour le nœud est NPM. Lorsque vous téléchargez le nœud, NPM est pré-installé.
Assurez-vous que le NPM et le nœud sont installés sur votre ordinateur. Vous pouvez suivre les instructions du NPM si vous n'êtes pas sûr.
Téléchargez, clone ou fourchez ce référentiel dans un dossier sur votre ordinateur.
Dans la ligne de commande, accédez à ce dossier et exécutez npm install . Cela installera les dépendances nécessaires à l'environnement de développement local.
Vous devriez maintenant être prêt à démarrer votre serveur local en exécutant npm run watch . Cela surveillera les modifications sur les fichiers *.scss , créera de nouveaux fichiers *.css et actualisera le navigateur.
Construisez l'image:
$ docker build -t ds-starter .Ensuite, exécutez l'image et mappez le volume. Remarque: $ PWD n'est pas pris en charge dans Windows.
$ docker run --rm --volume= " $PWD :/app " -p 3000:3000 -it ds-starter⬆ Retour en haut
Dans votre répertoire, vous avez un fichier package.json . Ce fichier pointe vers les dépendances à installer lors de l'exécution npm install . Lorsque vous exécutez npm install vous installez tous les composants du système de conception et les packages supplémentaires liés à l'environnement de développement local.
Une fois npm install Pancake a été exécuté, cela vérifie que vos dépendances fonctionnent ensemble et crée les docs/js/script.min.js et src/sass/_uikit.scss .
Le src/sass/main.scss importe le _uikit.scss généré. Vous ne devez pas toucher le fichier _uikit.scss tel qu'il est généré, mais n'hésitez pas à modifier le fichier main.scss .
Lorsque l'utilisateur exécute npm run build ou npm run watch nous utilisons Node-SASS pour convertir le fichier src/sass/main.scss en fichier docs/css/main.css . Autoprefixer est exécuté après la compilation pour ajouter des préfixes du fournisseur au fichier main.css .
Reportez-vous aux scripts
package.jsonpour savoir comment cela a été configuré
Cette configuration vous permet de modifier les variables du fichier système de conception à partir du fichier main.scss . Vous pouvez ajouter votre propre schéma de couleurs ou modifier la typographie et l'espacement. Des ajustements aux composants ou à ceux supplémentaires doivent être ajoutés sous l'importation de _uikit.scss . Les modifications de ces fichiers seront injectées dans votre navigateur afin que vous n'ayez même pas besoin de vous actualiser grâce à la synchronisation du navigateur.
Le dossier docs dans le contient tous les fichiers requis pour publier un site Web. Le fichier index.html fait référence aux actifs du fichier main.css et script.min.js pour générer la page. Nous nommons le dossier docs car GitHub Pages utilise le dossier DOCS pour héberger des sites Web statiques.
⬆ Retour en haut
Node.js 8 ou supérieur , de préférence la version LTS actuelle.Remarque: Si vous développez sur Windows, veuillez vous assurer que votre configuration
npmlocale utilise un shell qui prend en charge UNIX comme le chemin du dossier (c'est-à-direa/unix/pathplutôt qu'una\windows\path).
⬆ Retour en haut
Pour contribuer au Pack de démarrage du système de conception du gouvernement australien:
⬆ Retour en haut
Copyright (c) Commonwealth of Australia. À l'exception des armoiries du Commonwealth et lorsqu'elle est autrement notée, ce travail est autorisé en vertu de la licence du MIT.
⬆ Retour en haut
