2459
5

Какой CSS-фреймворк выбрать?

Представим, перед командой стоит задача: разработать оригинальное дизайнерское решение в страничном коде. Как правило, разработчик знает какие применить технологии для проекта. У верстальщика это адаптивные технологии и фреймворки.

При выборе адаптивного фреймворка я учитываю: решение большинства вопросов оптимизации вёрстки сайта под мобильные устройства, влияние технологии на процесс разработки в целом.  Сегодня расскажем о популярных на сегодняшний день адаптивных решениях, некоторые из которых я использую при разработке проектов разной сложности.

1. BOOTSTRAP

Первый и основный фреймворк для решения вопросов адаптивности называется Bootstrap и в среде разработки он широко известен. В его составе обширный набор стилевых и скриптовых паттернов. Еще он достаточно логичен и доступен в освоении и покрывает собой весь спектр задач адаптивной вёрстки.

ПЛЮСЫ 
Главный плюс фреймворка - это полнота и надёжность технических решений. Он полностью кроссбраузерный и кроссплатформенный. В его составе полный набор адаптивных решений под все современные устройства. 

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

МИНУСЫ
Недостатком считаю ёмкость фреймворка при полном его использовании. Этот минус решает модульность современной версии. Она позволяет подключать в проект только необходимые решения из состава всех технологий.

Второе могу отметить - стандартность многих стилевых решений. Этого достаточно

2. FOUNDATION

Ровесник Bootstrap и его достойный коллега по цеху. В общих чертах фреймворк повторяет преимущества конкурента, но есть возможность работы с текстом и визуализуальными элементами.

ПЛЮСЫ
Первый плюс - фреймворк также работает на всех браузерах и платформах.

Следующий плюс - модульность. То, что в проекте не пригодится можно не брать.

Еще один плюс в пользу foundation техническая поддержка от создателей, масса материалов, актуальная спецификация, возможность доработки и расширения функционала.

МИНУСЫ 
Главный недостаток фреймворка - это его объём. В современных версиях я решаю это за счет модульности и разнообразия решений. 

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

3. PURE

Это очень компактный и практичный фреймворк. Он подходит проектам, где нужны базовые решения адаптивности под устройства, широкая функциональность и не нужен обширный набор элементов. 
Фреймворк разработан в 2013 году в компании Yahoo, что уже говорит о качестве и поддержки решений на его базе.

ПЛЮСЫ
Стандартность. В основе стилевых решений лежит базовая для вёрстки технология CSS.
Минимализм. Все решения внутри технологии - основана на базовых стилях. Из них можно собирать простые стилевые решения под все платформы и устройства.

МИНУСЫ
Не поддерживает JavaScript и решения на основе JQuery. Для простейших одностраничных проектов это не станет проблемой. Но для всех остальных требуются серьезные и объемные технологические решения и Pure тут не поможет.

Что использует iTrack?

Для разработки типовых проектов мы используем технологическое решение для адаптивности сайтов - это адаптивный фреймворк Bootstrap v.4,компании Twitter. Он удовлетворяет всем требованиям современного рынка, имеет самое обширное сообщество и стабильно поддерживает новые версии этого продукта. В четвёртой версии команда Twitter учла пожелания разработчиков и включила возможность модульного подключения пакета по частям. Это практически полностью закрывает вопрос избыточности фреймворка при загрузке страниц.
Подробно о технологии новой версии написано в документации к Bootstrap 4 на русском языке