# Sistema de design Bulma ## Prévia da interface do sistema de design Bulma Edite um título e um resumo, valide o briefing, marque-o como pronto e alterne entre os temas claro e escuro. ## Referência de design do sistema de design Bulma Bulma 1.0.4 compilado CSS e documentação oficial de responsividade e auxiliares. Os componentes HSL são valores padrão do pacote, não uma paleta de marca substituta. As conversões para rem consideram uma raiz de 16px. ### Fundamentos de tipografia e controles | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --bulma-family-primary | Inter, SF Pro, Segoe UI, Roboto, Oxygen, Ubuntu, Helvetica Neue, Helvetica, Arial, sans-serif | Pilha de fontes preferenciais; o pacote não baixa esses arquivos de fonte. | | --bulma-size-normal | 1rem | Tamanho padrão de controles e texto do corpo. | | --bulma-size-small | 0.75rem | Tamanho compacto de controles auxiliares. | | --bulma-size-medium | 1.25rem | Tamanho do modificador médio. | | --bulma-size-large | 1.5rem | Tamanho do modificador grande. | | --bulma-weight-semibold | 600 | Rótulos e texto de interface em destaque. | | --bulma-block-spacing | 1.5rem | Espaçamento entre elementos em bloco. | | --bulma-radius | 0.375rem | Raio padrão de 6px com raiz de 16px. | | --bulma-radius-small | 0.25rem | Raio pequeno de 4px. | | --bulma-radius-large | 0.75rem | Raio grande de 12px. | | --bulma-control-height | 2.5em | 2.5em equivale a 40px com um tamanho de controle de 16px. | | --bulma-control-border-width | 1px | Espessura compartilhada das bordas dos controles. | | --bulma-control-line-height | 1.5 | Altura de linha compartilhada do texto dos controles. | ### Composição de cores | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --bulma-primary-h / -s / -l | 171deg / 100% / 41% | Componentes HSL da cor base primária. | | --bulma-link-h / -s / -l | 233deg / 100% / 63% | Papel de ação e link usado por is-link. | | --bulma-scheme-h / -s | 221 / 14% | Matiz e saturação do esquema neutro. | | --bulma-scheme-main-l | 100% in light mode | Luminosidade da superfície principal clara. | | --bulma-text-l | 29% in light mode | Luminosidade do texto no esquema normal. | | --bulma-text-title-l | 14% in light mode | Luminosidade do texto de título em destaque. | ### Auxiliares de espaçamento | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | mb-0 | 0 | Utilitário de margem inferior; as outras direções usam a mesma escala de sufixos. | | mb-1 | 0.25rem | Utilitário de margem inferior; as outras direções usam a mesma escala de sufixos. | | mb-2 | 0.5rem | Utilitário de margem inferior; as outras direções usam a mesma escala de sufixos. | | mb-3 | 0.75rem | Utilitário de margem inferior; as outras direções usam a mesma escala de sufixos. | | mb-4 | 1rem | Utilitário de margem inferior; as outras direções usam a mesma escala de sufixos. | | mb-5 | 1.5rem | Utilitário de margem inferior; as outras direções usam a mesma escala de sufixos. | | mb-6 | 3rem | Utilitário de margem inferior; as outras direções usam a mesma escala de sufixos. | ### Pontos de interrupção responsivos | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | mobile | ≤768px | Colunas e pilha de níveis, a menos que is-mobile seja adicionado. | | tablet | ≥769px | As colunas padrão passam a ser horizontais. | | desktop | ≥1024px | Início dos modificadores específicos para desktop. | | widescreen | ≥1216px | Faixa mais ampla de contêiner/layout. | | fullhd | ≥1408px | Maior faixa padrão. | ## Guia completo do sistema de design Bulma 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. ## 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 bulma@1.0.4 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 ### Marcação completa do painel editorial Anatomia de field/control/label/help de Bulma, colunas 7/5, Card, Message e etiquetas de estado. ```

BULMA / LOCAL EDITORIAL DESK

Shape the next issue.

An article brief, a preview, and an explicit editorial state.

Article brief

Use 5–90 characters. This field updates the preview as you type.

Use at least 20 characters to give the reviewer enough context.

Draft changes stay in this page only.

Issue 08 / Article preview

Draft

Design notes

A quieter way to work

How small choices in layout and language can make a demanding interface feel manageable.

Copy desk · Reading time assigned after editing

Review is a separate step

Ready for review is a local label. It does not publish this article, send a notification, or save a draft on a server.

Official Bulma 1.0.4 CSS. Form validation and preview updates are original JavaScript.

``` Referência de código - A biblioteca CSS não valida nem envia o formulário. - aria-describedby associa os campos ao texto de ajuda. - A prévia usa textContent para exibir o texto inserido pelo usuário. ### Validação e comportamento da prévia local Os manipuladores de eventos originais fornecem o comportamento que Bulma intencionalmente deixa a cargo da aplicação. ``` 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';}); ``` Referência de código - Quando o envio é inválido, o foco vai para o primeiro campo sem preenchimento. - Editar um rascunho pronto faz com que ele volte ao estado Rascunho. - O atributo data-theme controla a aparência. ## Configuração do agente de IA do sistema de design Bulma ### Ponto de partida para implementação Salve a marcação completa e os exemplos JavaScript conforme indicado. Bulma fornece o CSS; o script da aplicação fornecido implementa toda a validação e o estado local. A prévia offline incorpora os dois arquivos. O wrapper HTML inclui toda a marcação do corpo; salve os exemplos fornecidos de interação e de CSS com os nomes de arquivo indicados aqui. ``` Editorial desk

