Add responsive utilities classes

[5im0n]

Ionic version:
[ ] 1.x
[X] 2.x

I'm submitting a ...
[ ] bug report
[X] feature request
[ ] support request

Current behavior:
Ionic has now a powerful grid system.
It would be great to improve this grid system with responsive utilises class: .hidden-lg-down, .hidden-lg-up... as bootstrap does https://v4-alpha.getbootstrap.com/layout/responsive-utilities/#available-classes

We can maybe go futher by including this behavior in the showWhen, hideWhen directives. 😉

[brandyscarney]

Thanks for the issue! This is definitely something I plan on adding. 🙂

[numerized]

Hi there, any news on this ??

Looks like super duper feature to me !

[5im0n]

@brandyscarney,

With the commit cf24057, you added responsive utility attributes by screen size to Ionic 👍. Unfortunately the commit does not take into account visibility class, like hidden-lg-up...

Have you plan to add this feature in SASS files ?

[numerized]

Hi geniuses, +1 here.

[seanmavley]

@5im0n Considering that wasn't added at the time of the commit, I doubt it's gonna be added anytime soon.

[numerized]

This would be a killer feature to make fully code once deploy everywhere apps.

[5im0n]

@brandyscarney, I'm coming back to you to have news about the feature to hide, show depending on the screen size: hidden-lg-up...

Have you plan to add this feature ?

Thank you !

[numerized]

You promised it few blog post ago !! and it's a killer feature!
:)))))

[nickwinger]

this is just a little bit stupid css like bootstrap and no one is copying it into the ionic 2 framework, wtf ???

[brandyscarney]

This can be added to your own app at the end of your variables.scss file like so:

$screen-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
) !default;

// Adds hidden attributes
@each $breakpoint in map-keys($screen-breakpoints) {
  $infix: breakpoint-infix($breakpoint, $screen-breakpoints);

  @include media-breakpoint-up($breakpoint, $screen-breakpoints) {
    // Provide `[hidden-{bp}-up]` attributes for hiding the element based
    // on the breakpoint
    [hidden#{$infix}-up] {
      display: none !important;
    }
  }

  @include media-breakpoint-down($breakpoint, $screen-breakpoints) {
    // Provide `[hidden-{bp}-down]` attributes for hiding the element based
    // on the breakpoint
    [hidden#{$infix}-down] {
      display: none !important;
    }
  }
}

And then to use it:

<div hidden-sm-up>
  hidden-sm-up
</div>

<div hidden-sm-down>
  hidden-sm-down
</div>

I agree it is nice to add to the framework, but we are currently working on Ionic 4 which is a large internal refactor and that is our top priority. We are not adding new features to the master branch, and are focused on getting Ionic 4 finished which will improve app performance and startup time. You can read more on this at our blog: https://blog.ionicframework.com/ionic-2017-18-roadmap/

Since this has a work around, as mentioned above, and the comments have become unconstructive, I will be locking this issue. We know it's something we should add and we appreciate your patience!

[brandyscarney]

It's been a long time coming but this has been added to v4 thanks to @seiyria! It will be in the 4.1.0 release and will be added here: https://github.com/ionic-team/ionic-conference-app/blob/master/src/global.scss#L16

@import "~@ionic/angular/css/display.css";

We'll have it updated on the docs site soon too, thanks to this PR: ionic-team/ionic-docs#403