Smart Utilities | Fast Flow Kit

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

Direction: Horizontal

Direction: Vertical

👉

su-flex-v-mobile

Direction: Horizontal

Direction: Vertical

👉

su-flex-v-portrait

Direction: Horizontal

Direction: Vertical

👉

su-block-desk-flex-v-stretch-mobile

Display: Block

Display: Flex

Direction: Vertical

Align: Stretch

👉

Flex (Child)

Class Name

Value

Class Object

su-flex-child-order-first-mobile

Order: First

👉

Display: Grid

Class Name

Value

Class Object

su-grid-al-ju-center-desk-stretch-mobile

Align: Start - Justify: Center

Align: Start - Justify: Stretch

👉

Display: None

Class Name

Value

Class Object

su-display-block-desk-none-mobile

Display: Block

Display: None

👉

Spacing

Margin

Class Name

Value

Class Object

su-ml-2.5rem-desk-0-mobile

Margin Left: 2,5rem

Margin Left: 0

👉

su-mr-2.5rem-desk-0-mobile

Margin Right: 2,5rem

Margin Right: 0

👉

su-mx-auto-mobile

Margin (Left & Right): Auto

👉

su-mx-8-desk-4-mobile

Margin (Left & Right): 2rem

Margin (Left & Right): 1rem

👉

su-my-8-desk-4-mobile

Margin (Top & Bottom): 2rem

Margin (Top & Bottom): 1rem

👉

su-my-4-mobile

Margin (Top & Bottom): 1rem

👉

su-my-8-mobile

Margin (Top & Bottom): 2rem

👉

Padding

Class Name

Value

Class Object

su-py-1.25rem-portrait

Padding (Top & Bottom): 1.25rem

👉

su-px-8-desk-4-mobile

Padding (Left & Right): 2rem

Padding (Left & Right): 1rem

👉

su-py-8-desk-4-mobile

Padding (Top & Bottom): 2rem

Padding (Top & Bottom): 1rem

👉

Size

Width

Class Name

Value

Class Object

su-w-full-mobile

Width: 100%

👉

su-max-w-none-mobile

Max Width: None

👉

Height

Class Name

Value

Class Object

su-h-full-desk

Height: 100%

👉

su-h-screen-to-tablet

Height: 100vh

👉

su-h-half-screen-portrait

Height: 50vh

👉

Position

Class Name

Value

Class Object

su-position-relative-t-4.5rem-desk-3.5rem-mobile

Position: Relative (Top: 4.5rem)

Position: Relative (Top: 3.5rem)

👉

Float

Class Name

Value

Class Object

su-float-left-to-landscape

Float: Left

Float: None

👉

su-float-right-to-landscape

Float: Right

Float: None

👉

Clear

Class Name

Value

Class Object

su-clear-left-mobile

Clear: None

Clear: Left

👉

su-clear-right-mobile

Clear: None

Clear: Right

👉

su-clear-both-mobile

Clear: None

Clear: Both

👉

Typography

Weight

Class Name

Value

Class Object

su-font-weight-normal-to-landscape-bold-mobile

Font Weight: 400 - Normal

Font Weight: 700 - Bold

👉

Size

Class Name

Value

Class Object

su-text-size-sx-desk-sm-mobile

Font Size: 0.75rem

Font Size: 0.875rem

👉

Height

Class Name

Value

Class Object

su-text-height-snug-desk-relaxed-mobile

Text Height: 1.375em

Text Height: 1.625em

👉

Color

Class Name

Value

Class Object

su-text-color-transparent-desk-black-tablet

Text Color: Transparent

Text Color: Black

👉

Align

Class Name

Value

Class Object

su-text-align-center-desk-left-portrait

Text Align: Center

Text Align: Left

👉

Style Decoration

Class Name

Value

Class Object

text-decoration-strikethrough-desk

Text Decoration: Strikethrough

👉

Backgrounds

Image & gradient

Class Name

Value

Class Object

su-bg-image-name-parallax-desk

Background Type: Image

Background Fixed

Background Type: Image

Background Not fixed

👉

Borders

Radius

Class Name

Value

Class Object

su-border-radius-r-lg-desk-all-lg-mobile

Border Radius (Top Right - Bottom Right): 0.5rem

Border Radius (All): 0.5rem

👉

Borders

Class Name

Value

Class Object

su-border-b-solid-1px-black-mobile

Borders (Bottom): Style: Solid | Width: 1px | Color: Black

👉

Effects

Opacity

Class Name

Value

Class Object

su-opacity-75-desk-100-tablet

Opacity: 75

Opacity: 100

👉

Box shadows

Class Name

Value

Class Object

su-shadow-xs-to-tablet-none-mobile

👉