Хотите лучшие css фреймворки 2021?
Компания Merehead занимается веб разработкой. Свяжитесь с нами и получите бесплатную консультацию!
Поговорить с Менеджером
Если ставить себе целью быстрое создание прототипов приложений, то нет более логичного шага, чем упростить себе задачу при помощи удобного CSS фреймворка. Это поможет решить проблему выбора стилей.
Использование CSS фреймворка для написания пользовательского CSS кода более чем оправдано ограниченностью самого ценного ресурса современности – времени. Именно этот фактор и обуславливает уместность траты данного ресурса на создание функциональности. Безусловно, можно создать CSS с нуля. Это безусловно поможет улучшить производительность и эстетику. Единственное, что следует понимать и принимать – это тот факт, что талант и способности к творчеству в области визуализации, а также колоссальный опыт работы с CSS есть не у каждого. Возможно, имеет смысл поручить эту работу настоящему профессионалу либо же воспользоваться проработанным фреймворком, чтобы создать клиентский интерфейс. Подобных программ существует достаточно много, они в чём-то превосходят одна другую, в чём-то одна другой проигрывают.
Признанные лидеры
Bootstrap
Данный CSS-фреймворк стал популярным
достаточно неожиданно, поскольку изначально разрабатывался для Twitter, но на данный момент он успешно покинул пределы этой социальной сети и поступил на вооружение массы проектов, среди которых вёрстка Landing Page, темы
WordPress, шаблоны для разнообразных CMS и так далее. Сейчас наиболее популярна 4-я версия системы, но пока она не превзошла по срокам признания предыдущую. Разница между ними заключается в том, что разметка старой версии базировалась на свойстве float, а новая версия использует Flexbox-модель. По слухам, скоро появится версия на основе Grid, но пока это только слухи.
Среди достоинств Bootstrap следует выделить
хорошую задокументированность, причём присутствует не только на английском, но и на русском языке. В составе рассматриваемого фреймворка присутствует очень много классов для построения элементов на базе grid-system (12-колоночная сетка). Нельзя забывать и о том, что в состав фреймворка входит и множество компонентов, которые позволят пользователю создавать и форматировать карточки, меню, фоны, кнопки, аккордионы, модальные окна, таблицы и прочее.
Также важно упомянуть о
наличии дополнительных сайтов, темы которых базируются именно на данном фреймворке (например,
bootswatch.com). Они доступны и на CDN, не говоря уже о массе дополнений и крупном сайте, целиком посвящённом сниппетам и шаблонам. Для корректной работы требуется только проверить версию Bootstrap и внести коррективы, если требуется. Всё вышеизложенное объясняет любовь программистов к данной системе: ведь не нужно задумываться о вёрстке, стилях – достаточно просто воспользоваться классами фреймворка при написании кода на
Vue, React или Angular. Если же у программиста возникает желание воспользоваться Material Design для Bootstrap, то следует воспользоваться сайтом
mdbootstrap.com и просто скачать соответствующий набор стилей. Для вышеуказанных фреймворков там уже присутствуют готовые сборки.
Говоря о достоинствах, нельзя молчать о недостатках. Первый и самый, пожалуй, значительный минус –
это тяжёлый CSS-файл, содержащий стили. Весит он целых 153кб в версии 4.3.1 и 57кб js-файла в минфицированной версии (без него не будут работать табы(вкладки), модальные окна, карусель и выпадающие меню).
Также есть и спорный момент. В то время, как одни пользователи смешивают Bootstrap с грязью за избыточность стилей и классов, другие парируют тем, что
можно скомпилировать сетку и требующиеся классы, а не сразу весь набор (единственная помеха – для этого нужно знание препроцессора SAAS). Другой вариант – вместо локального файла для подключения использовать CDN. В этом случае остаётся возможность того, что данный файл остался в кэше браузера после того, как пользователь загружал этот файл к себе раньше.
Foundation
Как утверждает официальный сайт данного проекта, Foundation – это не один, а целое семейство инновационных адаптивных фронтенд-фреймворков. Цель его использования, как правило, сводится к тому, чтобы
ускорить переход от прототипирования к производству любых масштабов. С помощью данного фреймворка, уверяют создатели, можно создать сайт или приложение, которое может работать на любом устройстве а e-mail рассылка будет одинаково хорошо отображаться во всех почтовых клиентах без исключения, в том числе и в Outlook.
Пользователи нередко сравнивают Foundation с Bootstrap, поскольку на данный момент эти фреймворки официально напрямую конкурируют.
Несмотря на то, что Foundation уже 9 лет, система всё ещё имеет весьма внушительное количество тех, кто в любом случае предпочтёт её другим. Причина в том, что фреймворк предоставляет своему пользователю
готовые стартовые шаблоны, которые позволяют создавать веб-проекты в рекордно-быстрые сроки. На данный момент этим фреймворком пользуются
сайтами, как eBay, Mozilla, Amazon, EA и многие другие, что вполне можно назвать признанием.
Приятным решением является возможность скачки не полного набора компонентов, а «cut-version», набор которой можно определить в блоке "Customize Foundation", страница загрузки которого предоставляет выбор среди всех компонентов. Помимо этого такую версию можно установить и через npm, и через yarn, и загрузить с CDN.
Шестая версия Foundation основана на Flexbox-модели, чем схожа с Bootstrap-4, да и подход к классам очень схож, отличие только в названиях. В частности, данный фреймворк использует классы grid-container вместо container, grid-x grid-padding-x вместо row, а внутри содержит элементы <div class="large-4 medium-4 small-4">, аналогичные <div class="col-lg-4 col-md-4 col-sm-4">. Разница лишь в том, что фреймворки используют разные единицы измерений: если для Bootstrap выбрали px, то создатели Foundation остановились на rem.
Также принципиальные отличия есть в таком вопросе как оформление. В случае Foundation можно наблюдать
предоставление цветовых классов, классов по управлению отступами, классов для отображения элементов исключительно на определённых устройствах, стили для форм и кнопок, не говоря уже о других полезнейших утилитах. Это безусловное достоинство, которое в то же время становится причиной небольшого недостатка – большего количества прямых углов, нежели у конкурентов, которые эту проблему смягчили с помощью border-radius.
Солидный размер файлов и в этом случае стал проблемой, при том более значительной, поскольку вес минифицированного CSS-файла 142кб, а js-файл тянет на целых 479кб, что при сравнении с цифрами у Bootstrap, указанными выше, чаша весов, казалось бы, неумолимо тянется к полу. Тем не менее задокументированность у Foundation
находится на более чем достойном уровне, а при подключении jQuery и файла foundation.js появится возможность пользоваться разнообразными компонентами и плагинами (ползунки-слайдеры, выпадающие и раскрывающие меню, всплывающие подсказкт, Orbit для создания слайд-шоу и так далее).
Ant Design
Известнейший и весьма эффективный фреймворк из тех, которые известны многим пользователям – это Ant Design. Его назначением изначально было упрощение проектирования, а также облегчение создания прототипа для всех участников проекта в целях повышения эффективности разработки фоновых предложений и продуктов, об этом сообщает официальная страница компании.
Создатели данного языка дизайна для фоновых приложений постоянно его совершенствуют, стремясь к максимальной унификации специфики, уменьшению затрат на различия дизайна, а также высвобождению ресурсов, которые, как правило, затрачиваются на проектирование и внешнюю разработку.
Для квалифицированных пользователей важно выделить особенности этого фреймворка на фоне ему подобных. Прежде всего Ant Design –
это полноценная дизайн-система, визуальный язык разработки пользовательского интерфейса корпоративных классов для веб-приложений. Не стоит забывать и о том, что достаточно большое количество высококачественных компонентов доступно, как говорится, «из коробки», то есть изначально. Также довольно приятно, что этот фреймворк написан на TypeScript с готовыми определёнными типами. Ну и напоследок –
максимально полный пакет инструментов для дизайна и разработки, про два из которых – таблицы и формы – следует сказать отдельно пару слов.
Таблицы в Ant Design имеют несколько приятных фич, среди которых:
- встроенная пагинация (есть клиентская, но можно написать и собственную);
- базово доступная фильтрация с помощью выпадающего селектора с опциями (также есть возможность создать собственный кастомный фильтр, что при всей сложности процесса полностью оправдает все вложенные усилия);
- достаточно гибкий API для обеспечения выбора конкретных строк таблицы, рендеринга ячеек;
- встроенная возможность вложения информации в строки таблицы;
- достаточно неплохо, хоть и несовершенно реализованная возможность фиксации колонок и заголовка.
Тем не менее будет нечестно обойти вниманием и некоторые недостатки Ant Design. Первый и, пожалуй, наиболее весомый – это
отсутствие поддержки визуализации. «Костылём» в её решении стало подробное описание того, как настроить виртуализацию с помощью react-virtualized, в документации. Родственной этой проблеме стал размер страницы по умолчанию не более пяти строк: причина в колоссальном количестве функций, из-за которого метод render приводится в исполнение непроизвольно, если не сказать – в случайном порядке и при каждом действии на странице вплоть до наведения на строку. Исходом становится тот факт, что таблицы Ant Design не вполне пригодны для отрисовки солидного количества строк. Когда число строк превосходит сотню, производительность начинает ощутимо падать и проседать.
Следующий проблемный момент – это
стили таблиц, заложенные во фреймворке. Например, к языкам, которые базируются на иероглифике, свойство word-break: break-word (разбивание слов при превышении рамок блока в произвольных местах при отсутствии подходящего места для переноса строки) вполне применимо, но при работе с буквенным алфавитом начинаются проблемы, поскольку структура у языков разработчиков и языков пользователей чаще всего различны по сути своей. В китайском языке не существует знака переноса, по этой причине фреймворк начинает конфликтовать с пользователем в выполнении своих функций.
Тем не менее, решается эта проблема на программном уровне достаточно просто.
Последней проблемой можно назвать также
вертикальное выравнивание текста в ячейках по середине, что портит внешний вид проекта при большом количестве контента в ячейке. Далеко не для всех данный вопрос принципиален, но перфекционизм в работе – это скорее положительное явление, а значит, стремиться к совершенству никогда не поздно. Тем не менее таблицы Ant Design были и остаются превосходным инструментом, аналогов которому в экосистеме React практически нет.
Менее популярные фреймворки
Первым из таких будет уместно упомянуть
Materialize.