Книга рецептів компонування CSS
Книга рецептів компонування CSS має на меті зібрати докупи рецепти для поширених патернів компонування, речі, які можуть знадобитися для реалізації власних сайтів. Окрім надання коду, який можна використовувати як вихідну точку у проєктах, ці рецепти підкреслюють різні способи використання специфікацій компонування та варіанти вибору для розробника.
[!NOTE] Якщо ви новачок у компонуванні CSS, то можете спершу ознайомитися з нашим модулем навчання компонування CSS, оскільки це дасть вам змогу отримати базові знання, які знадобляться для застосування рецептів, розміщених тут.
Рецепти
| Рецепт | Опис | Методи компонування |
|---|---|---|
| Медійні об'єкти | Двостовпцева рамка з зображенням з одного боку та описовим текстом з іншого, наприклад, як у допису на Facebook або твіта. | Сітка CSS, запасний варіант – float, розмір із fit-content |
| Стовпці | Коли обирати для своїх стовпців багатостовпцевий макет, флексбокс або сітку. | Сітка CSS, Мультикол, Флексбокс |
| Центрування елемента | Як центрувати елемент по горизонталі та по вертикалі. | Флексбокс, Рамкове вирівнювання |
| Липкі нижні колонтитули | Створення нижнього колонтитула, що лежить внизу контейнера чи області видимості, коли вмісту – мало. | Сітка CSS, Флексбокс |
| Розбита навігація | Патерн навігації, коли частина посилань візуально відділена від інших. | Флексбокс, margin |
| Навігація хлібних крихт | Створення списку посилань, які дають відвідувачу змогу перейти вище за ієрархією сторінок. | Флексбокс |
| Спискова група з бляшками | Список елементів з бляшками, що вміщають кількість. | Флексбокс, Рамкове вирівнювання |
| Пагінація | Посилання на сторінки зі змістом (наприклад, результати пошуку). | Флексбокс, Рамкове вирівнювання |
| Картка | Компонент картки, що виводиться в сітці з карток. | Сіткове компонування |
| Сіткова обгортка | Для вирівнювання вмісту сітки в межах центральної обгортки, тим часом дозволяючи елементам вибиватися. | Сітка CSS |
Додавання рецепта
Які у всьому, що стосується MDN, ми були б у захваті, якби ви додали рецепт у тому ж форматі, що й показані вище. Дивіться шаблон і настанови з написання власного прикладу в посібнику з додавання рецептів Книги рецептів компонування.