В настоящее время происходит просто наводнение CSS фреймворков. Однако число действительно хороших можно сузить до нескольких.

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

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

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

 

1. Bootstrap

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

• Создатели: Mark Otto и Jacob Thornton
• Год выхода: 2011
• Текущая версия: 3.3.7
• Популярность: 111 000 звезд на GitHub
• Описание: «Bootstrap — это самая популярный HTML, CSS и JavaScript-фреймворк для разработки отзывчивых («responsive») и «mobile first» проектов в интернете»
• Основные принципы: RWD (Responsive веб дизайн) и «mobile first»
• Размер фреймворка: 154 КБ
• Препроцессоры: Less и Sass
• Отзывчивость («responsive»): Да
• Модульность: Да
• Стартовые шаблоны/макеты: Да
• Набор иконок: Glyphicons
• Дополнения: Нет, но доступно много сторонних плагинов.
• Уникальные компоненты: Jumbotron
• Документация: Хорошая
• Настройка: Простой GUI кастомайзер. К сожалению, вам нужно вводить значения цвета вручную, потому что пипетка или «color picker» отсутствует
• Поддержка браузеров: Firefox, Chrome, Safari, IE8 + (для IE8 необходим Respond.js)
• Лицензия: MIT

 

Заметки по Bootstrap

Главная сила Бутстрапа — его огромная популярность. Технически, он не превосходит остальных в списке, но он предлагает гораздо больше ресурсов (статьи и руководства, плагины и расширения сторонних разработчиков, конструкторы тем и т.д.), чем другие четыре фреймворка вместе взятые. Простым языком, бутстрап есть везде. И это основная причина, почему люди продолжают выбирать именно его.

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

 

2. Foundation от ZURB

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

• Создатели: ZURB
• Год выхода: 2011
• Текущая версия: 6.3.1
• Популярность: 25 400 звезд на GitHub
• Описание: «Самый продвинутый отзывчивый фронтенд фреймворк в мире».
• Основные принципы: RWD (Responsive веб дизайн), «mobile first», семантика
• Размер фреймворка: 197.5 KB
• Препроцессоры: Sass
• Отзывчивость («responsive»): Да
• Модульность: Да
• Стартовые шаблоны/макеты: Да
• Набор иконок: 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
• Текущая версия: 2.2
• Популярность: 34 762 звезды на GitHub
• Описание: «UI компоненты фреймворка основаны на удобных принципах из естественного языка»
• Основные принципы: Semantic, responsive
• Размер фреймворка: 806 KB
• Препроцессоры: Less
• Отзывчивость («responsive»): Да
• Модульность: Да
• Стартовые шаблоны/макеты: Да. Предлагаются некоторые стартовые шаблоны
• Набор иконок: Font Awesome
• Дополнения: Нет
• Уникальные компоненты: Divider, Flag, Rail, Reveal, Step, Advertisement, Card, Feed, Item, Statistic, Dimmer, Rating, Shape
• Документация: Очень хорошо. Semantic предлагает очень хорошо организованную документацию, плюс отдельный веб-сайт, который предлагает руководства для начала работы, настройки и создания тем.
• Настройка: нет графического пользовательского интерфейса, только ручная настройка
• Поддержка браузеров: 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.6.2
• Популярность: 16 637 звезд на GitHub
• Описание: «Набор небольших, респонсив модулей CSS, которые можно использовать в каждом веб-проекте»
• Основные принципы: SMACSS, минимализм
• Размер фреймворка: 16 KB
• Препроцессоры: Нет
• Отзывчивость («responsive»): Да
• Модульность: Да
• Стартовые шаблоны/макеты: Да
• Набор иконок: Нет. Вместо этого вы можете использовать Font Awesome
• Дополнения: Нет
• Уникальные компоненты: Нет
• Документация: Хорошо
• Настройка: Basic GUI Skin Builder
• Поддержка браузеров: Последние версии Firefox, Chrome, Safari; IE7+; iOS 6.x, 7.x; Android 4.x
• Лицензия: Yahoo! Inc. BSD

 

Заметки по Pure

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

 

Как выбрать правильный фреймворк?

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

• Достаточно ли популярен фреймворк? Большая популярность означает больше людей, вовлеченных в проект, и, следовательно, больше учебников и статей из сообщества, больше реальных примеров/веб-сайтов, больше сторонних расширений. Большая популярность также означает, что фреймворк более перспективен — чем больше сообщество вокруг фреймворка, тем меньше шансов, что он будет заброшен.
• Активно ли развивается фреймворк? Хороший фреймворк нужно постоянно обновлять с использованием новейших веб-технологий, особенно в отношении мобильных устройств.
• Достиг ли фреймворк зрелости? Если конкретный фреймворк, или его последняя версия, еще не используется и не проверялся в реальных проектах, вы можете поиграться им, потестировать, но полагаться на него для продакшена, было бы неразумно.
• Предлагает ли фреймворк хорошую документацию. Понятно, что хорошая документация очень желательна, чтобы облегчить учебный процесс.
• Насколько специфичен фреймворк? Основной момент здесь заключается в том, что с всеохватывающим сгенерированным фреймворком гораздо удобней работать, чем с фреймворком с высокоуровневой спецификой. В большинстве случаев лучше выбрать фреймворк с минимальными стилями, потому что его гораздо проще настроить. Добавление новых правил CSS — это гораздо более удобный и эффективный процесс по сравнению с переписыванием или переопределением существующих. Кроме того, если вы добавите новые правила поверх существующих, вы получите неиспользованные правила, которые увеличат размер CSS.

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

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

Не точный перевод статьи на sitepoint.com