 |
VOOZH | about |
|
VOOZH | about |
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. Another advantage with Bulma is that you simply need to have an understanding of HTML and CSS to implement this framework (Although knowing JavaScript can help the existing features according to your needs). Bulma also allows us to add our own CSS styling but it is advised to use an external stylesheet over inline styling.
The panel element is simply a container for compact controls. We can use this in many places in the design of the project. It gives an interactive user interface to the project. The panel component includes several other components that we have to add exclusively to design our content nicely.
Components Used:
Syntax:
$variable-name: property-value;
Table of variables with their type, value, computed value, and computed type are listed below:
| Name | Description | Type | Value | Computed Value | Computed Type |
|---|---|---|---|---|---|
| $panel-margin | This variable is used to provide spacing. | variable | $block-spacing | 1.5rem | size |
| $panel-item-border | This variable is used to define the border around an element. | size | 1px solid $border-light | ||
| $panel-radius | This variable is used to define the radius around the element. | variable | $radius-large | 6px | size |
| $panel-shadow | This variable is used to define shadow around the element. | variable | $shadow | 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) | shadow |
| $panel-heading-background-color | This variable is used to define the background color of the header. | variable | $border-light | hsl(0, 0%, 93%) | color |
| $panel-heading-color | This variable is used to define the background color of the header. | variable | $text-strong | hsl(0, 0%, 21%) | color |
| $panel-heading-line-height | This variable is used to define the height of the line. | unitless | 1.25 | ||
| $panel-heading-padding | This variable is used to provide spacing within the element. | size | 0.75em 1em | ||
| $panel-heading-radius | This variable is used to define the radius around the header. | variable | $radius | 4px | size |
| $panel-heading-size | This variable is used to define the size of the element. | size | 1.25em | ||
| $panel-heading-weight | This variable is used to define the weight of the header. | variable | $weight-bold | 700 | font-weight |
| $panel-tabs-font-size | This variable is used to define the size of the font. | size | 0.875em | ||
| $panel-tab-border-bottom | This variable is used to define the border at bottom of the tab. | size | 1px solid $border | ||
| $panel-tab-active-border-bottom-color | This variable is used to define the border in an active state. | variable | $link-active-border | hsl(0, 0%, 29%) | color |
| $panel-tab-active-color | This variable is used to define the color of the tab. | variable | $link-active | hsl(0, 0%, 21%) | color |
| $panel-list-item-color | This variable is used to define the color of the item. | variable | $text | hsl(0, 0%, 29%) | color |
| $panel-list-item-hover-color | This variable is used to define color when we hover over the item. | variable | $link | hsl(229, 53%, 53%) | color |
| $panel-block-color | This variable is used to define the color of the block. | variable | $text-strong | hsl(0, 0%, 21%) | color |
| $panel-block-hover-background-color | This variable is used to define the background color on hover. | variable | $background | hsl(0, 0%, 96%) | color |
| $panel-block-active-border-left-color | This variable is used to define the color on the left side of the border. | variable | $link | hsl(229, 53%, 53%) | color |
| $panel-block-active-color | This variable is used to define the color of the block with an active state. | variable | $link-active | hsl(0, 0%, 21%) | color |
| $panel-block-active-icon-color | This variable is used to provide icons to the panel. | variable | $link | hsl(229, 53%, 53%) | color |
| $panel-icon-color | This variable is used to define the color of the panel. | variable | $text-light | hsl(0, 0%, 48%) | color |
| $panel-colors | This variable is used to define the color of the panel. | variable | $colors | Bulma colors | map |
Example 1: In the below code, we will make use of the above variables to demonstrate the use of the panel in the webpage. The variable used in this case is $panel-block-active-color.
SCSS code:
$panel-block-active-color:green;
.panel-heading {
background-color:$panel-block-active-color;
}
Compiled CSS code:
.panel-heading {
background-color: green;
}
Output:
Example 2: In the below code we will make use of the above variables to demonstrate the use of the panel in the webpage. The variable used in this case is $panel-list-item-color.
SCSS code:
$panel-list-item-color:hsl(0, 0%, 29%);
.panel-block{
background-color:$panel-list-item-color;
}
Compiled CSS code:
.panel-block {
background-color: #4a4a4a;
}
Output:
