Skip to content
This repository was archived by the owner on Nov 19, 2024. It is now read-only.

Improvements for CSS in responsive design doc #1963

Merged
merged 2 commits into from
Jul 24, 2018
Merged

Improvements for CSS in responsive design doc #1963

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
dcade4a
Added more detail on the use of the the .media-width() mixin and the …
rossmc May 23, 2018
50f944b
Merge branch 'master' into update-to-rwd_css.md
bdenham Jul 13, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
84 changes: 63 additions & 21 deletions guides/v2.1/frontend-dev-guide/responsive-web-design/rwd_css.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %} <a href="{{ page.baseurl }}/frontend-dev-guide/themes/theme-inherit.html" target="_blank">inherit</a> 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 %} <a href="{{ page.baseurl }}/frontend-dev-guide/themes/theme-inherit.html" target="_blank">inherit</a> from the Magento Blank theme.

<h2 id="lib_rwd">Media queries in Magento default themes</h2>

The Blank and Luma theme styles are based on the <a href="{{ page.baseurl }}/frontend-dev-guide//css-topics/theme-ui-lib.html" target="_blank">Magento UI library</a>. The library uses <a href="http://en.wikipedia.org/wiki/Media_queries" target="_blank">CSS3 media queries</a>, an {% glossarytooltip 55774db9-bf9d-40f3-83db-b10cc5ae3b68 %}extension{% endglossarytooltip %} of the <code>@media</code> rule, to adapt the {% glossarytooltip 73ab5daa-5857-4039-97df-11269b626134 %}layout{% endglossarytooltip %} to the screen width.
<h2>Mobile first</h2>

According to the approach implemented in the library, the <code>.media-width()</code> {% glossarytooltip 1a305bdb-9be8-44aa-adad-98758821d6a7 %}mixin{% endglossarytooltip %} can be used in any <code>.less</code> file in your theme, as many times as you need, but it is invoked only once, in <code>lib/web/css/source/lib/_responsive.less</code>. The resulting <code>styles.css</code> 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 <code>&lt;your_Magento_instance&gt;/pub/static/frontend/Magento/blank/en_US/css/docs/responsive.html</code> (view in a browser).
<ul>
<li><a href="{{ site.mage2000url }}app/design/frontend/Magento/blank/web/css/styles-l.less">styles-l.less</a> is used to generate desktop-specific styles (768px and higher).</li>
<li><a href="{{ site.mage2000url }}app/design/frontend/Magento/blank/web/css/styles-m.less">styles-m.less</a> is used to generate basic and mobile-specific styles.</li>
</ul>

<h2 id="fedg_rwd_css_break">Breakpoints</h2>

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 <a href="{{ page.baseurl }}/frontend-dev-guide/responsive-web-design/rwd_overview.html#fedg_rwd_terms" target="_blank">breakpoints</a>:
The Blank and Luma themes use LESS variables to implement the following <a href="{{ page.baseurl }}/frontend-dev-guide/responsive-web-design/rwd_overview.html#fedg_rwd_terms" target="_blank">breakpoints</a>:
<ul>
<li>320px</li>
<li>480px</li>
<li>640px</li>
<li>768px (in the Blank and Luma themes, this breakpoint switches between mobile and desktop views)</li> <li>1024px</li>
<li>1440px</li>
<li><code>@screen__xxs</code>: 320px</li>
<li><code>@screen__xs</code>: 480px</li>
<li><code>@screen__s</code>: 640px</li>
<li><code>@screen__m</code>: 768px (in the Blank and Luma themes, this breakpoint switches between mobile and desktop views)</li>
<li><code>@screen__l</code>: 1024px</li>
<li><code>@screen__xl</code>: 1440px</li>
</ul>

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
<h2 id="lib_rwd">Media queries in Magento default themes</h2>

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 <a href="{{ page.baseurl }}/frontend-dev-guide//css-topics/theme-ui-lib.html" target="_blank">Magento UI library</a>. The library uses <a href="http://en.wikipedia.org/wiki/Media_queries" target="_blank">CSS3 media queries</a>, an {% glossarytooltip 55774db9-bf9d-40f3-83db-b10cc5ae3b68 %}extension{% endglossarytooltip %} of the <code>@media</code> 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 <code>@media-common</code> style group separation and <code>.media-width()</code> {% glossarytooltip 1a305bdb-9be8-44aa-adad-98758821d6a7 %}mixins{% endglossarytooltip %} which can be used in any <code>.less</code> file in a theme, as many times as needed, but it is invoked only once, in <code>lib/web/css/source/lib/_responsive.less</code>. The resulting <code>styles-m.css</code> and <code>styles-l.css</code> 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 <code>.media-width()</code> and style groups separation. Otherwise the style rules will be added twice, once to <code>styles-m.css</code> and once more to <code>styles-l.css</code>.

<ul>
<li><a href="{{ site.mage2000url }}app/design/frontend/Magento/blank/web/css/styles-l.less">styles-l.less</a> is used to generate desktop-specific styles (768px and higher).</li>
<li><a href="{{ site.mage2000url }}app/design/frontend/Magento/blank/web/css/styles-m.less">styles-m.less</a> is used to generate basic and mobile-specific styles.</li>
</ul>
For LESS styles rules to be compiled to <code>styles-m.css</code> without a media query so that they apply to all screen widths use the <code>@media-common</code> style group separation.

<pre>
//
// Common (style-m.css)
// _____________________________________________
& when (@media-common = true) {
// your code
}
</pre>

For grouping style rules in certain media queries the .media-width() mixin used.

<pre>
.media-width(<@extremum>, <@break>);
</pre>

<code>@extremum: max|min</code> - sets whether to use min-width or max-width in media query condition. If <code>max</code> is used the compiled styles will be placed in <code>styles-m.css</code> with the appropriate media query. Whereas if <code>min</code> is used the compiled styles will be placed in <code>styles-l.css</code> with the appropriate media query.

<code>@break: value</code> - sets the value of breakpoint to compare with in media query condition.

<pre>
//
// 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
}
</pre>

You can find more information about the Magento UI {% glossarytooltip 08968dbb-2eeb-45c7-ae95-ffca228a7575 %}library{% endglossarytooltip %} responsive mixin usage in <code>&lt;your_Magento_instance&gt;/pub/static/frontend/Magento/blank/en_US/css/docs/responsive.html</code> (view in a browser).

## Related topics

* <a href="{{ page.baseurl }}/frontend-dev-guide/themes/theme-create.html">Create a theme</a>
* <a href="{{ page.baseurl }}/frontend-dev-guide/css-topics/css-preprocess.html">CSS and LESS preprocessing</a>
* <a href="{{ page.baseurl }}/frontend-dev-guide/css-topics/theme-ui-lib.html">Magento UI library</a>
* <a href="{{ page.baseurl }}/frontend-dev-guide/responsive-web-design/rwd_js.html">JavaScript in a responsive design</a>