В настоящее время существует множество CSS-фреймворков. Но количество действительно хороших можно сократить до нескольких. В этой статье я сравниваю пять лучших интерфейсных сред, доступных сегодня.
Каждая структура имеет свои сильные и слабые стороны, а также конкретные области применения, что позволяет выбирать в зависимости от потребностей конкретного проекта. Например, если ваш проект прост, нет необходимости использовать сложную среду. Кроме того, многие параметры являются модульными, что позволяет использовать только те компоненты, которые вам нужны, или даже смешивать компоненты из разных интерфейсных сред.
Фронт-фреймворки, которые я собираюсь исследовать, представлены на основе их популярности на GitHub, начиная с самого популярного, который, конечно же, Bootstrap.
Обратите внимание, что некоторая информация, приведенная ниже, устареет со времени публикации — например, звезды GitHub и номера версий — так что имейте это в виду, если вы читаете эту статью намного позже даты публикации. Также обратите внимание, что размеры фреймворка — это минимальные размеры необходимых файлов CSS и JavaScript.
1. Бутстрап
Bootstrap сегодня является бесспорным лидером среди доступных интерфейсных сред. Учитывая его огромную популярность, которая продолжает расти с каждым днем, вы можете быть уверены, что этот замечательный инструментарий не подведет вас или оставит вас одного на пути к созданию успешных веб-сайтов.
- Создатели: Марк Отто и Джейкоб Торнтон .
- Год выхода: 2011
- Текущая версия: 4. *. *
- Популярность: 126 202 звезды на GitHub
- Описание: «Гладкий, интуитивно понятный и мощный интерфейс для быстрой и удобной веб-разработки».
- Основные понятия / принципы: RWD и мобильный прежде всего.
- Размер платформы: 592 КБ (предварительно скомпилированная папка zip)
- Препроцессор: Sass
- Отзывчивый: да
- Модульный: да
- Начальные шаблоны / макеты: Да
- Набор иконок: не входит
- Дополнения / дополнения: Нет в комплекте, но доступно множество сторонних плагинов.
- Уникальные компоненты: Jumbotron, Card
- Документация: отлично
- Настройка: опция для отдельных файлов для Grid-системы и перезагрузки, простая настройка с помощью Sass; нет онлайн настройщика
- Поддержка браузера: последние версии Firefox, Chrome, Safari, IE810-11-Microsoft Edge.
- Лицензия: MIT
Заметки о начальной загрузке
Главная сила Bootstrap — его огромная популярность. Технически, это не обязательно лучше, чем другие в списке, но он предлагает гораздо больше ресурсов (статей и учебных пособий, сторонних плагинов и расширений, сборщиков тем и т. Д.), Чем другие четыре интерфейсные среды вместе взятые. Короче, Bootstrap есть везде . И это главная причина, по которой люди продолжают выбирать.
Если вы хотите узнать больше о Bootstrap, проверьте вашу первую неделю с Bootstrap , Bootstrap: сопутствующие инструменты и навыки и 8 практических проектов Bootstrap .
Примечание. Говоря «уникальные компоненты», я имею в виду, что они уникальны по сравнению только с интерфейсными платформами, упомянутыми в этом списке.
2. Основание ZURB
Foundation является вторым крупным игроком в этом сравнении. С такой солидной компанией, как ZURB , эта основа имеет действительно прочную… ну… фундамент. В конце концов, Фонд используется на многих крупных сайтах, включая Facebook, Mozilla, Ebay, Yahoo! и National Geographic, чтобы назвать несколько.
- Создатели: ZURB
- Год выхода: 2011
- Текущая версия: 6
- Популярность: 27 497 звезд на GitHub
- Описание: «Самая продвинутая адаптивная интерфейсная среда в мире»
- Основные понятия / принципы: RWD, мобильный сначала, семантический
- Размер рамки: 233 КБ
- Препроцессоры: Sass
- Отзывчивый: да
- Модульный: да
- Начальные шаблоны / макеты: Да
- Набор иконок: Foundation Icon Fonts
- Дополнения / дополнения: Да
- Уникальные компоненты: панель значков, очистка лайтбокса, Flex Video, нажатия клавиш, Joyride, таблицы цен
- Документация: Хорошо, со множеством дополнительных ресурсов.
- Настройка: Базовый настройщик GUI
- Поддержка браузера: Chrome, Firefox, Safari, IE9 +; iOS, Android, Windows Phone 7+
- Лицензия: MIT
Заметки о фундаменте
Foundation — это по-настоящему профессиональная интерфейсная среда с поддержкой бизнеса, обучением и консультациями. Он также предоставляет множество ресурсов, которые помогут вам быстрее и проще освоить и использовать среду.
Если вы хотите изучить Foundation, ознакомьтесь с нашей книгой: Jump Start Foundation .
3. Семантический интерфейс
Semantic UI — это постоянная попытка сделать сайты более семантическими. Он использует принципы естественного языка, что делает код гораздо более читабельным и понятным.
- Создатель: Джек Лукич
- Год выхода: 2013
- Текущая версия: 2.3
- Популярность: 42 162 звезды на GitHub
- Описание: «Структура компонента пользовательского интерфейса, основанная на полезных принципах естественного языка»
- Основные понятия / принципы: семантика, амбивалентность тегов, отзывчивость
- Размер рамки: 1,8 МБ
- Препроцессоры: меньше
- Отзывчивый: да
- Модульный: да
- Начальные шаблоны / макеты: Да, предлагаются некоторые базовые стартовые шаблоны
- Набор иконок: Font Awesome
- Дополнения / дополнения: нет
- Уникальные компоненты: делитель, флаг, рельс, раскрытие, шаг, реклама, карта, подача, предмет, статистика, диммер, рейтинг, форма
- Документация: очень хорошая, предлагает очень хорошо организованную документацию, а также отдельный веб-сайт, который предлагает руководства по началу работы, настройке и созданию тем
- Настройка: без настройки GUI, только ручная настройка
- Поддержка браузера: Firefox, Chrome, Safari, IE10 + (IE9 только с префиксом браузера), Android 4, Blackberry 10
- Лицензия: MIT
Примечания по семантическому интерфейсу
Semantic является наиболее инновационной и полнофункциональной интерфейсной средой из обсуждаемых здесь. Общая структура фреймворка и соглашений об именах с точки зрения четкой логики и семантики его классов также превосходит другие.
4. Чистый, Yahoo!
Pure — это легкая модульная структура, написанная на чистом CSS, которая включает компоненты, которые можно использовать вместе или по отдельности в зависимости от ваших потребностей.
- Создатель: Yahoo
- Год выхода: 2013
- Текущая версия: 1.0.0
- Популярность: 18 825 звезд на GitHub
- Описание: «Набор небольших адаптивных CSS-модулей, которые вы можете использовать в любом веб-проекте»
- Основные понятия / принципы: SMACSS , минимализм
- Размер фреймворка: 3,8 КБ, сжатый и сжатый
- Препроцессоры: нет
- Отзывчивый: да
- Модульный: да
- Начальные шаблоны / макеты: Да
- Набор иконок: Нет; вместо этого вы можете использовать Font Awesome
- Дополнения / дополнения: нет
- Уникальные компоненты: нет
- Документация: Хорошо
- Настройка: Базовый GUI Skin Builder
- Поддержка браузера: последние версии Firefox, Chrome, Safari; IE7 +; iOS 6.x, 7.x; Android 4.x
- Лицензия: Yahoo! Inc. BSD
Примечания о чистом
Pure предлагает только стили для чистого начала вашего проекта. Он идеально подходит для людей, которым не нужна полнофункциональная структура, а только конкретные компоненты для включения в их работу.
5. UIkit от YOOtheme
UIkit — это краткая коллекция простых в использовании и легко настраиваемых компонентов. Хотя он не так популярен, как его конкуренты, он предлагает ту же функциональность и качество.
- Создатель: YOOtheme
- Год выхода: 2013
- Текущая версия: 3.0.0
- Популярность: 12 821 звезда на GitHub
- Описание: «Легкая и модульная интерфейсная среда для разработки быстрых и мощных веб-интерфейсов»
- Основные понятия / принципы: RWD, мобильный сначала
- Размер рамки: 374 КБ (папка в архиве)
- Препроцессоры: меньше, Sass
- Отзывчивый: да
- Модульный: да
- Начальные шаблоны / макеты: Да
- Набор иконок: UIkit поставляется со своей собственной системой иконок SVG и библиотекой с растущим числом набросков иконок
- Дополнения / дополнения: Да
- Уникальные компоненты: статья, Flex, обложка, редактор HTML
- Документация: Хорошо
- Настройка: Advanced GUI Customizer доступен только в версии 2 (предыдущая версия)
- Поддержка браузера: Chrome, Firefox, Safari, IE9 +
- Лицензия: MIT
Примечания по UIkit
UIkit успешно используется во многих темах WordPress . Он предлагает гибкий и мощный механизм ручной настройки. (Предыдущая версия фреймворка также предлагала расширенный настройщик графического интерфейса.)
Что является подходящим интерфейсом для вас?
В конце позвольте мне дать вам несколько советов по выбору правильной основы. Вот некоторые из наиболее важных вещей, на которые следует обратить внимание:
- У фреймворка достаточно популярности ? Большая популярность означает больше людей, вовлеченных в проект, и, следовательно, больше учебников и статей от сообщества, больше реальных примеров / веб-сайтов, больше сторонних расширений и лучшую интеграцию с соответствующими продуктами веб-разработки. Большая популярность также означает, что фреймворк в большей степени ориентирован на будущее: фреймворк с большим сообществом вокруг него с меньшей вероятностью будет заброшен.
- Каркас находится в стадии активной разработки ? Хорошая структура должна постоянно повышать уровень с новейшими веб-технологиями, особенно в отношении мобильных устройств.
- Достигла ли основа зрелости ? Если конкретный фреймворк еще не используется и не тестируется в реальных проектах, вы можете свободно играть с ним, но полагаться на него в своих профессиональных проектах, скорее всего, было бы неразумно.
- Предоставляет ли структура хорошую документацию ? Хорошая документация всегда желательна, чтобы облегчить процесс обучения.
- Каков уровень специфичности фреймворка? Суть в том, что работать с более общей структурой гораздо проще, чем со структурой высокого уровня. В большинстве случаев лучше выбрать каркас с минимальным применением стилей, потому что его гораздо проще настроить. Добавление новых правил CSS — гораздо более удобный и эффективный процесс по сравнению с перезаписью или переопределением существующих. Кроме того, если вы добавите новые правила поверх существующих, вы получите неиспользованные правила, которые излишне увеличат размер CSS.
В случае, если вы все еще не уверены, вы можете использовать подход «смешай и сопоставляй». Если конкретная структура не удовлетворяет вашим потребностям, вы можете смешивать компоненты из двух или более проектов. Например, вы можете получить меньший базовый стиль CSS из одного фреймворка, предпочтительную систему сетки из другого и более сложные компоненты из третьего. Viva модульность! 🙂
Наконец, следует отметить, что в настоящее время, когда Flexbox и Grid Layout имеют хорошую поддержку в последних версиях основных браузеров, создавать сложные макеты проще, чем когда-либо. Уже один этот факт может побудить больше разработчиков оставить костяк интерфейсных фреймворков и кодировать свои макеты с нуля.
о чем ты думаешь? Есть ли у какой-либо из этих интерфейсных структур какие-либо сильные и слабые стороны, которые здесь не упоминались? Как вы думаете, есть другие, которые должны были быть перечислены? Дайте нам знать в обсуждении ниже.
Чтобы глубже погрузиться в две верхние интерфейсные платформы, попробуйте Bootstrap: Антология SitePoint № 1 и Jump Start Foundation .
Эта статья была обновлена в июле 2018 года, чтобы отразить текущее состояние функций, присутствующих в интерфейсных средах, перечисленных ниже.
Если вы слышали о Bootstrap, но откладывали его изучение, потому что оно кажется слишком сложным, то изучите наш курс Введение в Bootstrap 4, чтобы быстро и весело познакомиться с мощью Bootstrap.