Bulma | Introduction

Bulma is an Open source CSS framework developed by Jeremy Thomas. This framework is based on the CSS Flexbox property. It is highly responsive, minimizing the use of media queries for responsive behavior.
Another advantage with Bulma is that you simply need to have an understanding of HTML and CSS to implement this framework (Although knowing JavaScript can help the existing features according to your needs).
Bulma also allows us to add our own CSS styling but it is advised to use an external stylesheet over inline styling.

Using Bulma: If you are a beginner web developer the simplest way is to use a jsDelivr CDN link within the head section of HTML file using link tag.

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
<head>
     <link rel="stylesheet" 
           href=
</head>
<body>
      <h1>Hello world!!</h1>
</html>

chevron_right


Output:

Hello world!!

Another cool feature with Bulma is that it can simply import the SASS files you need for the particular elements on which you want to apply the Bulma styling. For example, if you want the Bulma styling for the form elements you can import only that sass file. Otherwise, you can install the Bulma package with npm.



Example: The Bulma syntax is extremely simple, there are predefined class names that help us to create elements according to the name.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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" 
  </head>
  <body>
<a class="button">Hello</a>
</body>

chevron_right


It creates a stylized button with the word Hello on it.

The button created is not like the generic HTML button.

Each Bulma element has multiple alternative styles available, and these can be applied by using is- or has- class modifiers.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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=
</head>
  
<body>
    <a class="button is-large">Hello</a>
    <a class="button is-medium">Hello</a>
    <a class="button is-small">Hello</a>
</body>
  
</html>

chevron_right


These modifiers form the basis for manipulating objects in Bulma. Some of the color modifiers that Bulma provides are:

  • is-primary
  • is-info
  • is-success
  • is-danger
  • is-warning

The size modifiers ranging from is-size-1 to is-size-6. These helps in changing the font size. Try using h1 to h6 tags in Bulma, but you will notice that there is no change in the visible font size. This is because Bulma only uses the modifiers to change the size of the text and not in the standard HTML way. Try running this code to understand how h1 to h6 tags do not impact the size of the text:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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=
 </head>
   
<body>
    <h1>hello world</h1>
    <h2>hello world</h2>
    <h3>hello world</h3>
</body>
  
</html>

chevron_right


Output:

hello world
hello world
hello world

Add multiple variations within the element class attribute. Try this code and observe that we have used two modifiers one for the color and the second one for the size.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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=
</head>
  
<body>
    <a class="button is-primary is-large">Hello</a>
    <a class="button is-primary is-medium">Hello</a>
    <a class="button is-primary is-small">Hello</a>
</body>
  
</html>

chevron_right


Output:

Advantages:

  • Responsive design for all devices(desktops, tablets and mobiles).
  • Easy to read and write the code.
  • It can be combine with any JavaScript framework(AngularJS, ReactJS).

Disadvantages:

  • In development stage.
  • Needs minor improvements.
  • New framework

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.