[Grid] add support for `only=small screen`

[layershifter]

Semantic/Fomantic UI has breakpoints for small screens (https://fomantic-ui.com/elements/container.html) and there is support for device visibility breakpoints (https://fomantic-ui.com/collections/grid.html#device-visibility). But at the same point there is no small screen only :(

It will be great to have a separate option to restrict visibility for small screens.

Original request: Semantic-Org/Semantic-UI-React#3991

[lubber-de]

There already exists mobile only . Doesn't this fullfill the requirement ?

The docs example also covered that

[layershifter]

No, it's a different. Currently possible values:

• mobile only only on mobile
• tablet only only tablet
• large screen only & widescreen only for exact resolutions
• computer only for computers, but includes large screen and widescreen

But there is no small screen only which will cover more than tablet, less than large screen

[ko2in]

@layershifter How can it be small screen if it's more than tablet? Can you clarify better or you can suggest your expected resolution size?

[layershifter]

How can it be small screen if it's more than tablet?

Will it be more clear if I will call it small computer screen? 🐱

Fomantic-UI/src/definitions/collections/grid.less

Line 1801 in ae0b664

@media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) {

Fomantic-UI/src/themes/default/globals/site.variables

Lines 222 to 223 in 0b7630b

	@computerBreakpoint : 992px;
	@largeMonitorBreakpoint : 1200px;

^ it can be. I expect that there will be a modifier that allows to have visibility between these variables.

[DeeeeLAN]

Correct, If I have a monitor that is 1024 wide (such as an iPad in landscape mode), there is no grid size class for that specifically. There is a specific size class for every other pixel count, but it skips over the 992-1200 range.

[lubber-de]

If we implement this, then we are going to implement a whole additional breakpoint which has to be covered in all other components as well (container, dropdown, modal, search, card, item, divider, probably more)

Tbh: we would implement a breakpoint which differs only in 32px from @computerbreakpoint..is it really worth it?

If you compare to bootstrap they also don't differ in between 992px and 1200px .
https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints

🤔

[ko2in]

IMHO, from above 1024px, there's no limit to control the break points, and it relies more on your own specific requirements and thus you should have your own custom break points for that.

The standard break points specification in framework should be only for the cross devices and platforms with different resolutions.

[DeeeeLAN]

We already have a computer breakpoint at 992px, we just need a class that is only computer, not computer and large monitor or widescreen. Bootstrap has the "large device" class, but we go straight from "medium device" to "extra large device" in our grid, or you go from medium to "large and extra large" using the computer breakpoint.

Here is my use-case. I have a grid of tables that I rearrange to be responsive based on the screen width, so I might be 3x2 on the large monitor and widescreen, but 2x3 on the small monitor and tablet screens. This is not currently possible using the provided grid size classes, so I have had to do it manually.

[lubber-de]

Ok, i think, i understood now 😄

However, while we are at it, why don't we move this logic out of the the grid and make it globally available, so it can be used by any component?
I personally use this ever since
Semantic-Org/Semantic-UI#1114 (comment)

and already commented in the helper class thread at #22 (comment)

That addional "small screen" could then be added globally
@fomantic/admins ?