Верстка с помощью Material UI

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

Популярные фреймворки те еще комбайны, чего там только нет. Полные сборки занимают мегабайты. Не зачем тянуть к себе в проект все это, берем только нужные модули и компоненты. В этом контексте удобно пользоваться сборщиком Webpack.

Material Design

Google в 2014 году представил стиль графического дизайна интерфейсов программного обеспечения. Его характерные черты - закругленные углы, плавные переходы и анимация, использование карточек, ярко выраженный главный цвет присутствующий в разных вариациях в кнопках, ссылках и т.д. Существуют методические рекомендации по его использованию. Широко применяется в Android и веб сервисах Google.

Дизайн продуманный, глубоко проработанный дизайнерами и психологами. Есть много реализаций, в том числе для React - Material UI.

Material UI

Часто называют просто MUI. Код приводить не буду, опишу общие впечатления от работы с библиотекой.

Есть темы оформления - мы задаем основные параметры, например главный и второстепенный цвета, базовый размер шрифта, font-family для разных типов текстов (заголовков, абзацев). Все остальные параметры, которые понадобятся при построении конкретных компонентов MUI посчитает сам, например цвет затемнения кнопки при наведении мыши. Также функционал тем позволяет из коробки использовать в проекте темную тему. Цвета шрифтов и фонов также рассчитываются автоматом.

Сетка MUI похожа на Bootsrap - по умолчанию 12 колонок, есть адаптивные точки (xs, sm, md, lg и т.д.). Но можно задать и свое количество колонок, например 5 или 10. В Bootstrap я помню мучился с этим вопросом...

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

Badge - значок в правом верхнем углу какого-то элемента, например для показа сколько товаров в корзине или количество сообщений от пользователя.

Rating - пресловутые звездочки. Казалось бы, что сложного - можно самому нарисовать, но тут уже все проработано - анимация если надо, дробные значения оценки и дизайн конечно на высоте. Естественно, все компоненты глубоко кастомизируемы, можно вместо звездочек указать свой значок, например ракеты!

Еще куча компонентов: кнопки, переключатели, таблицы, меню, диалоги, списки, аватары, подсказки... Море компонентов! Дополнительно можно использовать их библиотеку иконок - 1700 штук. Пользоваться этим очень приятно при разработке и результат получается замечательным с минимальными затратами. Интерфейс будет работать как надо на разных платформах (Edge > 85, Firefox > 78, Chrome > 84, Safari > 13, IE 11).

Никто, конечно, не заставляет пользоваться MUI. Можно взять альтернативные варианты, либо только сетки, контейнеры, отступы, темы, а все остальное задизайнить своими силами. Тут уж как фантазия сработает.