UIkit combina uma estrutura de CSS, personalização com Less e componentes JavaScript orientados por atributos. No planejador de oficina abaixo, Switcher, Accordion e a grade responsiva funcionam em conjunto, ilustrando onde termina o comportamento nativo dos componentes e começa o estado de seleção da aplicação.
UIkit 3.25.25 nativo, CSS e JavaScript; conteúdo original das sessões e estado do plano. · Referência de implementação
02
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.
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.
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.
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.
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.
Abra Prototipagem e confira seu conteúdo específico.
Escolha essa sessão e confira o rótulo da seleção abaixo.
Alterne para Clínica de sistemas sem escolhê-la; o plano local ainda indica Prototipagem.
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.
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.
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.
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 [email protected] 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.
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.
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.
html
<main class="uk-container uk-container-small uk-padding"><div class="uk-grid-small uk-flex-middle" uk-grid><div class="uk-width-1-1 uk-width-expand@s"><p class="uk-text-meta uk-text-uppercase">UIkit / Workshop program</p><h1 class="uk-heading-small">One afternoon.<br>Three ways to learn.</h1></div><div><span class="uk-label">Local planner</span></div></div><ul class="uk-tab uk-margin-medium-top" uk-switcher="connect: #sessions; animation: uk-animation-fade"><li><a href="#">Design critique</a></li><li><a href="#">Prototyping</a></li><li><a href="#">Systems clinic</a></li></ul><ul class="uk-switcher" id="sessions"><li><div class="uk-card uk-card-default uk-card-body"><div class="uk-grid-medium" uk-grid><div class="uk-width-2-3@m"><p class="uk-text-meta">13:00–14:00 / STUDIO A</p><h2 class="uk-card-title">A useful critique starts with context.</h2><p>Bring one interface and a question you cannot resolve alone. Practice separating observation, interpretation, and a proposed change.</p><ul class="uk-list uk-list-bullet"><li>Frame the user’s task before discussing style.</li><li>Compare two alternatives against the same goal.</li><li>Leave with one specific next experiment.</li></ul></div><div class="uk-width-1-3@m"><div class="uk-tile uk-tile-muted uk-padding-small"><strong>Bring with you</strong><p>A screenshot, a short task description, and one unresolved decision.</p><button class="uk-button uk-button-primary uk-width-1-1 choose" data-session="Design critique">Choose session</button></div></div></div></div></li><li><div class="uk-card uk-card-default uk-card-body"><p class="uk-text-meta">14:15–15:15 / STUDIO B</p><h2 class="uk-card-title">Prototype the difficult transition.</h2><p>Build a small interaction that covers an empty state, an interrupted action, and recovery. The target is a useful decision, not a polished full product.</p><p>Bring a laptop and a flow with one state transition you need to test.</p><button class="uk-button uk-button-primary choose" data-session="Prototyping">Choose session</button></div></li><li><div class="uk-card uk-card-default uk-card-body"><p class="uk-text-meta">15:30–16:30 / STUDIO A</p><h2 class="uk-card-title">Make the exception explicit.</h2><p>Compare two components that almost match. Decide whether their difference belongs in a token, a variant, a composition, or a one-off exception.</p><p>Bring a component screenshot and its current implementation constraints.</p><button class="uk-button uk-button-primary choose" data-session="Systems clinic">Choose session</button></div></li></ul><div class="uk-grid-medium uk-margin-medium-top" uk-grid><section class="uk-width-1-2@m"><h2 class="uk-h3">Plan details</h2><form class="uk-form-stacked" id="planner"><div class="uk-margin"><label class="uk-form-label" for="attendee">Attendee name</label><div class="uk-form-controls"><input class="uk-input" id="attendee" required placeholder="Your name" aria-describedby="name-help"></div><p id="name-help" class="uk-text-small">Use a name to label this local plan.</p></div><p>Selected: <strong id="chosen">Design critique</strong></p><button class="uk-button uk-button-secondary" type="submit">Add to local plan</button><p id="result" role="status" class="uk-text-small">No plan recorded yet.</p></form></section><section class="uk-width-1-2@m"><h2 class="uk-h3">Before you arrive</h2><ul class="uk-accordion-default" uk-accordion="multiple: true"><li><a class="uk-accordion-title" href="#">What should I prepare?</a><div class="uk-accordion-content"><p>Pick one concrete design decision. A small, well-described example is more useful than a whole product tour.</p></div></li><li><a class="uk-accordion-title" href="#">Does this reserve a seat?</a><div class="uk-accordion-content"><p>No. This preview records a choice only in memory. It is not connected to an event or registration service.</p></div></li></ul></section></div><p class="uk-text-meta uk-margin-medium-top">Official UIkit 3.25.25 CSS and JavaScript. Session content and plan behavior are original.</p></main>
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.
javascript
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.';});
Essas sobrescritas não são valores oficiais padrão de tokens.
04
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.
html
<!-- npm install [email protected]
mkdir -p assets
cp node_modules/uikit/dist/css/uikit.min.css assets/
cp node_modules/uikit/dist/js/uikit.min.js assets/ -->
<!doctype html><html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Workshop planner</title>
<link rel="stylesheet" href="assets/uikit.min.css">
<link rel="stylesheet" href="style.css">
<script src="assets/uikit.min.js" defer></script>
<script src="app.js" defer></script></head>
<body><main class="uk-container uk-container-small uk-padding"><div class="uk-grid-small uk-flex-middle" uk-grid><div class="uk-width-1-1 uk-width-expand@s"><p class="uk-text-meta uk-text-uppercase">UIkit / Workshop program</p><h1 class="uk-heading-small">One afternoon.<br>Three ways to learn.</h1></div><div><span class="uk-label">Local planner</span></div></div><ul class="uk-tab uk-margin-medium-top" uk-switcher="connect: #sessions; animation: uk-animation-fade"><li><a href="#">Design critique</a></li><li><a href="#">Prototyping</a></li><li><a href="#">Systems clinic</a></li></ul><ul class="uk-switcher" id="sessions"><li><div class="uk-card uk-card-default uk-card-body"><div class="uk-grid-medium" uk-grid><div class="uk-width-2-3@m"><p class="uk-text-meta">13:00–14:00 / STUDIO A</p><h2 class="uk-card-title">A useful critique starts with context.</h2><p>Bring one interface and a question you cannot resolve alone. Practice separating observation, interpretation, and a proposed change.</p><ul class="uk-list uk-list-bullet"><li>Frame the user’s task before discussing style.</li><li>Compare two alternatives against the same goal.</li><li>Leave with one specific next experiment.</li></ul></div><div class="uk-width-1-3@m"><div class="uk-tile uk-tile-muted uk-padding-small"><strong>Bring with you</strong><p>A screenshot, a short task description, and one unresolved decision.</p><button class="uk-button uk-button-primary uk-width-1-1 choose" data-session="Design critique">Choose session</button></div></div></div></div></li><li><div class="uk-card uk-card-default uk-card-body"><p class="uk-text-meta">14:15–15:15 / STUDIO B</p><h2 class="uk-card-title">Prototype the difficult transition.</h2><p>Build a small interaction that covers an empty state, an interrupted action, and recovery. The target is a useful decision, not a polished full product.</p><p>Bring a laptop and a flow with one state transition you need to test.</p><button class="uk-button uk-button-primary choose" data-session="Prototyping">Choose session</button></div></li><li><div class="uk-card uk-card-default uk-card-body"><p class="uk-text-meta">15:30–16:30 / STUDIO A</p><h2 class="uk-card-title">Make the exception explicit.</h2><p>Compare two components that almost match. Decide whether their difference belongs in a token, a variant, a composition, or a one-off exception.</p><p>Bring a component screenshot and its current implementation constraints.</p><button class="uk-button uk-button-primary choose" data-session="Systems clinic">Choose session</button></div></li></ul><div class="uk-grid-medium uk-margin-medium-top" uk-grid><section class="uk-width-1-2@m"><h2 class="uk-h3">Plan details</h2><form class="uk-form-stacked" id="planner"><div class="uk-margin"><label class="uk-form-label" for="attendee">Attendee name</label><div class="uk-form-controls"><input class="uk-input" id="attendee" required placeholder="Your name" aria-describedby="name-help"></div><p id="name-help" class="uk-text-small">Use a name to label this local plan.</p></div><p>Selected: <strong id="chosen">Design critique</strong></p><button class="uk-button uk-button-secondary" type="submit">Add to local plan</button><p id="result" role="status" class="uk-text-small">No plan recorded yet.</p></form></section><section class="uk-width-1-2@m"><h2 class="uk-h3">Before you arrive</h2><ul class="uk-accordion-default" uk-accordion="multiple: true"><li><a class="uk-accordion-title" href="#">What should I prepare?</a><div class="uk-accordion-content"><p>Pick one concrete design decision. A small, well-described example is more useful than a whole product tour.</p></div></li><li><a class="uk-accordion-title" href="#">Does this reserve a seat?</a><div class="uk-accordion-content"><p>No. This preview records a choice only in memory. It is not connected to an event or registration service.</p></div></li></ul></section></div><p class="uk-text-meta uk-margin-medium-top">Official UIkit 3.25.25 CSS and JavaScript. Session content and plan behavior are original.</p></main>
</body></html>
Um prompt para seu projeto
Prompt para agente de IA
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.
05
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.
