Material css framework: Documentation — Materialize

Material Design. CSS фреймворк Materialize

В предлагаемом цикле уроков будет изучаться фреймворк Materialize, реализующий материальный дизайн. Давайте скажем несколько слов о том, что же такое Material Design.

Материальный дизайн впервые был представлен летом 2014 года компанией Google, и с тех пор является неразрывно связанным с этой компанией понятием. Материальный дизайн – это графический язык и стиль в дизайне, созданный командой разработчиков Google, чтобы помочь дизайнерам создавать сайты и приложения, которые будут доступными, практичными и полезными. Концепция основана на живой документации, которая находится в общем доступе на официальном сайте и может быть использована любым пользователем, интересующимся концепцией материального дизайна.

Material Design является продолжение плоского дизайна (Flat Design) и стоит на рубеже двух концепций: плоского дизайна и скевоморфизма. Он воплощает многие элементы плоского дизайна — минимализм, геометрию, модули и яркие цвета.

В то же время он близок к скевоморфизму благодаря использованию трехмерного пространства и теней.

Фреймворк Materialize является одним из наиболее популярных фреймворков, реализующих концепции материального дизайна, но также эти концепции реализованы и в ряде других фреймворков, таких как: Material Design Lite, MUI, Surface, Bootstrap Material Theme и т.д.

Все уроки курса:

Урок 1. Material Design. CSS фреймворк Materialize. Установка фреймворка

Урок 2. Material Design. CSS фреймворк Materialize. Сетка Materialize

Урок 3. Material Design. CSS фреймворк Materialize. Цвета и кнопки

Урок 4. Material Design. CSS фреймворк Materialize. Классы-помощники

Урок 5. Material Design. CSS фреймворк Materialize. Работа с медиа

Урок 6. Material Design. CSS фреймворк Materialize. Типографика

Урок 7. Material Design. CSS фреймворк Materialize. Таблицы и карточки

Урок 8. Material Design. CSS фреймворк Materialize. Компонент Navbar

Урок 9. Material Design. CSS фреймворк Materialize. Формы. Часть 1

Урок 10. Material Design. CSS фреймворк Materialize. Формы. Часть 2

Урок 11. Material Design. CSS фреймворк Materialize. Формы. Часть 3

Урок 12. Material Design. CSS фреймворк Materialize. Формы. Часть 4

Урок 13. Material Design. CSS фреймворк Materialize. Компонент Carousel

Урок 14. Material Design. CSS фреймворк Materialize. Компонент Collapsible (Accordion)

Урок 15. Material Design. CSS фреймворк Materialize. Компонент Dropdown

Урок 16. Material Design. CSS фреймворк Materialize. Компоненты Media и Slider

Урок 17. Material Design. CSS фреймворк Materialize. Модальные окна

Урок 18. Material Design. CSS фреймворк Materialize. Parallax в Materialize

Урок 19. Material Design. CSS фреймворк Materialize. Компонент Scrollspy

Урок 20. Material Design. CSS фреймворк Materialize. Компонент Sidenav

Урок 21. Material Design. CSS фреймворк Materialize. Компонент Tabs

Урок 22. Material Design. CSS фреймворк Materialize. Компонент Tooltips

Materialize: обзор, отзывы, аналоги, интеграция, сайт

Materialize – это фреймворк, который использует большое количество стилей, элементов, компонентов, анимации

Подробнее. ..

Категория: Разработка Метки: CSS, CSS фреймворки — подборка 2020, Разработка веб приложений

Описание

Materialize — это современная адаптивная CSS-платформа, основанная на Material Design от Google.

Особенности

Materialize

• С помощью темы Materialize вы сможете легко создать бизнес-сайт, сайт агентства, ресторана, консалтинговой фирмы, блог, портфолио, строительный сайт, одностраничник или интернет-магазин.
• Есть две доступные версии – Standard, включающий в себя уменьшенные и не уменьшенные файлы CSS и JS, и версия SASS, предоставляющая Вам полную свободу выбора компонентов, которые Вы хотите использовать.

 

Возможности

Materialize

•  Адаптивный дизайн (поддержка мобильных устройств)
•  Неограниченные цветовые настройки
•  Различные цветовые схемы
•  Использование иконок-шрифтов
•  Шрифты от Google
•  Гибкие настройки темы
•  Шорткоды
•  Создание портфолио
•  Таблица цен
•  Отзывы
•  Сотрудники
•  Список услуг
•  Создание раздела FAQ
•  Плагин слайдера Slider Revolution
•  Визуальный конструктор страниц — WPBakery
•  Поддержка мультиязычности с помощью плагина WPML
•  Поддержка форм обратной связи от плагина Contact Form 7
•  Поддержка RETINA
•  Интеграция с картами Google
•  Установка демо-данных в один клик
•  Наличие демо-данных
•  Документация и исходники

Аналоги и альтернативы для Materialize

Materialize — похожие решения и продукты

Ключевые Особенности: CSS-фреймворк

Bulma

Bulma — это бесплатный CSS-фреймворк с открытым исходным кодом, основанный на Flexbox и используемый более 200 000 разработчиков

Tailwind CSS

Tailwind CSS — это CSS-фреймворк утилит для быстрого создания пользовательских интерфейсов

Pure.

css

Pure CSS представляет собой набор модулей CSS, которые можно использовать в качестве основы для любого проекта

Foundation

Foundation — это библиотека (framework) для разработки сайтов с адаптивным (responsive) дизайном

Bootstrap

Bootstrap — это открытый и бесплатный HTML, CSS и JS фреймворк, который используется веб-разработчиками для быстрой вёрстки адаптивных дизайнов сайтов и веб-приложений

Блог, обзоры, новости

Posted inПодборки

CSS фреймворки

Фреймворки — это программные продукты, которые упрощают создание и поддержку технически сложных или нагруженных проектов. CSS играет большую роль в дизайне и удобстве использования веб-сайтов и предлагает надежную сеть фреймворков, в которую могут войти веб-разработчики. Если вы занимаетесь разработкой внешнего интерфейса и в поисках хорошего CSS-фреймворка, эта подборка будет вам полезна!

Посмотреть блог по теме: Materialize

MUI — Material Design CSS Helpers

Выравнивание

text-left

text-right

text-center

text-justify

text-nowrap

 
text-left
text-left