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

Рассмотрим возможности и особенности пятерки лучших из них. Каждый фреймворк имеет как сильные, так и слабые стороны, и может быть ориентирован на выполнение конкретных задач.

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

1. Bootstrap

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

• Авторы: Mark Otto и Jacob Thornton.
• Год выпуска: 2011
• Текущая версия: 3.3.1
• Популярность: 75,000+ звезд на GitHub
• Описание: “Bootstrap — это самый популярный HTML, CSS, и JavaScript для разработки адаптивного интерфейса веб-приложений, с хорошей поддержкой мобильных устройств.”
• Основная идея: Адаптивный дизайн с ориентацией на мобильные устройства.
• Размер: 145 KB
• Препроцессор: Less и Sass
• Адаптивный: Да
• Модульный: Да
• Стартовые шаблоны: Есть
• Набор иконок: Glyphicons Halflings set
• Расширения: Большое количество сторонних плагинов.
• Уникальные компоненты: Jumbotron
• Документация: Хорошая
• Кастомизация: Простой кастомайзер GUI. К сожалению, необходимо вручную вводить значения цветов, т.к. нет диалога выбора цвета.
• Поддержка браузерами: Firefox, Chrome, Safari, IE8+ (нужен Respond.js)
• Лицензия: MIT

Основная сила Bootstrap — его огромная популярность. Технически он не во всем лучше конкурентов, зато по нему есть большое количество материалов, руководств и форумов, а так же, плагинов в сети. Проще говоря, Bootstrap — везде. И это основная причина его популярности.

2. Foundation от ZURB

Foundation — это второй крупный игрок в этом сравнении. С солидной компанией ZURB за спиной, этот фреймворк имеет серьезную поддержку. Foundation используется на большом количестве крупных проектов, включая Facebook, Mozilla, Ebay, Yahoo!, National Geographic и другие.

• Авторы: ZURB
• Год выпуска: 2011
• Текущая версия: 5.4.7
• Популярность: 18,000+ звезд на GitHub
• Описание: “Самый продвинутый адаптивный frontend-фреймворк в мире”
• Основная идея: RWD, ориентация на мобильные, семантический.
• Размер: 326 KB
• Препроцессор: Sass
• Адаптивный: Да
• Модульный: Да
• Стартовые шаблоны: Есть
• Набор иконок: Foundation Icon Fonts
• Расширения: Да
• Уникальные компоненты: Icon Bar, Clearing Lightbox, Flex Video, Keystrokes, Joyride, Pricing Tables
• Документация: Хорошая. Много дополнительных материалов.
• Кастомизация: Нет кастомайзера GUI, только ручная настройка.
• Поддержка браузерами: Chrome, Firefox, Safari, IE9+; iOS, Android, Windows Phone 7+
• Лицензия: MIT

Foundation — по-настоящему профессиональный фреймворк я платной поддержкой и обучением. Так же, предлагается большое количество материалов для быстрого и легкого изучения фреймворка.

3. Semantic UI

Semantic UI призван помочь создавать веб-сайты, более понятные человеку. Он использует принципы человеческого языка, чем делает код более читаемым и понятным.

• Авторы: Jack Lukic
• Год выпуска: 2013
• Текущая версия: 1.2.0
• Популярность: 12,900+ звезд на GitHub
• Описание: “Фреймворк для пользовательского интерфейса, построенный на принципах человеческого языка.”
• Основная идея: Семантический, адаптивный.
• Размер: 552 KB
• Препроцессор: Less
• Адаптивный: Да
• Модульный: Да
• Стартовые шаблоны: Нет
• Набор иконок: Font Awesome
• Расширения: Нет
• Уникальные компоненты: Divider, Flag, Rail, Reveal, Step, Advertisement, Card, Feed, Item, Statistic, Dimmer, Rating, Shape.
• Документация: Очень хорошая. Semantic располагает очень удобно структурированной документацией, плюс отдельный сайт, предлагающий руководство по началу работы, кастомизации и созданию тем.
• Кастомизация: Нет кастомизатора GUI, только ручная кастомизация.
• Поддержка браузерами: Firefox, Chrome, Safari, IE10+ (IE9 только с префиксами), Android 4, Blackberry 10
• Лицензия: MIT

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

