# Sistema de design UIkit ## Prévia da interface do sistema de design UIkit Alterne entre três sessões, expanda os detalhes da preparação, escolha uma sessão e valide um plano local de participantes. ## Referência de design do sistema sistema de design UIkit Código-fonte Less e CSS padrão compilado de UIkit 3.25.25. Os nomes iniciados por @ são variáveis Less de tempo de compilação, não propriedades personalizadas de CSS em runtime. A prévia adiciona substituições explicitamente identificadas para cada tela. ### Tipografia | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | @global-font-family | -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" | Pilha de fontes padrão do sistema. | | @global-font-size | 16px | Tamanho base do texto. | | @global-line-height | 1.5 | Ritmo do corpo do texto. | | @global-large-font-size | 1.5rem | Auxiliar de texto grande. | | @global-medium-font-size | 1.25rem | Auxiliar de texto médio. | | @global-small-font-size | 0.875rem | Auxiliar de texto pequeno. | ### Papéis das cores | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | @global-color | #666 | Texto padrão. | | @global-emphasis-color | #333 | Texto mais destacado e títulos. | | @global-muted-color | #999 | Texto padrão atenuado; a prévia substitui a cor dos metadados por #65717a. | | @global-link-color | #1e87f0 | Links padrão. | | @global-background | #fff | Fundo padrão da página/superfície. | | @global-muted-background | #f8f8f8 | Bloco/superfície atenuado. | | @global-primary-background | #1e87f0 | Superfície de destaque primário. | | @global-secondary-background | #222 | Superfície escura secundária. | | @global-border | #e5e5e5 | Bordas neutras. | ### Espaçamento e controles | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | @global-margin | 20px | Ritmo padrão de margens. | | @global-small-margin | 10px | Margem pequena. | | @global-medium-margin | 40px | Margem média. | | @global-large-margin | 70px | Margem grande. | | @global-gutter | 30px | Gutter padrão da grade. | | @global-small-gutter | 15px | Gutter pequeno da grade. | | @global-medium-gutter | 40px | Gutter médio da grade. | | @global-control-height | 40px | Altura normal de entrada/botão. | | @global-control-small-height | 30px | Altura pequena de controle. | | @global-control-large-height | 55px | Altura grande de controle. | ### Intervalos responsivos | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | @breakpoint-small | 640px | Começam as regras de largura @s. | | @breakpoint-medium | 960px | Começam as regras de largura @m; layout do planejador em duas colunas. | | @breakpoint-large | 1200px | Começam as regras de largura @l. | | @breakpoint-xlarge | 1600px | Começam as regras de largura @xl. | ### Ajustes originais do workshop | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | Heading | 42px; 34px below 640px | Substituição local explícita de uk-heading-small. | | Card padding | 28px; 20px below 640px | Composição compacta local explícita. | | Metadata color | #65717a | Texto local de metadados mais escuro em superfícies claras. | | Focus outline | 3px solid #145ca5, offset 4px | Destaque de teclado adicionado para abas, títulos de acordeão e botões. | ## Guia completo do sistema de design UIkit Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real. Orientações completas, um ponto de partida para a implementação e links para o código-fonte. ## Classes de CSS e comportamento controlado por atributos do sistema de design UIkit ### Classes de CSS e comportamento controlado por atributos > UIkit combina um framework CSS com uma camada de componentes JavaScript. A classe uk-card estiliza uma superfície; o atributo uk-switcher inicializa um componente interativo. A diferença fica visível no exemplo do workshop: cartões e controles de formulário podem ser renderizados apenas com CSS, mas a alternância entre sessões e a expansão do acordeão dependem do pacote UIkit JavaScript. A prévia carrega localmente a folha de estilos compilada e o runtime reais da versão 3.25.25. As três sessões têm durações e layouts diferentes, portanto a alternância demonstra o comportamento real do conteúdo, em vez de apenas trocar um rótulo em cartões idênticos. O script local do plano de participantes é separado do runtime de UIkit e está incluído na íntegra. Consulte a especificação de apoio ## Variáveis Less e estilos em runtime do sistema de design UIkit ### Variáveis Less e estilos em runtime Os nomes de referência iniciados por @ são variáveis Less. Elas são resolvidas durante a compilação; definir @global-primary-background em uma folha de estilos comum do navegador não altera um tema em runtime. A tabela apresenta valores verificados no código-fonte instalado, enquanto a prévia usa o CSS padrão pré-compilado do pacote. Para criar um tema UIkit com a identidade da marca, use o fluxo documentado de importação e personalização de Less e recompile. Para ajustes isolados em uma página, CSS comum pode selecionar uma classe após a folha de estilos oficial. Este exemplo segue essa segunda abordagem para o tamanho do título, o preenchimento dos cartões e a cor dos metadados. Ele não afirma que essas substituições sejam novos tokens oficiais de UIkit. Consulte a especificação de apoio ## Hierarquia de texto, cores e superfícies do sistema de design UIkit ### Hierarquia de texto, cores e superfícies A fonte global padrão é uma pilha de fontes do sistema, com tamanho de dezesseis pixels e altura de linha de 1.5. O fundo primário padrão é #1e87f0, o secundário é um tom neutro escuro e as superfícies atenuadas são #f8f8f8. Essas funções diferenciam uma ação primária de escolha de um bloco explicativo mais discreto. A tabela de especificações fornecida inclui valores de texto e de superfície, em vez de uma paleta decorativa de quatro cores. A oficina usa um título grande, mas com tamanho limitado, um pequeno rótulo do programa e um título dentro de cada cartão de sessão. Os metadados são escurecidos localmente para #65717a. O bloco de preparação tem uma superfície azul-clara original e texto escuro comum. Não há uma suposição automática de inversão: um fundo escuro precisa do tratamento inverso UIkit adequado ou de estilos de texto correspondentes explícitos. Consulte a especificação de apoio ## Conectar a navegação das sessões ao conteúdo no sistema de design UIkit ### Conecte a navegação das sessões ao conteúdo A lista de navegação usa uk-switcher com connect: #sessions e uma animação de fade. A lista de conteúdo tem a classe uk-switcher e o ID correspondente. A ordem da lista define o mapeamento: o primeiro controle alterna o primeiro item de conteúdo. Portanto, ao adicionar ou reordenar uma sessão, atualize os dois lados em conjunto. O seletor connect explícito evita depender da posição do irmão imediatamente seguinte. A navegação usa uk-tab para o tratamento visual. UIkit gerencia o estado do item ativo e o comportamento de acessibilidade associado. O estado original do plano é independente de propósito: visualizar outra sessão não a seleciona silenciosamente. Somente Escolher sessão altera o rótulo da seleção e move o foco para o campo de participante. 1. Abra Prototipagem e confira seu conteúdo específico. 2. Escolha essa sessão e confira o rótulo da seleção abaixo. 3. Alterne para Clínica de sistemas sem escolhê-la; o plano local ainda indica Prototipagem. Consulte a especificação de apoio ## Larguras responsivas e responsabilidade pelas margens no sistema de design UIkit ### Larguras responsivas e responsabilidade pelos gutters O conteúdo da sessão usa uk-width-2-3@m e uk-width-1-3@m dentro de uk-grid. No breakpoint médio, de 960px, o conteúdo e o bloco de preparação ficam lado a lado. Abaixo dele, ficam empilhados. As seções do plano e de preparação usam regras de largura de metade correspondentes no mesmo breakpoint, preservando uma ordem lógica no código-fonte em telas menores. A grade de UIkit usa a lógica de margens associada às classes de grade. O exemplo usa uk-grid-medium para seções maiores e uk-grid-small no cabeçalho. Não adicione margens arbitrárias aos itens da grade presumindo que, mesmo assim, suas larguras fracionárias continuarão somando corretamente. O contêiner externo e o preenchimento garantem o espaçamento nas bordas; os ajustes locais para dispositivos móveis reduzem o preenchimento dos cartões e o tamanho dos títulos. Consulte a especificação de apoio ## Detalhes da preparação com o estado nativo de componentes no sistema de design UIkit ### Detalhes da preparação com estado nativo do componente A classe uk-accordion-default aplica o estilo padrão. O atributo uk-accordion define multiple: true, então abrir uma resposta sobre a preparação não fecha a outra. Cada item contém uk-accordion-title e uk-accordion-content. O tempo de execução controla o estado expandido e a visibilidade do conteúdo; as classes CSS, por si só, não oferecem esse comportamento. As duas perguntas respondem a preocupações práticas diferentes: o que levar e se o planejador local reserva um lugar. Deixar a segunda resposta explícita evita que a interface dê a entender que ocorre uma transação externa para participar de um evento. Esse limite não aparece apenas no conteúdo do acordeão; o status aplicado também informa que nenhum lugar foi reservado. - multiple: true permite manter as duas respostas abertas. - O título e o conteúdo devem permanecer no mesmo item do acordeão. - O contorno de foco do teclado permanece visível em cada título. Consulte a especificação de apoio ## Separar a aparência da biblioteca da validação da aplicação no sistema de design UIkit ### Separar a aparência da biblioteca da validação da aplicação O campo de participante usa uk-input dentro de uk-form-controls, com um rótulo real e um texto explicativo. A validação obrigatória do navegador impede o envio de um campo vazio. A aplicação também verifica se o campo contém apenas espaços em branco e aplica uk-form-danger e aria-invalid em eventos inválidos, mantendo o estado visual e semântico alinhado. A edição limpa o erro desatualizado. Escolher uma sessão atualiza a seleção local e move o foco para o campo de nome. Ao enviar, uma mensagem de status é exibida com o participante e a sessão selecionada. O texto é inserido com textContent, portanto, marcação digitada não é executada. Este planejador é local e não tem backend; UIkit não inventa semânticas de inscrição, salvamento ou notificação para o formulário. Consulte a especificação de apoio ## Carregue CSS, depois o tempo de execução e, por fim, o código da aplicação no sistema de design UIkit ### Carregue CSS, o runtime e, em seguida, o código da aplicação Instale uikit@3.25.25 e copie CSS e JavaScript compilados de dist para os recursos locais. Carregue CSS antes da pequena sobrescrita de layout e uikit.min.js antes de app.js. Os dois scripts podem usar defer para que a ordem no código-fonte seja preservada após a análise do documento. O exemplo do body fornece todos os atributos e conteúdos dos componentes. O pacote de ícones é opcional neste caso, pois a página não usa uk-icon. Se adicionar ícones depois, carregue o tempo de execução correspondente e atribua rótulos significativos aos controles que só tenham ícones. Evite misturar um pacote JavaScript mais recente com uma folha de estilos mais antiga só porque os nomes dos arquivos coincidem: a estrutura e os estilos dos componentes devem vir do mesmo pacote fixado. Consulte a especificação de apoio ## Manter estáveis as conexões do switcher à medida que o conteúdo cresce no sistema de design UIkit ### Mantenha estáveis as conexões do switcher à medida que o conteúdo cresce O switcher associa itens de navegação a itens de conteúdo pela ordem. Para adicionar uma sessão, adicione ambos os lados na mesma posição; connect: #sessions define o destino explícito. Se houver vários switchers independentes em uma página, atribua um ID exclusivo a cada destino e preserve essa relação no atributo de inicialização. A oficina selecionada permanece separada do painel ativo. Navegar por outra sessão não deve substituir silenciosamente uma escolha já feita no planejador. Ao adicionar painéis mais longos, confira a grade responsiva compartilhada e o conteúdo do acordeão no painel que acabou de ser ativado; dimensionar apenas o painel inicial pode ocultar problemas de layout até que a pessoa alterne de sessão. Consulte a especificação de apoio ## Exemplos de componentes do sistema de design UIkit ### Página da oficina com atributos nativos de UIkit O Switcher se conecta a #sessions; o Accordion permite várias seções abertas; as larguras da grade entram em vigor em @m. ```

