Search code examples
spartacus-storefront

How to edit the default spartacus breakpoints

In Spartacus, I see this breakpoint.service.ts
But may I know how to override or create a custom set of breakpoints? It doesn't seem to include any set method (?)

Solution

  • While you could override the service, the intend is that you configure the breakpoints, using the typed LayoutConfig. You can configure one or multiple breakpoints using the ConfigModule:

    ConfigModule.withConfig({
  breakpoints: {
    xs: 576,
    sm: 768,
    md: 1024,
    lg: 1200
  },
} as LayoutConfig)

    The typescript configuration is used to control the DOM. TO control the CSS, you need to configure the breakpoints in the CSS, using the scss $grid-breakpoints variable. 

    $grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 1024px,
  xl: 1200px,
) !default;

    Unfortunately, those configurations are a bit out of sync: in CSS, you specify the max value for the breakpoint, where as in typescript you specify the min value.