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

Содержание

#1. #5. MaterializeCSS
#2. #4. Pure CSS by Yahoo
#3. #3. Bootstrap 3
#4. #2. Zurb Foundation
#5. #1. Bootstrap 4

Фронтенд разработчик прийдя впервые в условия настоящего проекта сталкивается с проблемой - выбором 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. Легко-кастомизируемый

Минусы:

1. Тяжеловесный.
2. Конфликтирует с сторонними скриптами.

Zurb Foundation впечатляет новичка своих багатством функций, однако сталкивает его с другими сложностями – тяжеловесный, и много конфликтов с сторонними Jacvascript плагинами. Первую проблему достаточно легко – просто выберете то, что вам подходить и скомпилируйте под себя. Однако, со второй намного сложнее. Если Вы еще не учити Javascript – тогда должны делать это незамедлительно, ведь это топовый язык программирования 2019 года. Вы должны быть настоящим гуру фронтенда, чтобы Ваш проект совмещал и стабильно работал со всеми плагинами на всех браузерах.

#1. Bootstrap 4

Единственный минус который есть в 3ей версии Twitter Bootstrap уже с лихвой был решен в последней версии. Современные темы, сочные и яркие цвета впечатляют своей красотой. Фреймворк уже в Бета тестировании, но к 2018 году выйдет в полноценный релиз. По мнению компании Merehead, разработчики этого фреймворка начнут продвигать темы для заработка, или же вовсе запустят платформу ориентированную на плагины к фреймворку.