Breakpoints

Five named breakpoints define the responsive grid. All breakpoints use min-width media queries for a mobile-first approach.

Breakpoint values

The breakpoint map is defined in settings/_breakpoints.scss and can be overridden at import time.

Responsive class convention

Responsive modifiers use a @{bp} suffix appended to the class name. The suffixed class applies from the named breakpoint upward (mobile-first). This convention works with both BEM block modifiers and utility classes.

<!-- Grid: 1 column by default, 3 columns from md up -->
<div class="ln-grid ln-grid--cols-1 ln-grid--cols-3@md">
  <div class="border p-2 text-center">One</div>
  <div class="border p-2 text-center">Two</div>
  <div class="border p-2 text-center">Three</div>
</div>

Responsive utilities

Utility classes that have responsive: true in the utility map also accept the @{bp} suffix. Common responsive utilities include display, text alignment, margin, padding, flex direction, and width.

<!-- Hidden by default, visible as block from md up -->
<div class="d-none d-block@md border p-2 mb-3">Visible from md up</div>

<!-- Left-aligned by default, centred from lg up -->
<p class="text-start text-center@lg border p-2">Centred from lg up</p>

Overriding breakpoints

Override the default map when importing the library. Custom breakpoint names become available as suffixes throughout the system.

@use 'ln/scss' with (
  $breakpoints: (
    sm:  480px,
    md:  768px,
    lg:  992px,
    xl:  1200px,
    '2xl': 1600px,
  )
);

Reference

Responsive suffixes are available on BEM block modifiers (grid, cluster) and utility classes with responsive: true (display, spacing, text-align, flex, width, float, font).