Bulma Initial variables

In this article, we will see how the initial variable is used in the webpage. Bulma is a free, and open-source CSS framework based on flexbox. It is component rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design.

Initial Variables: This variable is used to define variables by literal value.

Table of the initial variables with their type and value:

Variable-Name	Description	Type	Value
$black	This variable is used to define the black color of the element.	color	hsl(0, 0%, 4%)
$black-bis	This variable is used to define the black-bis color of the element.	color	hsl(0, 0%, 7%)
$black-ter	This variable is used to define the black-ter color of the element.	color	hsl(0, 0%, 14%)
$grey-darker	This variable is used to define the grey-darker color of the element.	color	hsl(0, 0%, 21%)
$grey-dark	This variable is used to define the grey-dark color of the element.	color	hsl(0, 0%, 29%)
$grey	This variable is used to define the grey color of the element.	color	hsl(0, 0%, 48%)
$grey-light	This variable is used to define the grey-light color of the element.	color	hsl(0, 0%, 71%)
$grey-lighter	This variable is used to define the grey-lighter color of the element.	color	hsl(0, 0%, 86%)
$grey-lightest	This variable is used to define the grey-lightest color of the element.	color	hsl(0, 0%, 93%)
$white-ter	This variable is used to define the white-ter color of the element.	color	hsl(0, 0%, 96%)
$white-bis	This variable is used to define the white-bis color of the element.	color	hsl(0, 0%, 98%)
$white	This variable is used to define the white color of the element.	color	hsl(0, 0%, 100%)
$orange	This variable is used to define the orange color of the element.	color	hsl(14, 100%, 53%)
$yellow	This variable is used to define the yellow color of the element.	color	hsl(44, 100%, 77%)
$green	This variable is used to define the green color of the element.	color	hsl(153, 53%, 53%)
$turquoise	This variable is used to define the turquoise color of the element	color	hsl(171, 100%, 41%)
$cyan	This variable is used to define the cyan color of the element.	color	hsl(207, 61%, 53%)
$blue	This variable is used to define the blue color of the element.	color	hsl(229, 53%, 53%)
$purple	This variable is used to define the purple color of the element.	color	hsl(271, 100%, 71%)
$red	This variable is used to define the red color of the element.	color	hsl(348, 86%, 61%)
$family-sans-serif	This variable is used to define the family-sans-serif color of the element.	font-family	BlinkMacSystemFont, -apple-system, “Segoe UI”, “Roboto”, “Oxygen”, “Ubuntu”, “Cantarell”, “Fira Sans”, “Droid Sans”, “Helvetica Neue”, “Helvetica”, “Arial”, sans-serif
$family-monospace	This variable is used to define the monospace color of the element.	font-family	monospace
$render-mode	This variable is used to define the render-mode color of the element.	keyword	optimizeLegibility
$size-1	This variable is used to define the size of the element with 3rem.	size	3rem
$size-2	This variable is used to define the size of an element by 2.5rem	size	2.5rem
$size-3	This variable is used to define the size of the element by 2rem.	size	2rem
$size-4	This variable is used to define the size of the element by 1.5rem.	size	1.5rem
$size-5	This variable is used to define the size of the element by 1.25rem.	size	1.25rem
$size-6	This variable is used to define the element by 1rem.	size	1rem
$size-7	This variable is used to define the element by 0.75rem.	size	0.75rem
$weight-light	This variable is used to define the weight of the font by 300 value.	font-weight	300
$weight-normal	This variable is used to define the weight of the font by 400 value.	font-weight	400
$weight-medium	This variable is used to define the weight of the font by 500 value.	font-weight	500
$weight-semibold	This variable is used to define the weight of the font by 600 value.	font-weight	600
$weight-bold	This variable is used to define the weight of the font by 700 value.	font-weight	700
$block-spacing	This variable is used to define the size of the value by 1.5rem.	size	1.5rem
$gap	This variable is used to define the size of the element by 32px.	size	32px
$tablet	This variable is used to define the table-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 widescreen-size resolution.	computed	1152px + (2 * $gap)
$widescreen-enabled	This variable is used to enable the widescreen resolution.	boolean	true
$fullhd	This variable is used to define the fullhd-size resolution	computed	1344px + (2 * $gap)
$fullhd-enabled	This variable is used to enable the fullhd-size resolution.	boolean	true
$breakpoints	This variable is used to define the breakpoint of the resolution	compound	(“mobile”: (“until”: $tablet),  “tablet”: (“from”: $tablet),  “tablet-only”: (“from”: $tablet, “until”: $desktop),  “touch”: (“from”: $desktop),  “desktop”: (“from”: $desktop),  “desktop-only”: (“from”: $desktop, “until”: $widescreen),  “until-widescreen”: (“until”: $widescreen),  “widescreen”: (“from”: $widescreen),  “widescreen-only”: (“from”: $widescreen, “until”: $fullhd),  “until-fullhd”: (“until”: $fullhd),  “fullhd”: (“from”: $fullhd))
$easing	This variable is used to set elements for easing.	keyword	ease-out
$radius-small	This variable is used to define the small radius of the element.	size	2px
$radius	This variable is used to define the radius of the element.	size	4px
$radius-large	This variable is used to define the large radius of the element.	size	6px
$radius-rounded	This variable is used to define the rounded radius of the element.	size	9999px
$speed	This variable is used to define the speed of the element.	duration	86ms
$variable-columns	This variable is used to set the column variable.	boolean	true
$rtl	This variable is used to set the rtl of the element.	boolean	false

Example 1: In the below code, we will make use of the above variables to demonstrate the use of the initial variable.

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" >
            GeeksforGeeks
        </h1>

        <h3 class="subtitle">
            A computer science portal for geeks
        </h3>
    </center>
</body>

</html>

SCSS Code:

$orange :hsl(14, 100%, 53%);
.subtitle {
      color:$orange;
}

Compiled CSS Code:

.subtitle {
    color: #ff470f;
 }

Output:

Example 2: In the below code, we will make use of the above variables to demonstrate the use of the initial variable.

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;" >
            GeeksforGeeks
        </h1>

        <h3 class="subtitle">
            A computer science portal for geeks
        </h3>
    </center>
</body>

</html>

SCSS Code:

$size-7: 0.75rem;
.subtitle {
   font-size:$size-7;
}

Compiled CSS Code:

.subtitle {
   font-size: 0.75rem;
}

Output:

Reference: https://bulma.io/documentation/customize/variables/#initial-variables