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

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

1. Стабильный


2. Легкий в кастомизации


3. Легковесный


4. Адаптивный


5. Имеет богатый функционал

Строя веб-проекты разной сложности, мы в Merehead сталкивались с подобными проблема, и к счастью успешно решили эту проблема. Теперь настала наша очередь поделиться опытом, и знаниями какой CSS фреймворк выбрать Вам для Вашего следующего проекта. Английская версия статьи Best CSS Frameworks 2020.

#5. MaterializeCSS

Построен на базе материального дизайна компании Google. Обладает уникальной цветовой гаммой, и анимацией. Плюсы:

1. Интересный функционал

Минусы:

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

Такой широкий асортимент захватывающей анимаций Вы вряд ли увидите в каком-либо другом фреймворке. Однако его минусы перевешывают над плюсами.

#4. Pure CSS by Yahoo

Один из интереснейшиз фреймворков, о котором немногие знают. Компания Yahoo презентовала его несколько лет назад, и несмотря на то, что они в поиске уже очень давно проиграли Google, то с этим фреймворком не все так однозначно. Плюсы:

1. Сверхлегкий. Всего лишь 3.8Кб, и Вы можете наслаждаться мгновенной загрузкой и адаптивностью. Если Вы создаете проекты, под страны с EDGE – возможно это лучший вариант. Тем не менее, практически все пользователи будут вам благодарны.


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

Минусы:

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

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

#3. Bootstrap 3

У всех на слуху. Спросите у любого разработчика интерфейсов – «почему он его использует?», и Вы вряд ли услышите внятный ответ. Давайте же поймем его сильные стороны, и почему его предпочитают все в 2017, 2016 годах и с высокой долей вероятности он будет таким же успешным и в 2018 году. Впервые нам представили Bootstrap в далеком 2011 году, его разработала компания Twitter для своих внутренних нужд, и собственно построила всю социальную сеть на нем. Сейчас доступна уже 4-ая версия этого фреймворка. Плюсы:

1. Легко-кастомизируемый


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


3. Классическая 12-ти колоночная сетка


4. Очень популярен. В связи с чем даже крупные CDN поставщики предлагабт бесплатно загружать весь Boostrap с их серверов. А это значит что пользователи ранее посещавшие сайты, больше не будут его загружать (кэширован).

Минусы:

1. Очень популярен. В связи с этим всю анимацию, иконки, стили уже все давно видели. Их используют все кто только может.

Внешний вид – это наиболее узкое место Bootstrap. У Вас есть 2 варианта как решить это – использовать дизайн тренда 2020 года. Либо же урезать функционал фреймворка. В подходе Merehead, используется только 12-ти колонная сетка, без дополнительного функционала. Ответ очень простой – в наших работах мы используем только уникальный дизайн, который потом проектируем с 0. Это намного быстрее, чем кастомизировать котовые классы. К тому же, в таком подходе внедрение сторонних плагинов не является никакой проблемой. Межскриптовых конфликтов не существует.

#2. Zurb Foundation

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

1. Многофункциональный


2. Легко-кастомизируемый