design system starter
1.0.0
El sistema de diseño del gobierno australiano ha sido desmantelado, visite nuestra página de la comunidad para obtener más información.
Comience con plantillas de página completa utilizando el sistema de diseño del gobierno australiano.
Explore las plantillas de página completa utilizando el sistema de diseño del gobierno australiano.
Clonar este repositorio para crear un entorno de desarrollo local y comenzar a modificar las plantillas.
El paquete de arranque utiliza NPM (Node Package Manager) para configurar un entorno de desarrollo local e instalar los componentes del sistema de diseño. El administrador de paquete predeterminado para el nodo es NPM. Cuando descarga el nodo, NPM viene preinstalado.
Asegúrese de tener NPM y nodo instalados en su computadora. Puede seguir las instrucciones de NPM si no está seguro.
Descargue, clone o desembolse este repositorio en una carpeta en su computadora.
En la línea de comando, ingrese a esta carpeta y ejecute npm install . Esto instalará dependencias necesarias para el entorno de desarrollo local.
Ahora debería estar listo para iniciar su servidor local ejecutando npm run watch . Esto observará los cambios en los archivos *.scss , creará nuevos archivos *.css y actualizar el navegador.
Construye la imagen:
$ docker build -t ds-starter .Luego ejecute la imagen y asigne el volumen. Nota: $ PWD no es compatible con Windows.
$ docker run --rm --volume= " $PWD :/app " -p 3000:3000 -it ds-starter⬆ De vuelta a la cima
En su directorio tiene un archivo package.json . Este archivo apunta a las dependencias para instalar cuando se ejecuta npm install . Cuando ejecuta npm install instale todos los componentes del sistema de diseño y paquetes adicionales relacionados con el entorno de desarrollo local.
Después de que se ejecuta el panqueque npm install , esto verifica que sus dependencias funcionan juntas y crean los docs/js/script.min.js y src/sass/_uikit.scss .
El src/sass/main.scss importa el _uikit.scss generado. No debe tocar el archivo _uikit.scss como se genera, pero no dude en cambiar el archivo main.scss .
Cuando el usuario ejecuta npm run build npm run watch usamos Node-Sass para convertir el archivo src/sass/main.scss en el archivo docs/css/main.css . Autoprefixer se ejecuta después de la compilación para agregar prefijos de proveedores al archivo main.css .
Consulte los scripts
package.jsonsobre cómo se ha configurado esto
Esta configuración le permite modificar las variables en el archivo del sistema de diseño desde el archivo main.scss . Puede agregar su propio esquema de color o cambiar la tipografía y el espacio. Los ajustes a los componentes o adicionales deben agregarse debajo de la importación de _uikit.scss . Los cambios en estos archivos se inyectarán en su navegador para que ni siquiera necesite actualizar gracias a la sincronización del navegador.
La carpeta docs en la contiene todos los archivos necesarios para publicar un sitio web. El archivo index.html hace referencia al archivo main.css y script.min.js activos para generar la página. Nombramos los docs de la carpeta porque GitHub Pages usa la carpeta Docs para alojar sitios web estáticos.
⬆ De vuelta a la cima
Node.js 8 o superior , preferiblemente la versión LTS actual.Nota: Si se está desarrollando en Windows, asegúrese de que su configuración local
npmesté utilizando un shell que admite un ratito de carpetas de Unix (es decir,a/unix/pathen lugar dea\windows\path).
⬆ De vuelta a la cima
Para contribuir al paquete de inicio del sistema de diseño del gobierno australiano:
⬆ De vuelta a la cima
Copyright (c) Commonwealth of Australia. Con la excepción del escudo de armas de la Commonwealth y donde se indica lo contrario, este trabajo tiene licencia bajo la licencia MIT.
⬆ De vuelta a la cima
