Comece com o Bulma

Sep 11, 2025
Como
Bulma
(Crédito da imagem: Bulma)

Quer começar a usar o Bulma? Você está no lugar certo. O Bulma é uma estrutura de CSS popular com um simples sistema de grade de flexbox. Difere de outras estruturas tomando uma abordagem mais leve e não incluindo qualquer javascript - deixando essa decisão inteiramente até o desenvolvedor (para explorar outras opções, veja a nossa escolha do melhores estruturas de CSS. ).

Neste tutorial, demonstraremos como instalar o Bulma e construir um site com suas várias classes. Para provar o quão versátil as classes estão na Bulma, toda a página do tutorial foi construída sem escrever uma única linha de CSS. Quer outras opções? Tente um excelente Construtor de sites . E para garantir que seu site seja melhor, escolha a direita hospedagem na web. serviço.

Generate flash sale

(Crédito da imagem: futuro)

Gerar CSS é o evento web mais quente da cidade. De 20-22 setembro você pode pegar um ingresso por metade do preço usando o código Flashsale5. Clique na imagem para saber mais.

01. Comece

Bulma: get started

(Crédito da imagem: Bulma)

Crie um novo diretório e, dentro dele, crie um index.html. Arquivo. Abra este arquivo em um editor de código e crie um documento HTML simples de Starter, com um HTML do DocType e uma tag de visualização responsiva. 

 & lt;! Doctype html & gt;
& lt; html & gt;
& lt; head & gt;
& lt; meta nome = "viewport" conteúdo =
"Largura = largura de dispositivos, escala inicial = 1" & gt;
& lt; title & gt; título da página & lt; / title & gt;
& lt; / head & gt;
& lt; corpo e gt;
& lt; / corpo & gt;
& lt; / html & gt;

02. Instale o Bulma.

Usando o Bulma fora da caixa é tão rápido quanto adicionar um único arquivo CSS. Usando o CDN Adicione um link no HTML. Se for necessário alterar as variáveis ​​e ter mais controle sobre a estrutura, NPM instalar bulma. pode ser usado (veja o Documentação completa ). Para a experiência completa, a Font Awesome 5 também deve ser incluída. 

 & lt; link rel = "Stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" & gt;
& lt; script aderem src = "https://use.fontawesome.com/releases/v5.3.1/js/all.js" & gt; & lt; / script & gt;

03. Construa uma página

Bulma: hello world

(Crédito da imagem: Bulma)

Dentro da tag do corpo, crie um elemento de seção e um div com a classe recipiente . Dentro do recipiente, crie um H1 com a classe título Então um parágrafo com a classe legenda . Por enquanto, insira 'Hello World' no título e algum texto para o parágrafo. Agora temos o modelo de arranque básico para Bulma. 

 & lt; section class = "seção" & gt;
& lt; div classe = "contêiner" & gt;
& lt; h1 class = "title" & gt;
Olá Mundo
& lt; / h1 & gt;
& lt; p class = "legendas" & gt;
Este é o iniciante básico
Modelo para Bulma.
& lt; / p & gt;
& lt; / div & gt;
& lt; / seção & gt;

04. Crie uma barra de herói superior

Faça uma nova seção acima do anterior, e em vez da classe seção , dê a classe herói . A classe herói permite a criação de uma bandeira de largura total, com uma variedade de opções controlando sua altura. Dentro dessa nova seção, crie uma div com a classe Herói e depois A. recipiente Isso manterá o conteúdo. 

 & lt; section class = "herói" & gt;
& lt; div classe = "herói-corpo" & gt;
& lt; div classe = "contêiner" & gt; ... & lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt;

05. Adicionar título e legendas

Dentro do recipiente div, adicione uma etiqueta H1 e H2 com as classes título e legenda . Estas são classes de tipografia que aumentarão o tamanho de seu conteúdo. A Bulma é inteligente para saber quando um título e legenda são combinados e os traz mais próximos.

06. Adicione um respingo de cor

Bulma: colour

(Crédito da imagem: Bulma)

Adicione a classe é primário para a seção herói. Isso aplicará a cor primária ao fundo e alterará o texto para a variante mais leve. Ao invés de primário , informação , sucesso , aviso , perigo , claro e Sombrio também pode ser escolhido 

 & lt; section class = "herói é primário" & gt;

07. Divida o conteúdo em colunas

