Info
I put a limited number of Smart Utility since, unlike Utility classes, there are infinite possibilities that depend on your style and type of project.
You decide whether to divide this page into several pages (like Utility classes) or leave it like this.
In the project you will find a template to create this type of page.
By convention, Smart Utility classes start with "su-".
Layout
Display: Flex
Class Name
Value
Class Object
su-flex-v-tablet
su-flex-v-mobile
su-flex-v-portrait
su-block-desk-flex-v-stretch-mobile
Flex (Child)
Class Name
Value
Class Object
su-flex-child-order-first-mobile
Display: Grid
Class Name
Value
Class Object
su-grid-al-ju-center-desk-stretch-mobile
Display: None
Class Name
Value
Class Object
su-display-block-desk-none-mobile
Spacing
Margin
Class Name
Value
Class Object
su-ml-2.5rem-desk-0-mobile
su-mr-2.5rem-desk-0-mobile
su-mx-auto-mobile
su-mx-8-desk-4-mobile
su-my-8-desk-4-mobile
su-my-4-mobile
su-my-8-mobile
Padding
Class Name
Value
Class Object
su-py-1.25rem-portrait
su-px-8-desk-4-mobile
su-py-8-desk-4-mobile
Size
Width
Class Name
Value
Class Object
su-w-full-mobile
su-max-w-none-mobile
Height
Class Name
Value
Class Object
su-h-full-desk
su-h-screen-to-tablet
su-h-half-screen-portrait
Position
Position
Class Name
Value
Class Object
su-position-relative-t-4.5rem-desk-3.5rem-mobile
Float
Class Name
Value
Class Object
su-float-left-to-landscape
su-float-right-to-landscape
su-float-left-mobile
Clear
Class Name
Value
Class Object
su-clear-left-mobile
su-clear-right-mobile
su-clear-both-mobile
su-clear-both-mobile
Typography
Weight
Class Name
Value
Class Object
su-font-weight-normal-to-landscape-bold-mobile
Size
Class Name
Value
Class Object
su-text-size-sx-desk-sm-mobile
Height
Class Name
Value
Class Object
su-text-height-snug-desk-relaxed-mobile
Color
Class Name
Value
Class Object
su-text-color-transparent-desk-black-tablet
Align
Class Name
Value
Class Object
su-text-align-center-desk-left-portrait
Style Decoration
Class Name
Value
Class Object
text-decoration-strikethrough-desk
Backgrounds
Image & gradient
Class Name
Value
Class Object
su-bg-image-name-parallax-desk
Borders
Radius
Class Name
Value
Class Object
su-border-radius-r-lg-desk-all-lg-mobile
Borders
Class Name
Value
Class Object
su-border-b-solid-1px-black-mobile
Effects
Opacity
Class Name
Value
Class Object
su-opacity-75-desk-100-tablet
Box shadows
Class Name
Value
Class Object
su-shadow-xs-to-tablet-none-mobile