Open In App

Bulma Modularity

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will learn about Bulma Modularity. Bulma consists of 39 .sass files to modify the HTML elements according to different requirements. Now, these files can be used anytime and just by importing the files you need. Let’s say we just need to use Bulma sass button files, so for that, we can just import the below code into your mystyles.scss file:

@import "bulma/sass/utilities/_all.sass"
@import "bulma/sass/elements/button.sass"

Once we import the files, we can use the .button class, and all its modifiers as shown below.

Syntax:

// Add below files in mystyles.scss file
@import "bulma/sass/utilities/_all.sass"
@import "bulma/sass/grid/columns.sass"

// Add below code in index.html in <body> tag.
<button class="button">
  Button
</button>

Note: Make sure to link the mystyles.css file in your HTML file. You will notice how does the mystyles.css file created, this can be achieved by using Bulma with node-sass. Now, below we have two examples demonstrated with two different examples.

Example 1: The below example illustrates the Bulma modularity in which the Bulma columns are created.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet" 
          href="css/mystyles.css" />
</head>
  
<body>
    <div class="container">
        <h1 class="title">GeeksforGeeks</h1>
        <h1 class="subtitle">Bulma Modularity</h1>
  
        <div class="columns">
            <div class="column has-background-primary">
              GFG Col 1
            </div>
            <div class="column has-background-warning">
              GFG Col 2
            </div>
            <div class="column has-background-danger">
              GFG Col 3
            </div>
            <div class="column has-background-success">
              GFG Col 4
            </div>
            <div class="column has-background-link">
              GFG Col 5
            </div>
        </div>
    </div>
</body>
  
</html>


CSS




@charset "utf-8";
@import "../node_modules/bulma/bulma.sass";
@import "bulma/sass/grid/columns.sass"


Output:

Bulma Modularity

Bulma Modularity

Example 2: The below example illustrates the Bulma modularity in which the Bulma buttons are created.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet"
          href="css/mystyles.css" />
</head>
  
<body>
    <div class="container">
        <h1 class="title">GeeksforGeeks</h1>
        <h1 class="subtitle">Bulma Modularity</h1>
  
        <button class="button">
            Log In
        </button>
  
        <button class="button is-primary">
            Sign Up
        </button>
  
        <button class="button is-success">
            Add
        </button>
  
        <button class="button is-danger">
            Delete
        </button>
    </div>
</body>
  
</html>


CSS




@charset "utf-8";
@import "../node_modules/bulma/bulma.sass";
@import "bulma/sass/elements/button.sass"


Output:

Bulma Modularity

Bulma Modularity



Last Updated : 07 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads