[UI] Add Responsive Helper Classes

[ronnross]

I'm using semantic beta

I have an element That I only want to show in mobile view only. For example,

`

Save

`

This element shows in computer, tablet, and mobile views.

[mzbyszynski]

Hi @ronnross,

As far as I know the "mobile only" classes currently only work inside a ui grid in conjunction with the row and column tags. See an example of how it works here:

http://beta.semantic-ui.com/collections/grid.html#responsive-to-device

[ronnross]

@mzbyszynski it looks like you are correct. Is there an equivalent to bootstraps hidden-XX class in semantic? I'm looking to hide elements at a more granular level than grid/row conjunction.

[mzbyszynski]

Right now I don't think there is, but it sounds like a good idea to me :+1:

See #1066, that includes some workarounds suggested by @CharlesOkwuagwu as well.

[jlukic]

@ronnross It seems a lot of people want to use this, but I've been a bit stubborn about "free floating" ui helper classes in Semantic UI since the spirit of the project is to define variations in the context of each element.

[ronnross]

@jlukic I respect the decision to not have "free floating" ui helper classes. What are your thoughts about having mobile, tablet, computer only classes under each collection? For example, the menu collection would allow for "mobile only" classes. This would keep them within the context of the parent collection e.g., form, grid, menu. Am I way off base?

[tmikaeld]

I think it makes sense to support it in the menu at least.

Right now i'm looking for a solution to showing a large button for search on mobile while on the desktop showing the whole search bar and afaik i can't do that without manually adding a mediaquery breakpoint.

[PLPeeters]

+1 for at least supporting it in the menu.

[Ehesp]

Would be a good feature, hiding things like icons or text as a page gets smaller is handy.

[pateketrueke]

So, when this will be ready to use?

[jlukic]

Haven't started any development, probably a while.

[ch3m1c]

+1 for hidden-xx

[watzon]

Have we gotten anywhere on this? Need someone to develop it? I love Semantic UI, but this seems to be the one huge thing missing. I will implement it if it's not at the top of anyone else's priority list.

[arvi]

It would be great if Semantic UI has an equivalent for Zurb Foundation's Media Queries :) http://foundation.zurb.com/docs/media-queries.html

[jlukic]

Named breakpoint variables are built into Semantic UI, you can use them in your own custom less.

[listepo]

+1

[lancetw]

+1

[mamluka]

+1

[rachellji]

+1 ~~~ would be great if can conveniently hide any image, label or other elements .

[prijindal]

+1 On this, would be really helpful

[KonsoltCorp]

+10000 on this!

[FernandoMueller]

+1

[hnordt]

+1

[prijindal]

+1 would be a great addition

[insign]

+1

[koddr]

+1

[btbjosh]

+1

[purplecones]

+1

[jurikern]

+1

[YamiOdymel]

+1

[Jur4iks]

I have made my own super simple responsive css(only css) Taking the semantic default breakpoint

/* Mobile */

@media only screen and (max-width: 767px) {
    .mobile-hide{
        display: none !important;
    }
}

/* Tablet */

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tablet-hide{
        display: none !important;
    }
}

/* Small Monitor */

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .small-hide{
        display: none !important;
    }
}


/* Large Monitor */

@media only screen and (min-width: 1200px) {
    .large-hide{
        display: none !important;
    }
}

Whn you youse one of this class element is hiden on specific screen size. Simple, but works for me :)