
Перевод статьи «Best CSS Frameworks 2018».
Фронтенд-разработчики, впервые знаимающиеся клиентским проектом, сталкиваются с проблемой выбора лучшего CSS-фреймворка. Вы можете с легкостью найти больше 50 фреймворков, и каждый будет хорош для какой-то цели. Но какой из них подойдет вам? В этой статье мы расскажем о самых популярных CSS-фреймворках и сконцентрируемся на основных.
Важными критериями при выборе являются:
- Устойчивость.
- Простая настройка.
- Легковесность.
- Адаптивность.
- Богатство функционала.
При создании веб-проектов или корпоративных веб-сайтов различной сложности мы в Merehead сталкивались со сходными проблемами и, к счастью, успешно их решили. Теперь пришла пора поделиться опытом и рассказать, какой CSS-фреймворк использовать для сайта или сложного приложения.
#5. Materialize CSS
Создан на основе философии материального дизайна Google. Имеет уникальную цветовую схему, анимации и градиенты.
За:
-
Потрясающий функционал.
Против:
-
Конфликты и проблемы практически с каждым плагином Javascript.
Столь широкий спектр восхитительных анимаций вам, вероятно, не доводилось видеть ни в одном другом фреймворке. Однако, довод «против» перевешивает все доводы «за». Весьма вероятно, что фреймворк не будет работать со всеми вашими любимыми плагинами WordPress.
#4. Pure CSS от Yahoo
Не каждый фронтенд-разработчик знает о Pure CSS от Yahoo, а зря. Мы прозвали его спрятанным сокровищем всего фронтенда.
Yahoo представил этот фреймворк несколько лет назад. Несмотря на то что теперь они уже потеряли свою позицию в качестве поисковика, раньше компания соперничала с Google. Но с этим фреймворком не все так однозначно.
За:
-
Всего 3,8 Kb: вы можете наслаждаться мгновенной загрузкой веб-страниц. Если ваша целевая аудитория – пользователи мобильных устройств, тогда вам стоит выбрать Pure. Практически все пользователи будут вам благодарны за скорость загрузки.
-
Гибкость, вплоть до 24-столбцовой сетки(!)
Против:
-
Бедный функционал.
PureCSS создавался именно как ядро CSS. С его помощью вы можете создать любую grid-систему, какую только пожелаете. Легко создать адаптивный сайт. Проблема бедного функционала легко решается, если у вас есть некоторый опыт программирования на JavaScript или интеграции сторонних плагинов.
#3. Bootstrap 3
О 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 начнут продвигать темы, чтобы заработать немного денег, или даже запустят собственную платформу, ориентированную на плагины.
пиппец.а где uikit??? как по мне так он лучше чем bootstrap 4.на порядок.
Огромная благодарность за uikit
Bootstrap — это плохо:
1. Постоянный !important;
2. CSS создали, чтобы отделить контент от стилей, bootsrap фактически снова вносит инлайн стили только в виде классов.
—
Самое ужасное что можно было сделать с CSS