Bulma Responsiveness Variables
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 = "https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css" > < link rel = "stylesheet" href = "style.css" > < title >Bulma Variable</ title > </ head > < body > < center > < h1 class = "title" style = "color:green;" > w3wiki </ h1 > < h3 class = "subtitle" > A computer science portal for Beginner </ 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 = "https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css" > < link rel = "stylesheet" href = "style.css" > < title >Bulma Variable</ title > </ head > < body > < center > < h1 class = "title" style = "color:green;" > w3wiki </ h1 > < h3 class = "subtitle" > A computer science portal for Beginner </ 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: