Sistema de design Bulma.

Sistema de design Bulma: um framework CSS com comportamento explícito

Use as classes Bulma em elementos semânticos HTML

Bulma oferece um vocabulário visual de elementos, componentes, auxiliares de layout e modificadores. Não é um gerenciador de estado de formulários nem um runtime de widgets JavaScript. O espaço editorial carrega a folha de estilos oficial 1.0.4 e adiciona um pequeno script, totalmente apresentado, para validação, prévia de texto ao vivo e alternância de tema. Não há dependência de React nem provedor de framework.

Um campo reúne um rótulo, um contêiner de controle e um texto de ajuda. A classe input deve ser aplicada ao próprio campo de entrada, enquanto select é um contêiner ao redor do elemento select nativo. Essas diferenças são importantes porque o contêiner cuida da decoração e do espaçamento. Reproduzir apenas a aparência de uma captura de tela usando divs genéricas eliminaria o comportamento nativo de edição e teclado.

Consulte a especificação de apoio

Papéis HSL e temas claro/escuro do sistema de design Bulma

Use modificadores em vez de ajustes codificados diretamente

Bulma 1 armazena famílias de cores como componentes HSL e deriva valores relacionados. O papel de link define o botão de revisão, o rótulo da seção e os detalhes de apoio. As etiquetas de aviso e sucesso indicam Rascunho e Pronto para revisão, mas o rótulo de texto permanece sempre visível. A mensagem usa is-info porque explica limites do processo, em vez de indicar um erro.

A demonstração começa com data-theme=light no elemento html. O botão de aparência alterna esse atributo entre light e dark. Todos os cartões, campos, textos de ajuda e mensagens herdam juntos o tema correto. Definir diretamente um fundo branco na caixa prejudicaria essa alternância. Para personalizações de marca, altere as variáveis de papel documentadas e verifique os estados derivados, em vez de modificar apenas o fundo final do botão.

Consulte a especificação de apoio

Preferências de fontes e escala tipográfica utilizável do sistema de design Bulma

O pacote define preferências, não fornece fontes

A pilha de fontes padrão começa com Inter e inclui várias alternativas do sistema. Carregar Bulma não baixa a fonte Inter. Este exemplo offline usa qualquer uma das fontes listadas que esteja instalada; portanto, uma compilação de produção que precise de uma fonte específica deve fornecer o arquivo da fonte e definir separadamente sua política de carregamento. As classes de título e subtítulo estabelecem uma hierarquia visual sem alterar o nível do cabeçalho HTML.

O painel usa title is-2 para a página, title is-4 para o formulário e title is-3 para o título do artigo. Um ajuste para telas estreitas reduz o título da página para 2rem; trata-se explicitamente de um refinamento local. Os controles mantêm o tamanho padrão de 1rem. O texto de ajuda fica junto ao campo correspondente, para que o usuário não precise consultar instruções em uma barra lateral separada.

Consulte a especificação de apoio

Auxiliares de espaçamento e colunas responsivas do sistema de design Bulma

Uma divisão 7/5 que se empilha naturalmente

O elemento columns pai usa is-variable is-6; seus filhos são column is-7 e column is-5. Essas proporções reservam mais largura para o formulário do que para a prévia do artigo. Por padrão, em uma abordagem mobile-first, as colunas se empilham em telas de largura móvel. Por isso, esta composição não adiciona is-mobile, que manteria um layout horizontal apertado.

Os sufixos dos auxiliares de espaçamento não correspondem a uma escala linear de pixels. Em particular, o sufixo five equivale a 1.5rem, e six, a 3rem. A separação entre o cartão e a mensagem usa mt-5, enquanto os rótulos pequenos usam mb-3. A seção externa aplica localmente 2rem na vertical e 1.5rem na horizontal; o CSS adicional completo está incluído na configuração.

Consulte a especificação de apoio

Anatomia de campos e validação no sistema de design Bulma

A cor é apenas parte do erro

O título e o resumo estão explicitamente associados a rótulos e textos de ajuda. Quando o envio é rejeitado, is-danger é adicionado ao campo e ao texto de ajuda, aria-invalid=true é definido e o foco vai para o primeiro controle inválido. O título deve ter pelo menos cinco caracteres após a remoção de espaços nas extremidades; o resumo, pelo menos vinte. Esses são requisitos editoriais de exemplo, não restrições de Bulma.

