[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.

[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]

The workaround with ui large screen only button makes the button larger,

wrap the buttons with an extra <div> to solve the issue:

<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?