Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit d960bae

Browse files
author
Kevin Harper
committed
Merge branch 'develop' of github.corp.ebay.com:Magento/devdocs_internal into pubs29-913
2 parents 5760abc + 3109e53 commit d960bae

File tree

18 files changed

+288
-307
lines changed

18 files changed

+288
-307
lines changed

‎common/images/css_responsive1.jpg

51.2 KB
Loading

‎common/images/js_rwd_menu.png

18.1 KB
Loading

‎common/images/rwd_pract1.png

36.6 KB
Loading

‎common/images/rwd_practice.jpg

44.9 KB
Loading

‎guides/v1.0/frontend-dev-guide/css-topics/css-preprocess.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ In the Magento application, the following modes of compiling <code>.less</code>
6060

6161
<ol>
6262
<li>Server-side LESS compilation.<br>
63-
This is the default compilation mode, and is the only option in <a href="config-guide/config/magento-mode.html#mode-production" target="_blank"> production application mode</a>.
63+
This is the default compilation mode, and is the only option in <a href="{{ site.gdeurl }}config-guide/bootstrap/magento-mode.html#mode-production" target="_blank"> production application mode</a>.
6464
In this case the compilation is performed on the server, using the <a href="https://github.com/oyejorge/less.php" target="_blank">LESS PHP library</a>.
6565
</li>
6666

@@ -86,7 +86,7 @@ For each CSS file included in the layouts, LESS preprocessor does the following:
8686

8787
<ol>
8888
<li>Checks if the requested <code>.css</code> file is found. If it is found, the preprocessor stops its execution. Otherwise, it proceeds to the next step.</li>
89-
<li>Changes the extension of the requested file to <code>.less</code> and tries to find the file using the <a href="{{site.gdeurl}}v1.0/frontend-dev-guide/themes/theme-inherit.html#theme-inherit-static" target="_blank">Magento fallback mechanism</a>. If the <code>.less</code> file is not found, LESS preprocessor stops its execution. Otherwise, it proceeds to the next step.</li>
89+
<li>Changes the extension of the requested file to <code>.less</code> and tries to find the file using the <a href="{{site.gdeurl}}frontend-dev-guide/themes/theme-inherit.html#theme-inherit-static" target="_blank">Magento fallback mechanism</a>. If the <code>.less</code> file is not found, LESS preprocessor stops its execution. Otherwise, it proceeds to the next step.</li>
9090
<li>Reads <code>.less</code> file contents and resolves <a href="#fedg_css-magento-import"><code>@magento_import</code></a> and default LESS <code>@import</code> directives.</code></li>
9191

9292
<li>Resolves all paths in <code>.less</code> files to relative paths in the system using the Magento fallback mechanism. All files resolved by the LESS preprocessor are copied to <code>var/view_preprocessed/less</code>. Imported files are processed recursively.</li>

‎guides/v1.0/frontend-dev-guide/css-topics/css_debug.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ subgroup: D_CSS
55
title: Styles debugging
66
menu_order: 4
77
menu_title: Styles debugging
8-
github_link: frontend-dev-guide/css-topics/styles_node.md
8+
github_link: frontend-dev-guide/css-topics/css_debug.md
99
---
1010

1111
<h2>Overview</h2>

‎guides/v1.0/frontend-dev-guide/layouts/xml-manage.md

Lines changed: 33 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -50,20 +50,50 @@ Change the layout of Advanced Search page from default "1-column" to "2-column w
5050
JavaScript, CSS and other static assets are added in the `<head>` section of a <a href="{{site.gdeurl}}frontend-dev-guide/layouts/layout-types.html#layout-types-conf" target="_blank">page configuration</a> file. The default look of a Magento store page `<head>` is defined by `app/code/Magento/Theme/view/frontend/layout/default_head_blocks.xml`. The recommended way to add CSS and JavaScript is to extend this file in your custom theme, and add the assets there.
5151
The following file is a sample of a file you must add:
5252

53-
`app/design/frontend/<Vendor>/<theme>/Magento_Theme/layout/default_head_blocks.xml`
53+
<code>app/design/frontend/&lt;Vendor&gt;/&lt;theme&gt;/Magento_Theme/layout/default_head_blocks.xml</code>
5454

5555
<pre>
5656
&lt;page&nbsp;xmlns:xsi=&quot;http://www.w3.org/2001/XMLSchema-instance&quot;&nbsp;xsi:noNamespaceSchemaLocation=&quot;../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd&quot;&gt;
5757
&nbsp;&nbsp;&nbsp;&nbsp;&lt;head&gt;
5858
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;css&nbsp;src=&quot;css/my-styles.css&quot;/&gt;
59-
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link&nbsp;src=&quot;sample.js&quot;/&gt;
59+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link&nbsp;src=&quot;js/sample.js&quot;/&gt;
6060
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&nbsp;src=&quot;Magento_Catalog::js/sample1.js&quot;/&gt;
6161
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/head&gt;
6262
&lt;/page&gt;
6363

6464
</pre>
6565

66-
You can use either `<link src="sample.js"/>` or `<script src="sample.js"/>` instruction to add a JavaScript file to your theme.
66+
You can use either `<link src="js/sample.js"/>` or `<script src="js/sample.js"/>` instruction to add a JavaScript file to your theme.
67+
68+
The path to assets is specified relatively to one the following locations:
69+
<ul>
70+
<li><code>app/design/frontend/&lt;Vendor&gt;/&lt;theme&gt;/web</code></li>
71+
<li><code>app/design/frontend/&lt;Vendor&gt;/&lt;theme&gt;/&lt;Namespace&gt;_&lt;Module&gt;/web</code></li>
72+
73+
</ul>
74+
75+
<h3>Adding conditional comments</h3>
76+
<a href="http://en.wikipedia.org/wiki/Conditional_comment" target="_blank">Conditional comments</a> are meant to give special instructions for Internet Explorer.
77+
In the terms of adding assets, you can add CSS files to be included for a specific version of Internet Explorer.
78+
A sample follows:
79+
80+
<pre>
81+
&lt;page&nbsp;xmlns:xsi=&quot;http://www.w3.org/2001/XMLSchema-instance&quot;&nbsp;xsi:noNamespaceSchemaLocation=&quot;../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd&quot;&gt;
82+
&nbsp;&nbsp;&nbsp;&nbsp;&lt;head&gt;
83+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;css src=&quot;css/ie-9.css&quot; ie_condition=&quot;IE 9&quot; /&gt;
84+
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/head&gt;
85+
&lt;/page&gt;
86+
87+
</pre>
88+
89+
This adds an IE conditional comment in the generated HTML, like in the following example:
90+
<pre>
91+
&lt;!--[if IE 9]&gt;
92+
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;all&quot; href=&quot;&lt;your_store_web_address&gt;/pub/static/frontend/OrangeCo/orange/en_US/css/ie-9.css&quot; /&gt;
93+
&lt;![endif]--&gt;
94+
</pre>
95+
96+
In this example, <code>orange</code> is a custom theme created by the OrangeCo vendor.
6797

6898
<h2 id="layout_markup_css_remove">Remove JavaScript and CSS</h2>
6999

‎guides/v1.0/frontend-dev-guide/responsive-web-design/rwd_blocks.md

Lines changed: 0 additions & 82 deletions
This file was deleted.

‎guides/v1.0/frontend-dev-guide/responsive-web-design/rwd_css.md

Lines changed: 27 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,54 +2,57 @@
22
layout: default
33
group: fedg
44
subgroup: E_rwd
5-
title: CSS in a responsive design
6-
menu_title: CSS in a responsive design
7-
menu_order: 3
5+
title: CSS in responsive design
6+
menu_title: CSS in responsive design
7+
menu_order: 2
88
github_link: frontend-dev-guide/responsive-web-design/rwd_css.md
99
---
1010

