Skip to content

Instantly share code, notes, and snippets.

@wrabit
Last active September 8, 2020 17:21
Show Gist options
  • Save wrabit/47767c82a7b62f4fe0d931b94a9b489b to your computer and use it in GitHub Desktop.
Save wrabit/47767c82a7b62f4fe0d931b94a9b489b to your computer and use it in GitHub Desktop.
Bootstrap style responsive helper utilities for Bulma
/*
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; }
}
}
@webmasterdevlin
Copy link

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

@wrabit
Copy link
Author

wrabit commented Dec 11, 2018

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

@areindl
Copy link

areindl commented Mar 29, 2020

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?

@wrabit
Copy link
Author

wrabit commented Mar 29, 2020

@areindl yes so is-pb-mobile-0

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

@wrabit
Copy link
Author

wrabit commented Mar 29, 2020

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

@areindl
Copy link

areindl commented Mar 29, 2020

@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:

image

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

@wrabit
Copy link
Author

wrabit commented Mar 29, 2020

@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.

@areindl
Copy link

areindl commented Mar 29, 2020 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment