Сравнение 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


Ссылки: 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.
Я считаю, что рационально использовать ее будет в случае, если вы такой же консерватор, как и я у вас весь сайт написан с использованием Bootstrap и вы не хотите использовать по 10 CSS библиотек в одном проекте или хотите немного сократить время загрузки сайта.

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

Ну, и что?
Реклама
Комментарии 10
  • +2
    Materialize в зипе — 63кб, распакованный — 315кб, из которых 174кб жаваскрипта
    • +2
      Есть мнение, что материал дизайн в вебе практически не применим ¯\_(ツ)_/¯

      За все время он так и не заходит в массы. Крупные сервисы, которым нужна стандартизация всего, редко включают его в свои стайлгайды. Мелкие продукты, где нужно решение по-быстрому и MVP, тоже используют редко. Вот несколько неплохих аргументов против материал дизайна medium.com/techtrument/bye-bye-material-design-acaebcc7c6b4

      CSS фреймворков много и если выбрать любой не material, работать будет проще.

      А вот только для мобильных экранов материал дизайн неплох. Прототип делается мгновенно, дизайн сразу получается как минимум удовлетворительным, а то и вовсе сразу неплохим. Да, shade porn, но на мобильном даже с привлечением дизайнера не всегда удастся сделать лучше.
      • 0
        а есть что-то кроме бутстрапа, с большим количеством элементов? Раньше был semantic-ui, но он, судя по всему, скорее мертв чем жив
        • 0
          Откуда такое настроение насчёт семантика? Последний релиз был несколько часов назад.
          • 0
            Да как то новых обещанных элементов нет уже год, в основном только багфиксы. Да и похоже сейчас разработка начинается опять, я основывался на информации, что между 2.2.13 и 2.2.14 прошло почти полгода :)
        • 0
          Да, согласен, в основном сабж моей статьи имеет смысл только для мобильных сайтов и приложений, но пару раз встречал несколько интересных сайтов сделанных с применением MD, так что он не так уж и мертв для Web'a
        • +1

          Где MDBootstrap? Где MDC Web? Где Bootswatch? Какой-то крайне поверхностный обзор.

          • 0
            Так имеет Material Design Lite сетку или нет? В описании — нет, в итогах пишете все имеют сетку.
          • 0

            А почему нет Angular Material?

            Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

            Самое читаемое