Ajuda:Guia de Estilo: mudanças entre as edições

Edição das 06h14min de 29 de novembro de 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.

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

Configuração

Acesse os parâmetros gerais do sistema para configurar esta rotina.

Relatórios

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

@@ Linha 1: / Linha 1: @@
 {{Cabecalho
   |
-  | Guia Rápido de Edição (Padrão Visual)
+  | Guia de Estilo e Padrões de Edição
 }}
-Use os blocos abaixo para manter o padrão visual das documentações do Celta.
+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. O Cabeçalho (Obrigatório) ==
+__TOC__
-Toda página DEVE começar com este código.
-=== Opção A: Padrão (Com Título Azul) ===
+== 1. Cabeçalho (Obrigatório) ==
-Gera a navegação, a data e o título dentro da caixa azul.
+Toda página deve iniciar com o componente de cabeçalho para gerar o breadcrumb (navegação) e o título padrão.
+<div class="celta-grid" style="grid-template-columns: 1fr 1fr;">
+<div class="celta-card">
+<div class="celta-card-header">Opção A: Padrão (Manuais)</div>
+<div class="celta-card-body">
+Gera a caixa azul com título. Ideal para documentações.
 <pre>
 {{Cabecalho
   | [[Módulo Pai]] › [[Sub-rotina]]
-  | Título da Página (Ou deixe vazio para pegar automático)
+  | Título da Página
 }}
-O texto de introdução vai aqui embaixo.
 </pre>
+</div>
+</div>
-=== Opção B: Sem Título (Apenas Navegação) ===
+<div class="celta-card">
-Use quando a página já tem um design próprio (ex: Dashboards ou Home) e você quer apenas o breadcrumb e a data, sem a caixa azul grande.
+<div class="celta-card-header">Opção B: Invisível (Dashboards)</div>
+<div class="celta-card-body">
+Gera apenas o breadcrumb. Use em páginas com design personalizado.
 <pre>
 {{Cabecalho
@@ Linha 29: / Linha 35: @@
 }}
 </pre>
-''Nota: Ao escrever "no" no segundo parâmetro, a caixa de título some.''
+</div>
+</div>
+</div>
+----
+== 2. Caixas de Aviso (Notas) ==
+Use o template <code>{{Nota}}</code> para destacar informações. Agora possuímos 4 cores semânticas.
+=== Sintaxe ===
+<pre>{{Nota | TIPO | TÍTULO | Seu texto aqui... }}</pre>
+=== Tipos Disponíveis ===
+{{Nota|info|INFO (Padrão)|Use para dicas gerais ou informações complementares. (Se não informar o tipo, este será usado).}}
+<pre>{{Nota|info|DICA|Texto da dica...}}</pre>
+{{Nota|success|SUCESSO / NOVIDADE|Use para indicar novas funcionalidades ou boas práticas recomendadas.}}
+<pre>{{Nota|success|NOVIDADE|Versão 15.0 lançada...}}</pre>
+{{Nota|warning|ATENÇÃO|Use para alertas que requerem cuidado do usuário, mas não são críticos.}}
+<pre>{{Nota|warning|ATENÇÃO|Verifique o cadastro antes de salvar...}}</pre>
+{{Nota|danger|CUIDADO / CRÍTICO|Use para riscos de perda de dados, bloqueios ou ações irreversíveis.}}
+<pre>{{Nota|danger|IMPORTANTE|Não desligue o servidor durante o processo...}}</pre>
 ----
-== 2. Caixas de Destaque (Notas) ==
+== 3. Tabelas de Campos (Data Grid) ==
-Use para Dicas, Avisos ou Observações importantes.
+Substitua as tabelas manuais pelo componente <code>{{TabelaCampos}}</code>. Ele padroniza a largura (30% campo / 70% descrição) e as cores.
-'''Código:'''
+=== Sintaxe ===
 <pre>
