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.
{{Nota|info|DICA|Texto da dica...}}
Use para indicar novas funcionalidades ou boas práticas.
{{Nota|success|NOVIDADE|Versão 15.0 lançada...}}
Use para alertas que requerem cuidado do usuário.
{{Nota|warning|ATENÇÃO|Verifique o cadastro antes de salvar...}}
Use para riscos de perda de dados ou bloqueios.
{{Nota|danger|IMPORTANTE|Não desligue o servidor...}}
3. Tabelas de Campos (Data Grid)
Substitua as tabelas manuais pelo componente
Campo / Parâmetro
Função e Instruções
.
Sintaxe Básica
{{TabelaCampos|
{{Linha| Nome do Campo | Explicação do que deve ser preenchido. }}
}}
Sintaxe Segura (Anti-Bug)
{{TabelaCampos|
{{Linha
| 1= Nome do Campo
| 2= Explicação longa que permite:
* Listas com marcadores
* Quebras de linha
}}
}}
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
4.1. Cards Básicos
Use
{{{titulo}}}
{{{texto}}}
para blocos simples de texto.
<div class="celta-grid">
{{Card|titulo=Dicas|texto=Texto do card...}}
</div>
4.2. Menus de Navegação (CardMenu)
Use
{{{titulo}}}
{{{conteudo}}}
para criar listas de links. Cores: `blue`, `dark`, `orange`, `green`, `red`.
Os asteriscos (*) da lista devem estar colados na margem esquerda.
<div class="celta-grid">
{{CardMenu
| cor = orange
| icone = bi-star
| titulo = Favoritos
| conteudo =
* [[Link 1]]
* [[Link 2]]
}}
</div>
4.3. Grid de 2 Colunas Fixas
Para forçar 2 colunas grandes, adicione a classe celta-grid-2.
<div class="celta-grid celta-grid-2">
{{Card...}}
</div>
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. Barras de Contato (Rodapé)
Adicione no final das páginas para exibir os canais de atendimento.
Padrão (Suporte Técnico)
Use:
Financeiro / Comercial
Use:
Contato
7. 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
}}
Resumo da funcionalidade.
{{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
| tipo=check
| 1= Nome do Campo
| 2= Explicação do campo.
}}
}}
== 3. Passo a Passo ==
# Clique em '''Incluir''';
# Preencha os dados;
#: {{Print|Exemplo_Tela.png|Tela de cadastro}}
# Clique em '''Gravar'''.
{{ContatoSuporte}}
8. Layouts Especiais
Tela Cheia (Sem Sidebar)
Para Dashboards ou Home Page:
<div class="celta-full-width"> ... conteúdo ... </div>
Menu Lateral Estilo Sistema
Para replicar o menu branco lateral do sistema Celta:
<div class="celta-sys-menu">
<div class="celta-sys-header">Menu do Sistema</div>
<div style="display: flex; flex-direction: column;">
[[Link|<span class="celta-sys-btn"><i class="bi bi-house"></i> Botão 1</span>]]
</div>
</div>