Фронтенд-разработчики, впервые знаимающиеся клиентским проектом, сталкиваются с проблемой выбора лучшего CSS-фреймворка. Вы можете с легкостью найти больше 50 фреймворков, и каждый будет хорош для какой-то цели. Но какой из них подойдет вам? В этой статье мы расскажем о самых популярных CSS-фреймворках и сконцентрируемся на основных.
Важными критериями при выборе являются:
Устойчивость.
Простая настройка.
Легковесность.
Адаптивность.
Богатство функционала.
При создании веб-проектов или корпоративных веб-сайтов различной сложности мы в Merehead сталкивались со сходными проблемами и, к счастью, успешно их решили. Теперь пришла пора поделиться опытом и рассказать, какой CSS-фреймворк использовать для сайта или сложного приложения.
#5. MaterializeCSS
Создан на основе философии материального дизайна Google. Имеет уникальную цветовую схему, анимации и градиенты.
За:
Потрясающий функционал.
Против:
Конфликты и проблемы практически с каждым плагином Javascript.
Столь широкий спектр восхитительных анимаций вам, вероятно, не доводилось видеть ни в одном другом фреймворке. Однако, довод «против» перевешивает все доводы «за». Весьма вероятно, что фреймворк не будет работать со всеми вашими любимыми плагинами WordPress.
#4. Pure CSS от Yahoo
Не каждый фронтенд-разработчик знает о Pure CSS от Yahoo, а зря. Мы прозвали его спрятанным сокровищем всего фронтенда.
Yahoo представил этот фреймворк несколько лет назад. Несмотря на то что теперь они уже потеряли свою позицию в качестве поисковика, раньше компания соперничала с Google. Но с этим фреймворком не все так однозначно.
За:
Всего 3,8 Kb: вы можете наслаждаться мгновенной загрузкой веб-страниц. Если ваша целевая аудитория – пользователи мобильных устройств, тогда вам стоит выбрать Pure. Практически все пользователи будут вам благодарны за скорость загрузки.
Гибкость, вплоть до 24-столбцовой сетки(!)
Против:
Бедный функционал.
PureCSS создавался именно как ядро CSS. С его помощью вы можете создать любую grid-систему, какую только пожелаете. Легко создать адаптивный сайт. Проблема бедного функционала легко решается, если у вас есть некоторый опыт программирования на JavaScript или интеграции сторонних плагинов.
#3. Bootstrap3
О Bootstrap все слышали, правда? Это один из самых популярных CSS-фреймворков в компаниях, занимающихся веб-дизайном. Но спросите любого разработчика пользовательского интерфейса, почему он использует Bootstrap, и вы вряд ли услышите вразумительный ответ. Поэтому давайте рассмотрим его сильные стороны и выясним, почему все отдавали ему предпочтение в 2016 и 2017, а также, весьма вероятно, будут это делать и в 2018.
Фреймворк был разработан Twitter для их внутренних нужд и позже, в 2011 году представлен остальному миру. Twitter, собственно, построил всю свою социальную сеть с его помощью. Поэтому это самый популярный, стабильный и, при правильном использовании, легковесный фреймворк для React и Angular.JS.
За:
Легкая настройка.
Богатый функционал.
Классическая сетка на 12 столбцов.
Большая популярность. Большое количество CDN-поставщиков предлагает бесплатную загрузку с их серверов. Это означает мгновенную загрузку веб-страниц (кеширование).
Против:
Большая популярность. Вся анимация, переходы, иконки, стили уже примелькались и окружающие от них устали.
Внешний вид это слабое место Bootstrap. У вас есть два варианта для решения этой проблемы: ознакомиться с трендами веб-дизайна в 2018 году или обрезать функционал. В Merehead используется только 12-столбцовая grid-система без остальных стилей. Мы используем только клиентский дизайн и создаем его с нуля. Это намного быстрее, чем кастомизировать готовые классы.
Кроме того, интеграция сторонних плагинов в этом фреймворке проходит гладко. Никогда не было никаких кросс-конфликтов и ошибок.
#2. Zurb Foundation
Zurb, по нашему мнению, является одним из самых продвинутых CSS-фреймворков. Богатый набор предварительно интегрированных функций «из коробки». Зная Javascript на минимальном уровне, вы с легкостью сможете установить и интегрировать Foundation на ваш сайт. Сего помощью вы сможете адаптировать сайт для мобильных устройств и даже для SmartTV, не говоря уж о десктопных версиях.
За:
Богатый функционал.
Легкая настройка.
Против:
Конфликты со сторонними скриптами.
Zurb Foundation впечатляет новичка своими богатыми свойствами, но с этим связаны и проблемы: большой вес и множество конфликтов со сторонними Javascript-плагинами. Первая проблема достаточно просто решается выбором действительно необходимых свойств и опций и простой их компиляцией. Но вторая проблема более сложная. Если вы не знаете Javascript, вам придется немедленно его выучить. Но если вы фронтенд-ниндзя, вы сможете виртуозно скомбинировать Foundation со всеми плагинами.
#1. Bootstrap 4
Единственная небольшая проблема, которая была в Bootstrap 3, уже решена в 4-м релизе. Профессиональные и современные темы, яркие цвета впечатляют пользователей.
Согласно Merehead, разработчики Bootstrap начнут продвигать темы, чтобы заработать немного денег, или даже запустят собственную платформу, ориентированную на плагины.