A caixa de seleção de revisão do texto também precisa estar marcada. A mensagem de erro explicativa está vinculada por aria-describedby. Bulma pode exibir esses estados, mas não pode decidir se o texto está pronto. Essa decisão cabe ao script, que impede a navegação padrão do formulário. Nenhum resultado do servidor é inventado.

1. Apague o título e envie o formulário para ver o campo inválido receber foco.
2. Restaure um título e um resumo com pelo menos vinte caracteres.
3. Marque a caixa de revisão do texto, envie o formulário e edite novamente para que o rascunho volte ao estado Rascunho.

Consulte a especificação de apoio

Cartão, mensagem e etiquetas de estado no sistema de design Bulma

Atribua uma função a cada contêiner

O cartão do artigo separa card-header e card-content. O texto do cabeçalho identifica a pauta, enquanto uma etiqueta indica o estado editorial. O conteúdo inclui a seção dinâmica, o título e o resumo, seguidos dos metadados. A prévia prioriza intencionalmente o texto: o redator pode avaliar a hierarquia e o tamanho sem que uma imagem provisória se sobreponha ao conteúdo.

O componente message usa message-header e message-body para explicar que a prontidão para revisão é determinada localmente. Ele permanece visível independentemente da validação. Uma notificação temporária de sucesso seria um substituto inadequado para esse esclarecimento persistente: ao dispensá-la, o usuário poderia ficar com a impressão de que o artigo foi publicado.

• Cartão: composição atual do artigo.
• Etiqueta: estado explícito de rascunho ou revisão.
• Mensagem: explicação persistente sobre o que a ação faz.

Consulte a especificação de apoio

Estado da aplicação sem um runtime de widgets no sistema de design Bulma

Evite mensagens de sucesso desatualizadas e inserções inseguras na prévia

Cada evento de entrada atualiza a prévia e redefine o estado para Rascunho. Isso evita manter a etiqueta Pronto depois que o redator altera o texto revisado. A exibição é atualizada com textContent, então HTML digitado aparece como texto, em vez de ser interpretado como marcação. Essas são responsabilidades da aplicação; a folha de estilos de Bulma não pode executá-las.

Restaurar rascunho chama form.reset, remove as classes de validação e aria-invalid, limpa a ajuda da caixa de seleção e reconstrói a prévia. O conteúdo original de exemplo é restaurado sem recarregar o documento. O parágrafo de status usa role=status para comunicar mudanças após o envio, enquanto a digitação normal não desloca o foco repetidamente.

Consulte a especificação de apoio

Instale CSS e mantenha o comportamento visível com o sistema de design Bulma

Sem provedor e sem Bulma JavaScript incluído no pacote

Instale [email protected] e copie o CSS compilado para um recurso local, ou importe esse CSS em um empacotador existente. A configuração em HTML puro apresentada aqui não precisa de uma etapa de compilação depois que o recurso é copiado. Coloque toda a marcação do painel em body e carregue app.js com defer. Não carregue um pacote JavaScript sem relação com o projeto esperando que ele ative os componentes de Bulma.

Se você adicionar um modal ou menu suspenso mais tarde, implemente deliberadamente o comportamento correspondente de teclado, foco e fechamento. Uma classe como is-active altera a aparência; ela não mantém o foco confinado. Neste exemplo, os campos e botões nativos mantêm o comportamento reduzido e fácil de revisar.

Consulte a especificação de apoio

Personalize no escopo adequado com o sistema de design Bulma

Inspecione as variáveis do componente antes de substituí-las

As variáveis globais --bulma definem o tema, mas os componentes também declaram variáveis em seus próprios seletores. Uma atribuição mais específica no componente pode substituir um valor definido no nível raiz. Quando uma substituição na raiz parecer não surtir efeito, inspecione a classe no CSS compilado e aplique a substituição ao componente adequado, em vez de acumular declarações sem relação entre si.

Em um produto de longa duração, mantenha separados os padrões do pacote, as substituições da marca e as regras de layout específicas de cada tela. Os pequenos ajustes no contêiner e no título para telas móveis deste exemplo são regras de tela. As tabelas de referência apresentam separadamente os valores reais de Bulma, deixando claro quais configurações podem ser reutilizadas e quais pertencem apenas a este painel editorial.

Consulte a especificação de apoio

Exemplos de componentes do sistema de design Bulma

