Documentation

Documentation of vali admin

Directory Structure

│
├── docs - arquivos compilados
│         ├── css
│         ├── images
│         └── js
└── src - Arquivos de origem de layout e estilo
          ├── pug - Fonte de layout
          └── sass - Fonte de estilo

Compilação de arquivos de origem

O tema é construído usando SASS e PugJs, que são compilados em HTML e CSS pelo Grunt. Se você não estiver familiarizado com o Grunt, aqui está um artigo para começar. Se você está familiarizado com o Grunt, siga as instruções mencionadas abaixo para editar ou personalizar o código-fonte.

Se você não quiser editar o tema, poderá usar os arquivos compilados diretamente dentro da pasta docs.

Execute o comando npm install no diretório raiz do projeto para instalar e construir as dependências.

Use a tarefa npm run dev para editar e compilar arquivos de origem em tempo real ou use a tarefa npm run build para compilar todos os arquivos de origem de uma só vez.

Personalização de layout

O layout é construído usando PugJs. Todos os arquivos de origem do layout estão localizados no diretório src/pug. Existem dois subdiretórios dentro deste diretório:

  1. layout - Inclui o layout de estrutura HTML comum que é estendido por todas as páginas
  2. includes - Inclui partes do layout, como barra lateral, barra de navegação e rodapé

Personalização de estilo

Os estilos são escritos em SASS. Todos os arquivos de estilo estão localizados no diretório src/sass. Há um arquivo neste diretório main.sass que importa todos os arquivos e é exportado como main.css. Existem quatro subdiretórios dentro deste diretório:

  1. 1-tools - Inclui estilos de todas as bibliotecas externas e um arquivo _var.scss que contém as variáveis necessárias para o aplicativo
  2. 2-basics - Contém o estilo básico, como CSS de estrutura geral e opções de tema
  3. 3-component - Contém os estilos para os componentes como cartão, widgets, barra lateral, barra de navegação, etc.
  4. 4-pages - Contém os estilos para páginas específicas, como página de login e página de tela de bloqueio

Para personalizar a cor primária do tema e da barra lateral, você precisa alterar as variáveis no diretório 1-tools/_var.scss. A documentação detalhada sobre como alterar as cores é mencionada no próprio arquivo.

Se você não quiser usar um componente ou plug-in específico, basta comentar a instrução de importação para aquele componente específico em src/sass/main.scss e compilar o SASS executando o comando npm run build.

Compatibilidade com outros frameworks

Este tema não foi criado para um framework ou tecnologia específica, como Angular ou React. Mas devido à sua natureza modular, é muito fácil incorporá-lo a qualquer framework de front-end ou back-end como Angular, React ou VueJs ou Node JS. O CSS é modular o suficiente para ser incorporado em qualquer framework. Enquanto o Javascript usado para tornar os componentes interativos pode ser usado de qualquer um dos seguintes frameworks.

Se você estiver usando Angular, poderá usar o ui-bootstrap, para React use o React-Bootstrap e para VueJs, você poderá usar o VueStrap.

Se você estiver usando o Node JS como seu servidor web, poderá usar o pug como seu mecanismo de layout para renderizar modelos HTML no estado em que estão, sem compilá-los para HTML. Mais detalhes estão disponíveis aqui.

Suporte RTL

Para habilitar o suporte RTL:

  • Remover o comentário desta linha @import '3-component/rtl'; em src/sass/main.scss.
  • Adicionar o atributo dir="rtl" à tag <html> em src/pug/layouts/_layout.pug.
  • Compilar os arquivos de origem usando o comando npm run build.

Contribuição e problemas

Se você gostou do template, dê uma estrela e faça um fork no GitHub. Se você encontrar algo faltando ou quiser contribuir para esta documentação, o código-fonte está disponível em src/pug/docs.pug. Se você tiver um problema ou solicitação de recurso em relação ao tema, informe-o aqui