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 a 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.
Bulma is a CSS-only framework and there is no javascript included, Bulma getting started with modern framework.
Why Bulma?
Bulma has provided a range of great features as I described below
- Responsive
Fully responsive and mobile-first CSS framework. - Modular
It is built 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 more. - Looking Beautiful
Bulma is rich in the sense of features and all the features are looking very beautiful whether are Buttons, Tabs, Cards, Forms, Breadcrumbs, or others. - Simple Documentation
The Documentation is very clear and simple - Based on flexbox
Flexbox is in the foundation of Bulma
Bulma Installation
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
https://cdnjs.com/libraries/bulma
Download From Github Repository
https://github.com/jgthms/bulma/tree/master/css
Basic Code Requirements
- Use HTML5 Doctype
<!DOCTYPE html> - Add a responsive viewport meta tag
<meta name="viewport" content="width=device-width, initial-scale=1">Starter template
<!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.
Grid Columns
To create responsive columns with Bulma You need to create a container named columns and then create as many column elements 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>
Buttons
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>
Form Controls
It provides a variety of built-in form elements. The input fields look 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>
Conclusion
Guys Bulma is a very good modern-sourcecCSSss framework and it provides s built in structure .you can check k full framework from the official website. You can read the full documentation which is very well organized, simple, clean, and clear. Everything you want to learn from here about Bulma. I hope it looks fine and is very helpful.
I hope this article will help you to make a basic understanding of Bulma and keep visiting our blog.
