From 8d1d5054e399d7cc9d4e504cba1c0a272d0a0e0c Mon Sep 17 00:00:00 2001 From: Olga Matviienko Date: Tue, 2 Apr 2024 18:11:25 +0300 Subject: [PATCH] Update customize-styles.md Added a section on how to override UI library files --- .../guide/css/quickstart/customize-styles.md | 23 +++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/src/pages/guide/css/quickstart/customize-styles.md b/src/pages/guide/css/quickstart/customize-styles.md index a66ff077..109e15e5 100644 --- a/src/pages/guide/css/quickstart/customize-styles.md +++ b/src/pages/guide/css/quickstart/customize-styles.md @@ -83,6 +83,28 @@ To override parent styles (that is, override default UI library variables): The drawback of this approach is that you need to monitor and manually update your files whenever the parent's `_theme.less` is updated. +## Override UI library files + +To add a new breakpoint to the "responsive mixin, override the UI library's `_responsive.less` in your theme: + +1. In your theme directory, create a `web/css/source/lib` sub-directory. +1. Create a `_responsive.less` file here. The path to it looks like the following: + + ```tree + / + │ ├── web/ + │ │ ├── css/ + │ │ │ ├── source/ + │ │ │ ├──lib/ + │ │ │ ├──_responsive.less + ... + ``` + + This file overrides the `_responsive.less` of the UI library. + +1. In your `_responsive.less` file, add the `.media-width` mixin rule for your breakpoint in the corresponding section. If the file is left blank, then compilation of .less files will fail with an error. Here is the full guide on how to [add a custom breakpoint]. + + ## Add structured changes To make your changes easier to read and support, structure them by adding a separate overriding or extending `.less` files for each [UI library component] you change. Let's use the `button` component implemented in `_button.less` as an illustration. @@ -171,3 +193,4 @@ For example, to override the Magento_Review module's style, the directory path s [Less compilation mode]: compilation-mode.md [UI library component]: ../ui-library.md#components +[add a custom breakpoint]: ../../responsive-design/breakpoints.md