Bulma Element Mixins

Last Updated : 06 Oct, 2022

In this article, we will know about Bulma Element Mixins. Bulma Element Mixins are the mixins that help the users to create visual HTML elements.

Bulma uses Sass mixins to create the CSS output and they are mainly used within the context of the Bulma framework. Bulma has various different types of CSS mixins as given below;

Arrow Mixins: These CSS mixins are used to create a down-facing arrow.
Hamburger Mixins: These CSS mixins are used to create a 16x16px set of 3 horizontal bars grouped within the square.
Delete Mixins: These CSS mixins are used to absolutely position an element with fixed dimensions at the centre of its closest positioned parent class.
Loader Mixins: These CSS mixins are used to create a spinner in the form circle.
Font Awesome container Mixins: These CSS mixins are used to create a square inline-block element that is used for containing an icon, or group of icons of any type or category.

Syntax:

.bulma-[Element  Mixin Name]-mixin {
      @include [Element  Mixin Name](params);
}

Note: You must know the implementation of SASS mixins for the below examples. Please see the pre-requisite given on the link and then implement the below code.

Example 1: Below example illustrates the Bulma Font Awesome Container in a single icon.

HTML

<!DOCTYPE html> 
<html lang="en"> 
    
<head> 
    <link rel="stylesheet" 
          href= 
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" /> 
    <script src= 
"https://use.fontawesome.com/releases/v5.15.4/js/all.js"> 
    </script> 
    <link rel="stylesheet"
          href="gfgstyles.css"> 
</head> 
    
<body class="content container has-text-centered">  
    <div>  
        <h1 class="title is-1 has-text-success">  
              GeekforGeeks  
        </h1>  
        <h1 class="subtitle is-3">  
              Bulma Font Awesome Container  
        </h1>  
    </div>  
    <div> 
        <span class="bulma-fa-mixin border">  
            <i class="fab fa-github"></i>  
        </span>  
        <span class="bulma-fa-mixin border">  
            <i class="fab fa-facebook"></i>  
        </span>  
        <span class="bulma-fa-mixin border">  
            <i class="fab fa-linkedin"></i>  
        </span>  
        <span class="bulma-fa-mixin border">  
            <i class="fab fa-instagram"></i>  
        </span>  
    </div> 
</body>  
    
</html>

CSS

@mixin fa($size, $dimensions) {  
    display: inline-block;  
    font-size: $size;  
    color: #008521;  
    padding: 2px 2px 2px 2px;  
    text-align: center;   
    width: $dimensions;  
    height: $dimensions;  
}  
    
.bulma-fa-mixin {  
    @include fa(3rem, 5rem);  
    background-color: white; 
} 
  
.border { 
    border: 2px solid black; 
}

Output:

Example 2: Below example illustrate the loader in Bulma.

HTML

<!DOCTYPE html> 
<html lang="en"> 
    
<head> 
    <link rel="stylesheet" 
          href= 
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" /> 
    <script src= 
"https://use.fontawesome.com/releases/v5.15.4/js/all.js"> 
    </script> 
    <link rel="stylesheet"
          href="gfgstyles.css"> 
</head> 
    
<body class="content container has-text-centered">  
    <div>  
        <h1 class="title is-1 has-text-success">  
              GeekforGeeks  
        </h1>  
        <h1 class="subtitle is-3">  
              Bulma Loader 
        </h1>  
    </div>  
    <div> 
        <span class="bulma-mixin-center bulma-loader-mixin "> 
        </span>  
    </div> 
</body>  
    
</html>

CSS

@mixin loader() { 
    animation: spinAround .8s infinite linear; 
    border: 2px solid #010101; 
    border-radius: 9999px; 
    border-right-color: transparent; 
    border-top-color: transparent; 
    display: block; 
    height: 2em; 
    position: relative; 
    width: 2em; 
} 
    
.bulma-loader-mixin { 
    @include loader(); 
} 
  
@mixin center() { 
    position: absolute; 
    left: 50%; 
    top: 150%; 
} 
  
.bulma-mixin-center { 
    @include center(); 
}