From 84a9d4805dc91b607aa5799dfe05ec5244ae778a Mon Sep 17 00:00:00 2001 From: Abrar Pathan Date: Fri, 10 May 2019 14:45:21 +0530 Subject: [PATCH 01/15] Update css_debug.md --- guides/v2.2/frontend-dev-guide/css-topics/css_debug.md | 1 + 1 file changed, 1 insertion(+) diff --git a/guides/v2.2/frontend-dev-guide/css-topics/css_debug.md b/guides/v2.2/frontend-dev-guide/css-topics/css_debug.md index 28f81f200c2..d66daa1883c 100644 --- a/guides/v2.2/frontend-dev-guide/css-topics/css_debug.md +++ b/guides/v2.2/frontend-dev-guide/css-topics/css_debug.md @@ -74,6 +74,7 @@ The following shows which Grunt tasks to use for debugging: - After you switch the compilation mode from client-side to server-side, run the `exec` command. - After you customize the content of any `.less` file, except the root source files, run the `less` task and reload the page. - After you [customize the root source files or move the files included to the root files]({{ page.baseurl }}/frontend-dev-guide/css-topics/css-preprocess.html#css_exception), run the `exec` command and reload the page. +- After you run `php bin/magento setup:upgrade` you have to run `exec` command. - After you run the `exec` command, run the `clear` command to `clear` the Magento cache, then run the `watch` command. Running the commands in this order will ensure that any custom jQuery attributes like product sliders, banners, etc are loaded correctly. If you have LiveReload installed, run the `grunt watch` command, and the flow is even simpler: From 66ecea099a42d734c2fbf01c3d3742346c18e94c Mon Sep 17 00:00:00 2001 From: Abrar Pathan Date: Fri, 10 May 2019 14:52:23 +0530 Subject: [PATCH 02/15] Update css_debug.md --- guides/v2.1/frontend-dev-guide/css-topics/css_debug.md | 1 + 1 file changed, 1 insertion(+) diff --git a/guides/v2.1/frontend-dev-guide/css-topics/css_debug.md b/guides/v2.1/frontend-dev-guide/css-topics/css_debug.md index 5289b14bbc8..2bf485f081f 100644 --- a/guides/v2.1/frontend-dev-guide/css-topics/css_debug.md +++ b/guides/v2.1/frontend-dev-guide/css-topics/css_debug.md @@ -87,6 +87,7 @@ The following shows which Grunt tasks to use for debugging: - After you switch the compilation mode from client-side to server-side, run the `exec` command. - After you customize the content of any `.less` file, except the root source files, run the `less` task and reload the page. - After you [customize the root source files or move the files included to the root files]({{ page.baseurl }}/frontend-dev-guide/css-topics/css-preprocess.html), run the `exec` command and reload the page. +- After you run `php bin/magento setup:upgrade` you have to run `exec` command. - After you run the `exec` command, run the `clear` command to `clear` the Magento cache, then run the `watch` command. Running the commands in this order will ensure that any custom jQuery attributes like product sliders, banners, etc are loaded correctly. If you have LiveReload installed, run the `grunt watch` command, and the flow is even simpler: From 5dfddf63034b75dd6b2b6762d49a0985a106d7a8 Mon Sep 17 00:00:00 2001 From: Abrar Pathan Date: Fri, 10 May 2019 15:25:29 +0530 Subject: [PATCH 03/15] Update debug-theme.md --- guides/v2.1/frontend-dev-guide/themes/debug-theme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/guides/v2.1/frontend-dev-guide/themes/debug-theme.md b/guides/v2.1/frontend-dev-guide/themes/debug-theme.md index 84be266d66a..d04f56a1b48 100644 --- a/guides/v2.1/frontend-dev-guide/themes/debug-theme.md +++ b/guides/v2.1/frontend-dev-guide/themes/debug-theme.md @@ -79,7 +79,7 @@ After you located the necessary layout file, you can create your custom layout f ## Locate styles {#debug-theme-style} To locate a CSS rule that is applied to a certain element, find the template for the page that contains the element. Or you can use browser debugging tools, to locate the class name. -After you find the class name, use text search in the theme and module styles directories to locate the `.less` or `.css` file that defines the class. Perform the search according to the following fallback scheme: +After you find the class name, use text search in the theme and module styles directories to locate the `.less` or `.css` file that defines the class, Using the grunt tool it is easy to locate the css path with specific line number. Perform the search according to the following fallback scheme: 2. Theme styles `/web/css/` From e845e35ff61f824c4603509cb75c7f7ff0511352 Mon Sep 17 00:00:00 2001 From: Abrar Pathan Date: Tue, 14 May 2019 17:11:49 +0530 Subject: [PATCH 04/15] Update debug-theme.md --- guides/v2.1/frontend-dev-guide/themes/debug-theme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/guides/v2.1/frontend-dev-guide/themes/debug-theme.md b/guides/v2.1/frontend-dev-guide/themes/debug-theme.md index d04f56a1b48..5303edbf6b9 100644 --- a/guides/v2.1/frontend-dev-guide/themes/debug-theme.md +++ b/guides/v2.1/frontend-dev-guide/themes/debug-theme.md @@ -79,7 +79,7 @@ After you located the necessary layout file, you can create your custom layout f ## Locate styles {#debug-theme-style} To locate a CSS rule that is applied to a certain element, find the template for the page that contains the element. Or you can use browser debugging tools, to locate the class name. -After you find the class name, use text search in the theme and module styles directories to locate the `.less` or `.css` file that defines the class, Using the grunt tool it is easy to locate the css path with specific line number. Perform the search according to the following fallback scheme: +After you find the class name, use text search in the theme and module styles directories to locate the `.less` or `.css` file that defines the class. Using the grunt tool it is easy to locate the css path with specific line number. Perform the search according to the following fallback scheme: 2. Theme styles `/web/css/` From faf3697ff974a27beb4d26c5b153a068203ba07f Mon Sep 17 00:00:00 2001 From: Abrar Pathan Date: Tue, 14 May 2019 17:23:52 +0530 Subject: [PATCH 05/15] Update css_debug.md --- guides/v2.1/frontend-dev-guide/css-topics/css_debug.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/guides/v2.1/frontend-dev-guide/css-topics/css_debug.md b/guides/v2.1/frontend-dev-guide/css-topics/css_debug.md index 2bf485f081f..540d3f96c0f 100644 --- a/guides/v2.1/frontend-dev-guide/css-topics/css_debug.md +++ b/guides/v2.1/frontend-dev-guide/css-topics/css_debug.md @@ -87,7 +87,7 @@ The following shows which Grunt tasks to use for debugging: - After you switch the compilation mode from client-side to server-side, run the `exec` command. - After you customize the content of any `.less` file, except the root source files, run the `less` task and reload the page. - After you [customize the root source files or move the files included to the root files]({{ page.baseurl }}/frontend-dev-guide/css-topics/css-preprocess.html), run the `exec` command and reload the page. -- After you run `php bin/magento setup:upgrade` you have to run `exec` command. +- After you run `php bin/magento setup:upgrade`, run `exec` command. - After you run the `exec` command, run the `clear` command to `clear` the Magento cache, then run the `watch` command. Running the commands in this order will ensure that any custom jQuery attributes like product sliders, banners, etc are loaded correctly. If you have LiveReload installed, run the `grunt watch` command, and the flow is even simpler: From 0891cb9b3dd66a8672ee130214583b12776696c6 Mon Sep 17 00:00:00 2001 From: Abrar Pathan Date: Tue, 14 May 2019 17:24:21 +0530 Subject: [PATCH 06/15] Update css_debug.md --- guides/v2.2/frontend-dev-guide/css-topics/css_debug.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/guides/v2.2/frontend-dev-guide/css-topics/css_debug.md b/guides/v2.2/frontend-dev-guide/css-topics/css_debug.md index d66daa1883c..61e7dcd4efb 100644 --- a/guides/v2.2/frontend-dev-guide/css-topics/css_debug.md +++ b/guides/v2.2/frontend-dev-guide/css-topics/css_debug.md @@ -74,7 +74,7 @@ The following shows which Grunt tasks to use for debugging: - After you switch the compilation mode from client-side to server-side, run the `exec` command. - After you customize the content of any `.less` file, except the root source files, run the `less` task and reload the page. - After you [customize the root source files or move the files included to the root files]({{ page.baseurl }}/frontend-dev-guide/css-topics/css-preprocess.html#css_exception), run the `exec` command and reload the page. -- After you run `php bin/magento setup:upgrade` you have to run `exec` command. +- After you run `php bin/magento setup:upgrade`, run `exec` command. - After you run the `exec` command, run the `clear` command to `clear` the Magento cache, then run the `watch` command. Running the commands in this order will ensure that any custom jQuery attributes like product sliders, banners, etc are loaded correctly. If you have LiveReload installed, run the `grunt watch` command, and the flow is even simpler: From 35cd2b1e2dd2689db129eb1a98497e54e690a67b Mon Sep 17 00:00:00 2001 From: Abrar Pathan Date: Mon, 20 May 2019 16:08:22 +0530 Subject: [PATCH 07/15] Update rwd_css.md --- .../v2.1/frontend-dev-guide/responsive-web-design/rwd_css.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/guides/v2.1/frontend-dev-guide/responsive-web-design/rwd_css.md b/guides/v2.1/frontend-dev-guide/responsive-web-design/rwd_css.md index 369f4473ea7..56ad48a8f77 100644 --- a/guides/v2.1/frontend-dev-guide/responsive-web-design/rwd_css.md +++ b/guides/v2.1/frontend-dev-guide/responsive-web-design/rwd_css.md @@ -44,6 +44,9 @@ The Blank and Luma theme styles are based on the [Magento UI library]. The libra The approach implemented in the Magento UI library, uses `@media-common` style group separation and `.media-width()` mixins which can be used in any `.less` file in a theme, as many times as needed, but it is invoked only once, in `lib/web/css/source/lib/_responsive.less`. The resulting `styles-m.css` and `styles-l.css` both have only one call of each media query with all the rules there, instead of multiple calls for the same query. +- CSS added in Media queries condition `@media-common`, max `screen__s` and max `screen__m` it will add in styles-m.css +- CSS added Media queries condition in min `screen__m` and min `screen__l` it will add in styles-l.css + If working on a theme which inherits from either the Blank or Luma theme, it's recommended to use `.media-width()` and style groups separation. Otherwise the style rules will be added twice, once to `styles-m.css` and once more to `styles-l.css`. For Less styles rules to be compiled to `styles-m.css` without a media query so that they apply to all screen widths use the `@media-common` style group separation. From 2e1f492c51b505da0b16c51820a3d11a01a83aac Mon Sep 17 00:00:00 2001 From: Abrar Pathan Date: Mon, 20 May 2019 17:44:24 +0530 Subject: [PATCH 08/15] Update layout-overview.md --- guides/v2.2/frontend-dev-guide/layouts/layout-overview.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/guides/v2.2/frontend-dev-guide/layouts/layout-overview.md b/guides/v2.2/frontend-dev-guide/layouts/layout-overview.md index d554d1eade1..5b45c381b81 100644 --- a/guides/v2.2/frontend-dev-guide/layouts/layout-overview.md +++ b/guides/v2.2/frontend-dev-guide/layouts/layout-overview.md @@ -12,6 +12,8 @@ This article describes the basic concepts you need to know to create layouts for In Magento, the basic components of page design are layouts, containers, and blocks. A *layout* represents the structure of a web page (1). *Containers* represent the placeholders within that web page structure (2). And *blocks* represent the UI controls or components within the container placeholders (3). These terms are illustrated and defined below. +The objective is to create a structured and common set of layout instructions to render pages. Most pages on a website can be categories as set into a 1 column, 2 column, or 3 column container system. These page layouts can be selected throughout the admin panel to give a peculiar layout by page. + ![web page sample layout][layout] (1) *Layouts* provide the structures for web pages using an XML file that identifies all the containers and blocks composing the page. The details of layout XML files are described later in this section. From 0671c5fe451cd9c9300698ba192e58d27dc895c4 Mon Sep 17 00:00:00 2001 From: Donald Booth Date: Mon, 20 May 2019 15:00:25 -0500 Subject: [PATCH 09/15] Grammar fix. --- guides/v2.1/frontend-dev-guide/themes/debug-theme.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/guides/v2.1/frontend-dev-guide/themes/debug-theme.md b/guides/v2.1/frontend-dev-guide/themes/debug-theme.md index 5303edbf6b9..ee4f15b2010 100644 --- a/guides/v2.1/frontend-dev-guide/themes/debug-theme.md +++ b/guides/v2.1/frontend-dev-guide/themes/debug-theme.md @@ -64,11 +64,11 @@ There is no straightforward algorithm how to define at once the exact layout fil Example: -Let's say you need to locate the layout that is responsible for displaying mini shopping cart on the storefront, when the Blank theme by Magento is applied for the {% glossarytooltip ca5a9ff1-8182-4fc4-a34b-9b3f831dbf3f %}store view{% endglossarytooltip %}. +Say you need to locate the layout that is responsible for displaying mini shopping cart on the storefront, when the Blank theme by Magento is applied for the {% glossarytooltip ca5a9ff1-8182-4fc4-a34b-9b3f831dbf3f %}store view{% endglossarytooltip %}. Using the Template Hints we determine that the template is `app/code/Magento/Checkout/view/frontend/templates/cart/minicart.phtml`, and in the path, we see that it belongs to the `Magento_Checkout` module. -Let's search for the layout following the fallback scheme: +Search for the layout following the fallback scheme: 1. Check the `app/design/frontend/Magento/blank/Magento_Checkout/` layout. To locate the required layout, search this directory for occurrences of the template name, " minicart.phtml ". No matching file is found, so we proceed to the next fallback level, which is the parent theme layouts. 2. We can find the info about parent theme in a theme configuration file `theme.xml`, the parent theme name is specified there in the `` node. In the `app/design/frontend/Magento/blank/theme.xml` there's no `` node, which means the Blank theme has no parents. So we should search on the next fallback level which is the module layouts. @@ -78,8 +78,8 @@ After you located the necessary layout file, you can create your custom layout f ## Locate styles {#debug-theme-style} -To locate a CSS rule that is applied to a certain element, find the template for the page that contains the element. Or you can use browser debugging tools, to locate the class name. -After you find the class name, use text search in the theme and module styles directories to locate the `.less` or `.css` file that defines the class. Using the grunt tool it is easy to locate the css path with specific line number. Perform the search according to the following fallback scheme: +To locate a CSS rule that is applied to a certain element, find the template for the page that contains the element. Or use browser debugging tools to locate the class name. +After you find the class name, use text search in the theme and module styles directories to locate the `.less` or `.css` file that defines the class. Using the grunt tool makes it easy to locate the CSS path to the specific line number. Perform the search according to the following fallback scheme: 2. Theme styles `/web/css/` From 139db51f6074fe58b56233007fe544814b51c21a Mon Sep 17 00:00:00 2001 From: Donald Booth Date: Mon, 20 May 2019 15:05:23 -0500 Subject: [PATCH 10/15] Formatting. --- .../frontend-dev-guide/css-topics/css_debug.md | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/guides/v2.1/frontend-dev-guide/css-topics/css_debug.md b/guides/v2.1/frontend-dev-guide/css-topics/css_debug.md index 540d3f96c0f..e9a80a8ce97 100644 --- a/guides/v2.1/frontend-dev-guide/css-topics/css_debug.md +++ b/guides/v2.1/frontend-dev-guide/css-topics/css_debug.md @@ -84,15 +84,15 @@ grunt watch | Tracks the changes in the source files, recompiles `.css` files, a The following shows which Grunt tasks to use for debugging: -- After you switch the compilation mode from client-side to server-side, run the `exec` command. -- After you customize the content of any `.less` file, except the root source files, run the `less` task and reload the page. -- After you [customize the root source files or move the files included to the root files]({{ page.baseurl }}/frontend-dev-guide/css-topics/css-preprocess.html), run the `exec` command and reload the page. -- After you run `php bin/magento setup:upgrade`, run `exec` command. -- After you run the `exec` command, run the `clear` command to `clear` the Magento cache, then run the `watch` command. Running the commands in this order will ensure that any custom jQuery attributes like product sliders, banners, etc are loaded correctly. +- After you switch the compilation mode from client-side to server-side, run the `exec` command. +- After you customize the content of any `.less` file, except the root source files, run the `less` task and reload the page. +- After you [customize the root source files or move the files included to the root files]({{ page.baseurl }}/frontend-dev-guide/css-topics/css-preprocess.html), run the `exec` command and reload the page. +- After you run the `bin/magento setup:upgrade` command, run the `exec` command. +- After you run the `exec` command, run the `clear` command to `clear` the Magento cache, then run the `watch` command. Running the commands in this order will ensure that any custom jQuery attributes like product sliders, banners, etc are loaded correctly. If you have LiveReload installed, run the `grunt watch` command, and the flow is even simpler: -- After you customize the content of any `.less` file, changes are applied and the page reloads automatically. No additional changes are required. -- After you [customize the root source files or move the files included to the root files]({{ page.baseurl }}/frontend-dev-guide/css-topics/css-preprocess.html), run the `clean` and `exec` commands, and the browser page reloads automatically. +- After you customize the content of any `.less` file, changes are applied and the page reloads automatically. No additional changes are required. +- After you [customize the root source files or move the files included to the root files]({{ page.baseurl }}/frontend-dev-guide/css-topics/css-preprocess.html), run the `clean` and `exec` commands, and the browser page reloads automatically. ## CSS source maps {#source_maps} @@ -113,7 +113,6 @@ The path to the CSS source maps configuration differs, depending on the browser. In Google Chrome, to enable source maps generation, go to **Inspect** > **Settings** > **Preferences** > **Enable CSS source maps**. - Magento has a base set of variables that define commonly used aspects of a theme; such as colors, fonts, style of page titles, and so on. The `/lib/web/css/source/lib/variables` directory contains LESS files that define values assigned to variables for many of the common elements in Magento. @@ -122,7 +121,7 @@ To change or override any of these variables, simply create a file in ` Date: Mon, 20 May 2019 15:09:32 -0500 Subject: [PATCH 11/15] Grammar update. --- guides/v2.2/frontend-dev-guide/layouts/layout-overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/guides/v2.2/frontend-dev-guide/layouts/layout-overview.md b/guides/v2.2/frontend-dev-guide/layouts/layout-overview.md index 5b45c381b81..bcc80c37eb7 100644 --- a/guides/v2.2/frontend-dev-guide/layouts/layout-overview.md +++ b/guides/v2.2/frontend-dev-guide/layouts/layout-overview.md @@ -12,7 +12,7 @@ This article describes the basic concepts you need to know to create layouts for In Magento, the basic components of page design are layouts, containers, and blocks. A *layout* represents the structure of a web page (1). *Containers* represent the placeholders within that web page structure (2). And *blocks* represent the UI controls or components within the container placeholders (3). These terms are illustrated and defined below. -The objective is to create a structured and common set of layout instructions to render pages. Most pages on a website can be categories as set into a 1 column, 2 column, or 3 column container system. These page layouts can be selected throughout the admin panel to give a peculiar layout by page. +The objective is to create a structured, common set of layout instructions to render pages. Most pages on a website can be categorized as a 1 column, 2 column, or 3 column layout. These page layouts can applied to a page from within the admin panel. ![web page sample layout][layout] From 320dbe41be868d65f449ef1008628d7acf4d40fe Mon Sep 17 00:00:00 2001 From: Donald Booth Date: Mon, 20 May 2019 15:16:26 -0500 Subject: [PATCH 12/15] Grammar and formatting. --- .../v2.1/frontend-dev-guide/responsive-web-design/rwd_css.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/guides/v2.1/frontend-dev-guide/responsive-web-design/rwd_css.md b/guides/v2.1/frontend-dev-guide/responsive-web-design/rwd_css.md index 56ad48a8f77..299d7a7086f 100644 --- a/guides/v2.1/frontend-dev-guide/responsive-web-design/rwd_css.md +++ b/guides/v2.1/frontend-dev-guide/responsive-web-design/rwd_css.md @@ -44,8 +44,8 @@ The Blank and Luma theme styles are based on the [Magento UI library]. The libra The approach implemented in the Magento UI library, uses `@media-common` style group separation and `.media-width()` mixins which can be used in any `.less` file in a theme, as many times as needed, but it is invoked only once, in `lib/web/css/source/lib/_responsive.less`. The resulting `styles-m.css` and `styles-l.css` both have only one call of each media query with all the rules there, instead of multiple calls for the same query. -- CSS added in Media queries condition `@media-common`, max `screen__s` and max `screen__m` it will add in styles-m.css -- CSS added Media queries condition in min `screen__m` and min `screen__l` it will add in styles-l.css +- Media queries `@media-common`, `max screen__s` and `max screen__m` will be added to `styles-m.css`. +- Media queries `min screen__m` and `min screen__l` will be added to `styles-l.css`. If working on a theme which inherits from either the Blank or Luma theme, it's recommended to use `.media-width()` and style groups separation. Otherwise the style rules will be added twice, once to `styles-m.css` and once more to `styles-l.css`. From cd89e344ad121687ace7726aea31e3d44d5d4551 Mon Sep 17 00:00:00 2001 From: Abrar Pathan Date: Tue, 21 May 2019 14:33:57 +0530 Subject: [PATCH 13/15] Update theme-ui-lib.md --- .../frontend-dev-guide/css-topics/theme-ui-lib.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/guides/v2.1/frontend-dev-guide/css-topics/theme-ui-lib.md b/guides/v2.1/frontend-dev-guide/css-topics/theme-ui-lib.md index cc7445f0960..686a90a3f8e 100644 --- a/guides/v2.1/frontend-dev-guide/css-topics/theme-ui-lib.md +++ b/guides/v2.1/frontend-dev-guide/css-topics/theme-ui-lib.md @@ -150,6 +150,20 @@ To set tabs and accordions using breakpoints, see the following example: } } ``` +## Navigation set with CSS + +Use the Navigation style for mobile and tab style for desktop. + +To set navigation using breakpoints, see the following example: +```text +.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) { + .lib-main-navigation(); +} + +.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) { + .lib-main-navigation-desktop(); +} +``` ## Embedded documentation {#docs} From 92e2663edfd03e5f166751cce89df5e2f7c209eb Mon Sep 17 00:00:00 2001 From: Billy Gilbert Date: Tue, 21 May 2019 10:12:20 -0500 Subject: [PATCH 14/15] Correct vendor name (#4567) The proper vendor name for the elasticsearch module is elasticsearch, not elastic. --- guides/v2.3/config-guide/elasticsearch/es-downgrade.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/guides/v2.3/config-guide/elasticsearch/es-downgrade.md b/guides/v2.3/config-guide/elasticsearch/es-downgrade.md index 660f2835c63..9974b28784b 100644 --- a/guides/v2.3/config-guide/elasticsearch/es-downgrade.md +++ b/guides/v2.3/config-guide/elasticsearch/es-downgrade.md @@ -21,19 +21,19 @@ Running ES 2.x is strongly discouraged. If you need to work with Elasticsearch 5.x, run the following command: ```bash -composer require "elastic/elasticsearch:~5.1" +composer require "elasticsearch/elasticsearch:~5.1" ``` If you need to work with Elasticsearch 2.x, run the following command: ```bash -composer require "elastic/elasticsearch:~2.0" +composer require "elasticsearch/elasticsearch:~2.0" ``` To re-enable Elasticsearch 6.x, run the following command: ```bash -composer require "elastic/elasticsearch:~6.1" +composer require "elasticsearch/elasticsearch:~6.1" ``` Then configure Elasticsearch within [Magento Admin][]. From 4f97ed7bc10e6c956d1c260b096ee3ce9b75144e Mon Sep 17 00:00:00 2001 From: Donald Booth Date: Tue, 21 May 2019 11:00:10 -0500 Subject: [PATCH 15/15] Formatting fixes. --- .../css-topics/theme-ui-lib.md | 22 ++++++++++++------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/guides/v2.1/frontend-dev-guide/css-topics/theme-ui-lib.md b/guides/v2.1/frontend-dev-guide/css-topics/theme-ui-lib.md index 686a90a3f8e..5b57d5fb1cc 100644 --- a/guides/v2.1/frontend-dev-guide/css-topics/theme-ui-lib.md +++ b/guides/v2.1/frontend-dev-guide/css-topics/theme-ui-lib.md @@ -34,12 +34,13 @@ The Magento UI library provides the ability to customize and reuse the following The following illustration shows a {% glossarytooltip 1a70d3ac-6bd9-475a-8937-5f80ca785c14 %}storefront{% endglossarytooltip %} product page containing some of the preceding elements: -![A product page with user interface elements specified][ui_lib1.png] +![*A product page with user interface elements specified*][ui_lib1.png] ## Mixin location {#fedg_using-ui-lib_mixins} -You can find the Magento UI library under [`lib/web/css`]. +You can find the Magento UI library under [`lib/web/css`][]. Library source `.less` files are stored under the `source` directory, each file contains mixins for configuring a certain element, and in most cases the element coincides with the file name: + ```tree lib/web ├── css/ @@ -85,12 +86,12 @@ lib/web ## Predefined variables {#fedg_using-ui-lib_predef-vars} -If your theme [inherits] from any Magento out-of-the-box theme, for example Blank, you can easily customize any element of a store page without changing any {% glossarytooltip 6c5cb4e9-9197-46f2-ba79-6147d9bfe66d %}CSS{% endglossarytooltip %} code or templates. +If your theme [inherits][] from any Magento out-of-the-box theme, for example Blank, you can easily customize any element of a store page without changing any {% glossarytooltip 6c5cb4e9-9197-46f2-ba79-6147d9bfe66d %}CSS{% endglossarytooltip %} code or templates. Customization can be performed by simply changing in your theme the values of the predefined variables used in the UI library or parent theme mixins. -The complete list of these variables and their default values are stored in [`lib/web/css/source/lib/variables`]. +The complete list of these variables and their default values are stored in [`lib/web/css/source/lib/variables`][]. This directory contains a set of files, corresponding to the set of UI library elements, and each of the files lists element-specific variables. -For example, [`lib/web/css/source/lib/variables/_breadcrumbs.less`] contains variables used in the `breadcrumbs()` {% glossarytooltip 1a305bdb-9be8-44aa-adad-98758821d6a7 %}mixin{% endglossarytooltip %}. +For example, [`lib/web/css/source/lib/variables/_breadcrumbs.less`][] contains variables used in the `breadcrumbs()` {% glossarytooltip 1a305bdb-9be8-44aa-adad-98758821d6a7 %}mixin{% endglossarytooltip %}. To change the default library variables values, specify the new values for the required variables in the `/web/css/source/_theme.less` file. @@ -101,7 +102,7 @@ So if you want to inherit the parent theme's variable values additionally to you The following figure shows the product page shown earlier in this topic, after a custom theme was applied. The theme customized Blank by redefining variables only. -![Changing design by redefining variables][ui_lib2.png] +![*Changing design by redefining variables*][ui_lib2.png] ## Your custom variables {#fedg_using-ui-lib_vars} @@ -114,12 +115,15 @@ The following paragraphs describe both ways to call a mixin. To use a mixin with default values, call the mixin without specifying any parameters. For example: + ```css .breadcrumbs { .lib-breadcrumbs(); } ``` + To call a mixin with parameter values different from default, set these values when calling the mixin, like in the following example: + ```css .example-button { .lib-button( @@ -137,7 +141,8 @@ Variables starting with `@` (without the underscore) are global, and are listed Use the accordion style for mobile and tab style for desktop. To set tabs and accordions using breakpoints, see the following example: -```text + +```css & when (@media-common = true) { .product.data.items { .lib-data-accordion(); @@ -155,7 +160,8 @@ To set tabs and accordions using breakpoints, see the following example: Use the Navigation style for mobile and tab style for desktop. To set navigation using breakpoints, see the following example: -```text + +```css .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) { .lib-main-navigation(); }