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 ccd6ad3f3bb..1ec67daf7fe 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 @@ -13,51 +13,93 @@ functional_areas: ## What's in this topic -Stylesheets are the main tool in responsive web design (RWD) implementation. This topic describes the mechanisms and approaches to building RWD used in the default Magento themes. To re-use them in your custom theme, make your {% glossarytooltip d2093e4a-2b71-48a3-99b7-b32af7158019 %}theme{% endglossarytooltip %} inherit from the Magento basic Blank theme. +Stylesheets are the main tool in responsive web design (RWD) implementation. This topic describes the mechanisms and approaches to building RWD used in the default Magento themes. To re-use them in your custom theme, make your {% glossarytooltip d2093e4a-2b71-48a3-99b7-b32af7158019 %}theme{% endglossarytooltip %} inherit from the Magento Blank theme. -

Media queries in Magento default themes

- -The Blank and Luma theme styles are based on the Magento UI library. The library uses CSS3 media queries, an {% glossarytooltip 55774db9-bf9d-40f3-83db-b10cc5ae3b68 %}extension{% endglossarytooltip %} of the @media rule, to adapt the {% glossarytooltip 73ab5daa-5857-4039-97df-11269b626134 %}layout{% endglossarytooltip %} to the screen width. +

Mobile first

-According to the approach implemented in the library, the .media-width() {% glossarytooltip 1a305bdb-9be8-44aa-adad-98758821d6a7 %}mixin{% endglossarytooltip %} can be used in any .less file in your theme, as many times as you need, but it is invoked only once, in lib/web/css/source/lib/_responsive.less. The resulting styles.css has only one call of each media query with all the rules there, instead of multiple calls for the same query. +In the Blank and Luma themes, the mobile first approach is used. It means that the styles for mobile devices (screen width less than 768px) are extended by the styles for the higher breakpoints. As the result, the extra styles are never loaded when a store is viewed on a mobile device. +The mobile and desktop styles are defined in separate files: -You can find more information about the Magento UI {% glossarytooltip 08968dbb-2eeb-45c7-ae95-ffca228a7575 %}library{% endglossarytooltip %} responsive mixin usage in <your_Magento_instance>/pub/static/frontend/Magento/blank/en_US/css/docs/responsive.html (view in a browser). +

Breakpoints

Breakpoints are used in the {% glossarytooltip 6c5cb4e9-9197-46f2-ba79-6147d9bfe66d %}CSS{% endglossarytooltip %} code to set up the screen width at which the design switches from the mobile to the desktop version. -The Blank and Luma themes implement the following breakpoints: +The Blank and Luma themes use LESS variables to implement the following breakpoints: You can change these breakpoints and add new ones in your custom theme. For instructions see the [Add a new breakpoint]({{ page.baseurl }}/frontend-dev-guide/responsive-web-design/rwd-breakpoints.html) topic. -## Mobile first +

Media queries in Magento default themes

-In the Blank and Luma themes, the mobile first approach is used. It means that the styles for mobile devices (screen width less than 768px) are extended by the styles for the higher breakpoints. As the result, the extra styles are never loaded when a store is viewed on a mobile device. +The Blank and Luma theme styles are based on the Magento UI library. The library uses CSS3 media queries, an {% glossarytooltip 55774db9-bf9d-40f3-83db-b10cc5ae3b68 %}extension{% endglossarytooltip %} of the @media rule, to adapt the {% glossarytooltip 73ab5daa-5857-4039-97df-11269b626134 %}layout{% endglossarytooltip %} to the screen width. +The approach implemented in the Magento UI library, uses @media-common style group separation and .media-width() {% glossarytooltip 1a305bdb-9be8-44aa-adad-98758821d6a7 %}mixins{% endglossarytooltip %} 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. -In the Blank theme, the mobile and desktop styles are defined in separate files: +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. + +
+//
+//  Common (style-m.css)
+//  _____________________________________________
+& when (@media-common = true) {
+    // your code
+}
+
+ +For grouping style rules in certain media queries the .media-width() mixin used. + +
+.media-width(<@extremum>, <@break>);
+
+ +@extremum: max|min - sets whether to use min-width or max-width in media query condition. If max is used the compiled styles will be placed in styles-m.css with the appropriate media query. Whereas if min is used the compiled styles will be placed in styles-l.css with the appropriate media query. +@break: value - sets the value of breakpoint to compare with in media query condition. +
+//
+//  Mobile (style-m.css)
+//  _____________________________________________
+.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
+    // your code
+}
 
+.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
+    // your code
+}
+
+//
+//  Desktop (style-l.css)
+//  _____________________________________________
+.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
+    // your code
+}
+
+.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
+    // your code
+}
+
+ +You can find more information about the Magento UI {% glossarytooltip 08968dbb-2eeb-45c7-ae95-ffca228a7575 %}library{% endglossarytooltip %} responsive mixin usage in <your_Magento_instance>/pub/static/frontend/Magento/blank/en_US/css/docs/responsive.html (view in a browser). ## Related topics * Create a theme +* CSS and LESS preprocessing * Magento UI library * JavaScript in a responsive design - -