2 подписчика

Топ 10 лучших CSS фреймворков для фронтенд-разработки

28 сентября 201928 сен 2019

3 мин

Оглавление

Ant Design
Особенности
Поддержка среды

Зачем тратить тратить в пустую на создание функциональности, когда можно использовать фреймворк для создания клиентского интерфейса. Представляю полный список самых знаменитых и используемых CSS фреймворков.

Ant Design

Ant Design специально создан для внутренних настольных приложений, который стремится улучшить опыт пользователей и дизайнеров продуктов.

Особенности

Язык разработки пользовательского интерфейса корпоративных классов для веб-приложений.
Набор высококачественных компонентов React из коробки.
Написан на TypeScript с готовыми определёнными типами.
Полный пакет ресурсов и инструментов для разработки и дизайна.

Поддержка среды

Современные браузеры и Internet Explorer 9+ (с polyfills).
Рендеринг на стороне сервера.
Electron.

Foundation

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

Особенности

Поддерживает веб-доступность.
Разработан для простоты.
Гибкий Sass.
Стартовые шаблоны ZURB.

Bulma

Bulma – CSS фреймворк. По этой причине на выходе единственный файл CSS: bulma.css.

Используйте представленный выше файл из коробки или загрузите исходные файлы Sass для настройки переменных.

Особенности

Благодаря использованию последних функций CSS3, таких как Flexbox, и планированию использования CSS переменных и CSS Grid, Bulma – ультрасовременная технология браузера.
Простая система сетки: чтобы создать сетку Bulma, нужен только один контейнер .columns, в который вы оборачиваете столько элементов .column, сколько хотите.
Лёгкий в изучении синтаксис: с простейшими читаемыми именами классов (например, .button или .title) и понятными модификаторами (например, .is-primary или .is-large) легко ознакомиться с Bulma за считанные минуты.
100+ полезных CSS хелперов.
Многое другое.

Spectre.css

Spectre.css - это легкая, отзывчивая и современная платформа CSS для более быстрой и расширяемой разработки. Он предоставляет базовые стили для типографики и элементов, систему адаптивного макета на основе flexbox, чистые компоненты CSS и утилиты с передовым кодированием и согласованным языком дизайна.

Особенности

Лёгкий (~ 10 КБ в сжатом виде).
Эстетически приятные компоненты и цветовая палитра.
Интуитивно понятный синтаксис.
Гибкость: JS не требуется.

Tailwind CSS

Tailwind CSS-это высоко настраиваемая, низкоуровневая структура CSS, которая дает вам все строительные блоки, которые вам нужно построить на заказ, без лишней борьбы с переопределением раздражающих встроенных стилей .

Особенности

Отзывчивый.
Расширяемый компонентами.
Настраиваемый.

Shoelace

Shoelace - это легкая, перспективная библиотека CSS, построенная с использованием будущего синтаксиса CSS. Он прост в использовании и легко настраивается. Пользователи Bootstrap найдут его знакомым, но обновленным.

Особенности

Легковесная ~ 69 КБ.
Использует нативные CSS переменные и функции будущего CSS.
Проста в использовании и настраиваемая.

Semantic UI

Краткий HTML, интуитивный JavaScript. Semantic поставляется с интуитивно понятной системой наследования и высокоуровневыми переменными теминга, которые позволяют вам иметь полную свободу проектирования.

Особенности

Краткий HTML со взаимозаменяемыми словами и классами.
Упрощенная отладка.
Тематическое оформление.

Skeleton

Skeleton стилизует только часть стандартных элементов HTML и включает в себя сетку, но этого часто предостаточно для начала работы. Используйте Skeleton, если приступаете к меньшему проекту или просто чувствуете, что вам не нужны все полезности более крупных CSS фреймворков.

Особенности

Лёгкий как пёрышко ~ 400 строк.
Создан для мобильных устройств.
Разработанные стили – отправная точка, а не основа пользовательского интерфейса.
Быстрый запуск, без необходимости компиляции или установки.

Tachyons

Tachyons – система дизайна для функционального CSS и людей. Быстро создавайте и проектируйте новый пользовательский интерфейс без написания CSS.

Особенности

CSS-архитектура для мобильных устройств.
490 доступных цветовых комбинаций.
Многочисленные утилиты отладки для уменьшения сложности компоновки.
Лёгкий (~ 14 КБ).
Библиотека компонентов с открытым исходным кодом.
Подходит для работы с обыкновенным HTML, React, Ember, Angular, Rails и другими.
Адаптивная система сетки с бесконечной вложенностью.
Созданный с помощью PostCSS.

Material Design

Созданный и спроектированный Google, Material Design – дизайн-система, которая сочетает классические принципы эффективного дизайна вместе с инновациями и технологиями .