BULMA / LOCAL EDITORIAL DESK

Shape the next issue.

An article brief, a preview, and an explicit editorial state.

Article brief

Use 5–90 characters. This field updates the preview as you type.

Use at least 20 characters to give the reviewer enough context.

Draft changes stay in this page only.

Issue 08 / Article preview

Draft

Design notes

A quieter way to work

How small choices in layout and language can make a demanding interface feel manageable.

Copy desk · Reading time assigned after editing

Review is a separate step

Ready for review is a local label. It does not publish this article, send a notification, or save a draft on a server.

Official Bulma 1.0.4 CSS. Form validation and preview updates are original JavaScript.

``` ### Um prompt para seu projeto ``` Comece com a área editorial completa do Bulma 1.0.4. Mantenha a estrutura dos campos, controles e textos de ajuda, as colunas responsivas, os componentes de cartão e mensagem e o tema claro/escuro no nível do documento. As edições do título e do resumo devem atualizar a prévia do artigo por meio de textContent e retornar o estado para Rascunho. Exija os limites de texto após a remoção de espaços nas extremidades e a confirmação da revisão do texto antes de marcar como Pronto para revisão; associe os campos inválidos às respectivas ajudas e coloque o foco no primeiro erro. Restaure o rascunho original e limpe o estado de validação sem dar a entender que houve publicação. ``` ## Fontes e escopo do sistema de design Bulma Referência Bulma 1.0.4 CSS. As regras editoriais locais e o JavaScript são códigos originais de exemplo; nenhum rascunho é armazenado ou publicado. - Visão geral Configuração exclusiva do CSS e requisitos do documento. - Variáveis CSS Escopo global e dos componentes. - Controles de formulário Composição de campos e controles. - Responsividade Limites oficiais das áreas de visualização. - Auxiliares de espaçamento Valores de sufixo das classes utilitárias. - Modo escuro Seleção de tema. - Mensagem Estrutura do contêiner de mensagem. ## Recursos relacionados ao sistema de design Bulma ### Chakra UI Uma referência do Chakra UI v3 para tokens, funções de cores semânticas, receitas e componentes compostos de formulário. Examine as escalas reais de espaçamento e tipografia e experimente um formulário nativo de perfil de espaço de trabalho, com validação, simulação de falha ao salvar e aparência clara/escura. ### CoreUI Uma fila de revisão do CoreUI criada com variáveis reais do tema 5.9, abas nativas, seleção em lote por caixas de seleção e uma notificação persistente que permite desfazer o último arquivamento local. ### daisyUI Um estúdio de convites nativo de CSS que demonstra os temas semânticos 5 de daisyUI, cores pareadas para conteúdo, seleção por botões de opção, controles de intervalo, validação do navegador e uma etapa de revisão em um diálogo real. - [Referência de implementação](https://bulma.io/documentation/form/general/) - [Fonte](https://bulma.io/documentation/features/css-variables/) - [Fonte](https://bulma.io/documentation/features/color-palettes/) - [Fonte](https://bulma.io/documentation/helpers/spacing-helpers/) - [Fonte](https://bulma.io/documentation/start/responsiveness/) - [Consulte a especificação de apoio](https://bulma.io/documentation/start/overview/) - [Consulte a especificação de apoio](https://bulma.io/documentation/features/dark-mode/) - [Consulte a especificação de apoio](https://bulma.io/documentation/helpers/typography-helpers/) - [Consulte a especificação de apoio](https://bulma.io/documentation/start/responsiveness/) - [Consulte a especificação de apoio](https://bulma.io/documentation/form/general/) - [Consulte a especificação de apoio](https://bulma.io/documentation/components/message/) - [Consulte a especificação de apoio](https://bulma.io/documentation/features/css-variables/) - [Referência de código](https://bulma.io/documentation/form/general/) - [Referência de código](https://bulma.io/documentation/start/overview/) - [Visão geral Configuração exclusiva do CSS e requisitos do documento.](https://bulma.io/documentation/start/overview/) - [Variáveis CSS Escopo global e dos componentes.](https://bulma.io/documentation/features/css-variables/) - [Controles de formulário Composição de campos e controles.](https://bulma.io/documentation/form/general/) - [Responsividade Limites oficiais das áreas de visualização.](https://bulma.io/documentation/start/responsiveness/) - [Auxiliares de espaçamento Valores de sufixo das classes utilitárias.](https://bulma.io/documentation/helpers/spacing-helpers/) - [Modo escuro Seleção de tema.](https://bulma.io/documentation/features/dark-mode/) - [Mensagem Estrutura do contêiner de mensagem.](https://bulma.io/documentation/components/message/)