В 2014 году Google анонсировали Material Design и установили его стандартом для всех своих продуктов. Он используется как в Web так и в мобильных Android приложениях, которые выпускает компания.
Многие, кто занимается web разработкой, и желает идти в ногу со временем, стали использовать Material Design в своей работе. В этой статье я рассмотрю несколько самых популярных Material Design CSS фреймворков и некоторые их фичи, которые помогут вам выбрать лучший и использовать его в своих проектах.
Materialize
Materialize наверное самый популярный Material Design фреймворк. Его используют многие команды разработчиков и создают множество различных тем для сайтов. Это позволяет быстро и легко начать использовать Material Design в своих проектах не особо заморачиваясь.
- Ссылка: materializecss.com
- Релиз: 2014
- Версия: 0.100.1
- Популярность: 27,000 звёзд и 3,900 фокров на GitHub
- Концепт/принципы: Адаптивный веб дизайн и UX
- Вес: 931 KB (download)
- Препроцессоры: Sass
- Адаптивность: Да
- Модульность: Да
- Наличие стартового шаблона: Да
- Иконки: Material Design Icons
- Типография: Roboto
- Документация: Хорошая
- Поддержка браузерами: Firefox 31+, Chrome 35+, Safari 7+, IE 10+
- Лицензия: MIT
MUI
MUI тоже довольно популярный фреймворк. Несмотря на единоличную разработку и поддержку, он обеспечивает поддержку Angular, React и WebComponents из коробки. Очень подробная документация так же заслуживает отдельной похвалы.
- Ссылка: muicss.com
- Релиз: 2015
- Версия: 0.9.20
- Популярность: 3,400 звёзд and 370 фокров на GitHub
- Концепт/принципы: поддержка кроссплатформенности
- Вес: 461 KB (download) / 6.7 KB (NPM package, minified)
- Препроцессоры: Sass
- Адаптивность: Да
- Модульность: Да
- Наличие стартового шаблона: Да
- Иконки: Нет
- Типография: Arial, Verdana, Tahoma
- Документация: Очень хорошая
- Поддержка браузерами: Firefox, Chrome, Safari, IE 10+
- Лицензия: MIT
Surface
Surface это очень легковесный и минималистичный CSS фреймворк ориентированный на Material Design. У него довольно слабая документация, однако её вполне достаточно для знакомства с фреймворком и работы с ним. Фреймворк создавался для быстрого прототипирования и тестирования новых проектов.
- Ссылка: mildrenben.github.io
- Релиз: 2015
- Версия: 1.01
- Популярность: 130 звёзд и 40 форков на GitHub
- Концепт/принципы: Минимализм
- Вес: 195 KB (download)
- Препроцессоры: Sass
- Адаптивность: Да
- Модульность: Да
- Наличие стартового шаблона: Нет
- Иконки: Нет
- Типография: Roboto, sans-serif
- Документация: Удовлетворительная
- Поддержка браузерами: Firefox, Chrome, Opera, Safari 6.1+, IE 10+
- Лицензия: MIT
Material Foundation
Уже набрались опыта с Foundation Framework от Zurb? Тогда Material Foundation создан специально для вас! Однако есть и плохие новости: развитие фреймворка кажется очень медленным, новые версии выходят достаточно редко, можно сказать, что не выходят вовсе. Пользователей тоже не так уж и много. Очень надеемся что кто-то возобновит развитие фреймворка.
- Ссылка: eucalyptuss.github.io
- Релиз: 2014
- Версия: 6.4.1
- Популярность: 329 звёзд и 69 форков на GitHub
- Концепт/принципы: основан на Zurb Foundation
- Вес: 218 KB (download)
- Препроцессоры: Sass
- Адаптивность: Да
- Модульность: Да
- Наличие стартового шаблона: Нет
- Иконки: Material Design Iconic Font
- Типография: Нет, подключаемая
- Документация: Не полная
- Поддержка браузерами: Firefox, Chrome, Opera, Safari 6.1+, IE 10+
- Лицензия: MIT
Material Design Lite
Material Design Lite был создан инженерами из Google, следовательно вы можете ожидать строгое следование принципам Material Design. Но, не смотря на высокую популярность фреймворка, поддержка весьма ограниченна так как развитие ушло к «Material Components for the Web».
- Ссылка: getmdl.io
- Релиз: 2014
- Версия: 1.3.0
- Популярность: 28000 звёзд и 4800 форков на GitHub
- Концепт/принципы: поддержка кроссплатформенности
- Вес: 205 KB (download) / 62 KB (NPM package, minified)
- Препроцессоры: Sass
- Адаптивность: Да
- Модульность: Да
- Наличие стартового шаблона: Да
- Иконки: Material icons
- Типография: Roboto
- Документация: Очень хорошая
- Поддержка браузерами: Firefox, Chrome, Opera, Safari, IE 10+
- Лицензия: Apache License 2.0
Material Components for the Web
Material Components for the Web является приемником фреймворка «Material Design Lite» и активно поддерживается инженерами и дизайнерами Google. Его основными принципами являются: модульность, следование Material Design и отличную интеграцию с другими javascript фреймворками и библиотеками.
- Ссылка: material.io
- Релиз: 2014
- Версия: 0.13.0
- Популярность: 5400 звёзд и 540 форков на GitHub
- Концепт/принципы: Модульность и интеграция с JS фреймворками и библиотеками
- Вес: 117 KB (NPM package, minified)
- Препроцессоры: Sass
- Адаптивность: Да
- Модульность: Да
- Наличие стартового шаблона: Нет
- Иконки: Material icons
- Типография: Roboto
- Документация: Очень хорошая
- Поддержка браузерами: Firefox, Chrome, Safari, IE 11/Edge
- Лицензия: Apache License 2.0
Material-UI
Это не совсем CSS фреймворк, Material-UI использует интересный подход и имплементацию Material Design используя React компоненты. Разработан call-em-all, которые используют его в своих проектах. Фреймворк набрал тысячи звёзд на GitHub.
- Ссылка: material-ui.com
- Релиз: 2014
- Версия: 0.18.7
- Популярность: 27600 звёзд и 4900 форков на GitHub
- Концепт/принципы: поддержка кроссплатформенности
- Вес: 429 KB (NPM package, minified)
Препроцессоры: Less
- Адаптивность: Да
- Модульность: Да
- Наличие стартового шаблона: Да
- Иконки: Нет
- Типография: Roboto
- Документация: Хорошая
- Поддержка браузерами: Firefox, Chrome, Safari
- Лицензия: MIT
Заключение
Практически невозможно определить победителя среди всех Material Design фреймворков. И разработчики могут сами выбирать те, которых больше остальных подходят под их требования. Это сравнимо с операционными системами — нет правильного или не правильного выбора, вы просто используете то, что удобнее, то, к чему привыкли.
Как бы то ни было, выбирая CSS фреймворк, вы должны учитывать следующее:
- Сообщество: как много людей пользуются фреймворком? Большая пользовательская база значит не только то, что он хорошо протестирован, но и так же наличие поддержки пользователями в виде готовых шаблонов.
- Разработчики: кто является разработчиком — компания или сообщество индивидуальных программистов? Частные дополнения кода, в том числе и исправление багов и принятые pull request’ы, важно чтобы были, заинтересованные в развитии проекта, стороны.
- Развитие: Как часто выходят новые версии? Некоторые фреймворки обновляются постоянно, в то время как другие предпочитают идти более медленным темпом, в ногу с устоявшимися технологиями. Если вы хотите создавать прототипы и тестировать новые фичи, вероятнее всего вы выберете первое.
- Документация: на сколько чиста и подробна официальная документация? Хорошая документация сильно помогает в использовании, особенно если это ваше первое знакомство с фреймворком. Готовые примеры позволяют разрабатывать очень быстро и не останавливаться на мелких загвоздках.
- Обучаемость: Есть ли какие-то условия для использования? Если вам нужно быстро выпустить приложение в продакшн и нет времени экспериментировать с технологиями, с которыми вы ранее не работали, то вам лучше выбрать фреймворк, который не требует изучения нового синтаксиса и технологий для использования.
В качестве вывода можно сказать следующее: при выборе фреймворка или технологии руководствуйтесь вашими личным (или командным) опытом, предпочтениями и навыками, выбирайте тот, который больше всего подходит именно вам.
comments powered by HyperComments