Open In App

Bulma Form Control Mixins

Improve
Improve
Like Article
Like
Save
Share
Report

Bulma uses Sass mixins to create the CSS output and they are mainly used within the context of the Bulma framework.

In this article, we will know about Bulma Form Control Mixins. Bulma Form Control Mixins are the mixins that help the users to create buttons and form controls in Bulma. They are one of the essential parts of any framework. They comprise the following:

  • .button
  • .input
  • .select
  • .file-{fl}  -> {fl}={name, cta}
  • .pagination-{pl} -> {pl}={previous, next, link, ellipsis}

The control() mixin ensures consistency by providing a set of styles that are shared between all the above-defined form controls.

For using mixins, there is no specific class given by Bulma rather we create our own classes and style them using SASS mixins.

Syntax:  

.bulma-control-mixin {
     @include control;
}

Form Control Mixins features:

1. Sizes: Controls also have 3 more sizes other than normal size and they are as follows:

@include control-small;
@include control-medium;
@include control-large;

Syntax:

.bulma-control-mixin {
      &.is-small {
        @include control-small;
      }

      &.is-medium {
        @include control-medium;
      }

      &.is-large {
        @include control-large;
      }
}

2. Control placeholder: Control also exists as a Sass placeholder (%control)

Syntax:

.bulma-control-extend {
      @extend %control;
}

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 Form Control Mixins.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet" href=
    <script src=
    </script>
    <link rel="stylesheet" href="css/gfgstyles.css">
</head>
  
<body class="content container has-text-centered">
    <div>
        <p class="title is-1 has-text-success">
            GeekforGeeks
        </p>
        <p class="subtitle is-3">
            Bulma Form Control Mixins
        </p>
    </div>
  
    <div>
        <button class="bulma-control-mixin">
            Button Form Control
        </button>
    </div>
</body>
  
</html>


CSS




$control-radius: 10px;
$control-border-width: 1px;
  
$control-height: 2.5em;
$control-line-height: 1.5;
  
$control-padding-vertical: 
    calc(0.5em - #{$control-border-width});
$control-padding-horizontal: 
    calc(0.75em - #{$control-border-width});
  
@mixin control() {
    -moz-appearance: none;
    -webkit-appearance: none;
    align-items: center;
    border: $control-border-width solid transparent;
    border-radius: $control-radius;
    box-shadow: none;
    display: inline-flex;
    font-size: 18px;
    height: $control-height;
    justify-content: flex-start;
    line-height: $control-line-height;
    padding-bottom: $control-padding-vertical;
    padding-left: $control-padding-horizontal;
    padding-right: $control-padding-horizontal;
    padding-top: $control-padding-vertical;
    position: relative;
    vertical-align: top;
    margin: 10px;
}
  
.bulma-control-mixin {
    @include control;
    background: darkgreen;
    color: white;
}


Output:

 

Example 2: Below example illustrates the Bulma Form Control Mixins.

HTML




<!DOCTYPE html>
<html lang="en">
    
<head>
    <link rel="stylesheet" 
          href=
    <script src=
    </script>
    <link rel="stylesheet"
          href="css/gfgstyles.css">
</head>
    
<body class="content container has-text-centered">
    <div>
        <p class="title is-1 text-success">
              GeekforGeeks
        </p>
        <p class="subtitle is-3">
              Bulma Form Control Mixins
         </p>
    </div>
    
    <div>
        <button class="bulma-control-mixin is-small">
            Form Control Small
        </button>
        <button class="bulma-control-mixin">
            Form Control Normal
        </button>
        <button class="bulma-control-mixin is-medium">
            Form Control Medium
        </button>
        <button class="bulma-control-mixin is-large">
            Form Control Large
        </button>
    </div>
</body>
    
</html>


CSS




.text-success {
    color: darkgreen;
}
  
$control-radius: 10px;
$control-border-width: 1px;
  
$control-height: 2.5em;
$control-line-height: 1.5;
  
$control-padding-vertical: 
    calc(0.5em - #{$control-border-width});
$control-padding-horizontal: 
    calc(0.75em - #{$control-border-width});
  
@mixin control() {
    -moz-appearance: none;
    -webkit-appearance: none;
    align-items: center;
    border: $control-border-width solid transparent;
    border-radius: $control-radius;
    box-shadow: none;
    display: inline-flex;
    font-size: 18px;
    height: $control-height;
    justify-content: flex-start;
    line-height: $control-line-height;
    padding-bottom: $control-padding-vertical;
    padding-left: $control-padding-horizontal;
    padding-right: $control-padding-horizontal;
    padding-top: $control-padding-vertical;
    position: relative;
    vertical-align: top;
    margin: 10px;
}
  
@mixin control-small() {
    border-radius: 7px;
    font-size: 14px;
}
  
@mixin control-medium() {
    font-size: 22px;
}
  
@mixin control-large() {
    font-size: 28px;
}
  
.bulma-control-mixin {
    @include control;
    background: darkgreen;
    color: white;
}
  
.bulma-control-mixin {
    &.is-small {
        @include control-small;
    }
  
    &.is-medium {
        @include control-medium;
    }
  
    &.is-large {
        @include control-large;
    }
}


Output:

 

Reference: https://bulma.io/documentation/utilities/control-mixins/



Last Updated : 07 Oct, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads