Layout e Sistema de Grid

O Zênite UI utiliza um sistema de grid responsivo de 12 colunas incrivelmente leve. Ele é construído para ser intuitivo e ajusta-se automaticamente a diferentes tamanhos de ecrã, garantindo que o seu conteúdo se empilhe perfeitamente em dispositivos móveis.

Como funciona

Utilize a classe .row para criar uma linha, e as classes .column-* (de 1 a 12) para definir a largura de cada coluna. Por padrão, em ecrãs pequenos (smartphones), todas as colunas passam a ocupar 100% da largura para facilitar a leitura.

<div class="row">
  <div class="column-12">Largura total (100%)</div>
</div>

<div class="row">
  <div class="column-6">Metade da tela (50%)</div>
  <div class="column-6">Metade da tela (50%)</div>
</div>

<div class="row">
  <div class="column-4">Um terço (33.3%)</div>
  <div class="column-4">Um terço (33.3%)</div>
  <div class="column-4">Um terço (33.3%)</div>

<div class="row">
  <div class="column-3">Um quarto (25%)</div>
  <div class="column-3">Um quarto (25%)</div>
  <div class="column-3">Um quarto (25%)</div>
  <div class="column-3">Um quarto (25%)</div>
</div>

Basic Typography

Toda a tipografia utiliza a mesma hierarquia visual. A fonte base foi aumentada para facilitar a leitura em todos os dispositivos.

Heading 1 3rem

Heading 2 2.6rem

Heading 3 2rem

Heading 4 1.44rem

Heading 5 1.15rem

Heading 6 0.96rem

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>

Links & Botões

Sou uma hiperligação

<a href="javascript:void(0)">Sou uma hiperligação</a>

<div class="button-group">
  <button class="button">Sou um botão principal</button>
  <a href="javascript:void(0)" class="button button-outline">Sou um botão com outline</a>
</div>

Outros elementos de texto

• O padrão de texto como negrito, itálico e sublinhado.
• Texto destacado usando a tag mark.
• Adicionando código inline usando a tag code.
• Mostrando atalhos de teclado como ALT+F4 com a tag kbd.

<b>Texto em negrito</b>
<i>Texto em itálico</i>
<u>Texto sublinhado</u>
<mark>Texto destacado</mark>
<code>Código inline</code>
<kbd>ALT+F4</kbd>

Listas e Citações

1. Faça isto
2. Faça aquilo
3. Faça outra coisa

"A simplicidade é o último grau de sofisticação."

– Leonardo da Vinci

<ol>
  <li>Faça isto</li>
  <li>Faça aquilo</li>
  <li>Faça outra coisa</li>
</ol>

<blockquote>
  <p>"A simplicidade é o último grau de sofisticação."</p>
  <p><cite>– Leonardo da Vinci</cite></p>
</blockquote>

Outros Elementos HTML

Existem outros elementos HTML que são formatados automaticamente no Zênite UI.

Caixa de Aviso (Notice box)

Esta é uma caixa de aviso. É muito útil para destacar pequenos pedaços de informação. Bom, não é?

<p class="notice">Esta é uma caixa de aviso. É muito útil para destacar pequenos pedaços de informação. Bom, não é?</p>

Aside (Painel Lateral)

O painel lateral (aside) é perfeito para exibir informações secundárias, como links rápidos, anúncios ou detalhes do autor, sem interromper o fluxo de leitura do conteúdo principal. O nosso framework lida com a flutuação automaticamente, garantindo que em ecrãs de telemóvel ele se ajuste para ocupar toda a largura da tela e manter a harmonia do layout.

<aside>
  <p><b>Aside</b></p>
  <p>Este é um <code>aside</code>, ele flutua para a direita e destaca-se ligeiramente do texto principal.</p>
</aside>

<article>
  <h3>Este é um Article</h3>
  <p>A tag article deve ser usada para agrupar conteúdos independentes...</p>
</article>

<section>
  <h3>Esta é uma Section</h3>
  <p>Utilize as seções para organizar o seu conteúdo em grupos temáticos lógicos...</p>
</section>

Utilitários de Exibição (Display e Visibilidade)

Controle de forma rápida a exibição e a visibilidade de componentes com as classes utilitárias.

Ocultar e Mostrar Elementos (Display)

Utilize a classe .d-none para ocultar completamente um elemento (ele é removido do fluxo da página) e .d-block ou .d-inline para torná-lo visível.

<div class="d-inline" style="background-color: var(--zf-accent); color: var(--zf-background-primary); padding: 0.5rem;">d-inline</div>
<div class="d-inline" style="padding: 0.5rem;">d-inline</div>

<span class="d-block" style="background-color: var(--zf-accent); color: var(--zf-background-primary); padding: 0.5rem;">d-block</span>
<span class="d-block" style="padding: 0.5rem;">d-block</span>

<div class="d-inline">.d-inline</div>
<div class="d-inline">.d-inline</div>
<div class="d-block">.d-block</div>
<div class="d-none">.d-none (Oculto, não ocupa espaço)</div>

Visibilidade (Visibility)

Diferente do d-none, as classes de visibilidade mantêm o espaço físico do elemento na tela, apenas o tornam invisível. Use .v-hidden para esconder e .v-visible para mostrar.

<div class="row">
  <div class="column-4">
    <div class="v-visible">Visível</div>
  </div>
  <div class="column-4">
    <div class="v-hidden">Invisível (Ocupa espaço)</div>
  </div>
  <div class="column-4">
    <div class="v-visible">Visível</div>
  </div>
</div>

Imagens e Colunas

O framework ajusta as imagens automaticamente. Na demonstração abaixo, usámos o nosso sistema de colunas para colocar 2 imagens lado a lado. Basta substituir a URL no src="" pelas suas próprias imagens!

<div class="row">
  <div class="column-6">
    <figure>
      <img src="assets/imgs/logo-primary.png" alt="Exemplo Imagem 1">
      <figcaption>Imagem 1 inserida na coluna esquerda</figcaption>
    </figure>
  </div>
  <div class="column-6">
    <figure>
      <img src="assets/imgs/hero-background.png" alt="Exemplo Imagem 2">
      <figcaption>Imagem 2 inserida na coluna direita</figcaption>
    </figure>
  </div>
</div>

Tabelas e Etiquetas (Badges)

Combine as tabelas com a classe .badge para criar painéis de administração elegantes e fáceis de ler.

<table class="table-striped">
  <thead>
    <tr>
      <th>Nome</th>
      <th>Cargo</th>
      <th class="text-center">Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Yuri Lucas</td>
      <td>Dev Front-end</td>
      <td class="text-center"><span class="badge">Férias</span></td>
    </tr>
    <tr>
      <td>Douglas</td>
      <td>Gestor de TI</td>
      <td class="text-center"><span class="badge badge-accent">Ativo</span></td>
    </tr>
  </tbody>
</table>

Detalhes e Sanfonas (Accordions)

As tags <details> são excelentes para páginas de Perguntas Frequentes (FAQ). O Zênite UI encarrega-se de criar caixas interativas, sem utilizar JavaScript.

<details>
  <summary>O Zênite UI foi criado para que?</summary>
  <p>O nosso framework foi criado para utilizarmos nos nossos projetos.</p>
</details>

Formulários (Forms) e Validação

Formulários são úteis para contatos ou inscrições. As mensagens de validação (sucesso ou erro) aparecem automaticamente após a tentativa de envio do formulário.

<form id="form-demo" novalidate>
  <!-- Agrupe cada campo dentro de uma div -->
  <div>
    <label>Nome Completo</label>
    <input type="text" required placeholder="Insira o seu nome">
    <div class="valid-feedback">Nome válido!</div>
    <div class="invalid-feedback">Por favor, insira o seu nome.</div>
  </div>

  <!-- O botão tem de ser type="submit" -->
  <button type="submit" class="button">Enviar</button>
</form>

Combobox(JS)

Uma caixa de pesquisa avançada com total controle visual, usando JavaScript nativo do nosso framework.

<label>Pesquisar Utilizador (Nome ou CPF):</label>

<div class="zf-combobox">
  <input type="text" class="zf-combobox-input" placeholder="Escreva para pesquisar...">
  <ul class="zf-combobox-list">

    <!-- Item do Combobox (com ID para JS) -->
    <li class="zf-combobox-item" data-id="1">
      <div class="zf-cb-left">
        <span class="zf-cb-name">Nome do Utilizador</span>
        <span class="zf-cb-cpf">CPF: 000.000.000-00</span>
      </div>
      <span class="zf-cb-info">Cargo / Info</span>
    </li>

    <!-- Adicione mais <li> aqui... -->

  </ul>
</div>

Calendário (Date Widget)

Um calendário incrivelmente responsivo construído com CSS Grid. Perfeito para usar como um painel lateral em *dashboards* ou como base para um *Date Picker*.

<div class="calendar">
  <div class="calendar-header">
    <button class="calendar-btn">&lt;</button>
    <h3>Outubro 2026</h3>
    <button class="calendar-btn">&gt;</button>
  </div>
  
  <div class="calendar-grid">
    <div class="calendar-day-name">Dom</div>
    <!-- ... outros dias da semana -->
    
    <div class="calendar-day empty">30</div>
    <div class="calendar-day">1</div>
    <div class="calendar-day active">15</div>
  </div>
</div>

Menu Lateral (Sidebar)

Uma barra lateral (off-canvas) usando o Checkbox.

<input type="checkbox" id="menu-toggle" class="sidebar-checkbox">
<label for="menu-toggle" class="sidebar-toggle-btn">☰ Abrir Sidebar</label>

<div class="sidebar-overlay">
  <label for="menu-toggle" style="display:block; width:100%; height:100%; cursor:pointer;"></label>
</div>

<aside class="sidebar">
  <h3 style="color: var(--zf-accent); margin-top: 0;">Zênite Painel</h3>
  <p>Menu de navegação</p>
  <div class="sidebar-nav">
    <a href="javascript:void(0)" class="active">Visão Geral</a>
    <a href="javascript:void(0)">Utilizadores</a>
    <a href="javascript:void(0)">Configurações</a>
  </div>
  <label for="menu-toggle" class="button button-outline" style="margin-top: 2rem; width: 100%; text-align: center;">Fechar Menu</label>
</aside>

Janelas Modais (Dialog)

Utilizamos a tag nativa do HTML5 <dialog> para criar pop-ups com um belo desfoque de fundo (backdrop filter).

<button class="button" onclick="document.getElementById('meu-modal').showModal()">Abrir Modal</button>

<dialog id="meu-modal">
  <div class="modal-header">
    <h3>Confirmar Ação</h3>
    <button class="close-modal" onclick="document.getElementById('meu-modal').close()">&times;</button>
  </div>
  <p>Tem a certeza de que deseja apagar este registo? Esta ação não pode ser desfeita e os dados serão permanentemente perdidos do servidor.</p>
  <div class="button-group" style="margin-top: 1.5rem; margin-bottom: 0;">
    <button class="button" onclick="document.getElementById('meu-modal').close()">Sim, Apagar</button>
    <button class="button button-outline" onclick="document.getElementById('meu-modal').close()">Cancelar</button>
  </div>
</dialog>