Less And UI Framework

Media Query Breakpoints

To use Magento's breakpoint system you need to use the .media-width mixin. This isn't a normal media query and uses Mixin Guards

1
2
3
4
5
6
7
8
//
//  Medium Desktop
//  _____________________________________________
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .footer-links__col {
        .lib-layout-column(5, 0, 25%);
    }
}

The @extremum parameter is either min or max strings followed by the desired targeted breakpoint @break.

Depending on the breakpoint min/max values used determines whether this goes in to the mobile styles or desktop styles or both.

Screen width breakpoints

The available breakpoints to use with responsive design are listed in lib/web/css/source/lib/variables/_responsive.less The default breakpoints at time of writing are

1
2
3
4
5
6
7
8
9
@use-flex: true; // Use flexbox [true|false]
@responsive: true; // Theme is responsive [true|false]

@screen__xxs: 320px;
@screen__xs: 480px;
@screen__s: 640px;
@screen__m: 768px;
@screen__l: 1024px;
@screen__xl: 1440px;

It is not recommended to change the @use-flex or @responsive booleans/