5 самых популярных фреймворков 2014 года

Сегодня мы наблюдаем наводнение CSS фронтенд фреймворков. Но быть лучшими суждено не всем.

В этой статье мы сравним 5 лучших фреймворков, доступных на сегодняшний день. Каждый из них имеет свои достоинства/недостатки и области применения, которые позволяют нам выбирать тот или иной фреймворк исходя из нужд каждого отдельного проекта. Например, если у Вас проект простого сайта, то нет необходимости выбирать сложный фреймворк. Также, большинство опций модульные, то есть Вы можете выбрать именно те компоненты, которые Вам нужны или даже смешивать компоненты из разных Фреймворков.

Фреймворки, которые мы сегодня с Вами обсудим, будут расположены по популярности согласно GitHub, начиная с самого популярного – Bootstrap.

Примечание: Часть информации может потерять свою актуальность в ближайшие недели или месяцы (например, расположение фреймворков в рейтинге), поэтому обращайте внимание на дату публикации статьи. Также, следует отметить, что размеры фреймворков являются минимально необходимыми файлами CSS и JavaScript.

1. Bootstrap

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

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

Заметки по Bootstrap

Главная сила Bootstrap – его огромная популярность. Это не значит, что технически он лучше других оппонентов из нашего списка, но он предлагает больше ресурсов (статьи и обучающие программы, сторонние программные плагины и расширения, конструкторы шаблонов, и так далее), чем все остальные четыре фреймворка вместе взятые. Коротко говоря, Bootstrap повсюду и это основная причина, почему все его выбирают.

(Примечание: Говоря «Уникальные компоненты» мы имеем в виду, что они уникальны только для Фреймворков, упомянутых в этой статье).

2. Foundation от ZURB

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

• Создатель: ZURB
• Год выпуска: 2011
• Текущая версия: 5.4.7
• Популярность: 18,000+ звезды на GitHub
• Описание: “Самый продвинутый, адаптивный фронтенд фреймворк в мире.”
• Ядро понятия /принципы: RWD, ориентированный, в первую очередь, на мобильные устройства, семантический
• Размер фреймворка: 326 KB
• Препроцессоры: Sass
• Адаптивный: Да
• Модульный: Да
• Начальный шаблон/layout: Да
• Набор иконок: 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

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

3. Semantic UI

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

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

Заметки о Semantic UI

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

4. Pure от Yahoo!

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

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

Заметки о Pure

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

5. UIkit от YOOtheme

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

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

Заметки о UIkit

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

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

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

– достаточно ли популярен фреймворк? Большая популярность говорит о том, что большое количество людей включены в работу над ним, таким образом, мы получаем больше обучающих материалов, статей, больше реальных примеров/сайтов, больше сторонних разрешений и более легкую интеграцию с другими продуктами разработки. Большая популярность гарантирует то, что он будет отвечать современным и будущим требованиям – фреймворк, который использует большое количество людей вряд ли уйдет с поля зрения.

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

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

– предлагает ли фреймворк хорошую документацию? Хорошая документация всегда приветствуется, так как облегчает процесс обучения работе с ним.

– каков уровень специфики фреймворка? Основной момент состоит в том, что с более универсальным фреймворком легче работать, по сравнению с фреймворком с сильной спецификой. Чаще всего, лучше выбрать фреймворк с минимальным набором стилей, так как будет намного легче настраивать. Добавление новых правил CSS является намного более удобным и эффективным процессом по сравнению с переписыванием или непринятием уже существующих. Плюс, если Вы добавите новые правила к уже существующим, Вы сможете покончить с неиспользуемыми правилами, которые лишь добавляют ненужный вес CSS.

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

А что думаете Вы? Каким из этих фреймворков Вы отдаете предпочтение и почему? Каковы минусы и плюсы, на Ваш счет? Поделитесь своими мыслями с нами в комментариях.

Высоких конверсий!