What is Bulma Direction Mixins?

In this article, we will learn Bulma Direction Mixins,This free Bulma tutorial for complete beginners will help you learn Bulma from scratch.

Bulma Direction Mixins - ❤️Bulma Tutorials In 2024

Q: How to use Bulma Direction Mixins in Bulma?

In this article, we will know about Bulma Direction Mixins

In this article, we will know about Bulma Direction Mixins. Bulma Direction Mixins are the mixins that help the users to add left or right alignment to the HTML element.

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 Direction mixins as given below:

Left-to-right and Right-to-left Mixins: These Direction mixins are used to create a down-facing arrow.
LTR Position: These Direction mixins are used to quickly switch between left and right CSS properties when dealing with positioning elements.
LTR Property: These Direction mixins are used not only to quickly switch between left and right CSS properties. But also allows users to set the positioning CSS property.

Syntax:

.bulma-[Direction  Mixin Name]-mixin {
     @include [Direction  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 Directions Mixins.

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="css/gfgstyles.css"> 
</head> 
    
<body class="content container has-text-centered"> 
    <div> 
        <h1 class="title is-1 has-text-success"> 
              GeekforBeginner 
        </h1> 
        <h1 class="subtitle">Bulma Direction Mixins</h1> 
    </div> 
    
    <div> 
          <span class="bulma-ltr-rtl-mixin">Geek1</span> 
          <span class="bulma-ltr-rtl-mixin">Geek2</span> 
          <span class="bulma-ltr-rtl-mixin">Geek3</span> 
    </div> 
</body> 
    
</html>

CSS

$rtl: false; 
$ltr: true; 
  
@mixin ltr() { 
    @if not $rtl { 
        @content; 
    } 
} 
  
@mixin rtl() { 
    @if $rtl { 
        @content; 
    } 
} 
  
.bulma-ltr-rtl-mixin { 
    background-color: lightgreen; 
    padding: 0.5em 1em; 
    border: 1px solid seagreen; 
    margin-right: -1px; 
  
    &:first-child { 
        @include ltr { 
            border-bottom-left-radius: 0.5em; 
            border-top-left-radius: 0.5em; 
        } 
  
        @include rtl { 
            border-bottom-right-radius: 0.5em; 
            border-top-right-radius: 0.5em; 
        } 
    } 
  
    &:last-child { 
        @include ltr { 
            border-bottom-right-radius: 0.5em; 
            border-top-right-radius: 0.5em; 
        } 
  
        @include rtl { 
            border-bottom-left-radius: 0.5em; 
            border-top-left-radius: 0.5em; 
        } 
    } 
}

Output:

Example 2: Below is another example to illustrate the Bulma Directions Mixins.

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="css/gfgstyles.css"> 
</head> 
  
<body class="content container has-text-centered"> 
    <div> 
        <h1 class="title is-1 has-text-success"> 
            GeekforBeginner 
        </h1> 
        <h1 class="subtitle"> 
            Bulma Direction Mixins 
        </h1> 
    </div> 
  
    <div class="bulma-ltr-position-mixin-parent"> 
        <img class="bulma-ltr-position-mixin" 
            height="120" width="120"
            src= 
"https://media.w3wiki.net/wp-content/cdn-uploads/20190710102234/download3.png"> 
        <p> 
            w3wiki | A computer  
            science portal for Beginner. 
        </p> 
    </div> 
</body> 
  
</html>

CSS

$rtl: false; 
$ltr: true; 
  
@mixin ltr-position($spacing, $right: true) { 
    $normal: if($right, "right", "left"); 
    $opposite: if($right, "left", "right"); 
  
    @if $rtl { 
        #{$opposite}: $spacing; 
    } 
  
    @else { 
        #{$normal}: $spacing; 
    } 
} 
  
.bulma-ltr-position-mixin { 
    @include ltr-position(1rem, false); 
    border-radius: 0.25em; 
    position: absolute; 
    top: 1rem; 
}

Output: