Skip to content
Related Articles

Related Articles

Bulma Panel Variables

View Discussion
Improve Article
Save Article
  • Last Updated : 26 Jul, 2022
View Discussion
Improve Article
Save Article

 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">        
     <!-- font-awesome cdn -->
    <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">        
         <!-- font-awesome cdn -->
         <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/


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!