Идеальное решение для вёрстки лендингов и несложных сайтов, а так же демонстрация эффективного создания крайне гибкой сетки для любого контента.
Какие библиотеки для создания вёрстки и интерфейсов мы знаем? Что бы всё “из коробки”, без крупного напильника и религиозных танцев.
Boostrap. Самое популярная HTML/CSS/JS-библиотека со времён её появления. Тонны руководств, уроков, вопросов и ответов на вкус и цвет.
Из минусов лично для себя выделю не самую удобную сетку. Не знаю как в последних версиях, но раньше она меня порой выбешивала. Еще до всех этих ваших React’ов с Vue.
Foundation. Популярен за пределами СНГ. Ни разу с ним не работал, хотя люди хвалят. До начала 2020-ых занимал крепкое второе место и был вытеснен следующим экземпляром.
Tailwind CSS. Мощнейший CSS-фреймворк с удобной документацией, логичным неймингом классов и шустрой работой. Работает везде и во всех режимах рендеринга: SSR, ISR, GGWP, РЖД. Пишу об этом, потому-что знаю пару актуальных библиотек которые не очень совместимы с тем же SSR.
Короче. Проект состоявшийся, рекомендую на серьезных проектах.
Material-UI (MUI). Достаточно крупная библиотека, где ключевой частью react компонентов и стилизации является @material-ui/core. Конкретно-корпоративное решение явно для немаленьких проектов. Сложнее предыдущих.
Из личного опыта скажу одну вещь: если не готов песочить конфигурацию темы, где черт ногу сломит – не лезь. Возьми лучше Tailwind.
Дальше перечислять смысла не вижу. В целом, решений очень много. Бери да пиши.
Так что выбрать для вёрстки?
Если рассматривать вышеперечисленные, то получается следующая картина:
Boostrap и Foundation отлично подходят для вёрстки любого уровня задач. Для них существует огромное количество курсов и ютуб-учителеи и возможностей хватит “с головой”.
А вот на тех кто использует Tailwind или MUI для подобных нашей задаче я смотрю с подозрением. Потихоньку убираю банковские карточки, прячу гречку глубоко в антресоли, и нервно держу руки на столе, дабы не вызвать им наряд из “дурки”.
Само собой возникает вопрос: почему? Хороший программист – ленивый программист, даже если он верстальщик.
Каждый раз настраивать Tailwind в каком-нибудь React только для простой вёрстки – пустая трата времени. Да, можно сделать заготовку и пользоваться, но для её создания нужно много знаний и поддержки. Обновится какая-нибудь зависимость и иди-свищи какой пакет с каким конфликтует.
Согласен, в 2023 с этим попроще, но гарантий 100% нет.
Можно попробовать скачать boilerplate из сторонних ресурсов и сделать себе хуже: проблемы со сборкой, возможно-неудачные архитектурные решения, и, самое главное – вы ничему не научитесь.
MUI идёт в комплекте с React, и использование “вот этого вот всего” при создании простых сайтов можно сравнить только с забиванием гвоздя микроскопом.
Можно? Можно!
UIKit 3
Представляю вам лёгкий и модульный CSS-фреймфорк с незамысловатым названием UIKit!
Ещё со второй версии, уже более семи лет для меня это основной инструмент. Периодически использую что-то другое из актуального и не “заходит”. UIKit отвечает всем потребностям, не конфликтует со сторонними библиотеками и легко интегрируется на утюг.
Из коробки есть все необходимые компоненты и даже больше!
Ознакомиться и потрогать можно тут: ссылка.
Примеры использования
Одна из главных фишек UIKit: названия классов. Они пишутся на нормальном человеческом языке.
class="uk-grid uk-grid-small uk-child-width-1-3"Создаётся сетка, у которой маленькие отступы между блоками, с дочерними элементами шириной одна-треть (1-3, 33%) каждая.
Усложним пример
Представим, что в сетке блоки разного размера. Как это решить?
<div class="uk-grid" data-uk-grid>
<div class="uk-width-auto">
<div class="uk-card uk-card-default uk-card-body">Auto</div>
</div>
<div class="uk-width-1-3">
<div class="uk-card uk-card-default uk-card-body">1-3</div>
</div>
<div class="uk-width-expand">
<div class="uk-card uk-card-default uk-card-body">Expand</div>
</div>
</div>Первый блок имеет “естественную” ширину. Класс uk-width-auto имеет CSS-параметр “width:auto” и больше ничего.
Второй блок шириной 33% от родительского блока.
Самый интересный здесь третий. Он имеет класс uk-width-expand. Он заставляет блок занимать оставшееся свободное место.
Сетка использует Flexbox и отрицательный margin для grid-контейнера. Отступы в строках настраиваются через дополнительные классы uk-grid-small, uk-grid-medium, uk-grid-large.
Адаптивность
UIKit предоставляет ряд классов адаптивной ширины. В основном они работают так же, как обычные классы width, за исключением того, что у них есть суффиксы, от которых они вступают в силу.
Всего точек 5. Для примера возьмём класс uk-width-1-2:
- uk-width-1-2@s – влияет на ширину экрана 640 пикселей и выше
- uk-width-1-2@m – влияет на ширину экрана 960 пикселей и выше
- uk-width-1-2@l – влияет на ширину экрана 1200 пикселей и выше
- uk-width-1-2@xl – влияет на ширину экрана 1600 пикселей и выше
Теперь наглядно. Допустим, первым блок хотим сделать по умолчанию на всю ширину, но начиная с 960px скажем занять ему половину всей ширины строки.
Остальные два блока займут по умолчанию 50% каждая, но начиная с 960px будут иметь ширину уже 25%.
<div class="uk-grid uk-grid-small" data-uk-grid>
<div class="uk-width-1-1 uk-width-1-2@m">
<div class="uk-card uk-card-default uk-card-body">1-2@m</div>
</div>
<div class="uk-width-1-2 uk-width-1-4@m">
<div class="uk-card uk-card-default uk-card-body">1-4@m</div>
</div>
<div class="uk-width-1-2 uk-width-1-4@m">
<div class="uk-card uk-card-default uk-card-body">1-4@m</div>
</div>
</div>
Усложним снова. Сделаем еще одну строку с блоками, где один из них будет видимым только с 1200px и выше.
<div class="uk-grid uk-grid-small" data-uk-grid>
<div class="uk-width-1-1 uk-width-1-2@m">
<div class="uk-card uk-card-default uk-card-body">1-2@m</div>
</div>
<div class="uk-width-1-2 uk-width-1-4@m">
<div class="uk-card uk-card-default uk-card-body">1-4@m</div>
</div>
<div class="uk-width-1-2 uk-width-1-4@m">
<div class="uk-card uk-card-default uk-card-body">1-4@m</div>
</div>
<div class="uk-width-expand">
<div class="uk-card uk-card-default uk-card-body">1-expand</div>
</div>
<div class="uk-width-1-3 uk-visible@l">
<div class="uk-card uk-card-default uk-card-body">1-3@m</div>
</div>
<div class="uk-width-1-3 uk-hidden@l">
<div class="uk-card uk-card-default uk-card-body">1-3@m</div>
</div>
</div>Волшебные классы uk-visible и uk-hidden с суффиксами “@s, @m, @l, @xl” позволяют в пределах одной версии вёрстки творить чудеса, пряча ненужное и отображая необходимое без создания отдельной версии сайта.
Учитывая что сетка использует Flexbox, можно дописать uk-flex-middle для выравнивания по центру горизонтали дочерних элементов.
Можно дописать “@s” и выравнивание будет начиная с 640px и выше.
Та же история с классом для выравнивания текста uk-text-align. Задаём по умолчанию правую сторону, но с 960px будет по центру.
class="uk-text-right uk-text-center@m"Резюмируя
UIKit предоставляет массу возможностей. Причина по которой я рассмотрел только сетку заключается в её необходимости. Остальное легко подключается.
Чудесная документация покажет все возможности с примерами.
Модальные окна, lightbox для показа полных картинок, JS-уведомления, красивое оформление таблиц, слайдер контента, слайдер изображений, с навигацией и без. Полная кастомизация внешнего вида. Делай как хочешь!
Всё зависит только от твоей фантазии и/или потребностей.