Helper Class

[arjarn]

Can SUI offering margin / padding class like :

• margin-x margin-top-x margin-left-x margin-bottom-x margin-right-x
• padding-x padding-top-x padding-left-x padding-bottom-x padding-right-x

where 0 < x < 15 representing size margin / padding ?

Combining this with "computer", "tablet" allow us to define dynamic margin about device.

I don't know if my suggestion is SUI "compatible" but this already exists in others frameworks and is very usefull to adjust UI without specific CSS.

[y0hami]

I agree this might be useful but I don't think it would be appropriate to make the class names margin-top-x etc I think for to make it SUI "compliant" they should be something like large top margin, small left padding etc.

Let me know what you think.

[arjarn]

Totally agree with your proposition 👍 Effectively more mind of SUI, composing with "large top padding computer" and "small top padding tablet" can be nice.

[tmentink]

If this gets added could it be included in the install as an optional component? I already have my own set of CSS utilities so I would probably opt to not include this.

[y0hami]

@tmentink I would imagine this would get added to site which is a global effect but we could possibly put it under behaviors

[tmentink]

@hammy2899 Okay that sounds good. So I have a few questions about implementation given SUI's class names:

• How would you handle setting margin/padding on both the x-axis and y-axis?
• How would you handle setting multiple breakpoints? Would the classes have to be in order?

The issue I see is having to write class names like this: small top margin mobile small bottom margin mobile large top margin computer large bottom margin computer

You would have to ensure that the computer class only gets applied to the appropriate spacing.

I think Bootstrap's utilities handle these situations pretty elegantly but the class names are not SUI compliant: my-sm-2 my-lg-4

[y0hami]

@tmentink I was thinking about this as well, I was thinking of adding something like small top and bottom margin mobile

[arjarn]

@tmentink : for this reason, my first suggestion but not really SUI compliant. I'm wondering if it's possible to implement it with SUI compliant and without breaking something else ^_^ But dev must often (always ?) using CSS utilities for this (and other little things) so why not including in core of SUI (or behaviors).

[miguelcaravantes]

I support the proposal

[dutrieux]

How do you manage the case when you have a big button and small top margin like this ?

<button class="big ui button small top margin">test</button>

[dutrieux]

How do you manage the case when you have a big button and small top margin like this ?

<button class="big ui button small top margin">test</button>

@hammy2899 help me to reply on Discord :

[class*="small top margin"] {
  margin-top: 1em !important;
}

[dutrieux]

I'am base on bootstrap utility to write that :

[class*="zero padding"] {
    padding: 0 !important;
}

[class*="zero top padding"], [class*="zero vertical padding"] {
    padding-top: 0 !important;
}

[class*="zero bottom padding"], [class*="zero vertical padding"] {
    padding-bottom: 0 !important;
}

[class*="zero right padding"], [class*="zero horizontal padding"] {
    padding-right: 0 !important;
}

[class*="zero left padding"], [class*="zero horizontal padding"] {
    padding-left: 0 !important;
}

[class*="zero margin"] {
    margin: 0 !important;
}

[class*="zero top margin"], [class*="zero vertical margin"] {
    margin-top: 0 !important;
}

[class*="zero bottom margin"], [class*="zero vertical margin"] {
    margin-bottom: 0 !important;
}

[class*="zero right margin"], [class*="zero horizontal margin"] {
    margin-right: 0 !important;
}

[class*="zero left margin"], [class*="zero horizontal margin"] {
    margin-left: 0 !important;
}

/* 0.25 rem */
[class*="mini padding"] {
    padding: 0.25rem !important;
}

[class*="mini top padding"], [class*="mini vertical padding"] {
    padding-top: 0.25rem !important;
}

[class*="mini bottom padding"], [class*="mini vertical padding"] {
    padding-bottom: 0.25rem !important;
}

[class*="mini right padding"], [class*="mini horizontal padding"] {
    padding-right: 0.25rem !important;
}

[class*="mini left padding"], [class*="mini horizontal padding"] {
    padding-left: 0.25rem !important;
}

[class*="mini margin"] {
    margin: 0.25rem !important;
}

[class*="mini top margin"], [class*="mini vertical margin"] {
    margin-top: 0.25rem !important;
}

[class*="mini bottom margin"], [class*="mini vertical margin"] {
    margin-bottom: 0.25rem !important;
}

[class*="mini right margin"], [class*="mini horizontal margin"] {
    margin-right: 0.25rem !important;
}

[class*="mini left margin"], [class*="mini margin horizontal"] {
    margin-left: 0.25rem !important;
}

/* 0.5 rem */
[class*="tiny padding"] {
    padding: 0.5rem !important;
}

