Breakpoints

A flexible breakpoint system is provided to support responsive interfaces based on changes in viewport and container sizes.

Breakpoints are used internally by various elements to enable responsive behavior. Additionally, all elements support the overrides property, which allows any property to be conditionally overridden based on the active breakpoint.

#

Media vs. Container Queries

Two types of breakpoints are supported:

• Media queries – triggered by the viewport width, allowing elements to be adapted globally across different screen sizes.
• Container queries – triggered by the size of the parent container, enabling elements to be adjusted independently within flexible layouts.

#

Default Values

The following breakpoints are enabled by default:

{ // media breakpoints 'xs': { type: 'media', min: 0 }, 'sm': { type: 'media', min: 600 }, 'md': { type: 'media', min: 900 }, 'lg': { type: 'media', min: 1200 }, 'xl': { type: 'media', min: 1536 }, // container breakpoints '@xs': { type: 'container', min: 0 }, '@sm': { type: 'container', min: 384 }, '@md': { type: 'container', min: 640 }, '@lg': { type: 'container', min: 768 }, '@xl': { type: 'container', min: 1024 }, }

#

Custom Breakpoints

Default breakpoints can be replaced or extended in two steps.

#

1. Type Configuration

Custom breakpoints should be defined by extending PlusConfigOverrides. New values override the defaults; any previous values must be explicitly redefined if they are still needed.

declare module '@htmlplus/ui' { interface PlusConfigOverrides { breakpoint: 'mobile' | 'tablet' | 'laptop'; } }

#

2. Value Configuration

Breakpoint ranges are configured using setConfig in the application entry file.

import { setConfig } from '@htmlplus/ui/config.js'; setConfig({ breakpoints: { // Custom breakpoints mobile: { type: 'media', min: 0, max: 599 }, tablet: { type: 'media', min: 600, max: 899 }, laptop: { type: 'media', min: 900 }, } });