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..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,14 +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 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} @@ -112,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. @@ -121,7 +121,7 @@ To change or override any of these variables, simply create a file in `/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(); @@ -150,6 +155,21 @@ 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: + +```css +.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} 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..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,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. +- 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`. 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. 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..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. 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/` 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..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,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`, 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: 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..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,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, 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] (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. 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][].