Morse CSS Utility Examples

A demonstration of the utility-CSS-like styles in Morse CSS

Spacing Utilities

Padding Examples

This element has 4px padding (PADDING1).

This element has 16px padding (PADDING3).

This element has 32px padding (PADDING5).

Margin Examples

This element has 4px margin (MARGIN1).

This element has 16px margin (MARGIN3).

This element has 32px margin (MARGIN5).

Gap Example

Item 1
Item 2
Item 3

Layout Utilities

Flex Layout Examples

Left
Center
Right
Top
Middle
Bottom

Grid Layout Example

Grid Item 1
Grid Item 2
Grid Item 3
Grid Item 4
Grid Item 5
Grid Item 6

Size Utilities

This is a full-width element.
This is half-width.
This is half-width.
Third
Third
Third

Border Utilities

This element has a standard border.
This element has a thin border.
This element has a thick border.
This element has rounded corners.
This element has fully rounded corners.

Typography Utilities

This text is small (SMALL).

This text is medium (MEDIUM).

This text is large (LARGE).

This text is extra large (XLARGE).

This text is extra extra large (XXLARGE).

This text is left-aligned (LEFT).

This text is center-aligned (CENTER).

This text is right-aligned (RIGHT).

This text has a strikethrough (STRIKE).

This text has an overline (OVERLINE).

Color Utilities

This text is red (RED).

This text is green (GREEN).

This text is blue (BLUE).

This text is yellow (YELLOW).

This text is purple (PURPLE).

This text is orange (ORANGE).

This has a red background (BGRED).

This has a green background (BGGREEN).

This has a blue background (BGBLUE).

This has a yellow background (BGYELLOW).

This has a purple background (BGPURPLE).

This has an orange background (BGORANGE).

Combined Examples

This is a card with multiple utilities.
This is another card with multiple utilities.
This is a third card with multiple utilities.