Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

translation(CSS): web/css/layout_cookbook #3753

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

translation(CSS): web/css/layout_cookbook #3753

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
bbec214
translation(CSS): web/css/layout_cookbook
undead404 Dec 28, 2024
701bd17
Update files/uk/web/css/layout_cookbook/index.md
undead404 Dec 28, 2024
18ef74b
Apply suggestions from code review
undead404 Dec 29, 2024
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
31 changes: 31 additions & 0 deletions files/uk/web/css/layout_cookbook/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
---
undead404 marked this conversation as resolved.
Show resolved Hide resolved
undead404 marked this conversation as resolved.
Show resolved Hide resolved
undead404 marked this conversation as resolved.
Show resolved Hide resolved
undead404 marked this conversation as resolved.
Show resolved Hide resolved
undead404 marked this conversation as resolved.
Show resolved Hide resolved
undead404 marked this conversation as resolved.
Show resolved Hide resolved
undead404 marked this conversation as resolved.
Show resolved Hide resolved
undead404 marked this conversation as resolved.
Show resolved Hide resolved
undead404 marked this conversation as resolved.
Show resolved Hide resolved
undead404 marked this conversation as resolved.
Show resolved Hide resolved
undead404 marked this conversation as resolved.
Show resolved Hide resolved
undead404 marked this conversation as resolved.
Show resolved Hide resolved
undead404 marked this conversation as resolved.
Show resolved Hide resolved
undead404 marked this conversation as resolved.
Show resolved Hide resolved
undead404 marked this conversation as resolved.
Show resolved Hide resolved
undead404 marked this conversation as resolved.
Show resolved Hide resolved
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Узгодження прикметника та іменника

Потенційна помилка: прикметник не узгоджений з іменником: "Рамкове": [с.р.: називний, знахідний, кличний] і "елемента": [ч.р.: родовий]
MISC/UK_ADJ_NOUN_INFLECTION_AGREEMENT: Узгодження відмінків, роду і числа прикметника та іменника

...ння Як центрувати елемент по Флексбокс, Рамкове елемента горизонталі та по вирівнюванн...

Варіанти заміни

  • рамкового елемента

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Узгодження прикметника та іменника

Потенційна помилка: прикметник не узгоджений з іменником: "нижнього": [ч.р.: родовий, знахідний (іст.), с.р.: родовий] і "Сітка": [ж.р.: називний]
MISC/UK_ADJ_NOUN_INFLECTION_AGREEMENT: Узгодження відмінків, роду і числа прикметника та іменника

... Липкі нижні Створення нижнього Сітка CSS, Флексбокс колонтитули колонтитул...

Варіанти заміни

  • нижня Сітка

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Узгодження прикметника та іменника

Потенційна помилка: прикметник не узгоджений з іменником: "Розбита": [ж.р.: називний, кличний] і "Патерн": [ч.р.: називний, знахідний]
MISC/UK_ADJ_NOUN_INFLECTION_AGREEMENT: Узгодження відмінків, роду і числа прикметника та іменника

... вмісту – мало. Розбита Патерн навігації, коли Флексбокс, “margin” наві...

Варіанти заміни

  • розбитий Патерн

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Милозвучність: з/зі/із

Перед сполученням приголосних із початковим свистячим або шиплячим пишемо: "зі"
STYLE/EUPHONY_PREP_Z_IZ_ZI: Милозвучність: з/зі/із

... ієрархією сторінок. Спискова група з Список елементів з Флексбокс, Рамкове ...

Варіанти заміни

  • зі

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Узгодження прикметника та іменника

Потенційна помилка: прикметник не узгоджений з іменником: "Рамкове": [с.р.: називний, знахідний, кличний] і "бляшками": [мн.: орудний]
MISC/UK_ADJ_NOUN_INFLECTION_AGREEMENT: Узгодження відмінків, роду і числа прикметника та іменника

... група з Список елементів з Флексбокс, Рамкове бляшками бляшками, що вміщають вирівнюванн...

Варіанти заміни

  • рамковими бляшками

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Повторення слів

Можлива механічна помилка: повторення слова
MISC/UKRAINIAN_WORD_REPEAT_RULE: Повторення слів (напр., 'буде буде')

...писок елементів з Флексбокс, Рамкове бляшками бляшками, що вміщають вирівнювання ...

Варіанти заміни

  • бляшками

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Узгодження прикметника та іменника

Потенційна помилка: прикметник не узгоджений з іменником: "Рамкове": [с.р.: називний, знахідний, кличний] і "змістом": [ч.р.: орудний]
MISC/UK_ADJ_NOUN_INFLECTION_AGREEMENT: Узгодження відмінків, роду і числа прикметника та іменника

