New media breakpoint

[bcarneiro]

This is about Bulma | the Docs. Is it a feature

Overview of the problem

This is about the Bulma CSS framework

Description

I think we need a new breaking step that should be something in the order of 480px. this is just to differentiate the position in the mobile version between landscape and portrait.

Maybe call it $portrait or $landscape

Steps to Reproduce

Expected behavior

columns side by side in mobile landscape position and stacked in portrait position

Actual behavior

[sandrina-p]

I agree, it's missing a smaller breakpoint at Bulma's framework, I called it phone:

@mixin phone {
  @media screen and (max-width: 479px) {
    @content;
  }
}

// ...

@include phone {
  .container { padding: 0 }
}

[alanaasmaa]

Also missing something between mobile and tablet. Trying to find and option to add all features to new breakpoints. For eaxmple is-4-phone

[jasoncostello]

I just used Bulma on a project and really liked it. This was the only issue that stuck out to me. I will be adding this breakpoint to my own library for the future but it feels like it should be in the framework.

[alanaasmaa]

I think it should be in documents how to add. Or some variable/mixin. But i would keep framework itself as small as possible.

This is how I did it.

My variables

$mobile-md: 480px !default;
$mobile-lg: 600px !default;

@mixin mobile-xs {
  @media screen and (max-width: $mobile-md - 1), print {
    @content;
  }
}

@mixin mobile-md {
  @media screen and (min-width: $mobile-md), print {
    @content;
  }
}

@mixin mobile-lg {
  @media screen and (min-width: $mobile-lg), print {
    @content;
  }
}

My styles

/**
 * Columns
 */
 .column {
  @include mobile-md {
    &.is-narrow-mobile-md {
      flex: none;
    }

    &.is-full-mobile-md {
      flex: none;
      width: 100%;
    }

    &.is-three-quarters-mobile-md {
      flex: none;
      width: 75%;
    }

    &.is-two-thirds-mobile-md {
      flex: none;
      width: 66.6666%;
    }

    &.is-half-mobile-md {
      flex: none;
      width: 50%;
    }

    &.is-one-third-mobile-md {
      flex: none;
      width: 33.3333%;
    }

    &.is-one-quarter-mobile-md {
      flex: none;
      width: 25%;
    }

    &.is-one-fifth-mobile-md {
      flex: none;
      width: 20%;
    }

    &.is-two-fifths-mobile-md {
      flex: none;
      width: 40%;
    }

    &.is-three-fifths-mobile-md {
      flex: none;
      width: 60%;
    }

    &.is-four-fifths-mobile-md {
      flex: none;
      width: 80%;
    }

    &.is-offset-three-quarters-mobile-md {
      margin-left: 75%;
    }

    &.is-offset-two-thirds-mobile-md {
      margin-left: 66.6666%;
    }

    &.is-offset-half-mobile-md {
      margin-left: 50%;
    }

    &.is-offset-one-third-mobile-md {
      margin-left: 33.3333%;
    }

    &.is-offset-one-quarter-mobile-md {
      margin-left: 25%;
    }

    &.is-offset-one-fifth-mobile-md {
      margin-left: 20%;
    }

    &.is-offset-two-fifths-mobile-md {
      margin-left: 40%;
    }

    &.is-offset-three-fifths-mobile-md {
      margin-left: 60%;
    }

    &.is-offset-four-fifths-mobile-md {
      margin-left: 80%;
    }

    @for $i from 1 through 12 {
      &.is-#{$i}-mobile-md {
        flex: none;
        width: percentage($i / 12);
      }

      &.is-offset-#{$i}-mobile-md {
        margin-left: percentage($i / 12);
      }
    }
  }
  @include mobile-lg {
    &.is-narrow-mobile-lg {
      flex: none;
    }

    &.is-full-mobile-lg {
      flex: none;
      width: 100%;
    }

    &.is-three-quarters-mobile-lg {
      flex: none;
      width: 75%;
    }

    &.is-two-thirds-mobile-lg {
      flex: none;
      width: 66.6666%;
    }

    &.is-half-mobile-lg {
      flex: none;
      width: 50%;
    }

    &.is-one-third-mobile-lg {
      flex: none;
      width: 33.3333%;
    }

    &.is-one-quarter-mobile-lg {
      flex: none;
      width: 25%;
    }

    &.is-one-fifth-mobile-lg {
      flex: none;
      width: 20%;
    }

    &.is-two-fifths-mobile-lg {
      flex: none;
      width: 40%;
    }

    &.is-three-fifths-mobile-lg {
      flex: none;
      width: 60%;
    }

    &.is-four-fifths-mobile-lg {
      flex: none;
      width: 80%;
    }

    &.is-offset-three-quarters-mobile-lg {
      margin-left: 75%;
    }

    &.is-offset-two-thirds-mobile-lg {
      margin-left: 66.6666%;
    }

    &.is-offset-half-mobile-lg {
      margin-left: 50%;
    }

    &.is-offset-one-third-mobile-lg {
      margin-left: 33.3333%;
    }

    &.is-offset-one-quarter-mobile-lg {
      margin-left: 25%;
    }

    &.is-offset-one-fifth-mobile-lg {
      margin-left: 20%;
    }

    &.is-offset-two-fifths-mobile-lg {
      margin-left: 40%;
    }

    &.is-offset-three-fifths-mobile-lg {
      margin-left: 60%;
    }

    &.is-offset-four-fifths-mobile-lg {
      margin-left: 80%;
    }

    @for $i from 1 through 12 {
      &.is-#{$i}-mobile-lg {
        flex: none;
        width: percentage($i / 12);
      }

      &.is-offset-#{$i}-mobile-lg {
        margin-left: percentage($i / 12);
      }
    }
  }
}

