Bulma Panel Variables
Last Updated :
26 Jul, 2022
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:
- panel-heading: It is the first child of the panel and is responsible for styling panel heading.
- panel-tabs: It is responsible for creating panel tabs.
- panel-block: Panel-block is a kind of container that can contain other elements like input controls, buttons, icons, forms, etc.
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.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<title>Hello Bulma!</title>
<link rel="stylesheet" href=
<link rel="stylesheet" href="style.css">
<script src=
</script>
</head>
<body>
<center>
<section>
<div>
<h1 class="title has-text-centered has-text-success">
GeeksforGeeks
</h1>
<h2>A computer science portal for geeks</h2>
</div>
</section>
<br>
<div class='container'>
<div class="columns is-centered">
<div class="column is-5">
<nav class="panel">
<p class="panel-heading">
<span class='title is-4'>Movies</span>
</p>
<div class="panel-block">
<p class="control has-icons-left">
<input class="input" type="text"
placeholder="Search">
<span class="icon is-left">
<i class="fas fa-search"
aria-hidden="true"></i>
</span>
</p>
</div>
<p class="panel-tabs">
<a class="is-active">All</a>
<a>Romentic</a>
<a>Comedy</a>
<a>Action</a>
<a>Drama</a>
</p>
<a class="panel-block is-active">
M.S.Dhoni The Untold story
</a>
<a class="panel-block">
Rabta
</a>
<a class="panel-block">
Kabir Singh
</a>
<a class="panel-block">
URI The Surgical Strike
</a>
<a class="panel-block">
P.K.
</a>
<a class="panel-block">
Raja Babu
</a>
<a class="panel-block">
Kai Po Che
</a>
</nav>
</div>
</div>
</div>
</center>
</body>
</html>
|
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.
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">
<script src=
</script>
<style>
body{
margin-left:10px;
margin-right:10px;
}
</style>
</head>
<body>
<center>
<section>
<div>
<h1 class="title has-text-centered has-text-success">
GeeksforGeeks
</h1>
<h2>A computer science portal for geeks</h2>
</div>
</section>
<br>
<div class='container'>
<div class="columns is-centered">
<div class="column is-5">
<nav class="panel">
<p class="panel-heading">
<span class='title is-4'>Series</span>
</p>
<div class="panel-block">
<p class="control has-icons-left">
<input class="input"
type="text" placeholder="Search">
<span class="icon is-left">
<i class="fas fa-search"
aria-hidden="true"></i>
</span>
</p>
</div>
<p class="panel-tabs">
<a class="is-active">All</a>
<a>Education</a>
<a>Comedy</a>
<a>Action</a>
<a>Drama</a>
</p>
<a class="panel-block is-active">
Aspirants
</a>
<a class="panel-block">
Gullak
</a>
<a class="panel-block">
Panchayat
</a>
<a class="panel-block">
Kota Factory
</a>
</nav>
</div>
</div>
</div>
</center>
</body>
</html>
|
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:
Reference: https://bulma.io/documentation/components/panel/
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...