Document how to use bulma media query mixins

[benjaminapetersen]

This is about the Docs.

Overview of the problem

This is about the Bulma Docs
I'm using Bulma version [0.7.1]

Description

Bulma's media query mixins could be useful for styling custom components while using Bulma. It would be helpful to document this feature (ideally with side-by-side sass/scss examples).

Thx!

[benjaminapetersen]

More or less bubbling something like this up to the docs:

// sass/scss
.some-responsive-thing {
  border: 1px dashed #990000;
  @include until($desktop) {
    border-bottom: 1px solid green;
  }

  @include from($tablet) {
    border-left: 1px solid yellow;
  }

  @include tablet {
    border-top: 2px solid orange;
  }
  @include widescreen-only {
    border-right: 2px solid blue;
  }
}

// output

.some-responsive-thing {
  border: 1px dashed #990000; }
  @media screen and (max-width: 1087px) {
    .some-responsive-thing {
      border-bottom: 1px solid green; } }
  @media screen and (min-width: 769px) {
    .some-responsive-thing {
      border-left: 1px solid yellow; } }
  @media screen and (min-width: 769px), print {
    .some-responsive-thing {
      border-top: 2px solid orange; } }
  @media screen and (min-width: 1024px) and (max-width: 1167px) {
    .some-responsive-thing {
      border-right: 2px solid blue; } }

[jgthms]

Bulma has shortcuts for that. Here's the source code:

=desktop
  @media screen and (min-width: $desktop)
    @content

So it's used as:

+desktop
  .is-invisible-desktop
    visibility: hidden !important

[benjaminapetersen]

RIght right, this issue was to document, as in, make it part of the official docs.

There are a number of good tools & utils like this that could be surfaced into the docs to be consumed by users of Bulma.

[RossMerriam]

@benjaminapetersen it's documented here. I had a bit of trouble finding it myself.

[benjaminapetersen]

I'm really getting at the use of from($var) and until($var), more the utility functions, not just the variables. This kind of thing:

@include from($tablet) until($widescreen) {
    border-left: 1px solid yellow;
  }

Is quite powerful & useful.

[jgthms]

@benjaminapetersen

I see. I guess it could be included the docs.

It could end up in “mixins” or “responsiveness”.

Not sure how to word it though.

[benjaminapetersen]

RIght, looks like you have a set of pretty handy tools there. All these little bits help document how useful Bulma is. The only downside is surfacing as public API in docs, but if the helpers are stable, seems a good thing.

[benjaminapetersen]

I'm still working through the source, but betting you have other nuggets buried in there that would be great to expose.

[frederikhors]

@include from($tablet) until($widescreen) {
  border-left: 1px solid yellow;
}

This is not working in my .scss file.

Why?

It says: [scss] semi-colon expected

[jgthms]

You can't combine mixins like this.

[ekntrtmz]

Sorry to reopen this, but I have problems using the Bulma shortcut for this.
How do I have to use +desktop with the following syntax so that it works?

+desktop
    .section {
      padding: 3rem 0
    }

[jdriviere]

@ekntrtmz:
Have you tried removing the curly braces ({})? Bulma is using .sass rather than .scss. Therefore, you should have a code similar to this:

+desktop
    .section
         padding: 3rem 0

Make sure you use tabs or spaces -- no curly braces needed.

Hopefully it works for you. 😄

[mandaputtra]

Hello so I use sass here, Is there any ways to use it?

or just type +mobile then the break points are automatically applied?

[jdriviere]

@mandaputtra .sass is essentially like .scss but less verbose (I hope I use the term right), meaning no semi-colon (;) at the end of the syntax, and no curly-braces ({ }) for the definition of your element. For instance, instead of this in .scss:

.container {
    width: 100%;
    max-width: 1200px;
}

In .sass you would write it as:

.container
    width: 100%
    max-width: 1200px

You can go here to have more info on how to use .sass. All you have to do is toggle between the Sass and SCSS options to see the difference in implementation.

The +mobile is an invocation to a mixin, but in the .sass. In .scss format, you'd write it as:

@include desktop {
    // Some content here...
}

In .sass, you'd write it as:

+desktop
    // Some content here...

These breakpoints have to have some content, because of the way they are setup:

=desktop
    @content

The @content means that, whenever you use the +desktop mixin, you will also put "contents" in it.

I hope it makes sense, and that it helps. 😄

[mandaputtra]

@jdriviere Hmm, i guess my question are not clear sorry about that.

I mean if I set up my workflow maybe example with vue-cli and import bulma globaly that mean I by default can use those mixin?

like

+mobile 
+desktop 
+table
```

[jdriviere]

@mandaputtra I'm not too familiar with Vue, unfortunately. I'm sorry. I hope someone can answer your question soon, though... 😞

[ekntrtmz]

Ok I got it.

@jdriviere When I removed the brackets it gave me a syntax error on scss.

This is why I had to rename/change my file extension from .scss to .sass.

@mandaputtra I am working with the vue-webpack setup. The above procedure did the job for me. Do not forget to change syntax and document reference within main.js ;)

[jdriviere]

@ekntrtmz Did it work when you changed the extension from .scss to .sass? My apologies for failing to mention that. I must have thought the file was already a .sass.

[ekntrtmz]

@jdriviere Yes it works now. It was not clear to me that .scss and .sass are actually two different things. I always thought it is somehow the same thing :D

[avxkim]

Please, update docs for scss version.

[wrabit]

I'd take a guess and say most people are using and are used to the the scss way, docs should be clear for the scss people out there.

[guillenotfound]

I've created some functional CSS to speed up development like this:

@import 'bulma/sass/utilities/mixins';

@include touch {
    .flex-row-touch {
        flex-direction: row;
    }

    .flex-col-touch {
        flex-direction: column;
    }
}

@include desktop {
    .flex-row-desktop {
        flex-direction: row;
    }

    .flex-col-desktop {
        flex-direction: column;
    }
}

The problem is that this will not only generate those classes but some extra css (it will compile the whole mixins.sass file) and this will lead into code duplication, in my case it will break modals position unless I import previous file before importing bulma in order to let bulma override generated code...

Here is the generated code:

.delete, .modal-close, .is-unselectable, .button, .file, .breadcrumb, .pagination-previous,
.pagination-next,
.pagination-link,
.pagination-ellipsis, .tabs {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

.select:not(.is-multiple):not(.is-loading)::after, .navbar-link:not(.is-arrowless)::after {
  border: 3px solid transparent;
  border-radius: 2px;
  border-right: 0;
  border-top: 0;
  content: " ";
  display: block;
  height: 0.625em;
  margin-top: -0.4375em;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: rotate(-45deg);
  transform-origin: center;
  width: 0.625em; }

.box:not(:last-child), .content:not(:last-child), .notification:not(:last-child), .progress:not(:last-child), .table:not(:last-child), .table-container:not(:last-child), .title:not(:last-child),
.subtitle:not(:last-child), .block:not(:last-child), .highlight:not(:last-child), .breadcrumb:not(:last-child), .level:not(:last-child), .list:not(:last-child), .message:not(:last-child), .tabs:not(:last-child) {
  margin-bottom: 1.5rem; }

.delete, .modal-close {
  -moz-appearance: none;
  -webkit-appearance: none;
  background-color: rgba(10, 10, 10, 0.2);
  border: none;
  border-radius: 290486px;
  cursor: pointer;
  pointer-events: auto;
  display: inline-block;
  flex-grow: 0;
  flex-shrink: 0;
  font-size: 0;
  height: 20px;
  max-height: 20px;
  max-width: 20px;
  min-height: 20px;
  min-width: 20px;
  outline: none;
  position: relative;
  vertical-align: top;
  width: 20px; }
  .delete::before, .modal-close::before, .delete::after, .modal-close::after {
    background-color: white;
    content: "";
    display: block;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
    transform-origin: center center; }
  .delete::before, .modal-close::before {
    height: 2px;
    width: 50%; }
  .delete::after, .modal-close::after {
    height: 50%;
    width: 2px; }
  .delete:hover, .modal-close:hover, .delete:focus, .modal-close:focus {
    background-color: rgba(10, 10, 10, 0.3); }
  .delete:active, .modal-close:active {
    background-color: rgba(10, 10, 10, 0.4); }
  .is-small.delete, .is-small.modal-close {
    height: 16px;
    max-height: 16px;
    max-width: 16px;
    min-height: 16px;
    min-width: 16px;
    width: 16px; }
  .is-medium.delete, .is-medium.modal-close {
    height: 24px;
    max-height: 24px;
    max-width: 24px;
    min-height: 24px;
    min-width: 24px;
    width: 24px; }
  .is-large.delete, .is-large.modal-close {
    height: 32px;
    max-height: 32px;
    max-width: 32px;
    min-height: 32px;
    min-width: 32px;
    width: 32px; }

.button.is-loading::after, .select.is-loading::after, .control.is-loading::after, .loader {
  animation: spinAround 500ms infinite linear;
  border: 2px solid #dbdbdb;
  border-radius: 290486px;
  border-right-color: transparent;
  border-top-color: transparent;
  content: "";
  display: block;
  height: 1em;
  position: relative;
  width: 1em; }

.is-overlay, .image.is-square img, .image.is-1by1 img, .image.is-5by4 img, .image.is-4by3 img, .image.is-3by2 img, .image.is-5by3 img, .image.is-16by9 img, .image.is-2by1 img, .image.is-3by1 img, .image.is-4by5 img, .image.is-3by4 img, .image.is-2by3 img, .image.is-3by5 img, .image.is-9by16 img, .image.is-1by2 img, .image.is-1by3 img, .modal, .modal-background, .hero-video {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0; }

@media screen and (max-width: 1087px) {
  .flex-row-touch {
    flex-direction: row; }
  .flex-col-touch {
    flex-direction: column; } }

@media screen and (min-width: 1088px) {
  .flex-row-desktop {
    flex-direction: row; }
  .flex-col-desktop {
    flex-direction: column; } }

Here is what I expected:

@media screen and (max-width: 1087px) {
  .flex-row-touch {
    flex-direction: row; }
  .flex-col-touch {
    flex-direction: column; } }

@media screen and (min-width: 1088px) {
  .flex-row-desktop {
    flex-direction: row; }
  .flex-col-desktop {
    flex-direction: column; } }

EDIT:
Manage to fixed it by removing mixins import and importing the helper file after importing bulma/bulma so the mixins are available :-)

[codeofsumit]

This definitely needs some examples in the documentation. I never used this powerful feature because I simply didn't understand what to make of =desktop in a .scss file.
I was searching for how to use sass mixins which resulted in confusing results. A simply example would go a long way

[curiouscrusher]

Found this thread today after having looked through the docs for explanation on the responsive mixins and not finding it. Turns out it is there, but it's under the Responsiveness tab rather than the Mixins.

I'd suggest adding the responsive mixins on the Mixins tab as well to simplify finding them for first timers and since technically the Mixins list is incomplete without them. Understanding the differences between sass & scss mixins should be more up to individuals and not necessarily the responsibility of Bulma to educate.

Just my $.02

[mkstix6]

I think I agree with @benjaminapetersen.

The responsive mixins list would benefit from adding the =until($device) mixin (found here). It's quite handy.

The =from($device) mixin can be useful too if, for whatever reason, it's preferable to use a variable. I concede that this one is achievable, more often than not, by using the documented breakpoints.

[curiouscrusher]

...
The responsive mixins list would benefit from adding the =until($device) mixin (found here). It's quite handy.

The =from($device) mixin can be useful too if, for whatever reason, it's preferable to use a variable.
...

I definitely agree as well @mkstix6. Perhaps what this is boiling down to is the Responsiveness & Mixins tabs in the docs would benefit from a refresh with some additional mixins and examples added.
I do still feel that the focus should be more on listing out the mixins and how they can be utilized in their entirety rather than showcasing the differences between sass & scss. That just doesn't seem like something that should be the responsibility of a framework.

At the end of the day it really isn't a huge problem though, even a couple hours using Bulma can be enough to get familiar with the more intricate workings. The from & until mixins are easily achieved in one line with vanilla scss + Bulma variables if you didn't find/understand them in the docs. That said the mixin version certainly is nice to have.

E.G. @media (min-width: $tablet) {...} or @media (max-width: $desktop) {...}

Edit: Fixed typo

[samchasan]

Does anyone have a simple working example yet?? I can't find one that works for my code anywhere. Using +mobile in css doesn't work, nor does using @include. All I want is to recognize when the screen is mobile so I can change the width of the avatar image to 25% from fixed width. Seems like it should be simple!! lol

Your help is much appreciated!

[curiouscrusher]

@samchasan You'll need to be using SASS/LESS/SCSS to make use of mixins as it's not feature native to CSS. After that it's just a matter of including the mixins you want as needed, E.G.

myScssFile.scss

#avatar {
    ...
    width 150px;

    @include until($tablet) {
        ...
        width: 25%;
    }
}

If you want to dig into how the responsive mixins work I'd suggest taking a look at the source here

[samchasan]

@curiouscrusher oooh got it thanks! I found this walk through finally in the docs that outlined the specific steps to get the scss file set up properly. And that suggestion helped clarify that's what I needed to do. So thanks again :)

[thomasabishop]

Where are we on this? It's not obvious from the docs how to use your media queries. You cite the variables but don't give examples of implementation. It's not good that we should have to guess. Bear in mind frameworks like these are often used by beginner developers so you shouldn't assume they will be au fait.

For instance this doesn't work and throws a SCSS error:

.class { @media screen and (min-width: $desktop) { max-width: 800px; } }

[guillenotfound]

@thomasabishop it should be like:

@import  "<mixins_path>"

.class {
  @include desktop {
    max-width: 800px;
  }
}

If you have already imported bulma main mixins will be available and won't need to re-import mixins.

[mieky]

Can't but agree with the original sentiment, as I found it very quite confusing to get started due to lack of examples and having used the .scss syntax instead of .sass.

Looking at the Responsiveness page, I was simultaneously impressed by the substance of the contents, and appalled by the lack of examples. I believe a few simple "this is how you apply them" would go a long way!

[CharlieBrownCharacter]

If you would like to have a style applied between x pixels and y pixels you can simply do:

@include from(1000px) {
    @include until(1215px) {
        .navbar-item {  background-color: red;  }
     }
  }

[meherhowji]

I am not sure but I have imported the mixin in my scss file but I cant seem to be able to use any of the following.

@include from(desktop) {
    @include until(widescreen) {
        // ...
     }
  }

@include until-desktop { //... }

// this works though 
@include desktop { //... }

I read the mixins.sass and understand basics there but getting a simple media query to work is really painful.

I agree with the OP that there needs to a simple section dedicated to this in documentation.

[weirdyang]

// this import is needed to make the mixins (e.g. desktop-only) available 
@use "~bulma/sass/utilities/mixins.sass" as mixins;
// this import is need to make variables like $tablet available
@import "~bulma/sass/utilities/derived-variables.sass"; 

.scroll-viewport {
    border-radius: 0.25em;
    height: calc(85vh);

  @include mixins.until($tablet)  {
    max-width: 12rem;
  }

}

Ok so to use both variables and the mixins, you need to import both sass files.
To use the variables (e.g. $tablet, $desktop):
@import "~bulma/sass/utilities/derived-variables.sass";

To use the mixins (e.g. desktop-only, until($dimension):
@use "~bulma/sass/utilities/mixins.sass" as mixins;

Hope that helps

Edit: if you import the mixins sass file, you will not need to import the derived variables file.

[karloscarweber]

This definitely needs some examples in the documentation. I never used this powerful feature because I simply didn't understand what to make of =desktop in a .scss file.
I was searching for how to use sass mixins which resulted in confusing results. A simply example would go a long way

Can we add some examples in the documentation? This is a big problem with an easy fix. some more documentation at the point of reference.

I will write the documentation, It will be fun. It's just incredibly frustrating to read the docs and still not understand how to get started.

[dboekhout]

This is stil an issue. I have no idea how to properly use mixins together with my SCSS styles.

@import "~bulma/sass/utilities/mixins.sass";
.hero-body {
  @include until($touch) {
      background-image: none;
  }
  @include from($desktop) {
      background-image: url(../images/header-img.jpg);
      background-position: center 70%;
      background-size: cover;
      height: 100%;
      width: 100%;
  }
}

This gives me an error for $touch being undefined, even though it's defined in bulma's mixins.sass.

I have also tried using @media screen and (max-width: $touch) same error.
Importing @import "~bulma/sass/utilities/derived-variables.sass"; like @weirdyang suggested didn't change anything as for example $tablet already worked with just importing mixins.

How can I properly have all the breakpoint variables ($touch, $desktop, $tablet, $mobile etc.) available to me in my own SCSS files or use things like +desktop, +touch?

[meherhowji]

Funny thing is that this issue was opened on Apr 2018 and its been 3 years now. The documentation still doesn't have this 😄

[weirdyang]

This is stil an issue. I have no idea how to properly use mixins together with my SCSS styles.

@import "~bulma/sass/utilities/mixins.sass";

.hero-body {

  @include until($touch) {

      background-image: none;

  }

  @include from($desktop) {

      background-image: url(../images/header-img.jpg);

      background-position: center 70%;

      background-size: cover;

      height: 100%;

      width: 100%;

  }

}

This gives me an error for $touch being undefined, even though it's defined in bulma's mixins.sass.

I have also tried using @media screen and (max-width: $touch) same error.

Importing @import "~bulma/sass/utilities/derived-variables.sass"; like @weirdyang suggested didn't change anything as for example $tablet already worked with just importing mixins.

How can I properly have all the breakpoint variables ($touch, $desktop, $tablet, $mobile etc.) available to me in my own SCSS files or use things like +desktop, +touch?

From the mixins.sass, touch is a media query.

=touch
  @media screen and (max-width: $desktop - 1px)
@content

Import mixins.sass and try using it like

@include touch { ... }