DEV Community

FSCSS tutorial profile image FSCSS
FSCSS for FSCSS tutorial

Posted on

FSCSS Toast System (Dynamic UI Without Repetition)

#fscss #css #webdev #programming

A clean, scalable toast/notification system built with FSCSS using events + arrays + dynamic selectors.

No repeated classes. No manual variants.
Just structured, reusable styling.

Features

  • Dynamic toast types (success, error, warning, info)
  • Centralized color logic using @event
  • Auto-generated class variants with @arr
  • Clean and scalable structure
  • Modern UI styling (glass + soft colors)

Define Toast Color Logic 

@event toast-color(type){

if type:success{
  return: #38d9a9;
}

el-if type:error{
  return: #ff6b6b;
}

el-if type:warning{
  return: #f7b267;
}

el{
  return: #74c0fc;
}

}
Enter fullscreen mode Exit fullscreen mode

This acts like a function:

type → color

Base Toast Component 

.toast{
  padding: 12px 16px;
  border-radius: 10px;
  color: #fff;
  font-size: 14px;

  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(8px);

  border-left: 4px solid currentColor;

  display: flex;
  gap: 10px;
  align-items: center;

  min-width: 220px;
}
Enter fullscreen mode Exit fullscreen mode

Generate Toast Variants 

@arr toast-types[success,error,warning,info]
@arr i[1,2,3,4]

.toast-@arr.toast-types[@arr.i[]]{

  $type: @arr.toast-types[@arr.i[]];

  color: @event.toast-color($type);
}
Enter fullscreen mode Exit fullscreen mode

💡 Why the Index Mapping?

FSCSS currently resolves:

  • Selector → index ("1, 2, 3...")
  • Value → actual array value ("success, error...")

So we map them together:

index → value → selector

Result:

.toast-success { color: ... }
.toast-error { color: ... }
Enter fullscreen mode Exit fullscreen mode

Usage 

<div class="toast toast-success">Operation successful</div>

<div class="toast toast-error">Something went wrong</div>

<div class="toast toast-warning">Check your input</div>

<div class="toast toast-info">New update available</div>
Enter fullscreen mode Exit fullscreen mode

✨ Optional: Add Icons 

<div class="toast toast-success">✔ Operation successful</div>
<div class="toast toast-error">✖ Something went wrong</div>
<div class="toast toast-warning">⚠ Check your input</div>
<div class="toast toast-info">ℹ New update available</div>
Enter fullscreen mode Exit fullscreen mode

🔥 How It Works

Flow:

Class → Array Mapping → Event Logic → Final Style

Example:

toast-success
→ mapped to "success"
→ passed into @event
→ returns color
→ applied to UI

Why This Pattern Matters

  • Avoids repetitive CSS
  • Centralizes UI logic
  • Scales easily as types grow
  • Keeps styling consistent

Takeaway

This approach shows how FSCSS can:

  • Handle UI state
  • Generate variants automatically
  • Apply logic inside styling

Without relying on JavaScript.

Next Ideas

  • Add animations (slide-in, fade)
  • Create stacked notifications (top-right)
  • Build theme variations (dark/light)
  • Auto-inject icons via "@event"

Clean. Scalable. Powerful.

Welcome to structured CSS ❤️

fscss image

FSCSS tutorial

Figured Shorthand Cascading Style Sheet

Top comments (0)