Ajuda:Guia de Estilo
Mais ações
Guia de Estilo e Padrões de Edição
Este guia documenta os componentes visuais do Celta Wiki Framework. Utilize estes padrões para manter a consistência, agilidade e beleza da documentação.
1. Cabeçalho (Obrigatório)
Toda página deve iniciar com o componente de cabeçalho para gerar o breadcrumb (navegação) e o título padrão.
Gera a caixa azul com título. Ideal para documentações.
{{Cabecalho
| [[Módulo Pai]] › [[Sub-rotina]]
| Título da Página
}}
Gera apenas o breadcrumb. Use em páginas com design personalizado.
{{Cabecalho
| [[Módulo Pai]]
| no
}}
2. Caixas de Aviso (Notas)
Use o template
Nota
para destacar informações. Agora possuímos 4 cores semânticas.
Sintaxe
{{Nota | TIPO | TÍTULO | Seu texto aqui... }}
Tipos Disponíveis
Use para dicas gerais ou informações complementares. (Se não informar o tipo, este será usado).
{{Nota|info|DICA|Texto da dica...}}
Use para indicar novas funcionalidades ou boas práticas recomendadas.
{{Nota|success|NOVIDADE|Versão 15.0 lançada...}}
Use para alertas que requerem cuidado do usuário, mas não são críticos.
{{Nota|warning|ATENÇÃO|Verifique o cadastro antes de salvar...}}
Use para riscos de perda de dados, bloqueios ou ações irreversíveis.
{{Nota|danger|IMPORTANTE|Não desligue o servidor durante o processo...}}
3. Tabelas de Campos (Data Grid)
Substitua as tabelas manuais pelo componente
Campo / Parâmetro
Função e Instruções
. Ele padroniza a largura (30% campo / 70% descrição) e as cores.
Sintaxe
{{TabelaCampos|
{{Linha| Nome do Campo | Explicação do que deve ser preenchido. }}
{{Linha| Outro Campo | Outra explicação. }}
}}
Resultado Visual
| Campo / Parâmetro | Função e Instruções |
|---|---|
| Data Inicial | Informe a data de início do relatório. |
| Cliente | Selecione o cliente ou deixe em branco para todos. |
4. Cards e Grids (Layout)
Use para criar menus visuais, dashboards ou agrupar informações lado a lado.
Sintaxe
Para agrupar cards, envolva-os em uma div com a classe celta-grid.
<div class="celta-grid">
{{Card|titulo=Dicas|texto=Texto do card 1...}}
{{Card|titulo=Manual|texto=Texto do card 2...}}
</div>
Resultado Visual
Acesse os parâmetros gerais do sistema para configurar esta rotina.
Visualize os resultados através do menu de impressões fiscais.
5. Imagens e Badges
Prints de Tela
Padroniza o tamanho e a borda das imagens.
{{Print|Nome_Arquivo.png|Legenda da imagem}}
Badges (Etiquetas)
Use ao lado de títulos para destacar versões.
== Instalação {{Badge|novo|v15.2}} ==
Resultado: Instalação v15.2
6. Template Base (Copiar e Colar)
Use este código para iniciar uma nova página de manual rapidamente:
{{Cabecalho
| [[Módulo]] › [[Funcionalidade]]
| Título do Manual
}}
Breve resumo sobre o que é esta funcionalidade e para que ela serve.
{{Nota|info|PRÉ-REQUISITO|Necessário estar na versão 15.0 ou superior.}}
== 1. Visão Geral ==
Explicação do conceito...
== 2. Configuração ==
Acesse o menu '''Cadastro > Operações'''.
{{TabelaCampos|
{{Linha|Campo 1|Descrição do campo 1.}}
{{Linha|Campo 2|Descrição do campo 2.}}
}}
== 3. Passo a Passo ==
# Clique em '''Incluir''';
# Preencha os dados conforme a tabela acima;
#: {{Print|Exemplo_Tela.png|Tela de cadastro}}
# Clique em '''Gravar'''.
{{Nota|success|DICA|Você pode usar a tecla F5 para gravar rapidamente.}}