<section class="section"><div class="container"><div class="level"><div class="level-left"><div><p class="is-size-7 has-text-weight-bold has-text-link mb-3">BULMA / LOCAL EDITORIAL DESK</p><h1 class="title is-2">Shape the next issue.</h1><p class="subtitle is-5">An article brief, a preview, and an explicit editorial state.</p></div></div><div class="level-right"><button class="button is-light" id="theme">Dark appearance</button></div></div><div class="columns is-variable is-6"><div class="column is-7"><form id="brief" class="box" novalidate><h2 class="title is-4">Article brief</h2><div class="field"><label class="label" for="headline">Headline</label><div class="control"><input class="input" id="headline" value="A quieter way to work" maxlength="90" aria-describedby="headline-help"></div><p class="help" id="headline-help">Use 5–90 characters. This field updates the preview as you type.</p></div><div class="field"><label class="label" for="section">Section</label><div class="control"><div class="select is-fullwidth"><select id="section"><option>Design notes</option><option>Field research</option><option>Product craft</option></select></div></div></div><div class="field"><label class="label" for="summary">Summary</label><div class="control"><textarea class="textarea" id="summary" rows="3" aria-describedby="summary-help">How small choices in layout and language can make a demanding interface feel manageable.</textarea></div><p class="help" id="summary-help">Use at least 20 characters to give the reviewer enough context.</p></div><div class="field"><label class="checkbox"><input id="checked" type="checkbox" aria-describedby="checked-help" aria-describedby="checked-help"> I have checked the headline and summary</label><p class="help" id="checked-help"></p></div><div class="field is-grouped is-grouped-multiline"><div class="control"><button type="submit" class="button is-link">Mark ready for review</button></div><div class="control"><button id="reset" type="button" class="button is-light">Restore draft</button></div></div><p id="result" class="help" role="status">Draft changes stay in this page only.</p></form></div><div class="column is-5"><article class="card"><header class="card-header"><p class="card-header-title">Issue 08 / Article preview</p><span id="state" class="tag is-warning is-light mr-4 my-4">Draft</span></header><div class="card-content"><p class="is-size-7 has-text-link has-text-weight-bold mb-3" id="preview-section">Design notes</p><h2 class="title is-3" id="preview-title">A quieter way to work</h2><div class="content" id="preview-summary">How small choices in layout and language can make a demanding interface feel manageable.</div><hr><p class="is-size-7">Copy desk · Reading time assigned after editing</p></div></article><article class="message is-info mt-5"><div class="message-header"><p>Review is a separate step</p></div><div class="message-body">Ready for review is a local label. It does not publish this article, send a notification, or save a draft on a server.</div></article></div></div><p class="is-size-7">Official Bulma 1.0.4 CSS. Form validation and preview updates are original JavaScript.</p></div></section>

const $=id=>document.getElementById(id);
const fields=['headline','summary'];
function draft(){ $('state').textContent='Draft';$('state').className='tag is-warning is-light mr-4 my-4';$('result').textContent='Draft changes stay in this page only.';}
function preview(){ $('preview-title').textContent=$('headline').value.trim()||'Untitled article';$('preview-summary').textContent=$('summary').value.trim()||'No summary yet.';$('preview-section').textContent=$('section').value;draft();}
for(const id of ['headline','summary','section','checked'])$(id).addEventListener('input',preview);
$('brief').addEventListener('submit',event=>{event.preventDefault();let first=null;for(const id of fields){const invalid=$(id).value.trim().length<(id==='headline'?5:20);$(id).classList.toggle('is-danger',invalid);$(id).setAttribute('aria-invalid',String(invalid));$(id+'-help').classList.toggle('is-danger',invalid);if(invalid&&!first)first=$(id);}$('checked-help').textContent=$('checked').checked?'':'Confirm the copy check before review.';$('checked-help').className='help is-danger';if(!$('checked').checked&&!first)first=$('checked');if(first){$('result').textContent='Check the highlighted brief fields.';first.focus();return;}$('state').textContent='Ready for review';$('state').className='tag is-success is-light mr-4 my-4';$('result').textContent='Marked ready in this local preview. Nothing was published.';});
$('reset').addEventListener('click',()=>{$('brief').reset();for(const id of fields){$(id).classList.remove('is-danger');$(id).removeAttribute('aria-invalid');$(id+'-help').classList.remove('is-danger');}$('checked-help').textContent='';preview();});
$('theme').addEventListener('click',()=>{const dark=document.documentElement.dataset.theme!=='dark';document.documentElement.dataset.theme=dark?'dark':'light';$('theme').textContent=dark?'Light appearance':'Dark appearance';});