Персональный блог Игоря Антонова aka "spider_net"

Materialize. Material Design, упакованный в CSS


Рубрика: Программирование -> Обзоры -> html/css
Метки: | | | | | |
Просмотров: 16592
Materialize. Material Design, упакованный в CSS

Давненько уже не было возможности написать в блог. Чертова занятость переходит все допустимые границы. Вроде и находишься в постоянном движении, не тратишь время в пустую, а его все равно не хватает. Эх, почему в сутках всего 24 часа?

Ладно, хватит о грустном. Поговорим о более интересных вещах. В очередной раз, просматривая ленту новых проектов на GitHub, мне на глаза попался новенький CSS фреймворк под названием Material Design. Быть может я прошел бы мимо - новые фреймворки появляются как грибы после дождя. Уследить за ними тяжело (тем более протестировать). Обойти стороной Materialize мне не позволила «тысща» звезд, собранных за пару дней и намек на готовую реализацию свежего концепта дизайна от Google.

Прошлым летом на конференции Google i/o был представлен новый концепт единого дизайна компании Google. Многим он пришелся по душе и вызвал бурю эмоций. Мне он тоже понравился, но чего-то особенного лично я нем не увидел. Легкость, плоскость - только под другим соусом.

Windows Phone ввел моду на бездушные плитки, но их не все поняли. Apple в ios 7 красива ушла в сторону плоских элементов управления. Google решила не отставать от всех и выкатила свое видение "воздушного" интерфейса. Material Design - прекрасная демонстрация нового видения единства интерфейса. В целом концепт MD выглядит здорово (если не вдаваться в оригинальность) - никаких элементов в стиле "вырви глаз" и нагроможденности.

CSS фреймворк Materialize - попытка создать универсальный инструмент для быстрого прототипирования интерфейса WEB-приложений, следуя идеологии концепта Material Design. Если сказать совсем просто, то это специфичный Bootstrap.

Пока представлена только alfa версия, но уже сейчас там есть на что посмотреть.

  • Типографика. Оформление текста в соответствии с MD (стили для заголовков, абзацев);
  • Адаптивная сетка из 12 колонок;
  • Стилизация элементов управления (формы, кнопки, флажки и т.д.);
  • Карточки и блоки. Это основа концепции дизайна MD. Элемент задумывался в качестве удобного средства отображения контента, состоящего из разных типов объектов;
  • Подсказки, всплывающие окна, выпадающие списки, аккордеон, табы выполненные в стиле MD.
  • Пока плотно поковыряться с фреймворком Materialize мне не удалось, но примеры, представленные на сайте проекта, оставили приятные впечатления. Имена классов не перегружены и на мой вкус читаются лучше, чем у отца CSS-фреймворков Bootstrap.

    В общем, пищу для размышления я дал, а дальше сами. Попробуйте протестировать фреймворк самостоятельно. Вдруг понравится и найдете ему применение в одном из своих будущих проектов?

    Оставьте комментарий!
    comments powered by HyperComments