Semantic-ui: [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,

<div class="ui secondary button mobile only"> <i class="save icon"></i> Save </div>

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

[purplecones]

Hey, this works pretty well! Thanks for sharing

[kappaknight]

+99999 on this.

[schabluk]

+1

[Panman82]

+1 as well. Taking @JOJOManLV's lead, I've changed the class names to be more "Semantic UI'ish" and expanded the "* only" classes to work for everything.

@media only screen and (max-width: 767px) {
    .mobile.hidden,
    .tablet.only,
    .small.monitor.only,
    .large.monitor.only {
        display: none !important;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .mobile.only,
    .tablet.hidden,
    .small.monitor.only,
    .large.monitor.only {
        display: none !important;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .mobile.only,
    .tablet.only,
    .small.monitor.hidden,
    .large.monitor.only {
        display: none !important;
    }
}
@media only screen and (min-width: 1200px) {
    .mobile.only,
    .tablet.only,
    .small.monitor.only,
    .large.monitor.hidden {
        display: none !important;
    }
}

_Note: I didn't add .ui to the .only classes so that it would work on "non-UI" elements, such as .menu > .item.mobile.only_

[manish2535]

+1

[suhaboncukcu]

+1 I've used @Panman8201 's classes for a project. Works superb.

[niksmac]

+1 and thanks @Panman8201

[sgarbesi]

+1

[gszathmari]

+0.5 * 2

[jorgeer]

Thanks @Panman8201!

[Bitz]

+1

[nordbit]

+√ 1

[sgeraldes]

+1!!
thank you @Panman8201 and @Jur4iks for the snippet! Works great.

[sgeraldes]

Updating the snippet to match the latest version. It adds a widescreen monitor, and changes small monitor to computer.

/* Mobile */
@media only screen and (max-width: 767px) {
    .mobile.hidden,
    .tablet.only,
    .computer.only,
    .large.monitor.only,
    .widescreen.monitor.only {
        display: none !important;
    }
}

/* Tablet / iPad Portrait */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .mobile.only,
    .tablet.hidden,
    .computer.only,
    .large.monitor.only,
    .widescreen.monitor.only {
        display: none !important;
    }
}

/* Computer / Desktop / iPad Landscape */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .mobile.only,
    .tablet.only,
    .computer.hidden,
    .large.monitor.only,
    .widescreen.monitor.only {
        display: none !important;
    }
}

/* Large Monitor */
@media only screen and (min-width: 1200px) and (max-width: 1919px) {
    .mobile.only,
    .tablet.only,
    .computer.only,
    .large.monitor.hidden,
    .widescreen.monitor.only {
        display: none !important;
    }
}

/* Widescreen Monitor */
@media only screen and (min-width: 1920px) {
    .mobile.only,
    .tablet.only,
    .computer.only,
    .large.monitor.only,
    .widescreen.monitor.hidden  {
        display: none !important;
    }
}

[liftM]

:+1: These classes would be an incredibly pragmatic addition.

[suhaboncukcu]

Why hasn't this been implemented yet? I've never seen an issue with that much thumbs up :)

[sgeraldes]

Here is a new version, this time it adds a new class:

_screen_ or lower hidden

Screen can be: mobile, tablet, computer, large monitor, widescreen monitor

e.g.: "tablet or lower hidden" will hide in everything but computer, large monitor, or widescreen monitor. You can get the idea. I also changed the css selectors so you can do things like: "mobile only tablet only" to show the element only on those two screens. Keep in mind: "mobile tablet only" is not equal to "mobile only tablet only". Also, due to how semantic is coded, the choosen words in "large monitor" interferes with some elements which has sizes. e.g.: <div class="ui large monitor only label"> will give you a "large label". The oposite is not true, where <div class="ui widescreen monitor only large label"> will give you a large label only visible in a widescreen monitor.

jsFiddle: https://jsfiddle.net/8LkLoxcx/

The workaround is to enclose the label in a div like so:
<div class="large monitor only"><div class="ui label"></div></div>

CSS code follows:

/* Mobile */

@media only screen and (max-width: 767px) {
  [class*="mobile hidden"],
  [class*="tablet only"]:not(.mobile),
  [class*="computer only"]:not(.mobile),
  [class*="large monitor only"]:not(.mobile),
  [class*="widescreen monitor only"]:not(.mobile),
  [class*="or lower hidden"] {
    display: none !important;
  }
}


/* Tablet / iPad Portrait */

@media only screen and (min-width: 768px) and (max-width: 991px) {
  [class*="mobile only"]:not(.tablet),
  [class*="tablet hidden"],
  [class*="computer only"]:not(.tablet),
  [class*="large monitor only"]:not(.tablet),
  [class*="widescreen monitor only"]:not(.tablet),
  [class*="or lower hidden"]:not(.mobile) {
    display: none !important;
  }
}


