PHP

Bulma getting started with modern framework

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.
Bulma is a css only framework and there is no javascript included.

Why Bulma ?

Bulma has provide a range of great features as i described below

  • Responsive
    Fully responsive and mobile first css framework.
  • Modular
    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

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

  1. Use HTML5 Doctype

    <!DOCTYPE html>

  2. Add 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 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>

 

Bulma Columns

 

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>

Codeigniter 4 New release

Form Controls

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>

 

Bulma Form

Conclusion

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.

About Viren-Dra Yadav

Tech Enthlasis | Open Source Lover | Project Manager and DevOps Developer@EighteenPixels | Mad for Speed
View all posts by Viren-Dra Yadav →

Leave a Reply

Your email address will not be published. Required fields are marked *