ООО «ПРкениг»
236006 Калининград Московский проспект 40
8 (4012) 39 09 55
info@pr-kenig.ru,

Material Design for Bootstrap 4

Material Design for Bootstrap 4
Material Design for Bootstrap 4
Автор Дмитрий Грозный Дмитрий Грозный 28/06/2018

Рад снова Вас приветствовать, дорогие читатели блога «PR»!

В этой статье пойдет речь о самом популярном в мире фреймворке для создания адаптивных мобильных сайтов и приложений в стиле Material Design - MDBootstrap 4.

MDBootstrap 4 является надстройкой Bootstrap 4 и поэтому без него существовать не может. Более подробно о Bootstrap 4 можете ознакомится в статье нашего блога «Bootstrap 4 - идем в ногу со временем!».

И так, что такое Material Design? И что такое Material Design for Bootstrap 4? На эти вопросы, я постараюсь ответить ниже! Но в том, что это стильный язык визуальных образов web приложений и не только, можете не сомневаться! 

Material Design

Material design - это язык визуальных образов, который не так давно создала корпорация Google для унификации интерфейсов всех ее продуктов и сервисов. Википедия

Рис. 1. Основные компоненты Material Design

Material Design зиждется на четырех основных принципах:

  • Тактильные поверхности. В Material Design интерфейс складывается из осязаемых слоёв так называемой «цифровой бумаги». Эти слои расположены на разной высоте и отбрасывают тени друг на друга, что помогает пользователям лучше понимать анатомию интерфейса и принцип взаимодействия с ним.
  • Полиграфический дизайн. Если считать слои кусками «цифровой бумаги», то в том, что касается «цифровых чернил» (всего того, что изображается на «цифровой бумаге»), используется подход из традиционного графического дизайна: например, журнального и плакатного.
  • Осмысленная анимация. В реальном мире предметы не возникают из ниоткуда и не исчезают в никуда — такое бывает только в кино. Поэтому в Material Design мы всё время думаем о том, как с помощью анимации в слоях и в «цифровых чернилах» давать пользователям подсказки о работе интерфейса.
  • Адаптивный дизайн. Речь идет о том, как мы применяем предыдущие три концепции на разных устройствах с разными разрешениями и размерами экранов.

Как видите, Material Design для Вас оказался знаком и достаточно современным! Однако Material Design чаще встречается на смартфонах операционной системы Android, чем на страницах необъятного интернета. 

Не все компании, владельцы своих сайтов, могут позволить себе использовать более современные технологии в web индустрии. Время и бюджет на разработку данного стиля порой обходится дорого! Однако это было в прошлом!

Теперь, вместе с нами и компанией разработчиков Material Design for Bootstrap 4, данный продукт стал не просто доступнее! А еще и усовершенствован во много раз! 

Material Design for Bootstrap 4

Material Design for Bootstrap 4 имеет колоссальное количество утилитов, плагинов, компонентов, готовых шаблонов и прочих полезных инструментов! Убедитесь сами! 

Представляю Вам для ознакомления малую часть примеров:

  • Images with overlays
  • Images with patterns
  • Images within cards
  • Images within magazine section
  • Colors
  • Basic gradients
  • Additional buttons
  • Gradient buttons
  • Outline buttons
  • Paginations
  • Registration form
  • Accordion with gradient background

Images with overlays

Images with patterns

Images within cards

Images within magazine section

Colors

Basic gradients

Additional buttons

Gradient buttons

Outline buttons

Paginations

Registration form

Accordion with gradient background

Bootstrap charts

Более полный список примеров можете найти на официальном сайте https://mdbootstrap.com.

Поверьте мне, разработчики Material Design for Bootstrap 4 проделали колоссальную работу! 

Данный продукт условно бесплатный! Поэтому грех не воспользоваться и я написал специальное расширение для Yii2! Теперь Material Design for Bootstrap 4 доступен каждому! И легко встраивается в любой проект собранный на нашей платформe.

Yii2 bootstrap 4 MDbootstrap

Просмотров: 1324

Заказать проект

Наша команда профессионалов готова реализовать ваши проекты, заполните форму: