Bulma Responsive Mixins
Last Updated :
27 Oct, 2022
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 Responsive Mixins. Bulma Responsive Mixins are the mixins that help the users to define different styles for each screen size. Bulma has various different types of Responsive mixins as given below:
- from() and until() mixins
- Named mixins
from() and until() mixins: Bulma uses these responsive mixins to target devices with a screen narrower than, wider than, or equal to the breakpoint.
1. from(): The from() mixin is used to target devices with a screen wider than or equal to the breakpoint and has a single parameter that sets the screen width from which the styles it contains will be applied.
For using mixins, there is no specific predefined class given by Bulma rather we create our own classes and style them using SASS mixins.
Syntax:
.bulma - [CSS Mixin Name] - mixin{
@include[CSS Mixin Name]($breakpoint);
}
Parameters: Following are the parameters that are accepted by the above mixin.
- &breakpoint: This parameter is used to set the screen width from which the styles it contains will be applied.
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: Below example illustrates the Bulma Responsive from() mixin.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
<script src=
</script>
<link rel="stylesheet" href="styles.css">
</head>
<body class="content container has-text-centered">
<div>
<p class="title is-1 text-success">
GeekforGeeks
</p>
<p class="subtitle is-3">
Responsive Mixins
</p>
</div>
<div>
<p class="bulma-from-mixin">
GeeksforGeeks: A computer science portal
</p>
</div>
</body>
</html>
|
SCSS file:
CSS
@mixin from($device) {
@media screen and (min-width: $device) {
@content
}
}
.text-success {
color: darkgreen;
}
.bulma-from-mixin {
background: red;
@include from(800px){
background: green;
}
}
|
CSS code:
CSS
.text-success {
color:darkgreen;
}
.bulma-from-mixin {
background: red;
}
@media screen and (min-width: 800px) {
.bulma-from-mixin {
background: green;
}
}
|
Output:
2. until(): The until() mixin is used to target devices with a screen narrower than the breakpoint and has a single parameter that sets the screen width until which the styles it contains will be applied. There is a 1px offset.
For using mixins, there is no specific predefined class given by Bulma rather we create our own classes and style them using SASS mixins.
Syntax:
.bulma-[CSS Mixin Name]-mixin{
@include [CSS Mixin Name]($breakpoint);
}
Parameters: Following are the parameters that are accepted by the above mixin:
- &breakpoint: This parameter is used to set the screen width until which the styles it contains will be applied.
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: Below example illustrates the Bulma Responsive until() mixin.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
<script src=
</script>
<link rel="stylesheet" href="styles.css">
</head>
<body class="content container has-text-centered">
<div>
<p class="title is-1 text-success">
GeekforGeeks
</p>
<p class="subtitle is-3">
Responsive Mixins
</p>
</div>
<div>
<p class="bulma-until-mixin">
GeeksforGeeks: A computer science portal
</p>
</div>
</body>
</html>
|
SCSS file:
CSS
@mixin until($device) {
@media screen and (max-width: $device - 1px) {
@content
}
}
.text-success {
color: darkgreen;
}
.bulma-until-mixin {
background: red;
@include until(800px) {
background: green;
}
}
|
CSS code:
CSS
.text-success {
color:darkgreen;
}
.bulma-until-mixin {
background: red;
}
@media screen and (max-width: 799px) {
.bulma-until-mixin {
background: green;
}
}
|
Output:
Named Mixins: The Responsive mixin provides 11 named mixins. These mixins are dependent on 4 breakpoints and support 5 screen sizes and are named after these screen sizes and breakpoints. The following are the named mixins:
- @include mobile {}
- @include tablet {}
- @include desktop {}
- @include widescreen {}
- @include fullhd {}
- @include tablet-only {}
- @include desktop-only {}
- @include widescreen-only {}
- @include touch {}
- @include until-widescreen {}
- @include until {}
For using mixins, there is no specific predefined class given by Bulma rather we create our own classes and style them using SASS mixins.
Syntax:
.bulma-[CSS Mixin Name]-mixin{
@include [CSS Mixin Name];
}
Parameters: Above mixins do not accept any parameters.
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: Below example illustrates the Bulma Responsive Named mixins.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
<script src=
</script>
<link rel="stylesheet" href="styles.css">
</head>
<body class="content container has-text-centered">
<div>
<p class="title is-1 text-success">
GeekforGeeks
</p>
<p class="subtitle is-3">
Responsive Mixins
</p>
</div>
<div>
<p class="bulma-named-mixin">
GeeksforGeeks:A computer science portal
</p>
</div>
</body>
</html>
|
SCSS file:
CSS
$gap: 32px;
$tablet: 769px;
$desktop: 960px + (2 * $gap);
$widescreen: 1152px + (2 * $gap);
$fullhd: 1344px + (2 * $gap);
$widescreen-enabled: true;
$fullhd-enabled: true;
@mixin mobile {
@media screen and (max-width: $tablet - 1px) {
@content
}
}
@mixin tablet {
@media screen and (min-width: $tablet), print {
@content
}
}
@mixin desktop {
@media screen and (min-width: $desktop) {
@content
}
}
@mixin widescreen {
@if $widescreen-enabled {
@media screen and (min-width: $widescreen) {
@content
}
}
}
@mixin fullhd {
@if $fullhd-enabled {
@media screen and (min-width: $fullhd) {
@content
}
}
}
.text-success {
color: darkgreen;
}
.bulma-named-mixin {
color: red;
@include mobile {
background: lightgreen;
}
@include tablet {
background: green;
}
@include desktop {
background: darkgreen;
}
@include widescreen {
background: lightseagreen;
}
@include fullhd {
background: darkolivegreen;
}
}
|
CSS code:
CSS
.text-success {
color:darkgreen;
}
.bulma-named-mixin {
color:red;
}
@media screen and (max-width: 768px) {
.bulma-named-mixin {
background:lightgreen;
}
}
@media screen and (min-width: 769px), print {
.bulma-named-mixin {
background:green;
}
}
@media screen and (min-width: 1024px) {
.bulma-named-mixin {
background:darkgreen;
}
}
@media screen and (min-width: 1216px) {
.bulma-named-mixin {
background: lightseagreen;
}
}
@media screen and (min-width: 1408px) {
.bulma-named-mixin {
background: darkolivegreen;
}
}
|
Output:
Reference: https://bulma.io/documentation/utilities/responsive-mixins/
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...