Написать нам
Категория: Тренды
10.12.2019

Лучшие 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. Легко-кастомизируемый


Минусы:



  1. Тяжеловесный.

  2. Конфликтирует с сторонними скриптами.


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


#1. Bootstrap 4


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

Написать нам
Имя*:
Email*:
Сообщение: