Bulma is an open source flexbox based css framework. Bulma is fully responsive and 100% free of cost. It is developed by Jeremy Thomas. Flexbox is new layout mode in css3 for different screen sizes and devices.
There are a lot of css frameworks available at that time around the web like Twitter Bootstrap , foundation, Gumby, UI KIT etc.
Why Bulma ?
Bulma has provide a range of great features as i described below
Fully responsive and mobile first css framework.
It is bult with Sass so you need only import the features to use into your project
- Good Range of Features
It has a range of features like Form, Model, Tabs, Alignment, card and tons of more.
- Looking Beautiful
Bulma is rich in the sense of feature and all the features are looking very beautiful whether are Buttons, Tabs, Cards, Forms, Breadcrumbs or more others.
- Simple Documentation
The Documentation is very clear and simple
- Based on flexbox
Flexbox is in the foundation of Bulma
As i said the documentation is very clean and clear. Follow the few simple below given steps to install the Bulma.
Bulma install with npm
Type the following command in your command terminal
npm install bulma
Use the CDN Link
Download From Github Repository
Basic Code Requirements
- Use HTML5 Doctype
- Add responsive viewport meta tag
<meta name="viewport" content="width=device-width, initial-scale=1">
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Hello Bulma!</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css"> </head> <body> <section class="section"> <div class="container"> <h1 class="title"> Hello World </h1> <p class="subtitle"> My first website with <strong>Bulma</strong>! </p> </div> </section> </body> </html>
Now start with the features of Bulma.
To create responsive columns with Bulma You need to create a container named columns and then create as many columns element as you want.
<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>
You can create a button using the button class which looks fine
<a class="button is-primary"> Button </a> <a class="button is-link"> Button </a> <a class="button is-info"> Button </a> <a class="button is-success"> Button </a> <a class="button is-warning"> Button </a> <a class="button is-danger"> Button </a>
Itprovide a variety of built in form elements. The input fields looks very fine with icons
<div class="field"> <p class="control has-icons-left has-icons-right"> <input class="input" type="email" placeholder="Email"> <span class="icon is-small is-left"> <i class="fa fa-envelope"></i> </span> <span class="icon is-small is-right"> <i class="fa fa-check"></i> </span> </p> </div> <div class="field"> <p class="control has-icons-left"> <input class="input" type="password" placeholder="Password"> <span class="icon is-small is-left"> <i class="fa fa-lock"></i> </span> </p> </div> <div class="field"> <p class="control"> <button class="button is-success"> Login </button> </p> </div>
Guys Bulma is very good modern open source css freamework and it provides built in structure .you can check full framework from official website . You can read full documentation which is very well organized, simple,clean and clear. Everything you want you learn from here about Bulma. I hope it looks you fine and very helpful.
I hope this article will help you to make a basic understanding about Bulma and keep visiting our blog.