design system starter
1.0.0
O sistema de design do governo australiano foi desativado, visite nossa página da comunidade para obter mais informações
Comece com modelos de página inteira usando o sistema de design do governo australiano.
Procure modelos de página inteira usando o sistema de design do governo australiano.
Clone este repositório para criar um ambiente de desenvolvimento local e comece a modificar os modelos.
O pacote inicial usa o NPM (Node Package Manager) para configurar um ambiente de desenvolvimento local e instalar os componentes do sistema de design. O gerenciador de pacotes padrão para o nó é o npm. Quando você baixar o nó, o NPM vem pré-instalado.
Verifique se você possui NPM e nó instalados no seu computador. Você pode seguir as instruções do NPM se não tiver certeza.
Faça o download, clone ou bifurque este repositório em uma pasta no seu computador.
Na linha de comando, vá nesta pasta e execute npm install . Isso instalará dependências necessárias para o ambiente de desenvolvimento local.
Agora você deve estar pronto para iniciar o servidor local executando npm run watch . Isso deve procurar alterações nos arquivos *.scss , criar novos arquivos *.css e atualizar o navegador.
Construa a imagem:
$ docker build -t ds-starter .Em seguida, execute a imagem e mapeie o volume. Nota: $ PWD não é suportado no Windows.
$ docker run --rm --volume= " $PWD :/app " -p 3000:3000 -it ds-starter⬆ de volta ao topo
No seu diretório, você tem um arquivo package.json . Este arquivo aponta para dependências a serem instaladas ao executar npm install . Ao executar npm install instala todos os componentes do sistema de design e pacotes adicionais relacionados ao ambiente de desenvolvimento local.
Após a execução npm install Pancake, isso verifica se suas dependências funcionam juntas e cria o docs/js/script.min.js e src/sass/_uikit.scss .
O src/sass/main.scss importa o _uikit.scss gerado. Você não deve tocar no arquivo _uikit.scss como é gerado, mas sinta -se à vontade para alterar o arquivo main.scss .
Quando o usuário executa npm run build ou npm run watch usamos o Node-SASS para converter o arquivo src/sass/main.scss no arquivo docs/css/main.css . O Autoprefixer é executado após a compilação para adicionar prefixos de fornecedores ao arquivo main.css .
Consulte os scripts
package.jsonpara como isso foi configurado
Essa configuração permite modificar as variáveis no arquivo do sistema de design do arquivo main.scss . Você pode adicionar seu próprio esquema de cores ou alterar a tipografia e o espaçamento. Os ajustes nos componentes ou adicionais devem ser adicionados abaixo da importação de _uikit.scss . As alterações nesses arquivos serão injetadas no seu navegador, para que você nem precise atualizar graças à sincronização do navegador.
A pasta docs contém todos os arquivos necessários para publicar um site. O arquivo index.html faz referência ao arquivo main.css e script.min.js ativos para gerar a página. Nomeamos os docs da pasta porque as páginas do GitHub usam a pasta Docs para hospedar sites estáticos.
⬆ de volta ao topo
Node.js 8 ou superior , de preferência a versão LTS atual.NOTA: Se você estiver desenvolvendo no Windows, verifique se a configuração local
npmestá usando um shell que suporta o caminho da pasta como o Unix (ou seja,a/unix/pathem vez dea\windows\path).
⬆ de volta ao topo
Para contribuir com o Pacote de iniciantes do sistema de design do governo australiano:
⬆ de volta ao topo
Copyright (c) Commonwealth of Australia. Com exceção do Brasão de Armas da Commonwealth e onde observou de outra forma, este trabalho é licenciado sob a licença do MIT.
⬆ de volta ao topo
