Responsive

Available breakpoints

Define the minimum and maximum dimensions at which your layout will change, adapting to different screen sizes, for use in media queries.

SCSS variables

Basic usage

To access or change the breakpoints in the scss use $grid-breakpoints variable.

Example when the screen is narrower than md breakpoint.

@include media-breakpoint-down(map.get($grid-breakpoints, 'md')) { // styles here }

Example when the screen is wider than lg breakpoint.

@include media-breakpoint-up(map.get($grid-breakpoints, 'lg')) { // styles here }

CSS Custom Media Breakpoints

Media breakpoints in CSS are defined using the following variables.

Available Breakpoints

Basic Usage

The structure of a breakpoint variable is:

--pgn-size-breakpoint-{width_type}-{class_infix}

Explanation of the variable components:

• {width_type} specifies the width type, either min for a minimum width (inclusive) or max for a maximum width (inclusive).
• {class_infix} refers to the breakpoint name, such as sm, md, or lg.

Example for applying styles when the screen width is narrower than the md breakpoint:

@media (--pgn-size-breakpoint-max-width-md) { // styles here }

For applying styles when the screen width is wider than the md breakpoint:

@media (--pgn-size-breakpoint-min-width-md) { // styles here }