Наверх

5 самых популярных Framework"ов 2017 года

Опубликовано:
499
1 2 3 4 5
(0%) / 0

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

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

Основы, которые я собираюсь изучить, представлены на основе их популярности GitHub, начиная с самых популярных, что, конечно же, Bootstrap.

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

 

1. Bootstrap

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 Foundation

  • Создатели: 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 - это постоянное усилие, позволяющее сделать веб-сайты более семантическими. В нем используются принципы естественного языка, что делает код более простым и понятным.

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, которая включает компоненты, которые могут использоваться вместе или отдельно в зависимости от ваших потребностей.

Pure by Yahoo!

  • Создатель: 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 - это краткая коллекция простых в использовании и легко настраиваемых компонентов. Хотя он не так популярен, как его конкуренты, он предлагает такую же функциональность и качество.

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 имеют хорошую поддержку в последних версиях основных браузеров, проще построить сложные макеты. Этот факт сам по себе может побудить больше разработчиков оставить костыль интерфейсных фреймворков и закодировать их макеты с нуля.

 

Что ты думаешь?

У любой из этих структур есть какие-либо сильные и слабые стороны, которые здесь не упоминались? Как вы думаете, есть ли другие, которые должны были быть перечислены? Сообщите нам в обсуждении ниже.

Дорогой web-мастер.
Для меня очень важна обратная связь от Вас в виде лайков или рейтинга.
Пожалуйста оцените эту публикацию или поставь лайк за старание.
Статья подготовлена для Вас сайтом kisameev.ru
Перевел: Кисамеев Дмитрий
Статью просмотрели: 499
Понравилось:
Поделится ссылкой
Комментариев...
Оставьте его первым.

Для вставки кода используйте комментарии от ВК или FB:

5 последних публикаций из раздела "HTML&CSS"

Когда я начал изучать эту тему, мне не нужна была трехмерная карусель, но я больше интересовался техническими деталями ее реализации....
Подборка лучших платформ для редактирования и хранения кода на HTML, CSS и JavaScript с просмотром готового результата в браузере. JSFiddle,...
Все любят шаблоны и активно их используют для получения быстрых результатов. Это касается многих сфер жизни. В том числе и...
Этот эффект отличается от обычного заполнения фона цветом тем, что сама анимация начинается с положения курсора относительно родительского элемента.
Существует много различных библиотек, которые помогают нам, разработчикам реализовывать потрясающие эффекты анимации на странице прокрутки. Сегодня мы поковыряемся в настройках AOS,...

Нашли баг или ошибку?

Выдели текст
мышкой и нажми:
Нашел ошибку