-{{Nota|TÍTULO DA DICA|
+{{TabelaCampos|
-Escreva o texto da observação aqui.
+  {{Linha| Nome do Campo | Explicação do que deve ser preenchido. }}
+  {{Linha| Outro Campo | Outra explicação. }}
 }}
 </pre>
-'''Visualização:'''
+=== Resultado Visual ===
-{{Nota|TÍTULO DA DICA|Escreva o texto da observação aqui.}}
+{{TabelaCampos|
+  {{Linha|Data Inicial|Informe a data de início do relatório.}}
+  {{Linha|Cliente|Selecione o cliente ou deixe em branco para todos.}}
+}}
 ----
-== 3. Badges (Etiquetas de Versão) ==
+== 4. Cards e Grids (Layout) ==
-Use ao lado de títulos para indicar novidades ou versão mínima.
+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 <code>celta-grid</code>.
-'''Código:'''
 <pre>
-== Configuração {{Badge|novo|Versão 2025}} ==
+<div class="celta-grid">
+  {{Card|titulo=Dicas|texto=Texto do card 1...}}
+  {{Card|titulo=Manual|texto=Texto do card 2...}}
+</div>
 </pre>
-'''Visualização:'''
+=== Resultado Visual ===
-<div style="font-size:1.5em; font-weight:bold; border-bottom:1px solid #eee; border-left:5px solid #3366cc; padding-left:15px;">
+<div class="celta-grid">
-Configuração {{Badge|novo|Versão 2025}}
+{{Card
+ |titulo=Configuração
+ |texto=Acesse os parâmetros gerais do sistema para configurar esta rotina.
+}}
+{{Card
+ |titulo=Relatórios
+ |texto=Visualize os resultados através do menu de impressões fiscais.
+}}
 </div>
 ----
-== 4. Imagens (Prints) ==
+== 5. Imagens e Badges ==
-Use sempre este padrão para telas do sistema.
-'''Código:'''
+=== Prints de Tela ===
-<pre>
+Padroniza o tamanho e a borda das imagens.
-{{Print|Nome_do_Arquivo.png|Legenda descrevendo a imagem}}
+<pre>{{Print|Nome_Arquivo.png|Legenda da imagem}}</pre>
-</pre>
+=== Badges (Etiquetas) ===
+Use ao lado de títulos para destacar versões.
+<pre>== Instalação {{Badge|novo|v15.2}} ==</pre>
+'''Resultado:''' <span style="font-size:1.2em; font-weight:bold;">Instalação {{Badge|novo|v15.2}}</span>
 ----
-== 5. Template Base (Copiar e Colar) ==
+== 6. Template Base (Copiar e Colar) ==
-''Copie o bloco abaixo para iniciar uma nova página rapidamente:''
+''Use este código para iniciar uma nova página de manual rapidamente:''
 <pre>
@@ Linha 82: / Linha 131: @@
 }}
-Breve resumo do que este manual ensina.
+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 ==
-Texto explicativo...
+Explicação do conceito...
-{{Nota|IMPORTANTE|
+== 2. Configuração ==
-Informação crítica que o usuário não pode esquecer.
+Acesse o menu '''Cadastro > Operações'''.
+{{TabelaCampos|
+  {{Linha|Campo 1|Descrição do campo 1.}}
+  {{Linha|Campo 2|Descrição do campo 2.}}
 }}
-== 2. Passo a Passo ==
+== 3. Passo a Passo ==
-# Acesse o menu '''Cadastro''';
 # Clique em '''Incluir''';
-#: {{Print|imagem_exemplo.jpg|Tela de inclusão}}
+# Preencha os dados conforme a tabela acima;
-# Preencha os campos e salve.
+#: {{Print|Exemplo_Tela.png|Tela de cadastro}}
+# Clique em '''Gravar'''.
+{{Nota|success|DICA|Você pode usar a tecla F5 para gravar rapidamente.}}
 </pre>