Ngx Fluid Responsive 🌊

A high-performance zero-CSS, fully automatic responsive layout and typography library for Angular. Designed to handle grid behaviors, font sizing scaling, and media ratios gracefully without ever writing Media Queries.

Features

• Fluid Grid: Map items to auto-fitting tracks using modern CSS grids. [fluidGrid]
• Fluid Typography: Flawlessly scale text using CSS clamps mathematically aligned to the viewport. [fluidText]
• Fluid Media: Maintain aspect ratios effortlessly. [fluidMedia]
• No CSS Required: Setup stunning layouts without creating external style sheets.
• A11y out-of-the-box: Ships with an injected service to track prefers-reduced-motion.
• Standalone Ready: Native to Angular 17+ standalone architecture.

Installation

npm install ngx-fluid-responsive

Setup & Configuration

Inject the fluid responsive setup in your app.config.ts (or AppModule):

import { provideFluidResponsive } from 'ngx-fluid-responsive';

export const appConfig: ApplicationConfig = {
  providers: [
    provideFluidResponsive({
      baseFontSize: 16, // Default is 16
      breakpoints: { xl: 1200 } // Add or modify standard config breakpoints
    })
  ]
};

Usage

Import the standalone directives into your Angular component:

import { FluidGridDirective, FluidTextDirective, FluidMediaDirective } from 'ngx-fluid-responsive';

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [FluidGridDirective, FluidTextDirective, FluidMediaDirective],
  templateUrl: './home.component.html'
})
export class HomeComponent {}

1. Fluid Grid

Creates a fully automated responsive grid layout. Automatically reflows items when they drop below minColWidth.

<div fluidGrid minColWidth="300px" gap="2rem">
  <div class="card">Item 1</div>
  <div class="card">Item 2</div>
  <div class="card">Item 3</div>
</div>

2. Fluid Typography

Scales font sizes mathematically between a minimum and maximum based on your viewport width.

<h1 fluidText [minFontSize]="32" [maxFontSize]="64">Responsive Header</h1>
<p fluidText [minFontSize]="16" [maxFontSize]="24">This text shrinks linearly as the viewport resizes.</p>

3. Fluid Media

Enforces aspect ratio constraints on media elements like images and videos to prevent layout shifts.

<img src="..." fluidMedia ratio="16/9" objectFit="cover" />

Checking Reduced Motion

Need to conditionally disable animations based on user-OS preferences? Inject the FluidResponsivenessService.

import { FluidResponsivenessService } from 'ngx-fluid-responsive';

constructor(private fluidService: FluidResponsivenessService) {
  this.fluidService.prefersReducedMotion$.subscribe(isReduced => {
    // Disable heavy JS-driven animations if true
  });
}

Migration Notes

This library utilizes modern CSS capabilities such as clamp(), minmax(), and aspect-ratio to avoid JavaScript recalculations where possible. Supported across all evergreen modern browsers. IE11 is strictly unsupported.