...я Посилання на сторінки зі Флексбокс, Рамкове змістом (наприклад, вирівнювання ...

Варіанти заміни

  • рамковим змістом

title: Книга рецептів компонування CSS
slug: Web/CSS/Layout_cookbook
page-type: landing-page
---

{{CSSRef}}

Книга рецептів компонування CSS має на меті зібрати докупи рецепти для поширених патернів компонування, речі, які можуть знадобитися для реалізації власних сайтів. Окрім надання коду, який можна використовувати як вихідну точку у проєктах, ці рецепти підкреслюють різні способи використання специфікацій компонування та варіанти вибору для розробника.

> [!NOTE]
> Якщо ви новачок у компонуванні CSS, то можете спершу ознайомитися з нашим [модулем навчання компонуванню CSS](/uk/docs/Learn_web_development/Core/CSS_layout), оскільки це дасть вам змогу отримати базові знання, які знадобляться для застосування рецептів, розміщених тут.
undead404 marked this conversation as resolved.
Show resolved Hide resolved
undead404 marked this conversation as resolved.
Show resolved Hide resolved

## Рецепти

| Рецепт | Опис | Методи компонування |
| ------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [Медійні об'єкти](/uk/docs/Web/CSS/Layout_cookbook/Media_objects) | Двостовпцева рамка з зображенням з одного боку та описовим текстом з іншого, наприклад, як у допису на Facebook або твіта. | [Сітка CSS](/uk/docs/Web/CSS/CSS_grid_layout), запасний варіант – {{cssxref("float")}}, розмір із {{cssxref("fit-content")}} |
| [Стовпці](/uk/docs/Web/CSS/Layout_cookbook/Column_layouts) | Коли обирати для своїх стовпців багатостовпцевий макет, флексбокс або сітку. | [Сітка CSS](/uk/docs/Web/CSS/CSS_grid_layout), [Мультикол](/uk/docs/Web/CSS/CSS_multicol_layout), [Флексбокс](/uk/docs/Web/CSS/CSS_flexible_box_layout) |
| [Центрування елемента](/uk/docs/Web/CSS/Layout_cookbook/Center_an_element) | Як центрувати елемент по горизонталі та по вертикалі. | [Флексбокс](/uk/docs/Web/CSS/CSS_flexible_box_layout), [Рамкове вирівнювання](/uk/docs/Web/CSS/CSS_box_alignment) |
| [Sticky footers](/uk/docs/Web/CSS/Layout_cookbook/Sticky_footers) | Створення нижнього колонтитула, що лежить внизу контейнера чи області видимості, коли вмісту – мало. | [Сітка CSS](/uk/docs/Web/CSS/CSS_grid_layout), [Флексбокс](/uk/docs/Web/CSS/CSS_flexible_box_layout) |
undead404 marked this conversation as resolved.
Show resolved Hide resolved
| [Розбита навігація](/uk/docs/Web/CSS/Layout_cookbook/Split_Navigation) | Патерн навігації, коли частина посилань візуально відділена від інших. | [Флексбокс](/uk/docs/Web/CSS/CSS_flexible_box_layout), {{cssxref("margin")}} |
| [Навігація хлібних крихт](/uk/docs/Web/CSS/Layout_cookbook/Breadcrumb_Navigation) | Створення списку посилань, які дають відвідувачу змогу перейти вище за ієрархією сторінок. | [Флексбокс](/uk/docs/Web/CSS/CSS_flexible_box_layout) |
| [Спискова група з бляшками](/uk/docs/Web/CSS/Layout_cookbook/List_group_with_badges) | Список елементів з бляшками, що вміщають кількість. | [Флексбокс](/uk/docs/Web/CSS/CSS_flexible_box_layout), [Рамкове вирівнювання](/uk/docs/Web/CSS/CSS_box_alignment) |
| [Пагінація](/uk/docs/Web/CSS/Layout_cookbook/Pagination) | Посилання на сторінки зі змістом (наприклад, результати пошуку). | [Флексбокс](/uk/docs/Web/CSS/CSS_flexible_box_layout), [Рамкове вирівнювання](/uk/docs/Web/CSS/CSS_box_alignment) |
| [Картка](/uk/docs/Web/CSS/Layout_cookbook/Card) | Компонент картки, що виводиться в сітці з карток. | [Сіткове компонування](/uk/docs/Web/CSS/CSS_grid_layout) |
| [Сіткова обгортка](/uk/docs/Web/CSS/Layout_cookbook/Grid_wrapper) | Для вирівнювання вмісту сітки в межах центральної обгортки, тим часом дозволяючи елементам вибиватися. | [Сітка CSS](/uk/docs/Web/CSS/CSS_grid_layout) |

## Додавання рецепту
undead404 marked this conversation as resolved.
Show resolved Hide resolved

Які у всьому, що стосується MDN, ми були б у захваті, якби ви додали рецепт у тому ж форматі, що й показані вище. Дивіться шаблон і настанови з написання власного прикладу в [посібнику з додавання рецептів Книги рецептів компонування](/uk/docs/Web/CSS/Layout_cookbook/Contribute_a_recipe).
undead404 marked this conversation as resolved.
Show resolved Hide resolved
undead404 marked this conversation as resolved.
Show resolved Hide resolved
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Узгодження прийменника та іменника

Прийменник «з» вимагає іншого відмінка: родовий, знахідний, орудний, а знайдено: називний
MISC/UK_PREP_NOUN_INFLECTION_AGREEMENT: Узгодження прийменника та іменника у реченні

... Медійні об’єкти Двостовпцева рамка з Сітка CSS, запасний варіант – з...

Варіанти заміни

  • сіткою
  • сітки
  • сітку

3 changes: 3 additions & 0 deletions uk_spelling_additions.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,7 @@
двокрапкове
двонапрямленості
двопіксельна
двостовпцева
двотавр
двотавра
Девліна
Expand Down Expand Up @@ -240,6 +241,7 @@
множиноподібності
мовозалежним
мовозалежними
Мультикол
наведеності
надкреслення
надкреслень
Expand Down Expand Up @@ -533,6 +535,7 @@
Сушинка
східноарабські
Тайохе
твіта
тега
Терлсон
тредів-воркерів
Expand Down
Loading