Bulma Tags Variables
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 behavior.
The Bulma tag is a small element that is very useful to attach information to a block or other component.
Variable table:
| Variable-Name | Description | Type | Value | Computed Value | Computed Type |
|---|---|---|---|---|---|
| $tag-background-color | This variable is used to color the background of the tag. | variable | $background | hsl(0, 0%, 96%) | color |
| $tag-color | This variable is used to define the color of the tag. | variable | $text | hsl(0, 0%, 29%) | color |
| $tag-radius | This variable is used to define the radius of the tag. | variable | $radius | 4px | size |
| $tag-delete-margin | This variable is used to define the delete margin of the tag. | size | 1px | ||
| $tag-colors | This variable is used to define the colors of the tag | variable | $colors | Bulma colors | map |
Example 1: In the below code, we will make use of the above variable to demonstrate the use of tags.
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> <div class="tag"> Tag1 </div> </center> </body> </html> |
SCSS Code:
$tag-background-color: hsl(0, 0%, 96%);
.tag {
background-color: $tag-background-color;
}
Compiled CSS Code:
.tag {
background-color: whitesmoke;
}
Output:
Example 2: In the below code, we will make use of the above variable to demonstrate the use of tags.
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> <div class="tag"> GfG </div> </center> </body> </html> |
SCSS Code:
$tag-color: hsl(0, 0%, 29%);
div {
color:$tag-color;
}
Compiled CSS Code:
div {
color: #4a4a4a;
}
Output:
Reference: https://bulma.io/documentation/elements/tag/#variables
Please Login to comment...