Мой Material Design Framework

image

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

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

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

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

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

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

    image

    Код:

           <div class="mcard" style="position: absolute; width:300px;top:200px;">
                <image style="max-width: 100%; position: relative;">
                <h2>Header</h2>
                <p>Text</p>
                <div class="buttons-container">
                    <div class="flatbutton"><p>CANCEL</p></div>
                    <div class="flatbutton"><p>OK</p></div>
                </div>
            </div>
           

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

    image
    image

    Код:

           <div class="button ripple-effect">
                <p>PRESS</p>
            </div>
           <div class="flatbutton ripple-effect" >
                <p>Flat button</p>
            </div>
           

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

  • Слайдеры:

    image

           <div class="slider" value="50" min="0" max="100" step="1"></div>
           

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

  • Поля для ввода текста:

    image

    Код:

           <div class ="mtextfield" label="Enter your text here"></div>
           

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

    image

    Код:

           <input class="checkbox" type="checkbox" id="raz" ><label for="raz">Check me</label>
           <input class="checkbox" type="checkbox" id="raz2" ><label for="raz2">Check me</label>
                
           <input class="radio" type="radio" name="raz" id="raz3" value="1" checked="" /><label for="raz3">Switch me1</label>
           <input class="radio" type="radio" name="raz" id="raz4" value="2" /><label for="raz4">Switch me2</label>
           <input class="switch" type="checkbox"  id="switch1" value="2"/><label for="switch1">Switch me 3</label>
           <input class="switch" type="checkbox"  id="switch2" value="2"/><label for="switch2">Switch me 4</label>
           


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

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

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

Similar posts

AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 46

    0

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

      +6

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

        0
        Demo на гите не рабочее. не хватает Actions.js
          +1
          Уже хватает.
          +1
           <div class="mcard" style="position: absolute; width:300px;top:200px;">
                      <image style="max-width: 100%; position: relative;">
          

          Вы серьезно?
            +3
            Вероятно, автор подразумевает, что размеры должны быть заданы где-то вовне (отдельный класс), style чисто как пример.
              –1
              Вредный пример.
                0
                Пример некрасивый, но обладает тем плюсом, что не плодит лишние для данного контекста сущности.
                Размеры в зависимости от ситуации можно указать в стороннем CSS, можно задать через jQuery, можно родить их где-то внутри React-а… вариантов сотня.
                  –2
                  1. css можно переопределить
                  2. это указывает на отсуствие сетки и автоподгонки ширин под разные экраны
                  3. вторая строчка — тут совсем очевидно что нужно вытащить в css
                  4. это больше похоже на тяп-ляп, а не на фреймворк
            • UFO just landed and posted this here
              +1

              MD нужен только для приложений. Но приложения обычно строятся на модульной системе, а тут просто куча тупо вкинута в глобальный скоуп. Плюс элементы обычно создаются на лету, а тут чтобы виджеты ожили надо вручную вызывать всякие функции, да еще неизвестно, как это сработает с уже живыми виджетами. Тема задается css-переменными, работать будет очень не везде, но при этом используется устаревший JS.


              А так, конечно, выглядит неплохо, да и вес небольшой, это плюсы.

                0
                Я и задумывал его для использования вместе с JavaFX для создания графического интерфейса приложений, но подвели меня именно css-переменные (встроенный в JavaFX webkit их не воспринимает).
                  0
                  CSS-переменные? Это что-то типа LESS-миксинов? А переписать по быстрому чтобы можно было компилировать и уже компилированные скины в CSS?
                    0

                    Если быть точным, то custom properties. Вообще они мощнее препроцессорных переменных в виду своей динамичности. Вот пост, где их сравнивают.
                    Вообще поддержка в браузерах уже приличная, но нет в ie и в edge только на подходе.
                    Как аналог миксинов будет @apply, сейчас с поддержкой совсем плохо.
                    Обе фичи можно полифилить с помощью postcss-cssnext, но с ограничениями и они так же будут статическим, как и препроцессорные переменные.

                +1
                — переходи по максимум на css анимацию
                — css замени на scss
                — это не фреймворк

                что там насчет поддержки для IE,Firefox,Opera,Chrome,Safari?
                Какие минимальный версии браузеров для адекватной работы?
                  0
                  — переходи по максимум на css анимацию

                  К сожалению я так и не смог сделать анимацию волны на css. Если можете помочь, буду благодарен.

                  что там насчет поддержки

                  В Опере все работает нормально, в Firefox не работает волна и имеются небольшие проблемы с позиционированием отдельных элементов.
                    0
                    просто из-за ненужного использования js — анимации не гладкие

                    про js — используй ES6 или TypeScript с компиляцие в js (в них можно красиво создавать классы и модули и т.д., сможешь обернуть все, что получилось в одну библиотеку)

                    про css — используй after/before, иногда полезно)

                    про «разделяй и властвуй» — в файле html должен быть ТОЛЬКО каркас, в CSS — стили, в JS — логика. эти три кита должны быть более-мененее самостоятельными.
                    убери из HTML все кроме каркаса, классов, id и те элементы которые удовлетворяет W3C

                    для использования собственный атрибутов используй параметры «data»
                    пример:
                    <div data-name="vasya"></div>
                    
                      0
                      «data» (пример: )

                      Тут наверное должен располагаться код, но его не видно.
                        0
                        просто из-за ненужного использования js — анимации не гладкие
                        на самом деле, js-анимации эффективно «выпрямляются» через raf.
                        0
                        По поводу анимации волны на CSS. Печально что приходится использовать JS для визуального эффекта. Могу предложить CSS only решение, которое использовал в одном проекте (разница лишь в том, что волна всегда будет начинаться в центре кнопки:

                        // Cначала задаете стили для "волны" и скрываете ее через transform
                        
                        .btn:before {
                            ...
                            transform: scale(0,1);
                        }
                        
                        // Имитируте клик по кнопке и добавляете необходимую анимацию
                        
                        .btn:focus:not(:active):before {
                            animation: wave-animation ...;
                        }
                        
                        // Анимация
                        
                        @keyframes wave-animation {
                            0% {
                                opacity: 0;
                                transform: scale(0,1);
                            }
                            50% {
                                opacity: 1;
                                transform: scale(.5,1);
                            }
                            100% {
                                opacity: 0;
                                transform: scale(1,1);
                            }
                        }
                        


                        http://codepen.io/Deka87/pen/zNJyqg.
                      0
                      А почему слайдер div, а не input?
                        0
                        Я же написал, input создается автоматически. Посмотрите код страницы после загрузки.
                          0
                          Ну я и спрашиваю — зачем div в input переводить, вместо простого инпута
                            0
                            Потому что у стандартного input отсутствует заполнитель и индикатор значения, а сделать их нельзя, поскольку псевдоэлементы after и before у input тоже отсутствуют.
                              0
                              Делаете инпут. Потом оборачиваете его во что хотите, заменяете на див или еще чего.
                              Но так у вас остается деградированная но логика. И даже дело не в браузерах с отключенным ЖС, понять что инпут это инпут может и робот какой, или… браузер. Зачеркнутые замочки видели? Браузер по какому-то алгоритму их определяет…
                              Есть общепринятые нормы — кастомные инпуты выглядят как стандартные, а уже потом компонента ее переделывает как ей нужно. Самый жесткий пример — посмотрите любой редактор, ТиниМЦЕ к примеру. У нас текстареа который уже заменяют на див и т.п.
                                +1

                                Надо использовать label с аттрибутом for, у него есть псевдоселекторы, а сам инпут использовать как модель и хайдить display: none

                                  0
                                  Собственно, так у меня и работают флажки и радиокнопки. Проблема в том, что слайдеры бывают без подписи (например регулятор громкости в плеере), и тогда придется создавать пустую подпись к нему «чтобы работало»
                                    0
                                    Именно, а еще можно по стариночке: input[type=hidden] в связке с установкой tabindex на обертке для обработки фокуса. Не забыть только -1 выставить на соседних контроллах рядом с этим инпутом внутри этой обертки, если они присутствуют.
                                    0
                                    а сделать их нельзя

                                    "заполнитель" можно сделать с box-shadow.
                                    А в целом, рекомендую автору копать в сторону веб-компонентов.

                                      0
                                      Тогда автор откопает Polymer и осознает всю тщетность бытия. :)
                              +1
                                      <div class="flatbutton ripple-effect" style="position: relative; top:140px;left:20px;" onclick="showDialog(document.getElementById('dialog1'))">
                                          <p>Flat button</p>
                                      </div>
                              


                              вспоминается про то, что каждый начинающий программист обязан сделать велосипед, но с квадратными колесами…
                                +3
                                Какие ужасы. Классы без специфичных префиксов, то есть с такой фигней только мини-лендинг на коленке набросать можно и больше никогда к нему не прикосаться. Отсутствие каких-либо стайлгайдов даже на базовом уровне, то есть просто от балды выбраны названия классов и структура блоков, а сверху еще инлайн стили, лолчто?

                                onclick="showDialog(document.getElementById('dialog1'))"
                                

                                За такое вообще на районе убивают без разговоров.

                                Вначале на главную проникла статья про Qiwi с nodejs 0.12 и адовой лапшой в коде, теперь вот это, что вообще происходит с хабром?
                                  +1
                                  Так плюсики ставят вот и проникают, спрашивать надо не с авторов, а с тех кто плюсы ставит.
                                    +1
                                    Понимаете, критика таким велосипедам pet-проектам необходима. А моральная поддержка — еще больше. Человек старался, сделал какой-никакой вклад — и это самое важное. Это лучще чем 100500-ый bullshit из buzzwords от компании, которой только попеариться.

                                    Может каждый из нас что-то может где-то лучше. Может лучше CSS, может лучше JS, может лучше архитектуру. Но у нас времени нет. Поэтому респект тем, кто тратит своё время на то, чтобы что-то сделать в открытом виде.
                                      0
                                      и в результате мы получаем главную хабр с проектами где люди выкладывают свои поделки сомнительного качества, не о заботя себя применением стандартные практики и рекомендации. Потом люди начинают это плюсовать только за то что человек же старался, а что там в итоге вылили и не важно. В итоге такое выходит на главной.
                                      И если вы не поняли в чем заключался мой комментарий, то я там не критикую автора, каждый в праве писать то что хочет и пусть это делает, я высказался о том что если люди ставят + такой статье, то с них и надо спрашивать, что они нашли такого что заставило поставить +.
                                        0
                                        Ну тут код кое-как. Человек старался и всё такое.
                                        На хабре иногда такой ад выкатывают из велосипедов, что ой и ой.
                                        А главная… что главная… Ну главная. Не нравится — листнул и пошел дальше.
                                  +2
                                  Тоже делал свой велосипед фреймворк для обычных статических сайтов, возможно автору стоит познакомиться с ним (исходники на github, есть сгенерированная страница с документацией) — в плане разбиения на компоненты и использования препроцессора — он может быть не сильно сложным примером для изучения (а то что-то тут критикуют, а примеров того, как можно сделать по-другому, не прикладывают). Велосипед создавался в образовательных целях и имеет внутри много странных решений и экспериментов (да и не все еще доделано, как в плане логики, так и в плане анимаций), так что это скорее не пример для подражания, а пример для того, чтобы посмотреть, понять логику и сделать лучше.
                                    +1

                                    Вау, шикарный и чистый код. Вот бы у всех так)

                                    0
                                    Может все таки взять Materialize CSS?
                                      0

                                      Ну или хотя бы посмотреть на десяток популярных и известных и уже использующихся нормальных фреймворков, вроде MDL, TWBS.Elemental. ant.design (отличная штука для реакта, используется в Алибаба :))
                                      и не велосипедить свои странные костыли, когда все давно придумано до нас...

                                      +3

                                      Поздравляем с велосипедом. Вы изобрели:



                                      А если серьезно, то почему бы и нет. Вы вложили много сил в эту работу, однако:


                                      • На сайте очень сильно хромает английский. (Отдайте редактору)
                                      • На сайте не хватает примеров, чтобы было тупо, на уровне копи паст. Смотрите здесь: http://materializecss.com/getting-started.html
                                      • Обязательно нужна кроссбраузерная поддержка
                                      • Разметка несколько грязная (но это уже сто десятое дело)

                                      Если вы эти правки сделаете, есть шанс что проект взлетит.

                                        0
                                        Так-то интересный и красивый фреймворк, но вот семантика сильно страдает, в частности кнопки.
                                          0
                                          А можно немного поподробнее про кнопки?
                                            0
                                            <div class="flatbutton ripple-effect" style="position: relative; top:140px;left:20px;" onclick="showDialog(document.getElementById('dialog1'))">
                                                        <p>Flat button</p>
                                                    </div>
                                            

                                            Думаю имеется в виду, что кнопки почему-то задаются при помощи контейнера с параграфом внутри, а не тэгом button.
                                          0

                                          <div class="slider" value="50" min="0" max="100" step="1"></div>
                                          

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

                                          Почему тогда не
                                          <div class="slider" data-value="50" data-min="0" data-max="100" data-step="1"></div>
                                          
                                            +1
                                            Мне кажется использование настолько не семантической разметки для контролов — в наше время моветон.

                                            Only users with full accounts can post comments. Log in, please.