10 легких CSS фреймворков для создания лендинг пейдж, сайта или интерфейса приложения


Веб разработка стремительно развивается несколько последних лет. Каждый год появляется несколько новых фреймворков для разработки фронтенда. Верхнюю позицию в рейтинге популярности по праву занимает Bootstrat. Однако существует большое количество других решений, которые заслуживают внимания.

В данной статье приводится список из 10 легких CSS фреймворков, которые стоят того, чтобы их попробовать в работе.

Spectre

CSS фреймворк Spectre

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

Компоненты CSS и утилиты, которые можно легко модифицировать под свои идеи с помощью SASS или SCSS.

Размер фреймворка всего 10 Кб. Он поддерживается большинством современных веб браузеров.

Mustard UI

CSS фреймворк Musturd UI

Легкий CSS фреймворк с открытым исходным кодом. Весь фреймворк разделен на модули, которые можно включать в свой проект по-отдельности. Разработчик получает все, что нужно для создания интерфейса приложения: сетку на flexbox, кнопки, таблицы, формы, карточки и многое другое. Все компоненты легко адаптировать под свой проект с помощью SCSS переменных.

Bulma

CSS фреймворк Bulma

Bulma – бесплатный, современный CSS фреймворк с открытым исходным кодом. Он построен на модели использования flexbox. Разработчик получит простую сетку, адаптивные инструменты навигации и универсальные объекты для вывода медиа ресурсов. Каждый элемент Bulma оптимизирован для мобильных устройств и маленьких экранов. Фрймворк можно легко настроить для своих проектов с помощью переменных и классов-модификаторов.

UI Kit

CSS фреймворк UI Kit

Еще один замечательный CSS и JavaScrit фреймворк для фронтенда. В его составе имеется собственный шрифт с SVG иконками и большой набор различных компонентов. UIkit очень хорошо спроектирован и как инструмент разработчика, и как набор дизайнера. Унифицированные стили, легко запоминающееся API? Множество опция для настройки и удобные классы-модификаторы.

TentCSS

SCSS фреймворк TentCSS

 

Простой и легкий CSS фреймворк с набором основных компонентов для построения адаптивного веб сайта. Всего 5Кб. Соответствие БЭМ стандарту. Современная сетка на основе flexbox для построения шаблонов.

MaterializeCSS

CSS фреймворк Materialize

В основу данного адаптивного фреймворка положен дизайн стиля материал. MaterializeCSS очень легко использовать, особенно тем, кто знаком с дургими подобными проектами, например, с Bootstrap. В коллекции входит набор шаблонов для быстрой разработки дизайна веб сайта.

Foundation

CSS фреймворк foundation

Zurb Foundation – популярный инструмент для построенния адаптивных веб сайтов и приложений. В фреймворк включены различные модульные компоненты, которые легко настраивать под свои идеи. Помощью данного инструмента можно быстро разработать отличный адаптивный дизайн сайта, который будет хорошо выглядеть на любых устройствах.

Semantic UI

CSS фреймворк Semantic UI

Semantic поможет вам построить прекрасный адаптивный шаблон с помощью легко читаемого HTML. Фреймворк содержит более 3000 CSS переменных, которые можно использовать для кастомизации темы оформления. Также для повышения адаптивности во фреймворке используются em значения.

Base

CSS фреймворк Base

Легкий, минимально необходимый и адаптивный CSS фреймворк. Построен с помощьюю последней версии normalize.css и разделен на модули, которые можно использовать по-отдельности. Разрабатывался под мобильные устройства и отлично работает во всех современных браузерах, включая IE 10+.

MUI

CSS фреймворк MUI

Маленький адаптивный фреймворк, который соответствует руководству Google’s Material Design. Нет внешних зависимостей. Занимает 5.4 Кб. Поддерживает React. Можно кастомизировать через SASS файлы. Имеет встроенную версию для стилизации почтовых отправлений.

Как перенсти свой домен к другому регистратору?


Предложить идею урока:

Ошибка в тексте

Послать сообщение об ошибке администратору?
Ваш браузер останется на той же странице.

Ваше сообщение отправлено. Спасибо!

Окно закроется автоматически через 3 секунды

Наверх