Responsive Breakpoints

This document outlines the technical implementation of responsive breakpoints. The system provides a single source of truth for breakpoint values, making them accessible in both CSS (via Tailwind) and TypeScript (via a custom service).

Core Implementation

The responsive setup is currently based on three custom breakpoints: sm, md, and lg.

1. Single Source of Truth: Breakpoints are defined once in the Tailwind configuration file (styles.css).
2. CSS Variables: The configuration generates global CSS custom properties (e.g., --breakpoint-sm) on the :root element, making the values available throughout the CSS.
3. Primary Usage (Tailwind Classes): The standard and preferred method for applying responsive styles is using Tailwind's variant prefixes (sm:, md:, lg:) directly in HTML templates.
4. Programmatic Access (Angular Service): A custom BreakpointService reads these CSS variables from the DOM, making the breakpoint values available for use in component logic (TypeScript).

---

Tailwind Configuration

Our custom breakpoints replace the default Tailwind set. The configuration in styles.css is set up to define the screen sizes. The sizes are defined in a static Theme block to be always present in the document root and are mainly for Javascript Extraction, because CSS Media-Queries can´t access Custom Properties.

@theme static {
    --breakpoint-*: initial;
    --breakpoint-sm: 956px;
    --breakpoint-md: 1440px;
    --breakpoint-lg: 1920px;
}

Usage in Templates (Standard Way)

For all layout and styling changes, you should always prefer using Tailwind's responsive prefixes directly in your component's template. This is the most efficient and declarative approach. For a comprehensive guide on how to apply these prefixes and for more advanced use cases, please refer to the official Tailwind CSS documentation on responsive design.

Usage in TypeScript (BreakpointService)

warning

Use Sparingly: Only use the BreakpointService when responsive logic cannot be handled declaratively in the template with Tailwind classes.

For cases where you need to react to breakpoint changes within your component's logic, we use the BreakpointService. This service extends the Angular CDK's BreakpointObserver. The service reads the CSS variables from the document root on initialization and provides them via function call. This avoids value duplication between your CSS and JS.

export class ExampleComponent{
    breakpointService = inject(BreakpointService);

      constructor() {
         // 1. Get a specific breakpoint value
         const lgBreakpointValue = this.breakpointService.getBreakpointSize(MonaBreakpointName.Lg);

         // 2. Observe breakpoint changes
        const mdBreakpoint = this.breakpointService.getBreakpointSize(MonaBreakpointName.Md);
        this.breakpointService
                .observe([`(min-width: ${mdBreakpoint})`])
                .pipe(takeUntilDestroyed())
                .subscribe(result => console.log(result));
      }
}