/
githubmirror
/
magento2
Обзор
Документация
Войти
/
githubmirror
/
magento2
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
2.4-develop
lib/web/css/docs/layout.html
343 строки
229 KB
Alexandra Zota
ACP2E-4019: CE copyright updates for 2.4.9-beta1
22 окт 2025, 10:58
22 окт 2025, 10:58
3d4f486
Код
Авторство
О чём код?
<!-- /** * Copyright 2014 Adobe * All Rights Reserved. */ --> <!DOCTYPE html><html><head><title>layout | Magento UI Library </title><meta charset="utf-8"><style>*{-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;border:0}body{padding:60px 0 40px;background-color:hsl(207,10%,90%);color:hsl(207,5%,30%)}.co … [Строка слишком длинная. Вы можете скачать файл] <p> Magento UI library provides mixins for flexible page layout customization. For simple quick layout customization global layout variables are used.</p> </div><div class="code"><pre><code>header.header { background-color: rgba(255, 0, 0, .2); } .column.main { background-color: rgba(255, 255, 0, .2); } .column.left { background-color: rgba(0, 255, 255, .2); } .column.right { background-color: rgba(0, 0, 255, .2); } footer.footer { background-color: rgba(0, 0, 0, .2); }</code></pre></div></article><article id="layout-global-variables" class="section"><div class="docs"><a href="#layout-global-variables" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="layout-global-variables">Layout global variables</h1> <pre> <table> <tr> <th class="vars_head">Variables list names</th> <th class="vars_head">Default value</th> <th class="vars_head">Allowable values</th> <th class="vars_head">Comment</th> </tr> <tr> <th>@layout__width</th> <td class="vars_value">''</td> <td class="vars_value">'' | false | value</td> <td>Page minimum width</td> </tr> <tr> <th>@layout__max-width</th> <td class="vars_value">1280px</td> <td class="vars_value">'' | false | value</td> <td>Page maximum width</td> </tr> <tr> <th>@layout-indent__width</th> <td class="vars_value">20px</td> <td class="vars_value">'' | false | value</td> <td>Page indents on the left and right</td> </tr> <tr> <th colspan="4" class="vars_section">Class names defining different layouts</th> </tr> <tr> <th>@layout-class-1column</th> <td class="vars_value">page-layout-1column</td> <td class="vars_value">'' | false | <span style="white-space: nowrap">page-layout-1column</span> | <span style="white-space: nowrap">page-layout-2columns-left</span> | <span style="white-space: nowrap">page-layout-2columns-right</span> | <span style="white-space: nowrap">page-layout-3columns</span></td> <td>Class name for one column layout</td> </tr> <tr> <th>@layout-class-2columns__left</th> <td class="vars_value">page-layout-2columns-left</td> <td class="vars_value">'' | false | <span style="white-space: nowrap">page-layout-1column</span> | <span style="white-space: nowrap">page-layout-2columns-left</span> | <span style="white-space: nowrap">page-layout-2columns-right</span> | <span style="white-space: nowrap">page-layout-3columns</span></td> <td>Class name for two columns layout with left sidebar</td> </tr> <tr> <th nowrap="nowrap">@layout-class-2columns__right</th> <td class="vars_value">page-layout-2columns-right</td> <td class="vars_value">'' | false | <span style="white-space: nowrap">page-layout-1column</span> | <span style="white-space: nowrap">page-layout-2columns-left</span> | <span style="white-space: nowrap">page-layout-2columns-right</span> | <span style="white-space: nowrap">page-layout-3columns</span></td> <td>Class name for two columns layout with right sidebar</td> </tr> <tr> <th>@layout-class-3columns</th> <td class="vars_value">page-layout-3columns</td> <td class="vars_value">'' | false | <span style="white-space: nowrap">page-layout-1column</span> | <span style="white-space: nowrap">page-layout-2columns-left</span> | <span style="white-space: nowrap">page-layout-2columns-right</span> | <span style="white-space: nowrap">page-layout-3columns</span></td> <td>Class name for three columns layout with left sidebar</td> </tr> <tr> <th colspan="4" class="vars_section">Variables used for layout grid</th> </tr> <tr> <th>@total-columns</th> <td class="vars_value">12</td> <td class="vars_value">'' | false | value</td> <td>Number of total columns in layout (i.e. <em>1, 2, 3</em>)</td> </tr> <tr> <th>@gutter-width</th> <td class="vars_value">0</td> <td class="vars_value">'' | false | value</td> <td>Distanse between columns</td> </tr> <tr> <th colspan="4" class="vars_section">Variables for layout columns</th> </tr> <tr> <th>@layout-column__width</th> <td class="vars_value">@total-columns</td> <td class="vars_value">'' | false | value</td> <td>Sets base columns number</td> </tr> <tr> <th>@layout-column__sidebar-width</th> <td class="vars_value">2</td> <td class="vars_value">'' | false | value</td> <td>Sets sidebar width</td> </tr> <tr> <th>@layout-column__left-width</th> <td class="vars_value">@layout-column__sidebar-width</td> <td class="vars_value">'' | false | value</td> <td>Sets left column width</td> </tr> <tr> <th>@layout-column__right-width</th> <td class="vars_value">@layout-column__sidebar-width</td> <td class="vars_value">'' | false | value</td> <td>Sets right column width</td> </tr> <tr> <th colspan="4" class="vars_section">Variables for layout columns depending on layout used</th> </tr> <tr> <th>@layout-column-main__width-1</th> <td class="vars_value">100%</td> <td class="vars_value">'' | false | value</td> <td>Sets one column width</td> </tr> <tr> <th>@layout-column-main__width-2-left</th> <td class="vars_value">@layout-column__width - @layout-column__left-width</td> <td class="vars_value">'' | false | value</td> <td>Sets left column width</td> </tr> <tr> <th nowrap="nowrap">@layout-column-main__width-2-right</th> <td class="vars_value">@layout-column__width - @layout-column__right-width</td> <td class="vars_value">'' | false | value</td> <td>Sets right column width</td> </tr> <tr> <th>@layout-column-main__width-3</th> <td class="vars_value">@layout-column__width - @layout-column__left-width - @layout-column__right-width</td> <td class="vars_value">'' | false | value</td> <td>Sets three columns layout main column width</td> </tr> <tr> <th colspan="4" class="vars_section">Settings variables</th> </tr> <tr> <th>@use-flex</th> <td class="vars_value">true</td> <td class="vars_value">'' | true | false</td> <td>Sets compatibility for browsers not supporting flex</td> </tr> <tr> <th>@responsive</th> <td class="vars_value">true</td> <td class="vars_value">'' | true | false</td> <td>Is set to true if theme has responsive layout</td> </tr> </table> </pre> </div></article><article id="page-layouts" class="section"><div class="docs"><a href="#page-layouts" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="page-layouts">Page layouts</h1> <p> Default properties for page columns are generated using alias mixins:</p> <p> <code>#lib-layout-columns</code> - sets columns container</p> <p> <code>#lib-layout-columns > .main()</code> - alias for main column</p> <p> <code>#lib-layout-columns > .left()</code> - alias for left column</p> <p> <code>#lib-layout-columns > .right()</code> - alias for right column</p> <p> <code>#lib-layout-columns > .reset()</code> - column width and order reset may be used in RWD</p> <p> These aliases use default class names for layouts predefined in vars (i.e. <code>@layout-class-3columns: layout-3</code>) and general column mixin <em><a href="#layout-column"><code>.lib-layout-column()</code></a></em></p> <h2 id="three-columns-page-layout">Three columns page layout</h2> <textarea class="preview-code" spellcheck="false"> <div class="page-wrapper layout-3"> <header class="header">Header</header> <section class="page main"> <div class="columns"> <div class="column main">Main column</div><!-- --><div class="column left sidebar">Left column</div><!-- --><div class="column right sidebar">Right column</div> </div> </section> <footer class="footer">Footer</footer> </div></textarea><h2 id="two-columns-page-layout-with-sidebar-on-the-left">Two columns page layout with sidebar on the left</h2> <textarea class="preview-code" spellcheck="false"> <div class="page-wrapper layout-2-left"> <header class="header">Header</header> <section class="page main"> <div class="columns"> <div class="column main">Main column</div><!-- --><div class="column left sidebar">Left column</div> </div> </section> <footer class="footer">Footer</footer> </div></textarea><h2 id="two-columns-page-layout-with-sidebar-on-the-right">Two columns page layout with sidebar on the right</h2> <textarea class="preview-code" spellcheck="false"> <div class="page-wrapper layout-2-right"> <header class="header">Header</header> <section class="page main"> <div class="columns"> <div class="column main">Main column</div><!-- --><div class="column right sidebar">Right column</div> </div> </section> <footer class="footer">Footer</footer> </div></textarea><h2 id="one-column-page-layout">One column page layout</h2> <textarea class="preview-code" spellcheck="false"> <div class="page-wrapper layout-1"> <header class="header">Header</header> <section class="page main"> <div class="columns"> <div class="column main">Main column</div> </div> </section> <footer class="footer">Footer</footer> </div></textarea> </div><div class="code"><pre><code>.columns { #lib-layout-columns(); > .column { &:extend(.add-box-sizing all); .lib-css(padding-bottom, @indent__xl); } } @media (min-width: 600px) { .column.main { #lib-layout-columns > .main(); } .column.left { #lib-layout-columns > .left(); } .column.right { #lib-layout-columns > .right(); } }</code></pre></div></article><article id="layout-column" class="section"><div class="docs"><a href="#layout-column" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="layout-column">Layout column</h1> <p> The <code>.layout-column()</code> mixin is used to setup page columns. It configures number, position and width of columns</p> <p> 3 columns layout example:</p> <textarea class="preview-code" spellcheck="false"> <div class="layout-example-3"> <header class="header">Header</header> <section class="page main"> <div class="columns"> <div class="column main">Main column</div><!-- --><div class="column left sidebar">Left column</div><!-- --><div class="column right sidebar">Right column</div> </div> </section> <footer class="footer">Footer</footer> </div></textarea><p> To move main column to the left, change 2nd argument <code>@_order</code> for main and left columns:</p> <pre><code class="lang-less"> .lib-column.main { .lib-layout-column(3, 1, 60%); } .lib-column.left { .lib-layout-column(3, 2, 20%); }</code></pre> <textarea class="preview-code" spellcheck="false"> <div class="layout-example-3-1"> <header class="header">Header</header> <section class="page main"> <div class="columns"> <div class="column main">Main column</div><!-- --><div class="column left sidebar">Left column</div><!-- --><div class="column right sidebar">Right column</div> </div> </section> <footer class="footer">Footer</footer> </div></textarea> </div><div class="code"><pre><code>.layout-example-3 { .column.main { .lib-layout-column(3, 2, 60%); } .column.left { .lib-layout-column(3, 1, 20%); } .column.right { .lib-layout-column(3, 3, 20%); } } .layout-example-3-1 { .column.main { .lib-layout-column(3, 1, 60%); } .column.left { .lib-layout-column(3, 2, 20%); } .column.right { .lib-layout-column(3, 3, 20%); } }</code></pre></div></article><article id="layout-column-variables" class="section"><div class="docs"><a href="#layout-column-variables" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="layout-column-variables">Layout column variables</h1> <pre> <table> <tr> <th class="vars_head">Mixin variable</th> <th class="vars_head">Allowed values</th> <th class="vars_head">Comment</th> </tr> <tr> <th>@_layout__min-width </th> <td class="vars_value">number</td> <td>Number of total columns in layout (i.e. <em>1, 2, 3</em>)</td> </tr> <tr> <th>@_order</th> <td class="vars_value">number</td> <td>Order of current column</td> </tr> <tr> <th>@_width</th> <td class="vars_value">number</td> <td>Width set in css units (<em>20%, 300px, etc.</em>) or in <em>grid columns</em> if unit is not specified. (<em>4</em>)</td> </tr> </table> </pre> </div></article><article id="layout-width" class="section"><div class="docs"><a href="#layout-width" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="layout-width">Layout width</h1> <p> The <code>.lib-layout-width()</code> mixin is used to set default page width of the element the mixin is applyed to. It can be used to set width for the whole page wrapper or for the page elements individualy like header, footer, and so on.</p> </div></article><article id="layout-width-variables" class="section"><div class="docs"><a href="#layout-width-variables" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="layout-width-variables">Layout width variables</h1> <pre> <table> <tr> <th class="vars_head">Mixin variable</th> <th class="vars_head">Default value</th> <th class="vars_head">Allowed values</th> <th class="vars_head">Comment</th> </tr> <tr> <th>@_layout__min-width</th> <td class="vars_value">''</td> <td class="vars_value">'' | false | value</td> <td>Page minimum width</td> </tr> <tr> <th>@_layout__max-width</th> <td class="vars_value">1280px</td> <td class="vars_value">'' | false | value</td> <td>Page maximum width</td> </tr> <tr> <th>@_layout__indent</th> <td class="vars_value">20px</td> <td class="vars_value">'' | false | value</td> <td>Page indents on the left and right</td> </tr> </table> </pre> </div></article></section><div class="bar bottom"><div hidden class="settings container"><!-- Icons from http://iconmonstr.com--><button title="Desktop (1280)" data-width='1280'><svg viewBox="0 0 412 … [Строка слишком длинная. Вы можете скачать файл]