Кратки увод у Дизајн материјала користећи Материализе

Шта је дизајн материјала?

Материјални дизајн је језик дизајна који је креирао Гоогле. Према материал.ио, Материал Десигн има за циљ да комбинује:

… Класични принципи доброг дизајна са иновацијама и могућностима технологије и науке. Циљ му је развити јединствени основни систем који омогућава јединствено искуство на различитим платформама и величинама уређаја. Мобилни прописи су основни, али додир, глас, миш и тастатура су сви начини уноса прве класе.

Зашто користити Материал Десигн?

Материал Десигн пружа беспрекорно корисничко искуство на свим уређајима. Одзивни прелази и анимација, заједно са ефектима облоге и дубине, попут сенки и муње, чине га елегантним и једноставним за употребу. Гоогле користи Материјални дизајн у готово свим својим апликацијама (као што су Кееп и Цалендар).

Како можете да користите дизајн материјала у својим веб апликацијама?

Материализе је прилагодљива библиотека компонената предњег дела, слична Боотстрапу. Нуди све што нуди Боотстрап, али разлика је у томе што Материализе следи принципе дизајна материјала. Ево примера шаблона.

Ево листе функција које Материализе нуди:

  • Грид
  • Столови
  • Значке, дугмад, презле
  • Карте, чипс, колекције
  • Подножје, обрасци
  • Навбар
  • И још много више!

Како започети

За разлику од Боотстрапа, за Материализе није потребан поппер.јс. Потребан је само јКуери. Ово је све што вам треба за почетак. Додајте ово у свој ХТМЛ и бићете спремни!

Боје

Коришћењем Материализе можете да промените боју било ког ХТМЛ елемента једноставним давањем назива класе жељене боје. На пример, ако желите да ознака вашег пасуса добије црвену боју, урадите следеће:

Lorem Ipsum

Поред тога, боју такође можете осветлити или затамнити додавањем другог назива класе lighten-1или darken-1. На пример,

Sample Texт

. 1 се може заменити бројевима до 5 за осветљење и до 4 за затамњење. Већи бројеви би применили светлије или тамније нијансе боје.

Дугмад

Да бисте материјализирали дугме, само му додајте назив класе btn. Можете му додати и хладну анимацију тако што ћете јој предати још један час waves-effect. Ако вам треба веће дугме, btn-largeможе се користити час. На пример:

 Click    Click    Click  

Сенка

У дизајну материјала, све треба да има одређену з-дубину која одређује колико је елемент подигнут или близу странице.

За примену ефекта сенке на елемент z-depth-2може се користити класа (2 се може заменити бројевима 1–5). На пример:

Закључак

Овде сам само огребао површину. Много је више доступно у Материализе (попут прелаза, карата, карусела и модалитета). Из докумената можете научити како се користе све компоненте. Имена класа су врло једноставна, а мрежа је од велике помоћи за брзо стварање брзих колона. Желим вам пуно среће!