The introduction and features of Bulma CSS framework

What is Bulma?

Bulma is a free, open-source CSS framework based on Flexbox and used by more than 200,000 developers.

The main advantage of using Bulma is that its box model is fully based on Flexbox. no more CSS floats and percentages. CSS framework made easy to create UI design components and patterns.

Features :

Responsiveness – 100% Responsive.Design for a mobile-first
Every element in Bulma is mobile-first and optimizes for vertical reading, so by default on mobile:

• • columns are stacked vertically

• the level component will show its children stacked vertically
• the nav menu will be hidden

You can, however, enforce the horizontal layout for both columns or level by appending the is-mobile modifier.

Demo

Modularity – Just import what you need

Bulma consists of 39 .sass files that you can import individually.

For example, let’s say you only want the Bulma columns.

The file is located in the bulma/sass/grid folder.

Simply import the utilities dependencies, and then the files you need directly:

@import “bulma/sass/utilities/_all.sass”

@import “bulma/sass/grid/columns.sass”

Demo

Morden- Columns powered by Flexbox.A simple way to build responsive columns.

Building a columns layout with Bulma is very simple:

• Add a columns container
• Add as many column elements as you want

Each column will have equal width, no matter the number of columns.

<div class="columns">
  <div class="column">
    First column
  </div>
  <div class="column">
    Second column
  </div>
  <div class="column">
    Third column
  </div>
  <div class="column">
    Fourth column
  </div>
</div>

Demo

Free – Open Source on GitHub

Why to use Bulma?
https://player.vimeo.com/video/237608586