/* Computer / Desktop / iPad Landscape */

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  [class*="mobile only"]:not(.computer),
  [class*="tablet only"]:not(.computer),
  [class*="computer hidden"],
  [class*="large monitor only"]:not(.computer),
  [class*="widescreen monitor only"]:not(.computer),
  [class*="or lower hidden"]:not(.tablet):not(.mobile) {
    display: none !important;
  }
}


/* Large Monitor */

@media only screen and (min-width: 1200px) and (max-width: 1919px) {
  [class*="mobile only"]:not([class*="large monitor"]),
  [class*="tablet only"]:not([class*="large monitor"]),
  [class*="computer only"]:not([class*="large monitor"]),
  [class*="large monitor hidden"],
  [class*="widescreen monitor only"]:not([class*="large monitor"]),
  [class*="or lower hidden"]:not(.computer):not(.tablet):not(.mobile) {
    display: none !important;
  }
}


/* Widescreen Monitor */

@media only screen and (min-width: 1920px) {
  [class*="mobile only"]:not([class*="widescreen monitor"]),
  [class*="tablet only"]:not([class*="widescreen monitor"]),
  [class*="computer only"]:not([class*="widescreen monitor"]),
  [class*="large monitor only"]:not([class*="widescreen monitor"]),
  [class*="widescreen monitor hidden"],
  [class*="widescreen monitor or lower hidden"] {
    display: none !important;
  }
}