/**
 * Visibility
 */
$displays: "block" "flex" "inline" "inline-block" "inline-flex";

@each $display in $displays {
  @include mobile-xs {
    .is-#{$display}-mobile-xs {
      display: #{$display} !important;
    }
  }
  @include mobile-md {
    .is-#{$display}-mobile-md {
      display: #{$display} !important;
    }
  }
  @include mobile-lg {
    .is-#{$display}-mobile-lg {
      display: #{$display} !important;
    }
  }
}

[poVoq]

Would be great if a breakpoint for smart feature phones (KaiOS) and embedded devices was added.

KaiOS devices usually come with 240 x 320 px screens (portrait or less common landscape) and key-pad input only.

[dunham-mike]

I recently completed a project using Bulma and agree that being able to differentiate between portrait and landscape widths on mobile would be quite valuable. I started playing with what adding these breakpoints to Bulma would look like, and it seems like not breaking existing mobile classes is key.

Here is what part of the docs would look like with "portrait" running from 0-480px, "landscape" running from 481-768px, and "mobile" running from 0-768px. This change would break the mutual exclusivity of the existing breakpoints for the first time:

This level of complication still seems worth it for the core framework, yes? Perhaps we add the portrait and landscape functionality to Bulma itself but don't add new columns to the docs and instead explain it with a text note. (Here is the existing docs page.)

I'd love some feedback before following through with the rest of these changes and submitting a pull request that would include changes to the docs.

[fabiofdsantos]

@m99coder opened a related PR: https://github.com/jgthms/bulma/pull/3058

[daniel-lenz]

Hi guys, will this be merged?

[Zauberfisch]

@fabiofdsantos thanks for creating a PR. Though, as far as I can see you only added classes for .column, right? In order for the maintainer(s) to merge this, I'm pretty sure they'll want support for is-flex and others too.

I'd also be willing to put in effort to push this forward, but first I agree, it would be nice to get some maintainer input if this would even get merged.

[Zauberfisch]

as a workaround meanwhile I am now using styles from @alanaasmaa with one addition:

$alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'right': 'right');

@each $alignment, $text-align in $alignments {
    @include mobile-xs {
        .has-text-#{$alignment}-mobile-xs {
            text-align: #{$text-align} !important;
        }
    }
    @include mobile-md {
        .has-text-#{$alignment}-mobile-md {
            text-align: #{$text-align} !important;
        }
    }
    @include mobile-lg {
        .has-text-#{$alignment}-mobile-lg {
            text-align: #{$text-align} !important;
        }
    }
}

(@alanaasmaa feel free to copy my code here and edit it into your comment to have a complete solution there)