UIkit / Workshop program

One afternoon.
Three ways to learn.

Local planner

Plan details

Use a name to label this local plan.

Selected: Design critique

No plan recorded yet.

Before you arrive

  • What should I prepare?

    Pick one concrete design decision. A small, well-described example is more useful than a whole product tour.

  • Does this reserve a seat?

    No. This preview records a choice only in memory. It is not connected to an event or registration service.

Official UIkit 3.25.25 CSS and JavaScript. Session content and plan behavior are original.

``` Referência de código - O atributo uk-switcher inicializa o comportamento; a classe uk-switcher identifica o contêiner de conteúdo. - Esta composição não precisa de um pacote de ícones UIkit. ### Comportamento original do plano local As escolhas de sessão e a validação são lógica da aplicação, além das interações nativas de UIkit. ``` const name=document.getElementById('attendee');const chosen=document.getElementById('chosen');const result=document.getElementById('result');document.querySelectorAll('.choose').forEach(button=>button.addEventListener('click',()=>{chosen.textContent=button.dataset.session;result.textContent='Choice updated. Add it to the local plan when ready.';name.focus()}));name.addEventListener('input',()=>{name.setCustomValidity('');name.classList.remove('uk-form-danger');name.removeAttribute('aria-invalid')});name.addEventListener('invalid',()=>{name.classList.add('uk-form-danger');name.setAttribute('aria-invalid','true')});document.getElementById('planner').addEventListener('submit',event=>{event.preventDefault();if(!name.value.trim()){name.setCustomValidity('Enter a non-empty name.');name.reportValidity();return;}result.textContent=name.value.trim()+' — '+chosen.textContent+' added to this local plan. No seat was reserved.';}); ``` Referência de código - Escolher uma sessão move o foco para o campo de participante. - Nenhum serviço de reservas ou notificações é acionado. ### Ajustes explícitos no nível da tela Pequenos ajustes de espaçamento e foco que mantêm os componentes de UIkit. ``` body{background:#fafafa}.uk-container-small{max-width:1040px}.uk-heading-small{font-size:42px}.uk-card-body{padding:28px}.uk-text-meta{color:#65717a}.uk-button{white-space:normal}.uk-tab{flex-wrap:wrap}.uk-card-title{font-size:24px;line-height:1.3}.uk-tile-muted{background:#edf3f8}.uk-button:focus-visible,.uk-tab a:focus-visible,.uk-accordion-title:focus-visible{outline:3px solid #145ca5;outline-offset:4px}@media(max-width:639px){.uk-padding{padding:20px}.uk-heading-small{font-size:34px}.uk-card-body{padding:20px}.uk-card-title{font-size:22px}} ``` Referência de código - Essas sobrescritas não são valores oficiais padrão de tokens. ## Configuração do agente de sistema de design UIkit ### Ponto de partida para implementação Salve os ajustes de tela fornecidos como style.css e o comportamento do plano local como app.js. UIkit gerencia o Switcher e o Accordion. Esta composição não requer o pacote de ícones. O wrapper HTML inclui toda a marcação do body; salve os exemplos fornecidos de interação e CSS com os nomes de arquivo referenciados aqui. ``` Workshop planner

UIkit / Workshop program

One afternoon.
Three ways to learn.

Local planner

Plan details

Use a name to label this local plan.

Selected: Design critique

No plan recorded yet.

Before you arrive

  • What should I prepare?

    Pick one concrete design decision. A small, well-described example is more useful than a whole product tour.

  • Does this reserve a seat?

    No. This preview records a choice only in memory. It is not connected to an event or registration service.

Official UIkit 3.25.25 CSS and JavaScript. Session content and plan behavior are original.

``` ### Um prompt para seu projeto ``` Use UIkit 3.25.25 para ampliar o planejador da oficina fornecido. Preserve uk-switcher com a conexão explícita a #sessions, a ordem correspondente entre navegação e conteúdo, as frações responsivas de uk-grid e o acordeão nativo que permite abrir vários itens. Visualizar uma sessão deve continuar sendo diferente de escolhê-la. Escolher uma sessão move o foco para o campo de participante com rótulo; o envio com apenas espaços em branco deve exibir uk-form-danger e aria-invalid. O status deve identificar a sessão escolhida e o participante como um plano local, sem afirmar que um lugar foi reservado. Carregue o tempo de execução correspondente de UIkit antes do script da aplicação. ``` ## Fontes e escopo do sistema de design UIkit Referência dos componentes nativos de UIkit 3.25.25. Os valores de Less são definições em tempo de compilação; as sobrescritas locais de título, preenchimento e foco são originais. Nenhuma reserva de evento é realizada. - Less Variáveis de tema definidas em tempo de compilação. - Switcher Comportamento conectado de navegação e conteúdo. - Acordeão Expansão múltipla e estrutura. - Grade Larguras responsivas e margens. - Form Classes de campo de entrada e validação. - Instalação Carregamento do tempo de execução e dos estilos. ## Recursos relacionados ao sistema de design UIkit ### Vant Um fluxo móvel de seleção de endereço criado com Vant 4: variáveis CSS reais, identidade de endereço controlada, validação de campos, alternância de tema e salvamento explicitamente apenas local. ### Vuestic UI Uma folha de avaliação nativa do Vuestic, com predefinições de modo claro e escuro verificadas nas fontes, rótulos de avaliação acessíveis, validação de área de texto, média calculada e um estado salvo que preserva a avaliação concluída. ### Web Awesome Analise os tokens semânticos reais de Web Awesome em elementos personalizados nativos, incluindo alterações localizadas de raio e espaçamento, estilo do shadow DOM, comportamento de seleção e validação de entrada. - [Referência de implementação](https://getuikit.com/docs/switcher) - [Fonte](https://getuikit.com/docs/less) - [Fonte](https://getuikit.com/docs/utility) - [Consulte a especificação de apoio](https://getuikit.com/docs/javascript) - [Consulte a especificação de apoio](https://getuikit.com/docs/less) - [Consulte a especificação de apoio](https://getuikit.com/docs/card) - [Consulte a especificação de apoio](https://getuikit.com/docs/switcher) - [Consulte a especificação de apoio](https://getuikit.com/docs/grid) - [Consulte a especificação de apoio](https://getuikit.com/docs/accordion) - [Consulte a especificação de apoio](https://getuikit.com/docs/form) - [Consulte a especificação de apoio](https://getuikit.com/docs/installation) - [Referência de código](https://getuikit.com/docs/switcher) - [Referência de código](https://getuikit.com/docs/form) - [Referência de código](https://getuikit.com/docs/utility) - [Less Variáveis de tema definidas em tempo de compilação.](https://getuikit.com/docs/less) - [Switcher Comportamento conectado de navegação e conteúdo.](https://getuikit.com/docs/switcher) - [Acordeão Expansão múltipla e estrutura.](https://getuikit.com/docs/accordion) - [Grade Larguras responsivas e margens.](https://getuikit.com/docs/grid) - [Form Classes de campo de entrada e validação.](https://getuikit.com/docs/form) - [Instalação Carregamento do tempo de execução e dos estilos.](https://getuikit.com/docs/installation)