Здравствуйте! Сегодня я решил рассказать о своем небольшом проекте, а именно о HTML фреймворке в стиле Material Design. Скачать его можно с GitHub: ссылка. Лучше всего он работает на браузерах Webkit. Теперь рассмотрим его поближе.
После подключения material.css и material.js к документу, нужно в заголовок добавить следующий скрипт:
function main () {
setTheme ("Blue");
setAccentColor("Pink");
}
Этот код установит основной и дополнительный цвет документа. О том, что это такое, и какие цветовые схемы доступны, можно прочитать в официальном руководстве.
Теперь можно приступить к добавлению элементов на страницу. В библиотеке представлены основные элементы, описываемые концепцией Material Design, вот они:
- Материальные карточки:
Код:
<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>
- Два вида кнопок: обычные и плоские:
Код:
<div class="button ripple-effect"> <p>PRESS</p> </div> <div class="flatbutton ripple-effect" > <p>Flat button</p> </div>
Оба типа кнопок поддерживают эффект волны. Если он работает некорректно, кго можно отключить, убрав класс ripple-effect.
- Слайдеры:
<div class="slider" value="50" min="0" max="100" step="1"></div>
Обратите внимание, что элементу div присваиваются недопустимые атрибуты value, min, max, step. Однако, при загрузке страницы автоматически будет создан элемент input, который получит эти атрибуты, и ошибки не будет.
- Поля для ввода текста:
Код:
<div class ="mtextfield" label="Enter your text here"></div>
- Радиокнопки флажки и переключатели:
Код:
<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
Комментарии (46)
webmasterx
07.03.2017 16:02+1<div class="mcard" style="position: absolute; width:300px;top:200px;"> <image style="max-width: 100%; position: relative;">
Вы серьезно?
dom1n1k
07.03.2017 17:32+3Вероятно, автор подразумевает, что размеры должны быть заданы где-то вовне (отдельный класс), style чисто как пример.
Sufir
07.03.2017 21:47-1Вредный пример.
dom1n1k
07.03.2017 23:22Пример некрасивый, но обладает тем плюсом, что не плодит лишние для данного контекста сущности.
Размеры в зависимости от ситуации можно указать в стороннем CSS, можно задать через jQuery, можно родить их где-то внутри React-а… вариантов сотня.webmasterx
08.03.2017 04:14-21. css можно переопределить
2. это указывает на отсуствие сетки и автоподгонки ширин под разные экраны
3. вторая строчка — тут совсем очевидно что нужно вытащить в css
4. это больше похоже на тяп-ляп, а не на фреймворк
kirillaristov
07.03.2017 23:38А что не так? Картинка будет шириной не более ширины родительского блока, т.е. 300px в данном случае.
k12th
07.03.2017 16:13+1MD нужен только для приложений. Но приложения обычно строятся на модульной системе, а тут просто куча тупо вкинута в глобальный скоуп. Плюс элементы обычно создаются на лету, а тут чтобы виджеты ожили надо вручную вызывать всякие функции, да еще неизвестно, как это сработает с уже живыми виджетами. Тема задается css-переменными, работать будет очень не везде, но при этом используется устаревший JS.
А так, конечно, выглядит неплохо, да и вес небольшой, это плюсы.
Igorgro
07.03.2017 16:28Я и задумывал его для использования вместе с JavaFX для создания графического интерфейса приложений, но подвели меня именно css-переменные (встроенный в JavaFX webkit их не воспринимает).
Mendel
07.03.2017 17:18CSS-переменные? Это что-то типа LESS-миксинов? А переписать по быстрому чтобы можно было компилировать и уже компилированные скины в CSS?
Ashot
07.03.2017 23:17Если быть точным, то custom properties. Вообще они мощнее препроцессорных переменных в виду своей динамичности. Вот пост, где их сравнивают.
Вообще поддержка в браузерах уже приличная, но нет в ie и в edge только на подходе.
Как аналог миксинов будет@apply, сейчас с поддержкой совсем плохо.
Обе фичи можно полифилить с помощью postcss-cssnext, но с ограничениями и они так же будут статическим, как и препроцессорные переменные.
ruslan399
07.03.2017 16:38+1— переходи по максимум на css анимацию
— css замени на scss
— это не фреймворк
что там насчет поддержки для IE,Firefox,Opera,Chrome,Safari?
Какие минимальный версии браузеров для адекватной работы?Igorgro
07.03.2017 16:46— переходи по максимум на css анимацию
К сожалению я так и не смог сделать анимацию волны на css. Если можете помочь, буду благодарен.
что там насчет поддержки
В Опере все работает нормально, в Firefox не работает волна и имеются небольшие проблемы с позиционированием отдельных элементов.ruslan399
07.03.2017 16:59просто из-за ненужного использования js — анимации не гладкие
про js — используй ES6 или TypeScript с компиляцие в js (в них можно красиво создавать классы и модули и т.д., сможешь обернуть все, что получилось в одну библиотеку)
про css — используй after/before, иногда полезно)
про «разделяй и властвуй» — в файле html должен быть ТОЛЬКО каркас, в CSS — стили, в JS — логика. эти три кита должны быть более-мененее самостоятельными.
убери из HTML все кроме каркаса, классов, id и те элементы которые удовлетворяет W3C
для использования собственный атрибутов используй параметры «data»
пример:<div data-name="vasya"></div>
raveclassic
07.03.2017 21:59просто из-за ненужного использования js — анимации не гладкие
на самом деле, js-анимации эффективно «выпрямляются» через raf.
Deka87
08.03.2017 14:48По поводу анимации волны на 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.
kesn
07.03.2017 16:40А почему слайдер div, а не input?
Igorgro
07.03.2017 16:48Я же написал, input создается автоматически. Посмотрите код страницы после загрузки.
kesn
07.03.2017 17:46Ну я и спрашиваю — зачем div в input переводить, вместо простого инпута
Igorgro
07.03.2017 20:08Потому что у стандартного input отсутствует заполнитель и индикатор значения, а сделать их нельзя, поскольку псевдоэлементы after и before у input тоже отсутствуют.
Mendel
07.03.2017 23:44Делаете инпут. Потом оборачиваете его во что хотите, заменяете на див или еще чего.
Но так у вас остается деградированная но логика. И даже дело не в браузерах с отключенным ЖС, понять что инпут это инпут может и робот какой, или… браузер. Зачеркнутые замочки видели? Браузер по какому-то алгоритму их определяет…
Есть общепринятые нормы — кастомные инпуты выглядят как стандартные, а уже потом компонента ее переделывает как ей нужно. Самый жесткий пример — посмотрите любой редактор, ТиниМЦЕ к примеру. У нас текстареа который уже заменяют на див и т.п.
sdwvit
08.03.2017 00:26+1Надо использовать label с аттрибутом for, у него есть псевдоселекторы, а сам инпут использовать как модель и хайдить display: none
Igorgro
08.03.2017 00:29Собственно, так у меня и работают флажки и радиокнопки. Проблема в том, что слайдеры бывают без подписи (например регулятор громкости в плеере), и тогда придется создавать пустую подпись к нему «чтобы работало»
raveclassic
08.03.2017 00:46Именно, а еще можно по стариночке:
input[type=hidden]в связке с установкойtabindexна обертке для обработки фокуса. Не забыть только -1 выставить на соседних контроллах рядом с этим инпутом внутри этой обертки, если они присутствуют.
ruslan399
07.03.2017 16:45+1<div class="flatbutton ripple-effect" style="position: relative; top:140px;left:20px;" onclick="showDialog(document.getElementById('dialog1'))"> <p>Flat button</p> </div>
вспоминается про то, что каждый начинающий программист обязан сделать велосипед, но с квадратными колесами…
Ronnie_Gardocki
07.03.2017 17:30+3Какие ужасы. Классы без специфичных префиксов, то есть с такой фигней только мини-лендинг на коленке набросать можно и больше никогда к нему не прикосаться. Отсутствие каких-либо стайлгайдов даже на базовом уровне, то есть просто от балды выбраны названия классов и структура блоков, а сверху еще инлайн стили, лолчто?
onclick="showDialog(document.getElementById('dialog1'))"
За такое вообще на районе убивают без разговоров.
Вначале на главную проникла статья про Qiwi с nodejs 0.12 и адовой лапшой в коде, теперь вот это, что вообще происходит с хабром?
zxcabs
07.03.2017 17:54+1Так плюсики ставят вот и проникают, спрашивать надо не с авторов, а с тех кто плюсы ставит.
S_A
08.03.2017 14:54+1Понимаете, критика таким
велосипедамpet-проектам необходима. А моральная поддержка — еще больше. Человек старался, сделал какой-никакой вклад — и это самое важное. Это лучще чем 100500-ый bullshit из buzzwords от компании, которой только попеариться.
Может каждый из нас что-то может где-то лучше. Может лучше CSS, может лучше JS, может лучше архитектуру. Но у нас времени нет. Поэтому респект тем, кто тратит своё время на то, чтобы что-то сделать в открытом виде.zxcabs
08.03.2017 19:16и в результате мы получаем главную хабр с проектами где люди выкладывают свои поделки сомнительного качества, не о заботя себя применением стандартные практики и рекомендации. Потом люди начинают это плюсовать только за то что человек же старался, а что там в итоге вылили и не важно. В итоге такое выходит на главной.
И если вы не поняли в чем заключался мой комментарий, то я там не критикую автора, каждый в праве писать то что хочет и пусть это делает, я высказался о том что если люди ставят + такой статье, то с них и надо спрашивать, что они нашли такого что заставило поставить +.Mendel
09.03.2017 00:41Ну тут код кое-как. Человек старался и всё такое.
На хабре иногда такой ад выкатывают из велосипедов, что ой и ой.
А главная… что главная… Ну главная. Не нравится — листнул и пошел дальше.
sfi0zy
07.03.2017 20:28+2Тоже делал свой
велосипедфреймворк для обычных статических сайтов, возможно автору стоит познакомиться с ним (исходники на github, есть сгенерированная страница с документацией) — в плане разбиения на компоненты и использования препроцессора — он может быть не сильно сложным примером для изучения (а то что-то тут критикуют, а примеров того, как можно сделать по-другому, не прикладывают). Велосипед создавался в образовательных целях и имеет внутри много странных решений и экспериментов (да и не все еще доделано, как в плане логики, так и в плане анимаций), так что это скорее не пример для подражания, а пример для того, чтобы посмотреть, понять логику и сделать лучше.
abyrkov
07.03.2017 21:10Может все таки взять Materialize CSS?
foxmuldercp
07.03.2017 23:31Ну или хотя бы посмотреть на десяток популярных и известных и уже использующихся нормальных фреймворков, вроде MDL, TWBS.Elemental. ant.design (отличная штука для реакта, используется в Алибаба :))
и не велосипедить свои странные костыли, когда все давно придумано до нас...
mik222
07.03.2017 22:47+3Поздравляем с велосипедом. Вы изобрели:
- http://materializecss.com/
- https://getmdl.io/
- http://fezvrasta.github.io/bootstrap-material-design/
- и.т.д.
А если серьезно, то почему бы и нет. Вы вложили много сил в эту работу, однако:
- На сайте очень сильно хромает английский. (Отдайте редактору)
- На сайте не хватает примеров, чтобы было тупо, на уровне копи паст. Смотрите здесь: http://materializecss.com/getting-started.html
- Обязательно нужна кроссбраузерная поддержка
- Разметка несколько грязная (но это уже сто десятое дело)
Если вы эти правки сделаете, есть шанс что проект взлетит.
dimon5016
07.03.2017 22:47Так-то интересный и красивый фреймворк, но вот семантика сильно страдает, в частности кнопки.
Igorgro
08.03.2017 00:38А можно немного поподробнее про кнопки?
YemSalat
09.03.2017 06:57<div class="flatbutton ripple-effect" style="position: relative; top:140px;left:20px;" onclick="showDialog(document.getElementById('dialog1'))"> <p>Flat button</p> </div>
Думаю имеется в виду, что кнопки почему-то задаются при помощи контейнера с параграфом внутри, а не тэгом button.
de1vin
08.03.2017 14:39
<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>
YemSalat
09.03.2017 09:47+1Мне кажется использование настолько не семантической разметки для контролов — в наше время моветон.
Meklon
Приятно выглядит. Можно добавить еще примеров готовых страниц? И ripple эффект выглядит как-то не очень в gif. Могу я предложить залить на github страницу тестовую и сюда ссылку?