[Из песочницы] Мой Material Design Framework07.03.2017 16:03

image

Здравствуйте! Сегодня я решил рассказать о своем небольшом проекте, а именно о HTML фреймворке в стиле Material Design. Скачать его можно с GitHub: ссылка. Лучше всего он работает на браузерах Webkit. Теперь рассмотрим его поближе.

После подключения material.css и material.js к документу, нужно в заголовок добавить следующий скрипт: 

function main () {
    setTheme ("Blue");
    setAccentColor("Pink");
}

Этот код установит основной и дополнительный цвет документа. О том, что это такое, и какие цветовые схемы доступны, можно прочитать в официальном руководстве.

Теперь можно приступить к добавлению элементов на страницу. В библиотеке представлены основные элементы, описываемые концепцией Material Design, вот они:

  • Материальные карточки:

    image

    Код: 

           
    
            
            
    Header
    
            
    Text
    
            
    
                
    CANCEL
    
                
    OK

  • Два вида кнопок: обычные и плоские:

    image
    image

    Код: 

           
    
            
    PRESS
    
        
    
       
    
            
    Flat button

    Оба типа кнопок поддерживают эффект волны. Если он работает некорректно, кго можно отключить, убрав класс ripple-effect.
  • Слайдеры:

    image

    Обратите внимание, что элементу div присваиваются недопустимые атрибуты value, min, max, step. Однако, при загрузке страницы автоматически будет создан элемент input, который получит эти атрибуты, и ошибки не будет.
  • Поля для ввода текста:

    image

    Код:

  • Радиокнопки флажки и переключатели:

    image

    Код:


Здесь представлена только часть элементов, остальные можно посмотреть в этом демонстрационном документе: ссылка. Если кого-нибудь заинтересует данный фреймворк, то напишу еще одну статью о других доступных элементах и дополнительном функционале библитоеки.

P.S. При написании фреймворка я использовал материалы с сайтов:

→ WebReference.ru
→ Современный учебник JavaScript
→ Material design Guidelines

Комментарии (5)

  • 7 марта 2017 в 15:55

    0

    ↑

    ↓

    Приятно выглядит. Можно добавить еще примеров готовых страниц? И ripple эффект выглядит как-то не очень в gif. Могу я предложить залить на github страницу тестовую и сюда ссылку?

  • 7 марта 2017 в 15:57

    0

    ↑

    ↓

    Какие преимущества в сравнении с Material Design Lite?

  • 7 марта 2017 в 16:01

    0

    ↑

    ↓

    Demo на гите не рабочее. не хватает Actions.js

    • 7 марта 2017 в 16:02

      0

      ↑

      ↓

      Уже хватает.

  • 7 марта 2017 в 16:02

    0

    ↑

    ↓

    Вы серьезно?

© Habrahabr.ru