Доброго время суток. В статье рассказно о Material Design фреймворках для создания Web-страничек. Если вас интересует тема Material Design, также как и меня, то Добро пожаловать под кат, возможно, откроете для себя что-нибудь новое и интересное.
Вкратце расскажу что такое Material Design, когда появился и где используется.
Material Design — Визуальный язык, представлен в 2014 году Google, используется чаще всего в мобильных приложения. Пример использования Material Design'a можно увидеть во многих мобильных приложения Google(Play, Music, Books и т.д.), а также в Chrome OS.
Если хотите разузнать больше, то советую посетить сайт Material.io — там можно узнать все гораздо более подробно, чем в этом посте. Перейдем непосредственно к теме поста — к фреймворкам.
Materialize
Ссылки: Materialize и Github
И первым в моем списке станет Materialize, который сюда попал благодаря интересным функциям.
Первый коммит датирован 2014 годом, собственно в тот же год, когда и был презентован Material Design на конференции Google.
Из приятного можно отметить, что недавно вышла Alpha 1.0, которая привнесла независимость от сторонних JS библиотек, таких как JQuery и Hummer.js
Как я и говорил в начале, в Materialize несколько интересных фишек, который отличают его от других, а именно эффект Параллакса, Scrollspy и Scrollfire(появление элементов по мере прокрутки страница).
Размер: ~194kb
Material Design Lite
Ссылки: Material Design Lite и Github
Официальный фреймворк от Google для Web'a.
В отличии от Materialize, Material Design Lite не зависит от других JS фреймворков, что делает его немного легче.
Слово Lite стоит в названии не зря — этот фреймворк предлагает только основные компоненты Material Design'a, здесь нету Carousel, сетки, эффекта Параллакса и т.д.
Из плюсов можно отметить, что есть поддержка разных цветовых тем.
На сайте есть конструктор тем, где вы можете создать свою цветовую тему.
Размер: ~27 kb
MUI
Ссылки: MUI и Github
Позиционируется как легкий фреймворк, тем не менее в нем используется Angular и React, что явно не делает его легче, я бы сказал, что он тяжелее всех, не считая темы для Bootstrap речь о которой пойдет позже.
Большой вес фреймворка компенсируется поддержкой React.js версии 16, Angular.js и наличием модуля для верстки почтовых писем.
Письма сверстанные с использованием этого фреймворка поддерживаются многими популярными платформами для работы с e-mail ящиками, например GMail, Microsoft Outlook, Apple Mail и т.д., а если письмо оформлено красиво и, в первую очередь, приятно для чтения, то с помощью обычной рассылки вы сможете заинтересовать человека вашим продуктом или чем-либо другим.
Размер: ~61kb
Surface
Ссылка: Surface и Github
Фреймворк написан на чистом CSS без использования Javascript, именно этот факт делает его самым легким из всех перечисленных. Кстати, интересно еще то, что фреймворк написан всего за 2 недели.
Не смотря на все эти факты, он обладает всеми основными элементами Material Design'a.
Но к сожалению, нету поддержки Bower и NPM.
Хотелось бы отдельно отметить, что автор фреймворка просит отправлять пожертвования, направленные для него, в Фонд исследования раковых болезней в Великобритании.
Размер: ~5.7kb
Bootstrap Material Theme
Ссылки: 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.
Я считаю, что рационально использовать ее будет в случае, если
Если у вас возникли претензии к тексту, то я приветствую любые вопросы и любого вида дискуссии в комментариях, постараюсь на все ответить. Благодарю за прочтение статьи, надеюсь она вам хоть как-нибудь, но поможет с подбором нужного вам фреймворка.
