Ajuda:Guia de Estilo

Início /

Guia de Estilo e Padrões de Edição

Atualizado em: 29/11/2025

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.

Opção A: Padrão (Manuais)

Gera a caixa azul com título. Ideal para documentações.

{{Cabecalho
 | [[Módulo Pai]] › [[Sub-rotina]]
 | Título da Página
}}

Opção B: Invisível (Dashboards)

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

INFO (Padrão)

Use para dicas gerais ou informações complementares. (Se não informar o tipo, este será usado).

{{Nota|info|DICA|Texto da dica...}}

SUCESSO / NOVIDADE

Use para indicar novas funcionalidades ou boas práticas recomendadas.

{{Nota|success|NOVIDADE|Versão 15.0 lançada...}}

ATENÇÃO

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...}}

CUIDADO / CRÍTICO

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.

4.1. Cards Básicos

Use

{{{titulo}}}

{{{texto}}}

para blocos simples de texto.

<div class="celta-grid">
  {{Card|titulo=Dicas|texto=Texto do card 1...}}
  {{Card|titulo=Manual|texto=Texto do card 2...}}
</div>

4.2. Menus de Navegação (CardMenu)

Use

{{{titulo}}}

{{{conteudo}}}

para criar listas de links com acentos coloridos. Ideal para Hubs de conteúdo.

Cores disponíveis: blue, dark, orange, green, red.

<div class="celta-grid">
{{CardMenu
 | cor = orange
 | icone = bi-star
 | titulo = Favoritos
 | conteudo = 
* [[Link 1]]
* [[Link 2]]
}}
</div>

IMPORTANTE

Ao usar o CardMenu, os asteriscos (*) da lista devem estar colados na margem esquerda, sem espaços antes.

Resultado Visual:

Favoritos

• Link Exemplo 1
• Link Exemplo 2

4.3. Grid de 2 Colunas Fixas

Por padrão, a grid divide em 3 ou 4 colunas dependendo da tela. Para forçar 2 colunas grandes, adicione a classe celta-grid-2.

<div class="celta-grid celta-grid-2">
  {{Card...}}
  {{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. 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.}}

7. Layout Tela Cheia (Sem Sidebar)

Para páginas como a Home ou Dashboards que não precisam de índice lateral, envolva todo o conteúdo da página nesta div:

<div class="celta-full-width">
   ... todo o conteúdo da página aqui ...
</div>