A primeira área de conteúdo do site é dividida em duas colunas. Faça uma nova seção com a seção de classe e adicione um recipiente. Para configurar as colunas, uma div é adicionada com Colunas. aula. Cada coluna é adicionada dentro do contêiner pai. As colunas espacam-se igualmente no espaço disponível com uma pequena lacuna entre a menos que especificada.

Se você tem muito conteúdo, certifique-se de voltar seus ativos em armazenamento em nuvem confiável. 

 & lt; section class = "seção" & gt;
& lt; div classe = "contêiner" & gt;
& lt; div classe = "colunas é-vCentered" & gt;
& lt; div class = "coluna" & gt;
...
& lt; / div & gt;
& lt; div class = "coluna" & gt;
...
& lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; / seção & gt;

08. Crie imagens responsivas

Bulma: responsive images

(Crédito da imagem: Bulma)

A segunda coluna conterá uma imagem. Enrole a imagem em um elemento figura e, se possível, dê a figura uma classe da proporção da imagem. No exemplo, 16by9. foi usado (veja o Lista completa de proporções disponíveis ). 

 & lt; div classe = "coluna" & gt;
& lt; figura class = "imagem é-16by9" & gt;
& lt; img src = "img / dog.jpg" & gt;
& lt; / figura & gt;
& lt; / div & gt;

09. Sugira ação com botões

A classe do botão cria botões coloridos e pode ser aplicado & lt; a & gt; elementos ou. & lt; botão & gt; Elementos em Forms.Adicione dois botões para a primeira coluna e aplique modificadores de cores para eles. Se estiver usando mais de um botão, envolva-os em um div com a classe botons. , que corrige a lacuna e permite a aplicação de classes como um grupo. 

 & lt; div classe = "botões" & gt;
Botão Classe = "é" & gt;
Saiba mais & lt; / a & gt;
O botão Classe = "é - perigo é delineado" & gt;
Compre agora & lt; / a & gt;
& lt; / div & gt;

10. Crie conteúdo encaixotado

Bulma: boxed content

(Crédito da imagem: Bulma)

Adicione uma nova seção na parte inferior da página com três colunas. Dentro das colunas, é adicionado um elemento de caixa. Elementos de caixa são recipientes simples com uma borda ao redor deles que os separam do fundo de uma página. 

 & lt; div classe = "coluna" & gt;
& lt; div class = "box" & gt;
Teste
& lt; / div & gt;
& lt; / div & gt;

11. Use caixas icônicas

Bulma integra-se com a fonte incrível 5, mas é compatível com todas as bibliotecas de fontes e tem classes para chamar a maioria dos ícones disponíveis. Dentro de cada caixa, adicione um contêiner de conteúdo, seguido por um elemento de extensão com a classe ícone . Dentro do span, use um & lt; i & gt; elemento para chamar as classes necessárias para o ícone desejado. Os ícones são coloridos da mesma maneira que o texto. 

 & lt; div classe = "conteúdo" & gt;
& lt; span class = "icon" & gt;
& lt; i class = "fas fa-lg fa-home
tem-texto-sucesso "& gt; & lt; / i & gt;
& lt; / span & gt;
& lt; div class = "título é-tamanho-6" & gt; ... & lt; / div & gt;
& lt; div classe = "subtítulo é-tamanho-6" & gt; ... & lt; / div & gt;
& lt; / div & gt;

12. Seja ousado

Bulma: Be bold

(Crédito da imagem: Bulma)

Crie uma nova seção de Herói de duas colunas na parte inferior da página, dando um é-info classe para a seção. Para um efeito interessante, aplique também o é-ousado classe a esta seção para um gradiente sutil. Este modificador funciona com todas as sete das cores principais.

13. Altere os níveis

Os níveis são uma ótima maneira de garantir que os elementos sejam centralmente centrados em uma linha. Dentro de uma nova seção na parte inferior da página, adicione um div com a classe e o ninho dentro de quatro itens de nível. Qualquer conteúdo adicionado dentro de um item será alinhado verticalmente. 

& lt; div classe = "nível" & gt;
& lt; div classe = "item de nível possui" centrado em texto "& gt;
...
& lt; / div & gt;
& lt; div classe = "item de nível possui" centrado em texto "& gt;
...
& lt; / div & gt;
& lt; / div & gt;

14. Adicionar e Controlar Formulários

Para adicionar um formulário à parte inferior da página, faça uma nova seção de Herói de duas colunas com é primário . Dividi-lo em duas colunas e na coluna da direita, crie um campo aula. A classe de campo é usada para agrupar várias entradas de formulário, garantindo que elas sejam espaçadas adequadamente. Cada entrada também deve ser envolvida em um indivíduo .ao controle aula. 

 & lt; div classe = "campo" & gt;
& lt; div classe = "controle tem-ícones-esquerda
tem-ícones-direita "& gt;
& lt; classe de entrada = "entrada" tipo = "e-mail"
Placeholder = "Seu email" & gt;
icon & lt; span class = "icon é pequeno
é esquerdo "& gt;
& lt; eu class = "fas fa-envelope" & gt; & lt; / i & gt;
& lt; / span & gt;
& lt; / div & gt;
& lt; / div & gt;

15. Dê feedback dos usuários

Bulma: feedback

(Crédito da imagem: Bulma)

Uma vez enviado um formulário, deve retornar uma mensagem aos usuários para que eles saibam o que acontece a seguir. Embora o BULMA não seja capaz de controlar quando esta mensagem será exibida, a extremidade frontal pode ser construída com a classe Message. 

 & lt; artigo class = "mensagem é" & gt;
& lt; div class = "cabeçalho de mensagem" & gt;
& lt; p & gt; obrigado! & lt; / p & gt;
& lt; / div & gt;
& lt; div classe = "corpo-corpo" & gt;
... & lt; / div & gt;
& lt; / Artigo & GT;

16. Adicione um rodapé

A classe de rodapé flexível permite que qualquer elemento seja adicionado na parte inferior de uma página, fornecendo um local para informações de direitos autorais e navegação inferior, além de trazer um final para o site. 

 & lt; rodapé class = "rodapé" & gt;
& lt; div classe = "conteúdo tem-texto centrado" & gt;
& lt; p & gt; ... & lt; / p & gt;
& lt; / div & gt;
& lt; / footer & gt;

17. Personalize variáveis

A maioria dos projetos, além dos protótipos, terá um requisito para trabalhar com uma diretriz e cores da marca. Da mesma forma, é seguro assumir que um designer precisará alterar as fontes, cores ou outros aspectos da Bulma. Uma parte importante do Bulma é que é personalizável e modular. Não só os módulos podem ser importados seletivamente, mas até 415 variáveis ​​de sass podem ser alterados dentro da estrutura.

O uso de variáveis ​​significa definir uma nova cor como a primária mudará essa cor em todo o quadro do Bulma para esse projeto. Definir isso pode ser complicado no começo, mas os guias foram fornecidos usando três métodos diferentes na documentação.

Este artigo foi originalmente publicado em questão 289 da revista Creative Web Design Web designer . Compre a edição 289. ou Inscreva-se aqui .

Consulte Mais informação:

  • 5 estudos de caso de design web design
  • As melhores ferramentas de design da UI
  • Design de site minimalista mestre

Como - Artigos mais populares

Obtenha mais de Artrage 6: Dicas Top para aumentar seu fluxo de trabalho

Como Sep 11, 2025

(Crédito da imagem: Steve Goad) Neste artigo, estarei fornecendo conselhos e insights sobre artrge, um programa que ..

Como placar um rosto para animação

Como Sep 11, 2025

Quando eu aprendi a criar plataformas de personagem em Maya Way em 2002 Em 2002, enquanto trabalhava no Título PlayStation 2 Sup..

Como digitalizar uma pessoa em menos de cinco minutos

Como Sep 11, 2025

Não tem acesso a uma matriz de câmera de fotogrametria para realizar um Scan 3D ? Não há problema, essas dicas..

As regras de tipografia de web responsiva

Como Sep 11, 2025

Tipografia de Web responsiva é difícil - você precisa ter cores de design e know-how técnico. Mas, por mais complicado, pode ser errado não é uma opção, porque a tipografia é a pedra..

Criar texturas orgânicas na tinta

Como Sep 11, 2025

Desenho com tinta produz vastas possibilidades. Há formas simples, mas eficazes de criar texturas belas e orgânicas..

Como usar ferramentas digitais para criar um visual desenhado à mão

Como Sep 11, 2025

Editando e ilustrando digitalmente faz muito sentido, especialmente para projetos de ilustração comercial. No ano passado, come..

Como criar um personagem 3D estilizado para jogos

Como Sep 11, 2025

Esta Arte 3D. O tutorial se concentrará na criação de um avatar semi-estilizado no criador de personagens da IC..

Como combinar os conjuntos de aquarela do pintor

Como Sep 11, 2025

Corel Painter. Oferece um banquete de ferramentas aquarelas. Ele possui categorias de ferramentas digitais, reais e a..

Categorias