What is FMDS?

FMDS (Fluid Multiplier Design System) is an architectural CSS framework and build-time plugin that transforms standard design pixels into continuously fluid mathematical multipliers across all viewport sizes.

Instead of authoring dozens of breakpoint-specific media queries for typography, margins, paddings, and card layouts, FMDS compiles your pixel values into a single native CSS variable:

style.css (Compiled Output)

1/* FMDS Atomic Multiplier Output */
2.hero-title {
3  font-size: calc(var(--1) * 48);
4  margin-bottom: calc(var(--1) * 24);
5  line-height: 1.15;
6}

Zero Runtime JavaScript

Unlike JavaScript-based resize listeners or window observers (such as ResizeObserver or window.addEventListener('resize')), FMDS operates entirely at build time via PostCSS. The browser's native C++ layout engine computes fluid values directly on the GPU with 0kb client JS overhead.

Key Architectural Advantages

⚡

0kb Runtime

Pure native CSS variables. No hydration delays, zero layout shift (CLS: 0.00), and immediate SSR rendering.

📐

Single Source of Truth

Develop components directly against your 1920px Figma design spec. The build tool handles mathematical scaling automatically.

🛡️

Safe 1px 4K Cap

Clamped at 1px for screens ≥ 1920px. Ultrawide and 4K displays will never suffer from oversized, blown-out components.

🐜

Universal 3rd-Party Scaling

Scales Ant Design, Shadcn UI, Bootstrap 5, and Tailwind via the root 1rem multiplier trick without extra code.

Before & After Comparison

Compare traditional media query sprawl with the streamlined FMDS developer workflow:

Traditional Media Queries (Sprawl)

css

1.card {
2  padding: 32px;
3  border-radius: 16px;
4}
5@media (max-width: 1200px) {
6  .card { padding: 24px; }
7}
8@media (max-width: 768px) {
9  .card { padding: 18px; border-radius: 12px; }
10}
11@media (max-width: 480px) {
12  .card { padding: 14px; border-radius: 8px; }
13}

The FMDS Way (Atomic Multiplier)

css

1/* Write your exact Figma pixels */
2.card {
3  padding: 32px;
4  border-radius: 16px;
5}
6 
7/* PostCSS transforms this automatically to:
8   padding: calc(var(--1) * 32);
9   border-radius: calc(var(--1) * 16); */

Next Steps

Ready to integrate FMDS into your application? Follow our quickstart guide below: