Material css framework: Documentation — Materialize

Сравнение Material Design CSS фреймворков / Хабр

Доброго время суток. В статье рассказно о Material Design фреймворках для создания Web-страничек. Если вас интересует тема Material Design, также как и меня, то Добро пожаловать под кат, возможно, откроете для себя что-нибудь новое и интересное.

Вкратце расскажу что такое Material Design, когда появился и где используется.

Material Design — Визуальный язык, представлен в 2014 году Google, используется чаще всего в мобильных приложения. Пример использования Material Design’a можно увидеть во многих мобильных приложения Google(Play, Music, Books и т.д.), а также в Chrome OS.
Если хотите разузнать больше, то советую посетить сайт Material.io — там можно узнать все гораздо более подробно, чем в этом посте. Перейдем непосредственно к теме поста — к фреймворкам.

Ссылки:Materialize и Github

И первым в моем списке станет Materialize, который сюда попал благодаря интересным функциям.
Первый коммит датирован 2014 годом, собственно в тот же год, когда и был презентован Material Design на конференции Google.

Из приятного можно отметить, что недавно вышла Alpha 1.0, которая привнесла независимость от сторонних JS библиотек, таких как JQuery и Hummer.js
Как я и говорил в начале, в Materialize несколько интересных фишек, который отличают его от других, а именно эффект Параллакса, Scrollspy и Scrollfire(появление элементов по мере прокрутки страница).

Размер: ~194kb

Ссылки: Material Design Lite и Github

Официальный фреймворк от Google для Web’a.

В отличии от Materialize, Material Design Lite не зависит от других JS фреймворков, что делает его немного легче.

Слово Lite стоит в названии не зря — этот фреймворк предлагает только основные компоненты Material Design’a, здесь нету Carousel, сетки, эффекта Параллакса и т.д.
Из плюсов можно отметить, что есть поддержка разных цветовых тем.
На сайте есть конструктор тем, где вы можете создать свою цветовую тему.

Размер: ~27 kb

Ссылки: MUI и Github

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

Большой вес фреймворка компенсируется поддержкой React.js версии 16, Angular.js и наличием модуля для верстки почтовых писем.
Письма сверстанные с использованием этого фреймворка поддерживаются многими популярными платформами для работы с e-mail ящиками, например GMail, Microsoft Outlook, Apple Mail и т.д., а если письмо оформлено красиво и, в первую очередь, приятно для чтения, то с помощью обычной рассылки вы сможете заинтересовать человека вашим продуктом или чем-либо другим.

Размер: ~61kb

Ссылка: Surface и Github

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

Кстати, интересно еще то, что фреймворк написан всего за 2 недели.
Не смотря на все эти факты, он обладает всеми основными элементами Material Design’a.
Но к сожалению, нету поддержки Bower и NPM.

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

Размер: ~5.7kb

Ссылки: Bootstrap Material Design и Github

Как следует из названия, это не отдельный фреймворк, а просто тема для Bootstrap.

По сколько это тема для Bootstrap’a, то здесь есть все фишки из Bootstrap’a и все элементы из Material Design, есть даже встроенные значки в стиле Material.

Размер: ~648kb

Отдельно хочется отметить, что все вышеперечисленные библиотеки имеют поддержку сетки с 12-тью колонками.

Если вам нужен простой, как топор, или просто легковесный фреймворк, то вашим выбором скорей всего станет Surface или Material Design Lite. Если вам нужно полностью готовое решение, где будут и различные слайдеры и, например эффект Параллакса, то скорее всего вы остановитесь на Materialize. Если же вы делаете более сложный проект, где будет использоваться MVC, и вам необходима поддержка React.js или Angular.js, то вам стоит посмотреть на MUI.
Отдельного внимания, по моему мнению, отдельного внимания заслуживает тема для Bootstrap.
Я считаю, что рационально использовать ее будет в случае, если

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

Если у вас возникли претензии к тексту, то я приветствую любые вопросы и любого вида дискуссии в комментариях, постараюсь на все ответить. Благодарю за прочтение статьи, надеюсь она вам хоть как-нибудь, но поможет с подбором нужного вам фреймворка.

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

MUI — Material Design CSS Helpers

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

text-left

text-right

text-center

text-justify

text-nowrap

 
 текст слева
текст-справа
текстовый центр
выравнивание текста
текст-теперь
 

Посмотреть в новой вкладке »

align-top

выравнивание по середине

выравнивание по нижнему краю

 <таблица>
  
    выравнивание по верхнему краю
    выравнивание по середине
    выравнивание по нижнему краю
  

 

Посмотреть в новой вкладке »

Анимация

Отключить анимацию перехода с помощью класса . mui--no-transition :

 

  <промежуток> 

 

Помощники по размерам Appbar

Вертикально центрированные

 
<дел>



<дел>



Вертикально по центру
 

Посмотреть в новой вкладке »

Каретка

 

  <промежуток> 
  <промежуток> 
  <промежуток> 
  <промежуток> 

 

Посмотреть в новой вкладке »

Помощники глубины

z5

z4

z3

z2

z1

 
z5


z4


z3


z2


<дел>z1
 

Посмотреть в новой вкладке »

Плавающие помощники

тянуть влево правая тяга

правая тяга тянуть влево

 <дел>
  тянуть влево
  потянуть вправо
  <дел>