initial commit

4 files changed, 247 insertions, 0 deletions

diff --git a/files/ru/web/css/layout_cookbook/breadcrumb_navigation/index.html b/files/ru/web/css/layout_cookbook/breadcrumb_navigation/index.html
new file mode 100644
index 0000000000..f2452542a7
--- /dev/null
+++ b/files/ru/web/css/layout_cookbook/breadcrumb_navigation/index.html
@@ -0,0 +1,62 @@
+---
+title: Breadcrumb Navigation
+slug: Web/CSS/Layout_cookbook/Breadcrumb_Navigation
+translation_of: Web/CSS/Layout_cookbook/Breadcrumb_Navigation
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Навигация по хлебным крошкам помогает пользователю понять свое местоположение на веб-сайте, обеспечивая обратный путь к начальной странице.</p>
+
+<p><img alt="Links displayed inline with separators" src="https://mdn.mozillademos.org/files/16228/breadcrumb-navigation.png" style="height: 108px; width: 1268px;"></p>
+
+<h2 id="Требование">Требование</h2>
+
+<p>Элементы обычно отображаются в строке с разделителем, чтобы указать иерархию между отдельными страницами.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/breadcrumb-navigation.html", '100%', 530)}}</p>
+
+<div class="note">
+<p><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/breadcrumb-navigation--download.html">Загрузить этот пример</a></p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Примечение</strong>: В приведенном выше примере используются два селектора для вставки содержимого перед каждым li, кроме первого. Этого также можно добиться, используя только один селектор:</p>
+
+<pre class="notranslate">.breadcrumb li:not(:first-child)::before {
+  content: "→";
+}
+</pre>
+
+<p>Это решение использует более сложный селектор, но требует меньше правил. Смело выбирайте то решение, которое вам больше по душе.</p>
+</div>
+
+<h2 id="Сделанный_выбор">Сделанный выбор</h2>
+
+<p>Этот шаблон построен с использованием простого гибкого макета, демонстрирующего, как строка CSS может дать нам нашу навигацию. Разделители добавляются с использованием содержимого, созданного CSS. Вы можете изменить их на любой разделитель, который вам нравится.</p>
+
+<h2 id="Проблемы_доступности">Проблемы доступности</h2>
+
+<p>Я использовал атрибуты <code>aria-label </code>и <code>aria-current</code>, чтобы помочь пользователям понять, что это за навигация и где в структуре находится текущая страница.<br>
+ Смотреть связанные ссылки для получения дополнительной информации.</p>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+<p>Различные методы компоновки имеют разную поддержку браузером. Смотреть диаграммы ниже для получения подробной информации о базовой поддержке используемых свойств.</p>
+
+<div class="hidden">
+<p>Таблица совместимости на этой странице создана на основе структурированных данных. Если вы хотите внести свой вклад в данные, посетите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на перенос.</p>
+</div>
+
+<h4 id="Flexbox">Flexbox</h4>
+
+<p>{{Compat("css.properties.flex")}}</p>
+
+<h2 id="See_also" name="See_also">Смотреть также</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexible Box Layout</a></li>
+ <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G65.html">Создание следа из хлебных крошек</a></li>
+ <li><a href="https://tink.uk/using-the-aria-current-attribute/">Использование атрибута aria-current</a></li>
+</ul>
diff --git a/files/ru/web/css/layout_cookbook/index.html b/files/ru/web/css/layout_cookbook/index.html
new file mode 100644
index 0000000000..5c53652804
--- /dev/null
+++ b/files/ru/web/css/layout_cookbook/index.html
@@ -0,0 +1,67 @@
+---
+title: CSS Layout cookbook
+slug: Web/CSS/Layout_cookbook
+tags:
+  - CSS
+  - Layout
+  - NeedsTranslation
+  - TopicStub
+  - cookbook
+  - recipes
+translation_of: Web/CSS/Layout_cookbook
+---
+<div>{{CSSRef}}<br>
+Книга рецептов CSS объединяет примеры большинства наиболее распространненых лейаут паттернов, которые могу встретиться вам при разработке веб-сайтов.<br>
+<br>
+В дополнение к представленным примерам кода, - которые вы вполне можете использовать в качестве отправной точки для своих проектов, - эти рецепты иллюстрируют нестандартные способы применения существующих лейаут (layout) спецификаций. Паттерны, представленные ниже, должны помочь вам увидеть новые варианты решения проблем, встречающихся в жизни разработчика.</div>
+
+<div><br>
+<strong>Примечание.</strong> Если вы новичок в в работе с CSS, то сначала вы можете взглянуть на наш модуль обучения макетам CSS, так как он даст вам базовые знания, необходимые для использования приведенных здесь рецептов.</div>
+
+<h2 id="The_Recipes">The Recipes</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Recipe</th>
+   <th scope="col">Description</th>
+   <th scope="col">Layout Methods</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Media_objects">Media Objects</a></td>
+   <td>A two-column box with an image on one side and descriptive text on the other, e.g. a facebook post or tweet.</td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a>, {{cssxref("float")}} fallback, {{cssxref("fit-content")}} sizing</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Column_layouts">Columns</a></td>
+   <td>When to choose multi-column layout, flexbox or grid for your columns</td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a>, <a href="/en-US/docs/Web/CSS/CSS_Columns">Multicol</a>, <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Center_an_element">Center an element</a></td>
+   <td>How to center an item horizontally and vertically</td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, <a href="/en-US/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Sticky_footers">Sticky footers</a></td>
+   <td>Creating a footer which sits at the bottom of the container or viewport when the content is shorter. </td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a>, <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Split_Navigation">Split Navigation</a></td>
+   <td>A navigation pattern where some links are visually separated from the others.</td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, {{cssxref("margin")}}</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Breadcrumb_Navigation">Breadcrumb Navigation</a></td>
+   <td>Creating a list of links to allow the visitor to navigate back up through the page hierarchy.</td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Contribute_a_Recipe">Contribute a Recipe</h2>
+
+<p>As with all of MDN we would love you to contribute a recipe in the same format as the ones shown above. <a href="/en-US/docs/user:chrisdavidmills/Layout_Cookbook_Home/Contribute_a_recipe">See this page</a> for a template and guidelines for writing your own example.</p>
diff --git a/files/ru/web/css/layout_cookbook/split_navigation/index.html b/files/ru/web/css/layout_cookbook/split_navigation/index.html
new file mode 100644
index 0000000000..5f08999af1
--- /dev/null
+++ b/files/ru/web/css/layout_cookbook/split_navigation/index.html
@@ -0,0 +1,48 @@
+---
+title: Раздельная навигация
+slug: Web/CSS/Layout_cookbook/Split_Navigation
+translation_of: Web/CSS/Layout_cookbook/Split_Navigation
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Навигационный паттерн, в котором один или более элементов отделены от остальных элементов навигации.</p>
+
+<p><img alt="Items separated into two groups." src="https://mdn.mozillademos.org/files/16227/split-navigation.png" style="height: 145px; width: 1272px;"></p>
+
+<h2 id="Требования">Требования</h2>
+
+<p>Распространенный навигационный шаблон имеет один элемент, который отделен от остальных. Мы можем использовать Flexbox для того, чтобы сделать это, без необходимости создавать два набора элементов в двух раздельных flex контейнерах. </p>
+
+<h2 id="Рецепт">Рецепт</h2>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/split-navigation.html", '100%', 520)}}</p>
+
+<div class="note">
+<p><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/split-navigation--download.html">Download this example</a></p>
+</div>
+
+<h2 id="Choices_made">Choices made</h2>
+
+<p>Этот паттерн объединяет margin со значением auto и Flexbox для разделения элементов.</p>
+
+<p>Auto margin поглощает все доступное пространство в указанном направлении. Так же работает центрирование блока с автоматическими margin - вы имеете отступы на каждой стороне блока, пытающиеся занять все доступное пространство, таким образом толкая блок в центр.</p>
+
+<p>В этом случаи левый auto margin занимает любое доступное пространство и толкает элемент к правому краю. Вы могли применить класс push к любому элементу в списке.</p>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>The various layout methods have different browser support. See the charts below for details on basic support for the properties used.</p>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<h4 id="Flexbox">Flexbox</h4>
+
+<p>{{Compat("css.properties.flex")}}</p>
+
+<h2 id="See_also" name="See_also">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexible Box Layout</a></li>
+</ul>
diff --git a/files/ru/web/css/layout_cookbook/sticky_footers/index.html b/files/ru/web/css/layout_cookbook/sticky_footers/index.html
new file mode 100644
index 0000000000..945d727438
--- /dev/null
+++ b/files/ru/web/css/layout_cookbook/sticky_footers/index.html
@@ -0,0 +1,70 @@
+---
+title: Sticky footers
+slug: Web/CSS/Layout_cookbook/Sticky_footers
+translation_of: Web/CSS/Layout_cookbook/Sticky_footers
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Шаблон нижнего колонтитула - это шаблон, в котором нижний колонтитул вашей страницы «прилипает» к нижней части области просмотра в тех случаях, когда содержимое короче высоты области просмотра. В этом рецепте мы рассмотрим несколько методов для создания одного из них.</p>
+
+<p><img alt="A sticky footer pushed to the bottom of a box" src="https://mdn.mozillademos.org/files/16184/cookbook-footer.png" style="height: 807px; width: 1213px;"></p>
+
+<h2 id="Requirements">Requirements</h2>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Липкий шаблон нижнего колонтитула должен соответствовать следующим требованиям:</span></span><br>
+  </p>
+
+<ul>
+ <li><span title="">Нижний колонтитул прилипает к нижней части области просмотра, когда содержание короткое.</span></li>
+ <li><span class="tlid-translation translation" lang="ru"><span title="">Если содержимое страницы выходит за нижнюю часть области просмотра, нижний колонтитул располагается ниже содержимого, как обычно.</span></span></li>
+</ul>
+
+<h2 id="The_recipe">The recipe</h2>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/sticky-footer.html", '100%', 720)}}</p>
+
+<div class="note">
+<p><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/sticky-footer--download.html">Download this example</a></p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: In this example and the following one we are using a wrapper set to <code>min-height: 100%</code> in order that our live example works. You could also achieve this for a full page by setting a {{cssxref("min-height")}} of <code>100vh</code> on the {{htmlelement("body")}} and then using it as your grid container.</p>
+</div>
+
+<h2 id="Выбор_сделан">Выбор сделан</h2>
+
+<p>В приведенном выше примере мы получаем липкий нижний колонтитул, используя CSS Grid Layout. Класс <code>.wrapper</code> имеет минимальную высоту <code>100%</code>, что означает, что он такой же высоты, как и контейнер, в котором он находится. Затем мы создаем сетку с одним столбцом с тремя строками, по одной строке для каждой части нашего макета.</p>
+
+<p>При автоматическом размещении сетки наши элементы будут располагаться в исходном порядке, поэтому заголовок переходит на первую дорожку с автоматическими размерами, основное содержимое - на дорожку <code>1fr</code>, а нижний колонтитул - в конечную дорожку с автоматическими размерами. Трек <code>1fr</code> будет занимать все доступное пространство и поэтому будет увеличиваться, чтобы заполнить этот пробел.</p>
+
+<h2 id="Alternate_method">Alternate method</h2>
+
+<p>If you need compatibility with browsers that do not support Grid Layout you can also use Flexbox to create a sticky footer.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/sticky-footer-flexbox.html", '100%', 720)}}</p>
+
+<p>The flexbox example starts out in the same way, but we use <code>display:flex</code> rather than <code>display:grid</code> on the <code>.wrapper</code>; we also set <code>flex-direction</code> to <code>column</code>. Then we set our main content to <code>flex-grow: 1</code> and the other two elements to <code>flex-shrink: 0</code> — this prevents them from shrinking smaller when content fills the main area.</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<h4 id="grid-template-rows">grid-template-rows</h4>
+
+<p>{{Compat("css.properties.grid-template-rows")}}</p>
+
+<h4 id="flex-direction">flex-direction</h4>
+
+<p>{{Compat("css.properties.flex-direction")}}</p>
+
+<h4 id="flex-grow">flex-grow</h4>
+
+<p>{{Compat("css.properties.flex-grow")}}</p>
+
+<h4 id="flex-shrink">flex-shrink</h4>
+
+<p>{{Compat("css.properties.flex-shrink")}}</p>
+
+<h2 id="Resources_on_MDN">Resources on MDN</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basic concepts of Grid Layout</a></li>
+</ul>