Лучший CSS-фреймворк для несерьёзной разработки

Идеальное решение для вёрстки лендингов и несложных сайтов, а так же демонстрация эффективного создания крайне гибкой сетки для любого контента.

Какие библиотеки для создания вёрстки и интерфейсов мы знаем? Что бы всё “из коробки”, без крупного напильника и религиозных танцев.

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:

1. uk-width-1-2@s – влияет на ширину экрана 640 пикселей и выше
2. uk-width-1-2@m – влияет на ширину экрана 960 пикселей и выше
3. uk-width-1-2@l – влияет на ширину экрана 1200 пикселей и выше
4. 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-уведомления, красивое оформление таблиц, слайдер контента, слайдер изображений, с навигацией и без. Полная кастомизация внешнего вида. Делай как хочешь!

Всё зависит только от твоей фантазии и/или потребностей.