Skip to content

Responsive Styling with Breakpoints

Super JavaScript Stylesheets (SJSS) offers a powerful and intuitive approach to implementing responsive designs in Angular applications. Through a system of breakpoints, developers can create styles that adapt seamlessly to various screen sizes.

Table of Contents

  1. Breakpoint Upscaling in SJSS
  2. Responsive Styling Example
  3. Updating Breakpoints
  4. Further Learning Resources

Breakpoint Upscaling in SJSS

SJSS employs an 'upscaling' approach for breakpoints:

Responsive Styling Example

Here's how to apply responsive styling in an Angular component using SJSS:

  import { Component } from "@angular/core";
  import { SjDirective } from "super-jss";

  @Component({
    standalone: true,
    selector: 'app-responsive-demo',
    template: `
      <div [sj]="{
        p: {
          xs: '5px',    // Padding for extra small screens
          md: '10px',   // Padding for medium screens
          lg: '15px'    // Padding for large screens
          xl: '20px',   // Padding for extra large screens
          xxl: '25px'  // Padding for extra extra large screens        
        },
        bg: {
          xs: '#6699ff', // Background color for extra small screens
          md: '#99ff66', // Background color for medium screens
          lg: '#ff6699'  // Background color for large screens
        }
      }">
        Responsive SJSS Component!
      </div>
    `
  })
  export class ResponsiveDemoComponent {}

For interactive examples and more, visit SJSS on StackBlitz.

Updating Breakpoints

To customize breakpoints, use the SjThemeService in SJSS, which is particularly powerful and user-friendly due to its use of Angular signals. This approach minimizes boilerplate and simplifies state management.

import { Component } from "@angular/core";
import { SjDirective, SjThemeService } from "super-jss";

@Component({
  standalone: true,
  selector: 'app-responsive-demo',
  template: `
    <button (click)="updateBreakpoints()" [sj]="{ p: 1, bg: 'primary.main', color: 'primary.contrast', borderRadius: '4px', cursor: 'pointer' }">
      Update Breakpoints
    </button>
  `
})
export class ResponsiveDemoComponent {
  constructor(private sjTheme: SjThemeService) {}
  updateBreakpoints(): void {
    this.sjTheme.setTheme({
      breakpoints: {
        sm: 660, // optional: a new breakpoint assigned to sm
        md: 980, // optional: a new breakpoint assigned to md
        // add lg, xl, or xxl if needed.
      }
    });
  }
}

This example demonstrates how to update breakpoints in SJSS. For more examples, visit SJSS on StackBlitz.

Further Learning Resources

For additional information and examples on responsive styling with SJSS, explore the following resources: - SJSS on npm: Detailed package information and installation guide. - Interactive Examples on StackBlitz: Explore hands-on examples and see SJSS in action.

⬅️ Previous: Styling Shortcuts | Next: Colors ➡️