11-
<h2 id="fedg_rwd_css_break">Breakpoints</h2>
11+
<h2>Overview</h2>
1212

13-
Responsive design uses <a href="http://www.w3.org/TR/css3-mediaqueries/" target="_blank">CSS3 media queries</a> (an extension of the `@media` rule) to adapt the layout to the viewport.
13+
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 theme <a href="{{site.gdeurl}}frontend-dev-guide/themes/theme-inherit.html" target="_blank">inherit</a> from the main default Blank theme.
1414

15-
Breakpoints are used in the CSS code to set up a viewport at which the design switches from the mobile to the desktop version.
15+
<h2 id="lib_rwd">Media queries in Magento default themes</h2>
1616

17-
The Blank theme implements three breakpoints:
17+
The Blank and Luma theme styles are based on the <a href="{{site.gdeurl}}/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 extension of the <code>@media</code> rule, to adapt the layout to the screen width.
1818

19-
* The main one at 768px
19+
According to the approach implemented in the library, the <code>.media-width()</code> mixin 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.
2020

21-
This breakpoints switches between mobile and desktop views.
2221

23-
* 600px and 800px
22+
You can find more information about the Magento UI library 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).
2423

25-
These breakpoints affect how your catalog displays.
24+
<h2 id="fedg_rwd_css_break">Breakpoints</h2>
2625

27-
CSS snippet:
26+
Breakpoints are used in the CSS code to set up the screen width at which the design switches from the mobile to the desktop version.
2827

29-
<script src="https://gist.github.com/xcomSteveJohnson/be946288f49b228e04df.js"></script>
28+
The Blank theme implements the following <a href="{{site.gdeurl}}frontend-dev-guide/responsive-web-design/rwd_overview.html#fedg_rwd_terms" target="_blank">breakpoints</a>:
29+
<ul>
30+
<li>320px</li>
31+
<li>480px</li>
32+
<li>640px</li>
33+
<li>768px (in the Blank and Luma themes, this breakpoint switches between mobile and desktop views)</li> <li>1024px</li>
34+
<li>1440px</li>
35+
</ul>
3036

31-
<h2 id="fedg_rwd_ex">Blank theme CSS examples</h2>
3237

33-
To change the position of elements depending on the screen width, you must redefine which styles control their behavior. The following example compares a two-column display for mobile and desktop viewports.
38+
<h2>Mobile first</h2>
3439

35-
Mobile version: The following figure shows the main and sidebar columns defined one after the other.
40+
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.
3641

37-
![In the mobile viewport, the columns display one on top of the other.]({{ site.baseurl }}common/images/rwd_css_resp_mobile.png)
3842

39-
Desktop version: After the breakpoint of 768px is reached, the page uses CSS provided in the `@media` query to display the same columns side by side.
43+
In the Blank theme, the mobile and desktop styles are defined in separate files:
4044

41-
CSS snippet:
45+
<ul>
46+
<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>
47+
<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>
48+
</ul>
4249

43-
<script src="https://gist.github.com/xcomSteveJohnson/787060623b87ef506bc0.js"></script>
4450

45-
How it displays in a desktop browser:
4651

47-
![In the desktop viewport, the columns display side by side.]({{ site.baseurl }}common/images/rwd_css_resp_desktop.png)
4852

49-
#### Related topics:
53+
<h2>Related topics</h2>
5054

5155
* <a href="{{ site.gdeurl }}frontend-dev-guide/themes/theme-create.html">Create a theme</a>
52-
* <a href="{{ site.gdeurl }}frontend-dev-guide/responsive-web-design/theme-best-practices.html">Theme design best practices</a>
5356
* <a href="{{ site.gdeurl }}frontend-dev-guide/css-topics/theme-ui-lib.html">Magento UI library</a>
5457
* <a href="{{ site.gdeurl }}frontend-dev-guide/responsive-web-design/rwd_js.html">JavaScript in a responsive design</a>
5558

0 commit comments

Comments
 (0)