Эта статья была обновлена в мае,
2017 года, для того, что бы показать текущий статус возможностей,
представленных в фронт-енд фреймворках, описаных ниже.
В наши дни существует бесчисленное
множество фронт-енд CSS фреймворков. Но число действительно хороших немного
меньше.
В данной статье мы сравним, пять
лучших с моей точки зрения фреймворков, которые есть сегодня.Каждый фреймворк
имеет свои достоинства и недостатки, специфичные области применения, оставляя
вам право выбора в зависимости от ваших потребностей. Например, если у вас простой
проект, то нет необходимости использовать сложный фреймворк. Кроме того, многие
из этих опций являются модулярными и позволяют вам использовать только те
компоненты который вам нужны, или смешивать компоненты из различных
фреймворков.
Фреймворки о которых я собираюсь
говорить, представлены на основе популярности в GitHub,
начиная с самых популярных, которым естественно является Bootstrap.
(Примечание: Некоторые сведения
описанные ниже устареют в ближайшие месяцы или даже недели, например количество
звезд GitHub, номера версий – поэтому имейте это ввиду, если вы
читаете эту статью спустя какоето время после публикации. Также обратите
внимание, что размер фреймворка указан для минимизированной версии CSS и JavaScript файлов.)
1.
Bootstrap
Bootstrap неоспоримый
лидер среди всех фреймворков сегодня. Учитывая его огромную популярность,
которая по-прежнему растет с каждым днем, вы можете быть уверены, что этот
замечательный инструментарий не подведет вас или оставить вас в покое на пути к
созданию успешных сайтов.
·
Создание: 2011
·
Текущая версия: 3.3.7
·
Популярность: 111,000 звезд на GitHub
·
Описание: “Bootstrap самый популярный HTML, CSS, и JavaScript фреймворк для создания отзывчивых, мобильных проектов на Web.”
·
Размер: 154 KB
·
Отзывчивый: Да
·
Модулярный: Да
·
Создание темплейтов/лейаутов: Да
·
Расширения: Встроеных нет, но доступно много сторонних
плагинов.
·
Уникальный компонент: Jumbotron
·
Документация: Хорошая
·
Возможность настройки: Базовая настройка GUI. К сожалению нужно задавать цвета вручную, потому что нет встроеного
контрола для выбора цвета.
Коментарии
к Bootstrap
Главным
преимуществом фреймворка является его популярность. Технически, он не лучше чем
конкуренты, но он предлагает намного большее количество ресурсов (статей,
руководств, сторонних плагинов и расширений, тем, и так далее) чем все
остальные фреймворки вместе взятые. Вкраце, Bootstrap
есть везде. И это глваная причина почему его
выбирают для использования.
(Замечание: говоря о «Уникальном
компоненте», я рассматриваю только список фреймворков из моего списка)
2. Foundation by ZURB
Foundation это второй по величине игрок в нашем сравнении. Имея за спиной такого
серьезного родителя как ZURB, фреймворк действительно стоящий. Помимо
всего Foundation используется многими крупными веб-сайтами
включая Facebook, Mozilla, Ebay, Yahoo! и National Geographic.
·
Создатели: ZURB
·
Создание: 2011
·
Текущая версия:6.3.1
·
Популярность: 25,400 звезд на GitHub
·
Описание: “Самый продвинутый отзывчивый фронт-енд
фреймворк в мире”
·
Основные принципы: RWD, сначала мобильный, семантик.
·
Размер: 197.5 KB
·
Препроцессоры: Sass
·
Отызвчивый: Да
·
Модулярный: Да
·
Создание темплейтов/лейаутов: Да
·
Расширения: Да
·
Уникальные компоненты: Icon Bar, Clearing
Lightbox, Flex Video, Keystrokes, Joyride, Pricing Tables
·
Документация: Хорошая, много дополнительных ресурсов.
·
Возможность настройки: Базовая настройка GUI похожая на Bootstrap Customizer tool.
·
Поддержка браузеров: Chrome, Firefox,
Safari, IE9+; iOS, Android, Windows Phone 7+
·
Лицензия: MIT
Коментации к Foundation
Foundation -
это действительно профессиональный фреймворк с поддержкой бизнеса, тренингами и
консультациями. Он также предоставляет много ресурсов для помощи в изучении и
использовании фреймворка быстрее и легче.
3. Semantic UI
Semantic UI это следующая попытка сделать процесс создания сайтов более семантическим.
Он использует принципы натуральных языков, а это делает код более читабельным и
понятным.
·
Создание: 2013
·
Текущая версия: 2.2
·
Популярность: 34,762 звезд на GitHub
·
Описание: “UI фреймворк, построеный на принципах натуральных языков”
·
Основные принципы: Семанитический, амбивалентный к типам,
отзывчивый.
·
Размер: 806 KB
·
Препроцессоры: Less
·
Отзывчивый: Да
·
Модулярный: Да
·
Создание теймплейтов/лейаутов: Да, изначально предлагаются некоторые
базовые темплейты
·
Набор иконок: 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
Это самый инновационный и полноценный
фреймворк среди всех, о ком идет речь в статье. Общая структура фреймворка и
соглашения об именах в терминах четкой логики и семантики его классов также
превосходят конкурентов.
4. Pure от Yahoo!
Pure это легковесный, модулярный фреймворк – написанный на чистом CSS – он включает
компонент который может быть использован вместе или отдельно в зависимости от
ваших пожеланий.
·
Создатели: Yahoo
·
Создание: 2013
·
Текущая версия: 0.6.2
·
Популярность: 16,637 звезд на GitHub
·
Описание: “Набор маленьких отзывчивых модулей которые
можно использовать в любом Веб проекте.”
·
Размер: 16 KB
·
Препроцессоры: Нет
·
Отзывчивый: Да
·
Модулярный: Да
·
Создание темплейтов/лейаутов: Yes
·
Набор иконок: Нет. Вы можете использовать Font Awesome.
·
Расширения: Нет
·
Уникальный компонент: Нет
·
Документация: Хорошая
·
Возможность настройки: Мастер базового UI скина
·
Поддерживаемые браузеры: Последние версии of Firefox, Chrome, Safari; IE7+; iOS 6.x, 7.x; Android 4.x
Коментарии к Pure
Pure предлагает лишь базовый набор стилей для старта вашего
проекта. Он идеально подходит для людй которым не нужен полноразмерный
фреймворк, а необходим только специфический компонент который требуется
включить в проект.
5. Ulkit от YOOtheme
UIkit это
цельная коллекция компонентов которыми легко пользоваться и которые легко
настроаивать. Несмортя на то что он не так популярен как конкуренты, у него та
же функциональность и качество.
·
Создание: 2013
·
Текущая версия: 3.0.0
·
Популярность: 9,422 звезд на GitHub
·
Описание: Легковесный и модулярный фронт-енд фреймворк
для разработки быстрых и мощных веб интерфейсов.”
·
Основные принципы: RWD, сначала мобильный
·
Размер: 326.9 KB (384.4 KB если вы включите
uikit-icons.min.js для функциональности связанной с SVG иконками)
·
Препроцессор: Less, Sass
·
Отзывчивый: Да
·
Модулярный: Да
·
Создание темплейтов: Да
·
Набор иконок: UIkit содержит собственную систему
SVG иконок и библиотеку с постоянно увеличивающимся количеством сторонних
иконок.
·
Расширения: Да
·
Уникальный компонент: Article, Flex, Cover,
HTML Editor
·
Документация: Хорошая
·
Возможность настройки: Продвинутый настройщик UI доступен только в предыдущей версии
·
Поддержка браузеров: Chrome, Firefox, Safari, IE9+
·
Лицензия: MIT
Коментарии
к Ulkit
Ulkit
успешно используется во многих темах
WordPress.
Он предлагает гибкий и мощный механизм ручной настройки (предыдущая версия
фреймворка также предлагала продвинутый настойщик UI).
Какой фреймворк выбрать?
В конце, давайте дам вам некоторые советы
по выбору фреймворка. Вот несколько наиболее важных моментов на которые следует
обратить внимание:
- Достаточно
ли фреймворк популярен? Большая
популярность – означает что больше людей пользуется фреймворком, и как
следствие, можно найти больше руководств, статей общественности, больше живых
примеров/вебсайтов, больше сторонних расширений, лучше интеграция с
соответствующими продуктами веб разработки. Большая популярность также говорит
о том, что у фреймворк более четкое будущее – если у фреймворка больше
пользователей то шанс что фреймворк будет заброшен – меньше.
- Находится
ли фреймворк в активной разработке?
Хороший фреймворк должен постоянно обновлятся в ногу с изменениями всего веб
окружения, технологий, особенно это касатеся мобильной части.
- Достиг
ли фреймворк зрелости? Если конкретный
фреймворк не используется в рельных приложениях, то вы конечно можете с ним
поиграться но не стоит на него полагаться в реальных проектах.
- Предлагает ли фреймворк хорошую документацию? Хорошая
документация всегда приветствуется для того что бы полностью разобраться с
возможностями фреймворка.
- Какой у фреймворка уровень специфичности? Главный момент здесь – это то что более
гибкий фреймворк будет более простым для использования, по сравнению с каким-то
глубоко специфичным фреймворком. В большинстве случаев выгоднее использовать
фреймворк с изначально минимальным набором стилей, потому что так можно
занчительно упростить работу по кастомизации. Добавление нового стиля всегда
проще чем перезапись существующего. Плюс, если вы добавляете новый стиль в
дополнение к существующему, то вы будете иметь как минимум один неиспользуемый
стиль, который негативно повлияет на размер CSS.
Если вы все еще неуверены, вы можете
использовать принцип смешивания и сочетания. Если какой то феймворк не
полностью удовлетворяет вашим потребностям, вы можете смешать компоненты из
различных проектов. Например, у вас может быть более маленький базовый набор CSS из одного
фреймворка, и некая дополнительная грид система из другого, и что то еще более
сложное из третьего компонента. Да здравствует модулярность!
Наконец, сегодня нужно сказать, что с
использованием Flexbox и Grid Layout, которые имеют хорошую поддержку в
большинстве браузеров, стало проще создавать сложные лейауты. Этот факт может
сподвигнуть разработчиков перестать использовать сторонние фреймворки вообще и
вместо этого создавать все самостоятельно с чистого листа.
Какие у вас мысли? Есть ли у рассмотреных
фреймворков прочие сильные или слабые стороны которые не были упомянуты в
данной статье? Или может какой-то фреймворк не был рассмотрен хотя имел на это
право? Пишите свои коментарии.