`

[jokeronaldo]

@suhaboncukcu look at milestone, @jlukic marked into 2.x Changes milestone, we are working on it. There's a lot of requests and changes, be patient :smile:

[jokeronaldo]

@scumie Thanks for the contribution :+1:

[aliok]

here is the @scumie 's snippet with class names consistent with Semantic UI. (ie. large monitor --> large screen, widescreen monitor --> widescreen)

// Semantic UI has these classes, however they're only applicable to
// grids, containers, rows and columns.
// plus, there isn't any `mobile hidden`, `X hidden` class.
// this snippet is using the same class names and same approach
// plus a bit more but to all elements.
//
// see https://github.com/Semantic-Org/Semantic-UI/issues/1114

/* Mobile */
@media only screen and (max-width: 767px) {
  [class*="mobile hidden"],
  [class*="tablet only"]:not(.mobile),
  [class*="computer only"]:not(.mobile),
  [class*="large screen only"]:not(.mobile),
  [class*="widescreen only"]:not(.mobile),
  [class*="or lower hidden"] {
    display: none !important;
  }
}

/* Tablet / iPad Portrait */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  [class*="mobile only"]:not(.tablet),
  [class*="tablet hidden"],
  [class*="computer only"]:not(.tablet),
  [class*="large screen only"]:not(.tablet),
  [class*="widescreen only"]:not(.tablet),
  [class*="or lower hidden"]:not(.mobile) {
    display: none !important;
  }
}

/* Computer / Desktop / iPad Landscape */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  [class*="mobile only"]:not(.computer),
  [class*="tablet only"]:not(.computer),
  [class*="computer hidden"],
  [class*="large screen only"]:not(.computer),
  [class*="widescreen only"]:not(.computer),
  [class*="or lower hidden"]:not(.tablet):not(.mobile) {
    display: none !important;
  }
}

/* Large Monitor */
@media only screen and (min-width: 1200px) and (max-width: 1919px) {
  [class*="mobile only"]:not([class*="large screen"]),
  [class*="tablet only"]:not([class*="large screen"]),
  [class*="computer only"]:not([class*="large screen"]),
  [class*="large screen hidden"],
  [class*="widescreen only"]:not([class*="large screen"]),
  [class*="or lower hidden"]:not(.computer):not(.tablet):not(.mobile) {
    display: none !important;
  }
}

/* Widescreen Monitor */
@media only screen and (min-width: 1920px) {
  [class*="mobile only"]:not([class*="widescreen"]),
  [class*="tablet only"]:not([class*="widescreen"]),
  [class*="computer only"]:not([class*="widescreen"]),
  [class*="large screen only"]:not([class*="widescreen"]),
  [class*="widescreen hidden"],
  [class*="widescreen or lower hidden"] {
    display: none !important;
  }
}

[paladin2005]

You saved my life guys

[bwmarrin]

+1 :)

[chrisinajar]

+1, especially to match bootstrap functionality

Here's that same snippet with the Semantic variables used. If you include in the site vars you can use this....

// Semantic UI has these classes, however they're only applicable to
// grids, containers, rows and columns.
// plus, there isn't any `mobile hidden`, `X hidden` class.
// this snippet is using the same class names and same approach
// plus a bit more but to all elements.
//
// see https://github.com/Semantic-Org/Semantic-UI/issues/1114

/* Mobile */
@media only screen and (max-width: (@tabletBreakpoint - 1)) {
  [class*="mobile hidden"],
  [class*="tablet only"]:not(.mobile),
  [class*="computer only"]:not(.mobile),
  [class*="large screen only"]:not(.mobile),
  [class*="widescreen only"]:not(.mobile),
  [class*="or lower hidden"] {
    display: none !important;
  }
}

/* Tablet / iPad Portrait */
@media only screen and (min-width: @tabletBreakpoint) and (max-width: (@computerBreakpoint - 1)) {
  [class*="mobile only"]:not(.tablet),
  [class*="tablet hidden"],
  [class*="computer only"]:not(.tablet),
  [class*="large screen only"]:not(.tablet),
  [class*="widescreen only"]:not(.tablet),
  [class*="or lower hidden"]:not(.mobile) {
    display: none !important;
  }
}

/* Computer / Desktop / iPad Landscape */
@media only screen and (min-width: @computerBreakpoint) and (max-width: (@largeMonitorBreakpoint - 1)) {
  [class*="mobile only"]:not(.computer),
  [class*="tablet only"]:not(.computer),
  [class*="computer hidden"],
  [class*="large screen only"]:not(.computer),
  [class*="widescreen only"]:not(.computer),
  [class*="or lower hidden"]:not(.tablet):not(.mobile) {
    display: none !important;
  }
}

/* Large Monitor */
@media only screen and (min-width: @largeMonitorBreakpoint) and (max-width: (@widescreenMonitorBreakpoint - 1)) {
  [class*="mobile only"]:not([class*="large screen"]),
  [class*="tablet only"]:not([class*="large screen"]),
  [class*="computer only"]:not([class*="large screen"]),
  [class*="large screen hidden"],
  [class*="widescreen only"]:not([class*="large screen"]),
  [class*="or lower hidden"]:not(.computer):not(.tablet):not(.mobile) {
    display: none !important;
  }
}

/* Widescreen Monitor */
@media only screen and (min-width: @widescreenMonitorBreakpoint) {
  [class*="mobile only"]:not([class*="widescreen"]),
  [class*="tablet only"]:not([class*="widescreen"]),
  [class*="computer only"]:not([class*="widescreen"]),
  [class*="large screen only"]:not([class*="widescreen"]),
  [class*="widescreen hidden"],
  [class*="widescreen or lower hidden"] {
    display: none !important;
  }
}

[hdrdavies]

+1

[Ryuno-Ki]

Quoting @sstok:

Please use the GitHub Reactions to vote https://github.com/blog/2119-add-reactions-to-pull-requests-issues-and-comments instead of posting +1 it will prevent informing everyone over no usable update

[ciokan]

:+1:

[alexshin]

+1

[YamiOdymel]

Once you use the trick which wrote above, you will meet this problem:

ui large screen only button, now your button become larger,

to solve this, you have to wrap your buttons:

<div class="large screen only">
    <button class="ui button"></button>
</div>

[sgeraldes]

@YamiOdymel That is intended... see my comment on Feb 9.

[vinayakkulkarni]

Any updates regarding this? It'd be really awesome if it's included in the next release :grin:

[VSG24]

This is sooooooo needed.

[cdaringe]

@chrisinajar, thanks for the less.

can someone provide a practical example where

<root>
   <a class="shows only when mobile or tablet" />
   <b class="shows only when computer or larger" />
   <!-- e.g. toggle a & b! -->
</root>

using the above css?

[cdaringe]

nm, got it

<root>
   <a class="tablet or lower hidden" />
   <b class="mobile tablet only" />
</root>

[dwenaus]

Seems like the authors (bless them) have a philosophical difference with something like this being included. Nevertheless it is handy is certain situations. For example I was able to use the above trick to turn off a sticky menu on mobile. very handy and I could find no other way to do it with built in styles.

[jkasun]

+1

[GuacheSuede]

6109

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.

[Panman82]

Bump, due to stale bot. Still needed for sure!

[bwmarrin]

Somehow, I suspect if this wasn't done in the last 4 years, it probably isn't getting done.

[jlukic]

All modifiers in SUI are scoped to UI components. This helps make sure class names for SUI dont leak into other CSS in people's projects and can apply to each component differently.

This is similar to linguistics with examples like "small planet" vs "large ant". Which is bigger? Neither size modifier represents an exact size that can be defined in isolation, but only in context of the word they modify.

[sgeraldes]

Just scope it as you see fit and get back to us with a proposal. When this was dropped here, the documentation was slim and confusing, needing a masters degree to implement some of it. At the time of writing this, semantic UI didn't have anything like this either and name schema was all over the place, and as the thread clearly shows, how the modifiers were at the beginning of this thread changed considerably with the years.

[bitvilag]

Any progress on this issue?