Merge pull request #4573 from magento/small_changes

Small changes

Author: dobooth

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 `<magento-root>/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 `<theme-di
 
 ![node declaration autocomplete]({{ site.baseurl }}/common/images/fdg/lib-map.png){:width="610px"}
 
-```
+```css
 @navigation__background: @secondary__color__light; 
 @font-family__sans-serif: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 ```

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 `<theme_dir>/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}
 

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.

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 `<parent></parent>` node. In the `app/design/frontend/Magento/blank/theme.xml` there's no `<parent>` 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 `<current_theme_dir>/web/css/`

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:

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.

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][].