В настоящее время существует поток интерфейсов CSS. Но число действительно хороших можно сузить до нескольких.
В этой статье мы рассмотрим (по моему мнению), пять лучших Фреймворков, доступных сегодня. Каждая инфраструктура имеет свои сильные и слабые стороны и конкретные области применения, позволяя вам выбирать на основе потребностей конкретного проекта. Например, если ваш проект прост, нет необходимости использовать сложную структуру. Кроме того, многие из этих вариантов являются модульными, что позволяет использовать только те компоненты, которые вам нужны, или даже смешивать компоненты из разных фреймворков.
Основы, которые я собираюсь изучить, представлены на основе их популярности GitHub, начиная с самых популярных, что, конечно же, Bootstrap.
Примечание: некоторая информация ниже будет устаревать в ближайшие недели и месяцы - например, звезды GitHub, номера версий - поэтому имейте это в виду, если вы читаете эту статью задолго до даты публикации.
1. Bootstrap
Bootstrap является бесспорным лидером среди доступных фреймворков сегодня. Учитывая его огромную популярность, которая растет с каждым днем, вы можете быть уверены, что этот замечательный инструментарий не подведет вас или оставит вас на пути к созданию успешных веб-сайтов.
- Создатели: Марк Отто и Джейкоб Торнтон.
- Год выхода: 2011
- Текущая версия: 3.3.7
- Популярность: 111 000 звезд на GitHub
- Описание: «Bootstrap - это самая популярная среда HTML, CSS и JavaScript для разработки интерактивных мобильных проектов в Интернете».
- Основные понятия / принципы: RWD и мобильные.
- Размер: 154 KB
- Модульный: Да
- Набор иконок: Глификон
- Дополнительно / надстройки: нет в комплекте, но доступно множество сторонних плагинов.
- Уникальные компоненты: Jumbotron
- Документация: Хорошо
- Настройка: основной пользовательский интерфейс. К сожалению, вам нужно вводить значения цвета вручную, потому что нет выбора цвета.
- Поддержка браузера: Firefox, Chrome, Safari, IE8 + (вам нужно Respond.js для IE8)
- Лицензия: MIT
Примечания к бутстрапу
Основная сила Bootstrap - его огромная популярность. Технически, это не обязательно лучше, чем другие в списке, но он предлагает гораздо больше ресурсов (статьи и руководства, сторонние плагины и расширения, создатели тем и т. Д.), Чем остальные четыре фреймворка. Короче говоря, Bootstrap повсюду. И это главная причина, по которой люди продолжают ее выбирать.
Примечание. Говоря «уникальные компоненты», я имею в виду, что они уникальны по сравнению с фреймворками, упомянутыми в этом списке.
2. Foundation by ZURB
Foundation является вторым крупным игроком в этом сравнении. Благодаря солидной компании, такой как ZURB, она имеет действительно сильную ... ну ... основу. В конце концов, Фонд используется на многих крупных веб-сайтах, включая 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, Keyystkes, Joyride, Таблицы цен
- Документация: Хорошо. Доступны многие дополнительные ресурсы.
- Настройка: основной графический пользовательский интерфейс, подобный инструменту настройки Bootstrap.
- Поддержка браузера: Chrome, Firefox, Safari, IE9 +; IOS, Android, Windows Phone 7+
- Лицензия: MIT
Примечания к Foundation
Фонд - это действительно профессиональная структура с поддержкой бизнеса, обучением и консалтингом. Он также предоставляет множество ресурсов, которые помогут вам быстрее и проще изучить и использовать структуру.
3. Semantic UI
Semantic UI - это постоянное усилие, позволяющее сделать веб-сайты более семантическими. В нем используются принципы естественного языка, что делает код более простым и понятным.
- Создатель: Джек Лукич
- Год выхода: 2013
- Текущая версия: 2.2
- Популярность: 34 762 звезды на GitHub
- Описание: «Компонент компонентов пользовательского интерфейса, основанный на полезных принципах из естественного языка».
- Основные понятия / принципы: семантическая, амбивалентность тегов, отзывчивость.
- Размер: 806 КБ
- Модульный: Да
- Запуск шаблонов / макетов: Да, предлагаются некоторые базовые шаблоны для начинающих
- Набор иконок: Шрифт Awesome
- Дополнительно / надстройки: нет
- Уникальные компоненты: Divider, Flag, Rail, Reveal, Step, Advertisement, Card, Feed, Item, Statistics, Dimmer, Rating, Shape.
- Документация: Очень хорошо. Semantic предлагает очень хорошо организованную документацию, а также отдельный веб-сайт, который предлагает руководства для начала работы, настройки и создания тем.
- Настройка: нет графического адаптера, только ручная настройка.
- Поддержка браузера: Firefox, Chrome, Safari, IE10 + (IE9 только с префиксом браузера), Android 4, Blackberry 10
- Лицензия: MIT
Заметки Semantic UI
Семантика - самая инновационная и полнофункциональная структура среди обсуждаемых здесь. Общая структура структуры и соглашений об именах с точки зрения четкой логики и семантики ее классов также превосходит остальные.
4. Pure by Yahoo!
Pure - это легкая модульная структура, написанная в чистом CSS, которая включает компоненты, которые могут использоваться вместе или отдельно в зависимости от ваших потребностей.
- Создатель: Yahoo
- Год выхода: 2013
- Текущая версия: 0.6.2
- Популярность: 16 637 звезд на GitHub
- Описание: «Набор небольших, чувствительных модулей CSS, которые вы можете использовать в каждом веб-проекте».
- Основные понятия / принципы: SMACSS, минимализм.
- Размер: 16 КБ
- Модульный: Да
- Начало шаблонов / макетов: Да
- Набор значков: Нет. Вместо этого вы можете использовать Font Awesome.
- Дополнительно / надстройки: нет
- Уникальные компоненты: нет
- Документация: Хорошо
- Настройка: базовый GUI Skin Builder
- Поддержка браузера: последние версии Firefox, Chrome, Safari; IE7 +; IOS 6.x, 7.x; Android 4.x
- Лицензия: Yahoo! Inc. BSD
-
Примечания к Pure
Pure предлагает только стили bare-bones для чистого запуска вашего проекта. Он идеально подходит для людей, которым не нужна полнофункциональная структура, а только конкретные компоненты для включения в их работу.
5. UIkit by YOOtheme
UIkit - это краткая коллекция простых в использовании и легко настраиваемых компонентов. Хотя он не так популярен, как его конкуренты, он предлагает такую же функциональность и качество.
- Создатель: YOOtheme
- Год выхода: 2013
- Текущая версия: 3.0.0
- Популярность: 9,422 звезды на GitHub
- Описание: «Легкий и модульный интерфейс для разработки быстрых и мощных веб-интерфейсов».
- Основные понятия / принципы: RWD, мобильный первый
- Размер: 326,9 КБ (384,4 КБ, если вы включили uikit-icons.min.js для функциональности, связанной с значками SVG)
- Модульный: Да
- Начало шаблонов / макетов: Да
- Набор иконок: UIkit поставляется со своей системой и библиотекой SVG с растущим числом контурных значков.
- Дополнительно / надстройки: Да
- Уникальные компоненты: статья, Flex, обложка, редактор HTML
- Документация: Хорошо
- Настройка: расширенный пользовательский интерфейс GUI доступен только в версии 2 (предыдущая версия)
- Поддержка браузера: Chrome, Firefox, Safari, IE9 +
- Лицензия: MIT
Примечания к UIkit
UIkit успешно используется во многих темах WordPress. Он предлагает гибкий и мощный механизм ручной настройки (предыдущая версия фреймворка также предлагает расширенный графический интерфейс).
Какой выбрать Frameworks?
В конце концов, позвольте мне дать вам несколько рекомендаций по выбору правильной структуры. Вот некоторые из наиболее важных вещей, на которые следует обратить внимание:
- Имеет ли frameworks достаточную популярность?
Большая популярность означает больше людей, вовлеченных в проект, и, таким образом, больше учебных пособий и статей из сообщества, более реальных примеров / веб-сайтов, сторонних расширений и лучшей интеграции с продуктами для веб-разработки. Большая популярность также означает, что структура более надежна для будущего - Фреймворки с более широким сообществом вокруг нее гораздо реже будут забыты. - Является ли система активной разработкой?
Хорошая структура должна постоянно повышаться с использованием новейших веб-технологий, особенно в отношении мобильных устройств. - Достигнута ли эта структура? Если конкретная структура еще не используется и проверена в реальных проектах, то вы можете свободно юзать ее, но полагаться на нее для своих профессиональных проектов, вероятно, будет неразумно.
- Предоставляет ли структура хорошую документацию?
Хорошая документация всегда желательна, чтобы облегчить процесс обучения. - Каков уровень специфичности структуры?
Основной момент здесь заключается в том, что в более общей структуры намного легче работать, по сравнению с каркасом с высокой степенью специфичности. В большинстве случаев лучше выбрать структуру с минимальными стилями, потому что ее намного проще настроить. Добавление новых правил CSS является гораздо более удобным и эффективным процессом по сравнению с перезаписью или переопределением существующих. Кроме того, если вы добавите новые правила поверх существующих, вы получите неиспользованные правила, которые будут излишне увеличивать размер CSS. - В случае, если вы все еще не уверены, вы можете принять подход «смешанный и совпадающий». Если конкретная структура не удовлетворяет вашим потребностям, вы можете смешивать компоненты из двух или более проектов. Например, вы можете получить меньший стиль CSS-основы из одной структуры, предпочтительной сетчатой системы из другой и более сложных компонентов из третьего. Модульность Viva! :)
Наконец, следует упомянуть, что теперь, когда Flexbox и Grid Layout имеют хорошую поддержку в последних версиях основных браузеров, проще построить сложные макеты. Этот факт сам по себе может побудить больше разработчиков оставить костыль интерфейсных фреймворков и закодировать их макеты с нуля.
Что ты думаешь?
У любой из этих структур есть какие-либо сильные и слабые стороны, которые здесь не упоминались? Как вы думаете, есть ли другие, которые должны были быть перечислены? Сообщите нам в обсуждении ниже.
