Лучшие CSS-фреймворки 2018

Хочешь знать больше про веб?

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

Подписаться

×

Перевод статьи «Best CSS Frameworks 2018».

Фронтенд-разработчики, впервые знаимающиеся клиентским проектом, сталкиваются с проблемой выбора лучшего CSS-фреймворка. Вы можете с легкостью найти больше 50 фреймворков, и каждый будет хорош для какой-то цели. Но какой из них подойдет вам? В этой статье мы расскажем о самых популярных CSS-фреймворках и сконцентрируемся на основных.

Важными критериями при выборе являются:

1. Устойчивость.
2. Простая настройка.
3. Легковесность.
4. Адаптивность.
5. Богатство функционала.

При создании веб-проектов или корпоративных веб-сайтов различной сложности мы в Merehead сталкивались со сходными проблемами и, к счастью, успешно их решили. Теперь пришла пора поделиться опытом и рассказать, какой CSS-фреймворк использовать для сайта или сложного приложения.

#5. Materialize CSS

Создан на основе философии материального дизайна Google. Имеет уникальную цветовую схему, анимации и градиенты.

За:

1. Потрясающий функционал.

Против:

1. Конфликты и проблемы практически с каждым плагином Javascript.

Столь широкий спектр восхитительных анимаций вам, вероятно, не доводилось видеть ни в одном другом фреймворке. Однако, довод «против» перевешивает все доводы «за». Весьма вероятно, что фреймворк не будет работать со всеми вашими любимыми плагинами WordPress.

#4. Pure CSS от Yahoo

Не каждый фронтенд-разработчик знает о Pure CSS от Yahoo, а зря. Мы прозвали его спрятанным сокровищем всего фронтенда.

Yahoo представил этот фреймворк несколько лет назад. Несмотря на то что теперь они уже потеряли свою позицию в качестве поисковика, раньше компания соперничала с Google. Но с этим фреймворком не все так однозначно.

За:

1. Всего 3,8 Kb: вы можете наслаждаться мгновенной загрузкой веб-страниц. Если ваша целевая аудитория – пользователи мобильных устройств, тогда вам стоит выбрать Pure. Практически все пользователи будут вам благодарны за скорость загрузки.

2. Гибкость, вплоть до 24-столбцовой сетки(!)

Против:

1. Бедный функционал.

PureCSS создавался именно как ядро CSS. С его помощью вы можете создать любую grid-систему, какую только пожелаете. Легко создать адаптивный сайт. Проблема бедного функционала легко решается, если у вас есть некоторый опыт программирования на JavaScript или интеграции сторонних плагинов.

#3. Bootstrap 3

О Bootstrap все слышали, правда? Это один из самых популярных CSS-фреймворков в компаниях, занимающихся веб-дизайном. Но спросите любого разработчика пользовательского интерфейса, почему он использует Bootstrap, и вы вряд ли услышите вразумительный ответ. Поэтому давайте рассмотрим его сильные стороны и выясним, почему все отдавали ему предпочтение в 2016 и 2017, а также, весьма вероятно, будут это делать и в 2018.

Фреймворк был разработан Twitter для их внутренних нужд и позже, в 2011 году представлен остальному миру. Twitter, собственно, построил всю свою социальную сеть с его помощью. Поэтому это самый популярный, стабильный и, при правильном использовании, легковесный фреймворк для React и Angular.JS.

За:

1. Легкая настройка.

2. Богатый функционал.

3. Классическая сетка на 12 столбцов.

4. Большая популярность. Большое количество CDN-поставщиков предлагает бесплатную загрузку с их серверов. Это означает мгновенную загрузку веб-страниц (кеширование).

Против:

1. Большая популярность. Вся анимация, переходы, иконки, стили уже примелькались и окружающие от них устали.

Внешний вид это слабое место Bootstrap. У вас есть два варианта для решения этой проблемы: ознакомиться с трендами веб-дизайна в 2018 году или обрезать функционал. В Merehead используется только 12-столбцовая grid-система без остальных стилей. Мы используем только клиентский дизайн и создаем его с нуля. Это намного быстрее, чем кастомизировать готовые классы.

Кроме того, интеграция сторонних плагинов в этом фреймворке проходит гладко. Никогда не было никаких кросс-конфликтов и ошибок.

#2. Zurb Foundation

Zurb, по нашему мнению, является одним из самых продвинутых CSS-фреймворков. Богатый набор предварительно интегрированных функций «из коробки». Зная Javascript на минимальном уровне, вы с легкостью сможете установить и интегрировать Foundation на ваш сайт. С его помощью вы сможете адаптировать сайт для мобильных устройств и даже для SmartTV, не говоря уж о десктопных версиях.

За:

1. Богатый функционал.

2. Легкая настройка.

Против:

1. Конфликты со сторонними скриптами.

Zurb Foundation впечатляет новичка своими богатыми свойствами, но с этим связаны и проблемы: большой вес и множество конфликтов со сторонними Javascript-плагинами. Первая проблема достаточно просто решается выбором действительно необходимых свойств и опций и простой их компиляцией. Но вторая проблема более сложная. Если вы не знаете Javascript, вам придется немедленно его выучить. Но если вы фронтенд-ниндзя, вы сможете виртуозно скомбинировать Foundation со всеми плагинами.

#1. Bootstrap 4

Единственная небольшая проблема, которая была в Bootstrap 3, уже решена в 4-м релизе. Профессиональные и современные темы, яркие цвета впечатляют пользователей.

Согласно Merehead, разработчики Bootstrap начнут продвигать темы, чтобы заработать немного денег, или даже запустят собственную платформу, ориентированную на плагины.