import { Meta } from '@storybook/addon-docs/blocks';

<Meta title="Guides/Custom Components/Less.js/Breakpoints" />

# Less.js: Breakpoints

**Note:** Storybook renders this page inside of an `iframe`! The width taken into account by the media query is that of the `iframe` and not the full viewport window. Hide Storybook's navigation sidebar (or pop out this page) to preview the media query against the full browser width.

---

Import the `breakpoints.less` file from the `@preply/ds-web-core` package and use the breakpoint name as a mixin:

```css
@import '@preply/ds-web-core/dist/generated/breakpoints.less';

.container {
    display: flex;
    flex-direction: column;

    @media @medium-l {
        flex-direction: row;
    }
}
```

Alternatively you can use the `@breakpoints` variable to access the pixel values directly.

We recommend using only `min-width` media queries in order to structure your code with a "mobile first" approach.

Check out this [small article (3 min read)](https://medium.com/swlh/use-min-width-not-max-width-in-your-css-e6898fcf6a78) for a quick explanation why.

```css
@import '@preply/ds-web-core/dist/generated/breakpoints.less';

.container {
    display: flex;
    flex-direction: column;

    @media (min-width: @breakpoints[medium-l]) {
        flex-direction: row;
    }
}
```
