Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add responsive utilities classes #10904

Closed
5im0n opened this issue Mar 24, 2017 · 11 comments

Comments

Projects
None yet
8 participants
@5im0n
Copy link

commented Mar 24, 2017

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 brandyscarney self-assigned this Mar 24, 2017

@brandyscarney

This comment has been minimized.

Copy link
Member

commented Mar 24, 2017

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

@brandyscarney brandyscarney added this to the 3.1 milestone Apr 10, 2017

brandyscarney added a commit that referenced this issue Apr 14, 2017

feat(app): add responsive utility attributes by screen size
- moves breakpoint mixins to the ionic.mixins file
- adds responsive attributes for text alignment, transform, and
floating elements
- adds ability to turn these off so they don’t get added to the css
file using sass variables

references #10904
closes #10567

brandyscarney added a commit that referenced this issue Apr 14, 2017

feat(app): add responsive utility attributes by screen size (#11228)
- moves breakpoint mixins to the ionic.mixins file
- adds responsive attributes for text alignment, transform, and
floating elements
- adds ability to turn these off so they don’t get added to the css
file using sass variables

references #10904
closes #10567
@numerized

This comment has been minimized.

Copy link

commented Apr 29, 2017

Hi there, any news on this ??

Looks like super duper feature to me !

@5im0n

This comment has been minimized.

Copy link
Author

commented Jul 3, 2017

@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

This comment has been minimized.

Copy link

commented Jul 8, 2017

Hi geniuses, +1 here.

@seanmavley

This comment has been minimized.

Copy link

commented Aug 24, 2017

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

@numerized

This comment has been minimized.

Copy link

commented Aug 27, 2017

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

@5im0n

This comment has been minimized.

Copy link
Author

commented Sep 28, 2017

@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

This comment has been minimized.

Copy link

commented Oct 3, 2017

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

@brandyscarney brandyscarney modified the milestones: 3.1, @ionic/core 0.0.3 Dec 21, 2017

@nickwinger

This comment has been minimized.

Copy link

commented Jan 2, 2018

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

@brandyscarney

This comment has been minimized.

Copy link
Member

commented Jan 2, 2018

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!

@ionic-team ionic-team locked and limited conversation to collaborators Jan 2, 2018

@brandyscarney brandyscarney modified the milestones: @ionic/core 0.0.3, @ionic/core 0.0.4 Mar 7, 2018

@dwieeb dwieeb removed the ionitron: v3 label Nov 28, 2018

@dwieeb dwieeb added package: core and removed ionitron: v3 v2 labels Nov 28, 2018

@brandyscarney

This comment has been minimized.

Copy link
Member

commented Feb 22, 2019

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

KillerCodeMonkey added a commit to KillerCodeMonkey/ionic that referenced this issue Mar 1, 2019

feat(css): add CSS display utilities (ionic-team#17359)
Adds classes to set display none on any element.

* add `.ion-hide` selector to hide content
* add `.ion-hide-{breakpoint}-{up|down}]` to selectively hide content

closes ionic-team#10904
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.