FRAMEWORK BULMA

Framework Bulma

Curso Técnico em Informática

Nome: Alex Dias Cardoso Professor: Robson Cunha

Date 12-07-2021

O que é um frameowork?

Framework é um conjunto de códigos prontos com diversas funções que podem ser utilizadas no desenvolvimento de sites. Sobretudo, o objetivo de uso dessa ferramenta é aplicar funcionalidades e estruturas já programadas para garantir mais produtividade e qualidade no desenvolvimento de um projeto.

Authr's Name

Framework Bulma

Bulma é um framework CSS totalmente gratuito, inspirado no Bootstrap e baseado em Flexbox, que já tem uma compatibilidade bem grande entre os browsers.

Framework Bulma

Características

• 100% responsivo (mobile first)
• Totalmente CSS (não requer JavaScript)
• Modular (importe no seu projeto somente o que você precisa)
• Moderno (construído com Flexbox)
• Livre (open Source no GitHub)

Características

Specific

O Framework contém todos os elementos mais comuns, como: formulários, tabelas, botões. menus, títulos, notificações, barras de progresso, entre outras coisas – assim como o consagrado Bootstrap.O Framework contém todos os elementos mais comuns, como: formulários, tabelas, botões. menus, títulos, notificações, barras de progresso, entre outras coisas – assim como o consagrado Bootstrap.

Instalação

Pode ser feita de duas formas: Link CND: <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/bulma/0.0.26/css/bulma.css”>. Basta incluir o link na tag head do seu HTML.

Forma 1

Forma 2

Download local com o NPM: npm install bulma. Basta executar esse comando no terminal dentro da pasta do seu projeto.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.

Grid@

Como o Bulma foi inspirado no Bootstrap, ele também tem um sistema de grid com 12 colunas. O funcionamento é muito simples. Tudo que precisamos é uma tag div com a classe .columns e suas divs filhas com a classe .column.

Grid@

<div class="columns"> <div class="column">.column</div> <div class="column">.column</div> <div class="column">.column</div> <div class="column">.column</div> </div>

Grid@

Podemos utilizar as classes is-2, is-3, is-4, is-5, is-6, is-7, is-8, is-9, is-10 e is-11 para especificar qual a área ocupada pela .column.

Lorem ipsum dolor sit amet

Hero

<section class="hero is-large"> <div class="hero-body"> <div class="container"> <h1 class="title"> Título </h1> <h2 class="subtitle"> Exemplo do uso do hero </h2> </div> </div> </section>

60%

Aqui o Bulma centraliza os títulos na vertical, qualquer conteúdo seria alinhado também.

write a title here

Lorem ipsum dolro sit amet

Level

<nav class="level"> <p class="level-item has-text-centered"> <a class="link is-info">Home</a> </p> <p class="level-item has-text-centered"> <a class="link is-info">Menu</a> </p> <p class="level-item has-text-centered"> <img src="https://bulma.io/images/bulma.png" alt="" style="height: 33px;"> </p> <p class="level-item has-text-centered"> <a class="link is-info">Reservations</a> </p> <p class="level-item has-text-centered"> <a class="link is-info">Contact</a> </p> </nav>

Level

Ele gera uma navbar em que os elementos são divididos com a largura igual e com alinhamento vertical no centro, mesmo com imagem ou até mesmo um form, ele manteria esse alinhamento.

Referências

https://blog.revelo.com.br/o-que-e-framework-exemplos-e-aplicacoes/

Results

https://tableless.com.br/bulma-framework-css-baseado-em-flexbox/