[Site] Helper classes

[y0hami]

Create helper classes for padding, margin and may be responsive breakpoints.

Original Issue: https://github.com/Semantic-Org/Semantic-UI/issues/6195

Examples:

large top margin
small left padding
only show on mobile
only show on computer
dont show on tablet
only show on tablet and mobile

etc.

[y0hami]

Going to put this on hold for now until the device visibility is more thought out.

[lubber-de]

I am using the css additions from https://github.com/Semantic-Org/Semantic-UI/issues/1114#issuecomment-201057438 which adds global support for

mobile only mobile hidden, tablet only tablet hidden computer only computer hidden large screen only large screen hidden widescreen only widescreen hidden or lower hidden

and works flawlessly so far

[y0hami]

@lubber-de That could be a starting point

[etshy]

Is it still on hold ?

It could be good to have these kind of helpers directly inside the library

[y0hami]

@etshy This is on hold for now because we want to do more then just these modifiers and we also want to make it customizable as much as possible allow users to put these classes on anything and different combinations and for it to still work. This will take a lot of testing/work which is why it is on hold.

[etshy]

oooh, nice.

Thanks for all that work. 👍

[ivantcholakov]

https://github.com/Semantic-Org/Semantic-UI/issues/6195#issuecomment-465525195

P.S.: https://github.com/Semantic-Org/Semantic-UI/issues/6195#issuecomment-767167898

Something for margins/paddings would be useful. Because I hate my buttons to stick vertically like that:

[lubber-de]

Button groups now have a spaced variant which takes care about a margin next to lower buttons https://fomantic-ui.com/elements/button.html#spaced-buttons

[TheDevelolper]

We have mobile only row, but what if I want to display something completely different on tablet and desktop. There should be a way to say

<!-- for mobile-->
<div className="mobile only row">
   <some-dropdown/>
<div>

<!-- for tablet and above -->
<div className="mobile hidden row">
   <button-group-thing/>
<div>

[lubber-de]

@TheDevelolper Look at my comment above. https://github.com/fomantic/Fomantic-UI/issues/22#issuecomment-429109342

[TheDevelolper]

@TheDevelolper Look at my comment above. https://github.com/fomantic/Fomantic-UI/issues/22#issuecomment-429109342

Yeah I saw this but I'm using formantic via npm so not sure if it's possible to tell npm to use that branch?

I added my own mobile only class for the moment.

That branch should just be merged in. I get it formantic want to do more but this is better than nothing and it could serve as a basis for future improvements.

[lubber-de]

Which Branch? My comment points to a post which contains some additional custom css which you can just copy into your own project.