 |
VOOZH | about |
|
VOOZH | about |
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.
The box element is simply a container with a shadow, a border, a radius, and some padding. We can use this in many places in our project design. It gives an interactive look to our project.
Variables:
| Name | Description | Type | Value | Computed Value | Computed Type |
|---|---|---|---|---|---|
| $box-color | It is used to provide color to the box. | variable | $text | hsl(0, 0%, 29%) | color |
| $box-background-color | It is used to provide background color to the box. | variable | $scheme-main | hsl(0, 0%, 100%) | color |
| $box-radius | It is used to define the radius of the box. | variable | $radius-large | 6px | size |
| $box-shadow | It is used to define the shadow of the box. | variable | $shadow | 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) | shadow |
| $box-padding | It is used to define the padding around the box. | size | 1.25rem | ||
| $box-link-hover-shadow | It is used to provide the shadow on the hover effect. | shadow | 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0 0 1px $link. | ||
| $box-link-active-shadow | It is used to provide shadows to the active links in the box. | shadow | inset 0 1px 2px rgba($scheme-invert, 0.2), 0 0 0 1px $link |
Example 1: This example creates a box container using Bulma and after that modifies the box using the variables.
SCSS Code:
$box-color:green;
.box{
color:$box-color;
}
Compiled CSS Code:
.box {
color: green;
}
Output:
Example 2: This example creates a box container using Bulma and after that modifies the box using the variables.
SCSS Code:
$box-background-color:green;
.box{
background-color:$box-background-color;
}
Compiled CSS Code:
.box {
background-color: green;
}
Output:
Reference: https://bulma.io/documentation/elements/box/
