Open In App

Bulma Responsiveness Variables

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will see how the Bulma responsiveness variable is used. 

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 behaviour.

Responsiveness variables: These variables are used to change the content of the page according to the resolution of the page.

Variable-Name Description Type Value
$gap This variable is used to define the size of the element. size 32px
$tablet This variable is used to define the tablet-size resolution. size 769px
$desktop This variable is used to define the desktop-size resolution. computed 960px + (2 * $gap)
$widescreen This variable is used to define the height-size resolution. computed 1152px + (2 * $gap)
$fullhd This variable is used to define the ultra-wide resolution. computed 1344px + (2 * $gap)

Example 1: In the below code, we will make use of the above variable to demonstrate the use of the responsiveness behaviour of the website. 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width,initial-scale=1">
    <link rel="stylesheet" href=
    <link rel="stylesheet" href="style.css">
    <title>Bulma Variable</title>
</head>
  
<body>
    <center>
        <h1 class="title" style="color:green;" >
            GeeksforGeeks
        </h1>
          
        <h3 class="subtitle">
            A computer science portal for geeks
        </h3>
    </center>
</body>
  
</html>


SCSS Code:

$tablet:769px;
@media (min-width: $tablet) {
  body {
      background-color: black;
    }
}

Compiled CSS Code:

@media (min-width: 769px) {
 body {
   background-color: black;
  }
}

Output: 

 

Example 2: In the below code, we will make use of the above variable to demonstrate the use of the responsiveness behaviour of the website.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width,initial-scale=1">
    <link rel="stylesheet" href=
    <link rel="stylesheet" href="style.css">
    <title>Bulma Variable</title>
</head>
  
<body>
    <center>
        <h1 class="title" style="color:green;" >
            GeeksforGeeks
        </h1>
          
        <h3 class="subtitle">
            A computer science portal for geeks
        </h3>
    </center>
</body>
  
</html>


SCSS Code: 

$gap: 32px;
$fullhd: 1344px + (2 * $gap);
@media (min-width: $fullhd) {
   body {
       background-color: black;
    }
}

Compiled CSS Code:

@media (min-width: 1408px) {
  body {
     background-color: black;
  } 
}

Output:

 

Reference: https://bulma.io/documentation/overview/responsiveness/#variables



Last Updated : 01 Sep, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads