Bulma Variables
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. Variables are used to store the property and can be used in repetition on the webpage.
Advantages of a variable:
- It is used to reduce the repetition of the same thing.
- It is used to perform mathematical operations over variables like +,-,/,*, etc…, which makes our work easier.
Syntax:
$name-of-the-variable: value;
Three types of variables are:
Initial Variable: This type of variable can define variables by literal value.
Variable-Name. | Description | Type | Color |
---|---|---|---|
$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 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 font family 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 font of the element. | font-family | monospace |
$render-mode | This variable is used to set the keyword render mode for the element. | keyword | optimizeLegibility |
$size-1 | This variable is used to define the size of the element by 3rem. | size | 3rem |
$size-2 | This variable is used to define the size of the 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 size of the element by 1rem. | size | 1rem |
$size-7 | This variable is used to define the size of the element by 0.75rem. | size | 0.75rem |
$weight-light | This variable is used to define the weight of the element by 300 value. | font-weight | 300 |
$weight-normal | This variable is used to define the weight of the element by the 400 value. | font-weight | 400 |
$weight-medium | This variable is used to define the weight of the element by the 500 value. | font-weight | 500 |
$weight-semibold | This variable is used to define the weight of the element by 600 value. | font-weight | 600 |
$weight-bold | This variable is used to define the weight of the element by a value of 700. | font-weight | 700 |
$block-spacing | This variable is used to define the spacing around the element by 1.5rem. | size | 1.5rem |
$gap | This variable is used to define the gap of 32px. | size | 32px |
$tablet | This variable is used to define the tablet-sized resolution. | size | 769px |
$desktop | This variable is used to define the desktop-sized 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 of the element. | computed | 1344px + (2 * $gap) |
$fullhd-enabled | This variable is used to enable the fullhd-sized resolution. | boolean | true |
$breakpoints | This variable is used to define the breakpoint for 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 define the ease-out property to the element | 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 define the columns. | boolean | true |
$rtl | This variable is used to define the rtl(right to left) property. | boolean | false |
Derived variables: In this type of variable, we can calculate variables from the values set in the previous file.
Variable-Name. | Description | Type | Value | Computed Value | Computed Type |
---|---|---|---|---|---|
$primary | This variable is used to define the primary color of the element. | variable | $turquoise | hsl(171, 100%, 41%) | color |
$info | This variable is used to define the info color of the element. | variable | $cyan | hsl(207, 61%, 53%) | color |
$success | This variable is used to define the green color of the element. | variable | $green | hsl(153, 53%, 53%) | color |
$warning | This variable is used to define the yellow color of the element. | variable | $yellow | hsl(44, 100%, 77%) | color |
$danger | This variable is used to define the red color of the element. | variable | $red | hsl(348, 86%, 61%) | color |
$light | This variable is used to define the white-ter color of the element | variable | $white-ter | hsl(0, 0%, 96%) | color |
$dark | This variable is used to define the grey-darker color of the element. | function | $grey-darker | hsl(0, 0%, 21%) | color |
$orange-invert | This variable is used to define the invert orange color of the element. | function | findColorInvert($orange) | #fff | color |
$yellow-invert | This variable is used to define the inverted yellow color of the element. | function | findColorInvert($yellow) | rgba(0, 0, 0, 0.7) | color |
$green-invert | This variable is used to define the inverted green color of the element. | function | findColorInvert($green) | #fff | color |
$turquoise-invert | This variable is used to define the inverted turquoise color of the element. | function | findColorInvert($turquoise) | #fff | color |
$cyan-invert | This variable is used to define the cyan-invert color of the element. | function | findColorInvert($cyan) | #fff | color |
$blue-invert | This variable is used to define the blue-invert color of the element. | function | findColorInvert($blue) | #fff | color |
$purple-invert | This variable is used to define the purple-invert color of the element. | function | findColorInvert($purple) | #fff | color |
$red-invert | This variable is used to define the red-invert color of the element. | function | findColorInvert($red) | #fff | color |
$primary-invert | This variable is used to define the primary-invert color of the element. | function | findColorInvert($primary) | #fff | color |
$primary-light | This variable is used to define the primary-light color of the element. | compound | findLightColor($primary) | ||
$primary-dark | This variable is used to define the primary-dark color of the element. | compound | findDarkColor($primary) | ||
$info-invert | This variable is used to define the info-invert color of the element. | function | findColorInvert($info) | #fff | color |
$info-light | This variable is used to define the info-light color of the element. | compound | findLightColor($info) | ||
$info-dark | This variable is used to define the info dark color of the element. | compound | findDarkColor($info) | ||
$success-invert | This variable is used to define the success-invert color of the element. | function | findColorInvert($success) | #fff | color |
$success-light | This variable is used to define the | compound | findLightColor($success) | ||
$success-dark | This variable is used to define the success-dark color of the element. | compound | findDarkColor($success) | ||
$warning-invert | This variable is used to define the warning invert color of the element. | function | findColorInvert($warning) | ||
$warning-light | This variable is used to define the warning light color of the element. | compound | findLightColor($warning) | #fff | color |
$warning-dark | This variable is used to define the warning-dark color of the element. | compound | findDarkColor($warning) | ||
$danger-invert | This variable is used to define the danger-invert color of the element. | function | findColorInvert($danger) | #fff | color |
$danger-light | This variable is used to define the danger-light color of the element. | compound | findLightColor($danger) | ||
$danger-dark | This variable is used to define the danger-dark color of the element. | compound | findDarkColor($danger) | ||
$light-invert | This variable is used to define the light-invert color of the element. | function | findColorInvert($light) | #fff | color |
$dark-invert | This variable is used to define the dark-invert color of the element. | function | findColorInvert($dark) | #fff | color |
$scheme-main | This variable is used to define the scheme-mail color of the element. | variable | $white | hsl(0, 0%, 100%) | color |
$scheme-main-bis | This variable is used to define the scheme-main-bis color of the element. | variable | $white-bis | hsl(0, 0%, 98%) | color |
$scheme-main-ter | This variable is used to define the scheme-main-ter color of the element. | variable | $white-ter | hsl(0, 0%, 96%) | color |
$scheme-invert | This variable is used to define the scheme-invert color of the element. | variable | $black | hsl(0, 0%, 4%) | color |
$scheme-invert-bis | This variable is used to define the scheme-invert-bis color to the element. | variable | $black-bis | hsl(0, 0%, 7%) | color |
$scheme-invert-ter | This variable is used to define the scheme-invert-ter color of the element. | variable | $black-ter | hsl(0, 0%, 14%) | color |
$background | This variable is used to define the background color of the element. | variable | $white-ter | hsl(0, 0%, 96%) | color |
$border | This variable is used to define the border color of the element. | variable | $grey-lighter | hsl(0, 0%, 86%) | color |
$border-hover | This variable is used to define the border-hover color of the element. | variable | $grey-light | hsl(0, 0%, 71%) | color |
$border-light | This variable is used to define the border-light color of the element. | variable | $grey-lightest | hsl(0, 0%, 93%) | color |
$border-light-hover | This variable is used to define the border-light-hover color of the element. | variable | $grey-light | hsl(0, 0%, 71%) | color |
$text | This variable is used to define the text color of the element. | variable | $grey-dark | hsl(0, 0%, 29%) | color |
$text-invert | This variable is used to define the text-invert color of the element of the color | function | findColorInvert($text) | #fff | color |
$text-light | This variable is used to define the text-light color of the element. | variable | $grey | hsl(0, 0%, 48%) | color |
$text-strong | This variable is used to define the text-strong color of the element. | variable | $grey-darker | hsl(0, 0%, 21%) | color |
$code | This variable is used to define the code color of the element. | compound | darken($red, 15%) | ||
$code-background | This variable is used to define the code-background color of the element. | variable | $background | hsl(0, 0%, 96%) | color |
$pre | This variable is used to define the pre color of the element. | variable | $text | hsl(0, 0%, 29%) | color |
$pre-background | This variable is used to define the pre-background color of the element. | variable | $background | hsl(0, 0%, 96%) | color |
$link | This variable is used to define the blue color of the element. | variable | $blue | hsl(229, 53%, 53%) | color |
$link-invert | This variable is used to define the link-invert color of the element. | function | findColorInvert($link) | #fff | color |
$link-light | This variable is used to define the light-dark color of the element. | compound | findLightColor($link) | ||
$link-dark | This variable is used to define the link-dark color of the element. | compound | findDarkColor($link) | ||
$link-visited | This variable is used to define the link-visited color of the element. | variable | $purple | hsl(271, 100%, 71%) | color |
$link-hover | This variable is used to define the link-hover color of the element. | variable | $grey-darker | hsl(0, 0%, 21%) | color |
$link-hover-border | This variable is used to define the grey-light color of the element. | variable | $grey-light | hsl(0, 0%, 71%) | color |
$link-focus | This variable is used to define the grey-darker color of the element. | variable | $grey-darker | hsl(0, 0%, 21%) | color |
$link-focus-border | This variable is used to define the blue color of the element. | variable | $blue | hsl(229, 53%, 53%) | color |
$link-active | This variable is used to define the grey-darker color of the element. | variable | $grey-darker | hsl(0, 0%, 21%) | color |
$link-active-border | This variable is used to define the grey-dark color of the element | variable | $grey-dark | hsl(0, 0%, 29%) | color |
$family-primary | This variable is used to define the font-family of the element | variable | $family-sans-serif | BlinkMacSystemFont, -apple-system, “Segoe UI”, “Roboto”, “Oxygen”, “Ubuntu”, “Cantarell”, “Fira Sans”, “Droid Sans”, “Helvetica Neue”, “Helvetica”, “Arial”, sans-serif | font-family |
$family-secondary | This variable is used to define the secondary font-family of the element. | variable | $family-sans-serif | BlinkMacSystemFont, -apple-system, “Segoe UI”, “Roboto”, “Oxygen”, “Ubuntu”, “Cantarell”, “Fira Sans”, “Droid Sans”, “Helvetica Neue”, “Helvetica”, “Arial”, sans-serif | font-family |
$family-code | This variable is used to define the monospace family of the element. | variable | $family-monospace | monospace | font-family |
$size-small | This variable is used to define the size of the element by 0.75rem. | variable | $size-7 | 0.75rem | size |
$size-normal | This variable is used to define the size of the element by 1rem. | variable | $size-6 | 1rem | size |
$size-medium | This variable is used to define the size of the element by 1.25rem. | variable | $size-5 | 1.25rem | size |
$size-large | This variable is used to define the size of the element by 1.5rem. | variable | $size-4 | 1.5rem | size |
$shadow | This variable is used to define the shadow of the element. | shadow | 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) | ||
$custom-colors | This variable is used to define the custom color of the element. | keyword | null | ||
$custom-shades | This variable is used to define the custom shades of the element.. | keyword | null | ||
$colors | This variable is used to define the color of the element. | map | mergeColorMaps(( “white”: ($white, $black), “black”: ($black, $white), “light”: ($light, $light-invert), “dark”: ($dark, $dark-invert), “primary”: ($primary, $primary-invert, $primary-light, $primary-dark), “link”: ($link, $link-invert, $link-light, $link-dark), “info”: ($info, $info-invert, $info-light, $info-dark), “success”: ($success, $success-invert, $success-light, $success-dark), “warning”: ($warning, $warning-invert, $warning-light, $warning-dark), “danger”: ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors) |
||
$shades | This variable is used to define the shades of the element. | map | mergeColorMaps((“black-bis”: $black-bis, “black-ter”: $black-ter, “grey-darker”: $grey-darker, “grey-dark”: $grey-dark, “grey”: $grey, “grey-light”: $grey-light, “grey-lighter”: $grey-lighter, “white-ter”: $white-ter, “white-bis”: $white-bis), $custom-shades) | ||
$sizes | This variable is used to define the size of the element. | map | $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 |
Generic variables: This type of variable can store a wide range that can store any kind of data, including text, numbers, dates, and arrays.
Variable-Name | Description | Type |
Value |
Computed Value |
Computed Type |
---|---|---|---|---|---|
$body-background-color | This variable is used to define the background-color of the element. | variable | $scheme-main | hsl(0, 0%, 100%) | color |
$body-size | This variable is used to define the body-size of the element. | size | 16px | ||
$body-min-width | This variable is used to define the min-width of the body of the element. | size | 300px | ||
$body-rendering | This variable is used to set the rendering of the body. | keyword | optimizeLegibility | ||
$body-family | This variable is used to define the family of the body. | variable | $family-primary | BlinkMacSystemFont, -apple-system, “Segoe UI”, “Roboto”, “Oxygen”, “Ubuntu”, “Cantarell”, “Fira Sans”, “Droid Sans”, “Helvetica Neue”, “Helvetica”, “Arial”, sans-serif |
font-family |
$body-overflow-x | This variable is used to set the overflow-x of the body. | string | hidden | ||
$body-overflow-y | This variable is used to define the overflow-y of the body. | string | scroll | ||
$body-color | This variable is used to define the color of the body. | variable | $text | hsl(0, 0%, 29%) | color |
$body-font-size | This variable is used to define the font-size of the body. | size | 1em | ||
$body-weight | This variable is used to define the weight of the body. | variable | $weight-normal | 400 | font-weight |
$body-line-height | This variable is used to define the line height of the body. | unitless | 1.5 | ||
$code-family | This variable is used to define the font family of the element. | variable | $family-code | monospace | font-family |
$code-padding | This variable is used to define the padding of the code. | size | 0.25em 0.5em 0.25em | ||
$code-weight | This variable is used to define the weight of the code. | font-weight | normal | ||
$code-size | This variable is used to define the size of the code. | size | 0.875em | ||
$small-font-size | This variable is used to define the font-size by 0.875em. | size | 0.875em | ||
$hr-background-color | This variable is used to define the background color of the hr. | variable | $background | hsl(0, 0%, 96%) | color |
$hr-height | This variable is used to define the height of the hr. | size | 2px | ||
$hr-margin | This variable is used to define the margin of the hr. | size | 1.5rem 0 | ||
$strong-color | This variable is used to define the color of the strong. | variable | $text-strong | hsl(0, 0%, 21%) | color |
$strong-weight | This variable is used to define the weight of the strong. | variable | $weight-bold | 700 | font-weight |
$pre-font-size | This variable is used to define the font-size of the pre | size | 0.875em | ||
$pre-padding | This variable is used to define the padding of the pre. | size | 1.25rem 1.5rem | ||
$pre-code-font-size | This variable is used to define the font size of the pre. | size | 1em |
Example 1: In the below code, we will make use of the above variables to demonstrate the use of Bulma UI variables.
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 = "font-size:40px;" > w3wiki </ h1 > < h3 class = "subtitle" > A computer science portal for Beginner </ h3 > </ center > </ body > </ html > |
SCSS Code:
$title-size: 70px; $title-color: green; .title { color: $title-color; }
Compiled Code:
.title { color: green; }
Output:
Example 2: In the below code, we will make use of the above variables to demonstrate the use of Bulma UI variables.
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" > w3wiki </ h1 > < h3 class = "subtitle" > A computer science portal for Beginner </ h3 > </ center > </ body > </ html > |
SCSS Code:
$title-size: 60px; $title-color:green; .title { font-size:$title-size; color:$title-color; }
Compiled CSS Code:
.title { font-size: 60px; color: green; }
Output: