ManutencaoWiki4Devs: mudanças entre as edições
De Celta Sistemas Wiki
Mais ações
Criou página com '__NOTOC__ <div class="celta-full-width"> {{Cabecalho|4devs|Celta Wiki Framework (Documentação Interna)}} Esta página documenta a arquitetura frontend do Wiki. O objetivo deste framework é eliminar o débito técnico causado por CSS Inline e HTML hardcoded nas páginas de documentação. {{Nota|danger|REGRA DE OURO (DEV)| '''Proibido comitar CSS Inline.''' Não use <code><div style="..."></code>. Se precisar de um estilo novo, crie uma classe no <code>Common....' |
Sem resumo de edição |
||
| (2 revisões intermediárias pelo mesmo usuário não estão sendo mostradas) | |||
| Linha 11: | Linha 11: | ||
}} | }} | ||
== | == Arquitetura de Estilos (CSS) == | ||
O visual é controlado por dois arquivos globais. Se precisar alterar cores, fontes ou espaçamentos, edite aqui: | O visual é controlado por dois arquivos globais. Se precisar alterar cores, fontes ou espaçamentos, edite aqui: | ||
| Linha 20: | Linha 20: | ||
| cor = dark | | cor = dark | ||
| icone = bi-filetype-css | | icone = bi-filetype-css | ||
| titulo = MediaWiki:Common.css (Componentes) | | titulo = '''MediaWiki:Common.css''' (Componentes) | ||
| conteudo = | | conteudo = | ||
* Contém as classes do Framework (Cards, Tables, Badges, Alerts). | * Contém as classes do Framework (Cards, Tables, Badges, Alerts). | ||
* '''Responsabilidade:''' Estilizar o conteúdo interno das páginas. | * '''Responsabilidade:''' Estilizar o conteúdo interno das páginas. | ||
* [[ | * [[MediaWiki:Common.css|'''Editar fonte: "MediaWiki:Common.css"''']] | ||
}} | }} | ||
| Linha 30: | Linha 30: | ||
| cor = dark | | cor = dark | ||
| icone = bi-layout-text-window-reverse | | icone = bi-layout-text-window-reverse | ||
| titulo = MediaWiki:Citizen.css (Tema Global) | | titulo = '''MediaWiki:Citizen.css''' (Tema Global) | ||
| conteudo = | | conteudo = | ||
* Contém overrides do tema Citizen (Rodapé, Header, Remoção de títulos nativos). | * Contém overrides do tema Citizen (Rodapé, Header, Remoção de títulos nativos). | ||
* '''Responsabilidade:''' Layout macro e estrutura do site. | * '''Responsabilidade:''' Layout macro e estrutura do site. | ||
* [ | * [[MediaWiki:Citizen.css|'''Editar fonte: "MediaWiki:Citizen.css"''']] | ||
}} | }} | ||
</div> | </div> | ||
== | == Biblioteca de Componentes (Templates) == | ||
Não escreva HTML. Use as '''Predefinições''' (Wrappers). Elas garantem que se mudarmos o design no futuro, todo o legado será atualizado automaticamente. | Não escreva HTML. Use as '''Predefinições''' (Wrappers). Elas garantem que se mudarmos o design no futuro, todo o legado será atualizado automaticamente. | ||
| Linha 45: | Linha 45: | ||
{{TabelaCampos| | {{TabelaCampos| | ||
{{Linha | {{Linha | ||
| 1= {{ | | 1= [[Predefinição:Cabecalho|<nowiki>{{Cabecalho}}</nowiki>]] | ||
| 2= Gera o Breadcrumb e Título H1. Lida com a supressão do título nativo do MediaWiki. | | 2= Gera o Breadcrumb e Título H1. Lida com a supressão do título nativo do MediaWiki. | ||
}} | }} | ||
{{Linha | {{Linha | ||
| 1= {{ | | 1= [[Predefinição:Nota|<nowiki>{{Nota}}</nowiki>]] | ||
| 2= Gera os alertas coloridos (Info, Success, Warning, Danger). Substitui divs coloridas manuais. | | 2= Gera os alertas coloridos (Info, Success, Warning, Danger). Substitui divs coloridas manuais. | ||
}} | }} | ||
{{Linha | {{Linha | ||
| 1= {{ | | 1= [[Predefinição:TabelaCampos|<nowiki>{{TabelaCampos}}</nowiki>]] | ||
| 2= Wrapper para tabelas de dados | | 2= Wrapper container para tabelas de dados padronizadas. | ||
}} | }} | ||
{{Linha | {{Linha | ||
| 1= {{ | | 1= [[Predefinição:Linha|<nowiki>{{Linha}}</nowiki>]] | ||
| 2= Gera | | 2= Gera uma linha (row) dentro da TabelaCampos. Suporta ícones automáticos via parâmetro <code>tipo=</code>. | ||
}} | }} | ||
{{Linha | {{Linha | ||
| 1= {{Predefinição:ContatoSuporte}} | | 1= [[Predefinição:CardMenu|<nowiki>{{CardMenu}}</nowiki>]] | ||
| 2= Injeta a barra de rodapé padrão (Email/Whats/Site). | | 2= Gera os cards de navegação com ícone e borda colorida (Accent) para Hubs e Dashboards. | ||
}} | |||
{{Linha | |||
| 1= [[Predefinição:Card|<nowiki>{{Card}}</nowiki>]] | |||
| 2= Card simples (branco, sem borda colorida) para destacar informações em grids. | |||
}} | |||
{{Linha | |||
| 1= [[Predefinição:Badge|<nowiki>{{Badge}}</nowiki>]] | |||
| 2= Gera etiquetas coloridas para versão (Ex: <span class="celta-badge celta-badge-novo">v15.0</span>). | |||
}} | |||
{{Linha | |||
| 1= [[Predefinição:Print|<nowiki>{{Print}}</nowiki>]] | |||
| 2= Padroniza a exibição de imagens com borda, sombra e legenda centralizada. | |||
}} | |||
{{Linha | |||
| 1= [[Predefinição:ContatoSuporte|<nowiki>{{ContatoSuporte}}</nowiki>]] | |||
| 2= Injeta a barra de rodapé padrão (Email/Whats/Site). | |||
}} | |||
{{Linha | |||
| 1= [[Predefinição:ContatoFinanceiro|<nowiki>{{ContatoFinanceiro}}</nowiki>]] | |||
| 2= Variação da barra de contato para páginas comerciais/financeiras. | |||
}} | }} | ||
}} | }} | ||
Edição atual tal como às 15h29min de 1 de dezembro de 2025
Celta Wiki Framework (Documentação Interna)
Esta página documenta a arquitetura frontend do Wiki. O objetivo deste framework é eliminar o débito técnico causado por CSS Inline e HTML hardcoded nas páginas de documentação.
REGRA DE OURO (DEV)
Arquitetura de Estilos (CSS)
O visual é controlado por dois arquivos globais. Se precisar alterar cores, fontes ou espaçamentos, edite aqui:
MediaWiki:Common.css (Componentes)
- Contém as classes do Framework (Cards, Tables, Badges, Alerts).
- Responsabilidade: Estilizar o conteúdo interno das páginas.
- Editar fonte: "MediaWiki:Common.css"
MediaWiki:Citizen.css (Tema Global)
- Contém overrides do tema Citizen (Rodapé, Header, Remoção de títulos nativos).
- Responsabilidade: Layout macro e estrutura do site.
- Editar fonte: "MediaWiki:Citizen.css"
Biblioteca de Componentes (Templates)
Não escreva HTML. Use as Predefinições (Wrappers). Elas garantem que se mudarmos o design no futuro, todo o legado será atualizado automaticamente.
| Campo / Parâmetro | Função e Instruções |
|---|---|
| {{Cabecalho}} | Gera o Breadcrumb e Título H1. Lida com a supressão do título nativo do MediaWiki. |
| {{Nota}} | Gera os alertas coloridos (Info, Success, Warning, Danger). Substitui divs coloridas manuais. |
| {{TabelaCampos}} | Wrapper container para tabelas de dados padronizadas. |
| {{Linha}} | Gera uma linha (row) dentro da TabelaCampos. Suporta ícones automáticos via parâmetro tipo=.
|
| {{CardMenu}} | Gera os cards de navegação com ícone e borda colorida (Accent) para Hubs e Dashboards. |
| {{Card}} | Card simples (branco, sem borda colorida) para destacar informações em grids. |
| {{Badge}} | Gera etiquetas coloridas para versão (Ex: v15.0). |
| {{Print}} | Padroniza a exibição de imagens com borda, sombra e legenda centralizada. |
| {{ContatoSuporte}} | Injeta a barra de rodapé padrão (Email/Whats/Site). |
| {{ContatoFinanceiro}} | Variação da barra de contato para páginas comerciais/financeiras. |