Bootstrap style responsive helper utilities for Bulma

_bootstrap_bulma_helpers.scss

/* 
Start Bootstrap style responsive spacer helper

Utilities for spacing, text and float
*/


$spacer: 1rem !default;
$spacers: () !default;
$spacers: map-merge((
  0: 0,
  1: ($spacer * .25),
  2: ($spacer * .5),
  3: $spacer,
  4: ($spacer * 1.5),
  5: ($spacer * 3)
), $spacers);

$grid-breakpoints: (
  xs: 0,
  mobile: 576px, // Added because I felt there needs to be more control for smaller devices
  tablet: $tablet,
  desktop: $desktop,
  widescreen: $widescreen,
  hd: $fullhd
) !default;

@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
  $min: map-get($breakpoints, $name);
  @return if($min != 0, $min, null);
}

@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
  $min: breakpoint-min($name, $breakpoints);
  @if $min {
    @media (min-width: $min) {
      @content;
    }
  } @else {
    @content;
  }
}

@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
  @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
}

@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
  $n: index($breakpoint-names, $name);
  @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
}

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    @each $prop, $abbrev in (margin: m, padding: p) {
      @each $size, $length in $spacers {

        .is-#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; }
        .is-#{$abbrev}t#{$infix}-#{$size},
        .is-#{$abbrev}y#{$infix}-#{$size} {
          #{$prop}-top: $length !important;
        }
        .is-#{$abbrev}r#{$infix}-#{$size},
        .is-#{$abbrev}x#{$infix}-#{$size} {
          #{$prop}-right: $length !important;
        }
        .is-#{$abbrev}b#{$infix}-#{$size},
        .is-#{$abbrev}y#{$infix}-#{$size} {
          #{$prop}-bottom: $length !important;
        }
        .is-#{$abbrev}l#{$infix}-#{$size},
        .is-#{$abbrev}x#{$infix}-#{$size} {
          #{$prop}-left: $length !important;
        }
      }
    }

    // Some special margin utils
    .is-m#{$infix}-auto { margin: auto !important; }
    .is-mt#{$infix}-auto,
    .is-my#{$infix}-auto {
      margin-top: auto !important;
    }
    .is-mr#{$infix}-auto,
    .is-mx#{$infix}-auto {
      margin-right: auto !important;
    }
    .is-mb#{$infix}-auto,
    .is-my#{$infix}-auto {
      margin-bottom: auto !important;
    }
    .is-ml#{$infix}-auto,
    .is-mx#{$infix}-auto {
      margin-left: auto !important;
    }
  }
}

/**
 * Text
 */
@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .has-text#{$infix}-left   { text-align: left !important; }
    .has-text#{$infix}-right  { text-align: right !important; }
    .has-text#{$infix}-center { text-align: center !important; }
  }
}

/**
 * Float
 */
@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .is-float#{$infix}-left  { float: left !important; }
    .is-float#{$infix}-right { float: right !important; }
    .is-float#{$infix}-none  { float: none !important; }
  }
}

Thanks for writing this. I just have one question. Where did you define this $tablet?

@webmasterdevlin $tablet is predefined in Bulma along with $desktop etc. (assuming you are importing Bulma's scss)

Thanks for writing this. Awesome.

I have trouble using the breakpoints right:
You write is is boostrap-oriented, so in Bootstrap it is supposed to be: {property}{sides}-{breakpoint}-{size}

Ported to BULMA means: is-{property}{sides}-{breakpoint}-{size}

So I assumed: Setting a padding-bottom = 0 on mobile would be class="is-pb-mobile-0"

I tried to follow up on your code and found line 69: .is-#{$abbrev}b#{$infix}-#{$size},

Is the breakpoint-name? So i would use it with: class="is-pbmobile-0"

Which also does not work. Can you give me a hint?

@areindl yes so is-pb-mobile-0

Did you verify in devtools that the style set and it is not overridden?

@areindl breakpoint-infix automatically adds the '-' so all words should be hyphenated

@wrabit - thanks for your reply. I am still puzzled.

So i just another test in a different part of my site.

I have a headline and I added is-mb-5 is-mb-mobile-0

My expectation:

1. On tablet + desktop devices the margin-bottom is 5

2. On mobile, the margin-bottom is 0

Somehow, there is an issue with the media query. Here is a screenshot of dev tools:

So the media query seems to be wrong or I have to think vice versa

@areindl It doesn't work how you are expecting it to, Bulma and Bootstrap use a mobile-first approach. In the case of your example .is-0 .is-mb-tablet-5 should get you there.

.is-mb-0 <!-- sets all from mobile to largest size margin-bottom: 0
.is-mb-tablet-5 <!-- sets all sizes from tablet to largest size to margin-bottom: 3rem

This leaves the smallest breakpoints up to, but not including tablet, as margin 0.

Ok! Thanks a lot. I can work that way.

…

Am 29.03.2020 um 14:50 schrieb wrabit ***@***.***>: @wrabit commented on this gist. @areindl <https://github.com/areindl> breakpoint-infix automatically adds the '-' so all words should be hyphenated — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <https://gist.github.com/47767c82a7b62f4fe0d931b94a9b489b#gistcomment-3231893>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABKHV24HYJSPVXYYJCJHRV3RJ47ZLANCNFSM4LV6LK2Q>.