SimpleCSS
  • ☀️Light
  • 🌙Dark
  • 💻System
Download

🛠️ Helpers

📐 What are helpers used for?

Helpers provide small, utility-focused classes designed to quickly adjust common visual or structural behaviors without writing custom CSS. They cover text decoration, list layouts, and fit-content sizing. These classes are lightweight and meant to be combined freely with other components.

💠 Examples

Here are basic examples showing how helper utilities behave:

.no-underline
  • .list-inline
  • .list-inline
  • .list-inline
  • .list-column
  • .list-column
  • .list-column

💻 HTML Code

.no-underline
  • Inline 1
  • Inline 2
  • Inline 3
  • Column A
  • Column B
  • Column C

📏 Helper Utilities Reference

Each helper class focuses on a very specific behavior. Below is the complete reference, one card per utility family.

.no-underline

Removes text underline from the element and any nested links.

.list-unstyled

Removes list bullet styling while keeping the natural block layout.

.list-inline

Displays items horizontally using flex, applying spacing via --list-inline-gap.

.list-column

Stacks items vertically with spacing from --list-column-gap.

.fit-height

Makes the element’s height shrink to fit its content.

.fit-width

Makes the element’s width shrink to fit its content.

.fit-size

Applies fit-content to both width and height.

⚙️ Variables CSS

Variable Description
--list-column-gap Gap between list columns.
--list-inline-gap Gap between inline list items.