[class*="tiny top padding"], [class*="tiny vertical padding"] {
    padding-top: 0.5rem !important;
}

[class*="tiny bottom padding"], [class*="tiny vertical padding"] {
    padding-bottom: 0.5rem !important;
}

[class*="tiny right padding"], [class*="tiny horizontal padding"] {
    padding-right: 0.5rem !important;
}

[class*="tiny left padding"], [class*="tiny horizontal padding"] {
    padding-left: 0.5rem !important;
}

[class*="tiny margin"] {
    margin: 0.5rem !important;
}

[class*="tiny top margin"], [class*="tiny vertical margin"] {
    margin-top: 0.5rem !important;
}

[class*="tiny bottom margin"], [class*="tiny vertical margin"] {
    margin-bottom: 0.5rem !important;
}

[class*="tiny right margin"], [class*="tiny horizontal margin"] {
    margin-right: 0.5rem !important;
}

[class*="tiny left margin"], [class*="tiny horizontal margin"] {
    margin-left: 0.5rem !important;
}

/* 1 rem */
[class*="small padding"] {
    padding: 1rem !important;
}

[class*="small top padding"], [class*="small vertical padding"] {
    padding-top: 1rem !important;
}

[class*="small bottom padding"], [class*="small vertical padding"] {
    padding-bottom: 1rem !important;
}

[class*="small right padding"], [class*="small horizontal padding"] {
    padding-right: 1rem !important;
}

[class*="small left padding"], [class*="small horizontal padding"] {
    padding-left: 1rem !important;
}

[class*="small margin"] {
    margin: 1rem !important;
}

[class*="small top margin"], [class*="small vertical margin"] {
    margin-top: 1rem !important;
}

[class*="small bottom margin"], [class*="small vertical margin"] {
    margin-bottom: 1rem !important;
}

[class*="small right margin"], [class*="small horizontal margin"] {
    margin-right: 1rem !important;
}

[class*="small left margin"], [class*="small horizontal margin"] {
    margin-left: 1rem !important;
}

/* 1.5 rem */
[class*="medium padding"] {
    padding: 1.5rem !important;
}

[class*="medium top padding"], [class*="medium vertical padding"] {
    padding-top: 1.5rem !important;
}

[class*="medium bottom padding"], [class*="medium vertical padding"] {
    padding-bottom: 1.5rem !important;
}

[class*="medium right padding"], [class*="medium horizontal padding"] {
    padding-right: 1.5rem !important;
}

[class*="medium left padding"], [class*="medium horizontal padding"] {
    padding-left: 1.5rem !important;
}

[class*="medium margin"] {
    margin: 1.5rem !important;
}

[class*="medium top margin"], [class*="medium vertical margin"] {
    margin-top: 1.5rem !important;
}

[class*="medium bottom margin"], [class*="medium vertical margin"] {
    margin-bottom: 1.5rem !important;
}

[class*="medium right margin"], [class*="medium horizontal margin"] {
    margin-right: 1.5rem !important;
}

[class*="medium left margin"], [class*="medium horizontal margin"] {
    margin-left: 1.5rem !important;
}

/* 2 rem */
[class*="large padding"] {
    padding: 2rem !important;
}

[class*="large top padding"], [class*="large vertical padding"] {
    padding-top: 2rem !important;
}

[class*="large bottom padding"], [class*="large vertical padding"] {
    padding-bottom: 2rem !important;
}

[class*="large right padding"], [class*="large horizontal padding"] {
    padding-right: 2rem !important;
}

[class*="large left padding"], [class*="large horizontal padding"] {
    padding-left: 2rem !important;
}

[class*="large margin"] {
    margin: 2rem !important;
}

[class*="large top margin"], [class*="large vertical margin"] {
    margin-top: 2rem !important;
}

[class*="large bottom margin"], [class*="large vertical margin"] {
    margin-bottom: 2rem !important;
}

[class*="large right margin"], [class*="large horizontal margin"] {
    margin-right: 2rem !important;
}

[class*="large left margin"], [class*="large horizontal margin"] {
    margin-left: 2rem !important;
}

[willemmulder]

@arjarn @dutrieux Could you propose this on the fomantic UI fork as well? Much more likely that it will get picked up and I'd love to have that in there!

[ivantcholakov]

@dutrieux

<button type="submit" class="ui primary button mini bottom margin">
    <i class="checkmark icon"></i>
    {{ lang('ui_save') }}
</button>

Unfortunately the word mini and similar other affect the size of buttons at least.

[ivantcholakov]

@dutrieux I suggestion for rewording your example for avoiding unwanted style influences: mini - tiniest tiny - tinier small - smaller medium - moderate large - larger

[JithinAji]

Is this worked on by someone??? I think this enhancement will be very useful.