4. Pure by Yahoo!

Pure — легковесный модульный фреймворк на чистом css, содержит компоненты, которые можно использовать как вместе, так и по отдельности.

• Авторы: Yahoo
• Год выпуска: 2013
• Текущая версия: 0.5.0
• Популярность: 9,900+ звезд на GitHub
• Описание: “Набор небольших адаптивных css-модулей, которые можно использовать в каждом веб-проекте.”
• Основная идея: SMACSS (масштабируемая модульная архитектура css), минимализм.
• Размер: 18 KB
• Препроцессор: Нет
• Адаптивный: Да
• Модульный: Да
• Стартовые шаблоны: Есть
• Набор иконок: Нет. Можно использовать Font Awesome.
• Расширения: Нет
• Уникальные компоненты: Нет
• Документация: Хорошая
• Кастомизация: Basic GUI Skin Builder
• Поддержка браузерами: Latest versions of Firefox, Chrome, Safari; IE7+; iOS 6.x, 7.x; Android 4.x
• Лицензия: Yahoo! Inc. BSD

Pure предлагает скелет стилей для быстрого и легкого начала работы. Идеален в тех случаях, когда нет необходимости в тяжелом фреймворке, но нужно использовать некоторые его возможности.

5. UIkit by YOOtheme

UIkit — это небольшая коллекция легко настраиваемых компонентов. Не такой популярный как его конкуренты, но предлагает ту же самую функциональности и качество.

• Авторы: YOOtheme
• Год выпуска: 2013
• Текущая версия: 2.13.1
• Популярность: 3,800+ звезд на GitHub
• Описание: “Легковесный модульный frontend-фреймворк для разработки быстрых и функциональных веб-интерфейсов.”
• Основная идея: RWD, ориентация на мобильные устройства
• Размер: 118 KB
• Препроцессор: Less, Sass
• Адаптивный: Да
• Модульный: Да
• Стартовые шаблоны: Да
• Набор иконок: Font Awesome
• Расширения: Да
• Уникальные компоненты: Article, Flex, Cover, HTML Editor
• Документация: Хорошая
• Кастомизация: Advanced GUI Customizer
• Поддержка браузерами: Chrome, Firefox, Safari, IE9+
• Лицензия: MIT

UIkit с успехом используется в большом количестве тем WordPress. Он предлагает гибкий и мощный механизм настройки в ручном режиме либо с помощью GUI customizer.

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

Давайте определимся, по каким параметрам будем выбирать фреймворк:

• По популярности. Большая популярность означает большое количество людей, вовлеченных в проекты, большое количество руководств, мануалов, статей, большое сообщество, большое количество реально работающих примеров, сторонних расширений и плагинов, лучшая интеграция с инструментами разработчика. Так же, большая популярность гарантирует, что в ближайшем будущем фреймворк не будет забыт.
• По активности разработки. Хороший фреймворк должен постоянно развиваться и совершенствоваться, идти в ногу, а еще лучше определять новые веб-технологии.
• По возрасту. Он должен накопить опыт применения в реальных проектах разного уровня. Тогда любой новичок может спокойно начинать осваивать его, не опасаясь неисследованных граблей.
• По документации. Хорошая документация всегда желаема при изучении нового фреймворка.
• По сложности. Основная идея здесь в том, что зачастую проще иметь минимальный начальный набор и дописывать свои правила по необходимости, чем переопределять уже имеющиеся наборы правил. Плюс, переопределение правил ведет к излишнему росту объема кода, что всегда в минус сайту и разработчику.

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