Bulma - Guia Rápido

O que é Bulma?

Bulma é um framework CSS de código aberto, simples e moderno, que depende do módulo flexbox (é usado para desenvolver a estrutura de layout responsivo).

História

Bulma foi publicado no ano de 2016 e distribuído sob licença do MIT. A versão atual do Bulma é 0.7.1, lançada em 18 de abril de 2018.

Por que usar Bulma?

Bulma é muito fácil de aprender e configurar. Ele é construído com SASS e dividido por 39 arquivos .sass . O código pode ser personalizado facilmente dividindo-o em arquivos separados e permite personalizar a parte do aplicativo para obter o resultado esperado.

Características

• É uma estrutura CSS leve e moderna, que usa Flexbox.

• Ele contém primeiros estilos móveis em um único arquivo, em vez de em arquivos separados.

• É personalizável e modular.

Vantagens

• Ele oferece design responsivo para desktops, tablets e celulares.

• É um framework CSS puro, para que você possa combinar com qualquer framework JavaScript como AngularJS, ReactJS etc.

• Ele usa código HTML mínimo, o que facilita a leitura e a escrita do código.

Desvantagens

• É uma nova estrutura, que não é uma comunidade tão grande.

• Tem menos documentação e precisa de algumas pequenas melhorias.

• Este framework ainda está em fase de desenvolvimento.

Descrição

Bulma é um framework CSS moderno e leve, que depende do módulo flexbox (ele é usado para desenvolver uma estrutura de layout responsiva e designs sofisticados).

A visão geral do Bulma inclui os primeiros passos com o Bulma, capacidade de resposta (você pode visualizar as páginas da web em diferentes dispositivos, como desktops, tablets e telefones), cores, funções para definir cores e valores e mixins (grupo de propriedades CSS que permitem para usar propriedades de uma classe para outra classe) no Bulma.

A tabela a seguir lista os diferentes tipos de utilitários que você pode usar para utilizar o Bulma CSS -

S.No.	Utilitário e descrição
1	Primeiros passos com Bulma Você pode começar com Bulma usando um arquivo css.
2	Capacidade de resposta e cores É um desenvolvimento compatível com dispositivos móveis, que pode ser combinado com dispositivos grandes, pequenos e médios.
3	Funções e Mixins Bulma usa algumas funções e mixins para definir valores e elementos respectivamente.

Descrição

Os modificadores no Bulma incluem estilos alternativos para os elementos usando classes, classes responsivas para alterar estilos, ajudantes de cores para alterar a cor dos elementos, ajudantes de tipografia para alterar o tamanho e a cor do texto.

A tabela a seguir lista os diferentes tipos de modificadores que você pode usar para utilizar o CSS Bulma -

S.No.	Modificadores e descrição
1	Sintaxe de modificadores e auxiliares responsivos Você pode criar estilos alternativos para os elementos usando classes modificadoras.
2	Ajudantes de cor e tipografia Você pode usar os auxiliares de cores para alterar a cor do texto ou do fundo.

Descrição

Bulma fornece sistema de grade responsivo (criando layout de página através de uma série de linhas e colunas), que pode ser dimensionado para até 12 colunas em um contêiner. As colunas serão reorganizadas conforme o tamanho do dispositivo ou janela de visualização aumenta.

A tabela a seguir lista as variações de colunas que você pode usar para utilizar o Bulma CSS -

S.No.	Tipos de coluna e descrição
1	Layout de coluna e tamanhos Bulma permite construir layout de coluna facilmente adicionando classes de colunas no contêiner.
2	Capacidade de resposta e aninhamento de colunas Bulma fornece colunas responsivas em diferentes tipos de telas, como dispositivos móveis, tablets e desktops.
3	Espaço e opções de colunas As colunas criam lacunas iguais entre o conteúdo da coluna.

Descrição

O layout Bulma descreve a estrutura da página da web, que é projetada usando suas classes CSS.

A tabela a seguir lista as variações de layout que você pode usar para utilizar o CSS Bulma -

S.No.	Tipos de layout e descrição
1	Contêiner e níveis Bulma usa contêineres para representar o layout básico e envolver o conteúdo do site.
2	Objeto de mídia O objeto de mídia é usado para especificar estilos de objetos abstratos para a construção de vários tipos de componentes.
3	Estandarte de herói Bulma fornece banner principal para especificar o banner de largura total para a página da web.
4	Azulejos Bulma cria um layout bidimensional usando uma única classe de elemento.

Descrição

O elemento de formulário Bulma especifica dados de entrada do usuário usando elementos de entrada (como campos de texto, caixas de seleção, botões de opção e mais) e os envia a um servidor para processamento de dados.

A tabela a seguir lista as variações de formulários que você pode usar para utilizar o Bulma CSS -

S.No.	Tipos de formulário e descrição
1	Controles de formulário Bulma contém diferentes tipos de classes de controle de formulário para criar uma variedade de formulários.
2	Entrada Bulma fornece campo de entrada para inserir dados do usuário junto com diferentes tipos de variações.
3	Textarea Bulma textarea é usado quando você precisa de várias linhas de entrada.
4	Selecione Bulma select é usado quando você deseja permitir que o usuário escolha entre várias opções.
5	Caixa de seleção e rádio As caixas de seleção e os botões de rádio podem ser usados ​​quando você deseja que os usuários escolham em uma lista de opções predefinidas.
6	Arquivo É usado para fazer upload dos arquivos dos dados do usuário.

Descrição

Bulma fornece diferentes tipos de elementos, como elemento de caixa que pode ser usado como recipiente, elemento de botão, recipiente de imagem para especificar a imagem, elemento de tabela etc.

A tabela a seguir lista as variações de elementos que você pode usar para utilizar o CSS Bulma -

S.No.	Tipos de formulário e descrição
1	Botão Um elemento de botão fornece interação do usuário com estilos de botão personalizados.
2	Conteúdo Bulma fornece classe de conteúdo para usar tags HTML diretamente.
3	Caixa e Ícone A classe .box define um contêiner incluindo uma borda, raio e preenchimento.
4	Imagem Bulma usa a classe .image para exibir as imagens na página.
5	Barras de notificação e progresso Bulma especifica mensagens de alerta predefinidas para exibir a notificação.
6	Mesa Bulma envolve os elementos para exibir dados em formato tabular.
7	Tag e Título Bulma fornece pequenos rótulos chamados tags para exibir as informações adicionais.

Descrição

Bulma vem com componentes pré-estilizados, que fornecem dropdowns, modal, pagination, navbar, tabs etc para tornar a experiência do usuário facilmente na página.

A tabela a seguir lista as variações de componentes que você pode usar para utilizar o CSS Bulma -

S.No.	Descrição do componente
1	Migalhas de pão Bulma usa o componente breadcrumb como um método de navegação para indicar a localização da página atual para o usuário no aplicativo.
2	Cartão O componente de cartão exibe o conteúdo em uma caixa para melhor aparência.
3	Suspenso Bulma fornece menus suspensos alternáveis ​​para exibir links relacionados em um formato de lista.
4	mensagem Bulma fornece blocos de mensagens para melhorar a aparência de sua página.
5	Modal Modal é uma janela filha que é colocada em camadas sobre sua janela pai.
6	Navbar As barras de navegação funcionam como cabeçalhos de navegação para seu site.
7	Paginação O componente de paginação fornece uma série de links relacionados em várias páginas.
8	Abas Bulma fornece um menu de navegação com guias com estilos diferentes para exibir o conteúdo.