Комментарии 46
Приятно выглядит. Можно добавить еще примеров готовых страниц? И ripple эффект выглядит как-то не очень в gif. Могу я предложить залить на github страницу тестовую и сюда ссылку?
НЛО прилетело и опубликовало эту надпись здесь
Demo на гите не рабочее. не хватает Actions.js
<div class="mcard" style="position: absolute; width:300px;top:200px;">
<image style="max-width: 100%; position: relative;">
Вы серьезно?
Вероятно, автор подразумевает, что размеры должны быть заданы где-то вовне (отдельный класс), style чисто как пример.
НЛО прилетело и опубликовало эту надпись здесь
MD нужен только для приложений. Но приложения обычно строятся на модульной системе, а тут просто куча тупо вкинута в глобальный скоуп. Плюс элементы обычно создаются на лету, а тут чтобы виджеты ожили надо вручную вызывать всякие функции, да еще неизвестно, как это сработает с уже живыми виджетами. Тема задается css-переменными, работать будет очень не везде, но при этом используется устаревший JS.
А так, конечно, выглядит неплохо, да и вес небольшой, это плюсы.
Я и задумывал его для использования вместе с JavaFX для создания графического интерфейса приложений, но подвели меня именно css-переменные (встроенный в JavaFX webkit их не воспринимает).
CSS-переменные? Это что-то типа LESS-миксинов? А переписать по быстрому чтобы можно было компилировать и уже компилированные скины в CSS?
Если быть точным, то custom properties. Вообще они мощнее препроцессорных переменных в виду своей динамичности. Вот пост, где их сравнивают.
Вообще поддержка в браузерах уже приличная, но нет в ie и в edge только на подходе.
Как аналог миксинов будет @apply, сейчас с поддержкой совсем плохо.
Обе фичи можно полифилить с помощью postcss-cssnext, но с ограничениями и они так же будут статическим, как и препроцессорные переменные.
— переходи по максимум на css анимацию
— css замени на scss
— это не фреймворк
что там насчет поддержки для IE,Firefox,Opera,Chrome,Safari?
Какие минимальный версии браузеров для адекватной работы?
— css замени на scss
— это не фреймворк
что там насчет поддержки для IE,Firefox,Opera,Chrome,Safari?
Какие минимальный версии браузеров для адекватной работы?
— переходи по максимум на css анимацию
К сожалению я так и не смог сделать анимацию волны на css. Если можете помочь, буду благодарен.
что там насчет поддержки
В Опере все работает нормально, в Firefox не работает волна и имеются небольшие проблемы с позиционированием отдельных элементов.
просто из-за ненужного использования js — анимации не гладкие
про js — используй ES6 или TypeScript с компиляцие в js (в них можно красиво создавать классы и модули и т.д., сможешь обернуть все, что получилось в одну библиотеку)
про css — используй after/before, иногда полезно)
про «разделяй и властвуй» — в файле html должен быть ТОЛЬКО каркас, в CSS — стили, в JS — логика. эти три кита должны быть более-мененее самостоятельными.
убери из HTML все кроме каркаса, классов, id и те элементы которые удовлетворяет W3C
для использования собственный атрибутов используй параметры «data»
пример:
про js — используй ES6 или TypeScript с компиляцие в js (в них можно красиво создавать классы и модули и т.д., сможешь обернуть все, что получилось в одну библиотеку)
про css — используй after/before, иногда полезно)
про «разделяй и властвуй» — в файле html должен быть ТОЛЬКО каркас, в CSS — стили, в JS — логика. эти три кита должны быть более-мененее самостоятельными.
убери из HTML все кроме каркаса, классов, id и те элементы которые удовлетворяет W3C
для использования собственный атрибутов используй параметры «data»
пример:
<div data-name="vasya"></div>
По поводу анимации волны на CSS. Печально что приходится использовать JS для визуального эффекта. Могу предложить CSS only решение, которое использовал в одном проекте (разница лишь в том, что волна всегда будет начинаться в центре кнопки:
http://codepen.io/Deka87/pen/zNJyqg.
// 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.
А почему слайдер div, а не input?
Я же написал, input создается автоматически. Посмотрите код страницы после загрузки.
Ну я и спрашиваю — зачем div в input переводить, вместо простого инпута
Потому что у стандартного input отсутствует заполнитель и индикатор значения, а сделать их нельзя, поскольку псевдоэлементы after и before у input тоже отсутствуют.
Делаете инпут. Потом оборачиваете его во что хотите, заменяете на див или еще чего.
Но так у вас остается деградированная но логика. И даже дело не в браузерах с отключенным ЖС, понять что инпут это инпут может и робот какой, или… браузер. Зачеркнутые замочки видели? Браузер по какому-то алгоритму их определяет…
Есть общепринятые нормы — кастомные инпуты выглядят как стандартные, а уже потом компонента ее переделывает как ей нужно. Самый жесткий пример — посмотрите любой редактор, ТиниМЦЕ к примеру. У нас текстареа который уже заменяют на див и т.п.
Но так у вас остается деградированная но логика. И даже дело не в браузерах с отключенным ЖС, понять что инпут это инпут может и робот какой, или… браузер. Зачеркнутые замочки видели? Браузер по какому-то алгоритму их определяет…
Есть общепринятые нормы — кастомные инпуты выглядят как стандартные, а уже потом компонента ее переделывает как ей нужно. Самый жесткий пример — посмотрите любой редактор, ТиниМЦЕ к примеру. У нас текстареа который уже заменяют на див и т.п.
Надо использовать label с аттрибутом for, у него есть псевдоселекторы, а сам инпут использовать как модель и хайдить display: none
Собственно, так у меня и работают флажки и радиокнопки. Проблема в том, что слайдеры бывают без подписи (например регулятор громкости в плеере), и тогда придется создавать пустую подпись к нему «чтобы работало»
Именно, а еще можно по стариночке:
input[type=hidden] в связке с установкой tabindex на обертке для обработки фокуса. Не забыть только -1 выставить на соседних контроллах рядом с этим инпутом внутри этой обертки, если они присутствуют.
а сделать их нельзя
"заполнитель" можно сделать с box-shadow.
А в целом, рекомендую автору копать в сторону веб-компонентов.
Тогда автор откопает Polymer и осознает всю тщетность бытия. :)
<div class="flatbutton ripple-effect" style="position: relative; top:140px;left:20px;" onclick="showDialog(document.getElementById('dialog1'))">
<p>Flat button</p>
</div>
вспоминается про то, что каждый начинающий программист обязан сделать велосипед, но с квадратными колесами…
Какие ужасы. Классы без специфичных префиксов, то есть с такой фигней только мини-лендинг на коленке набросать можно и больше никогда к нему не прикосаться. Отсутствие каких-либо стайлгайдов даже на базовом уровне, то есть просто от балды выбраны названия классов и структура блоков, а сверху еще инлайн стили, лолчто?
За такое вообще на районе убивают без разговоров.
Вначале на главную проникла статья про Qiwi с nodejs 0.12 и адовой лапшой в коде, теперь вот это, что вообще происходит с хабром?
onclick="showDialog(document.getElementById('dialog1'))"
За такое вообще на районе убивают без разговоров.
Вначале на главную проникла статья про Qiwi с nodejs 0.12 и адовой лапшой в коде, теперь вот это, что вообще происходит с хабром?
Так плюсики ставят вот и проникают, спрашивать надо не с авторов, а с тех кто плюсы ставит.
Понимаете, критика таким велосипедам pet-проектам необходима. А моральная поддержка — еще больше. Человек старался, сделал какой-никакой вклад — и это самое важное. Это лучще чем 100500-ый bullshit из buzzwords от компании, которой только попеариться.
Может каждый из нас что-то может где-то лучше. Может лучше CSS, может лучше JS, может лучше архитектуру. Но у нас времени нет. Поэтому респект тем, кто тратит своё время на то, чтобы что-то сделать в открытом виде.
Может каждый из нас что-то может где-то лучше. Может лучше CSS, может лучше JS, может лучше архитектуру. Но у нас времени нет. Поэтому респект тем, кто тратит своё время на то, чтобы что-то сделать в открытом виде.
и в результате мы получаем главную хабр с проектами где люди выкладывают свои поделки сомнительного качества, не о заботя себя применением стандартные практики и рекомендации. Потом люди начинают это плюсовать только за то что человек же старался, а что там в итоге вылили и не важно. В итоге такое выходит на главной.
И если вы не поняли в чем заключался мой комментарий, то я там не критикую автора, каждый в праве писать то что хочет и пусть это делает, я высказался о том что если люди ставят + такой статье, то с них и надо спрашивать, что они нашли такого что заставило поставить +.
И если вы не поняли в чем заключался мой комментарий, то я там не критикую автора, каждый в праве писать то что хочет и пусть это делает, я высказался о том что если люди ставят + такой статье, то с них и надо спрашивать, что они нашли такого что заставило поставить +.
Тоже делал свой велосипед фреймворк для обычных статических сайтов, возможно автору стоит познакомиться с ним (исходники на github, есть сгенерированная страница с документацией) — в плане разбиения на компоненты и использования препроцессора — он может быть не сильно сложным примером для изучения (а то что-то тут критикуют, а примеров того, как можно сделать по-другому, не прикладывают). Велосипед создавался в образовательных целях и имеет внутри много странных решений и экспериментов (да и не все еще доделано, как в плане логики, так и в плане анимаций), так что это скорее не пример для подражания, а пример для того, чтобы посмотреть, понять логику и сделать лучше.
Может все таки взять Materialize CSS?
Поздравляем с велосипедом. Вы изобрели:
- http://materializecss.com/
- https://getmdl.io/
- http://fezvrasta.github.io/bootstrap-material-design/
- и.т.д.
А если серьезно, то почему бы и нет. Вы вложили много сил в эту работу, однако:
- На сайте очень сильно хромает английский. (Отдайте редактору)
- На сайте не хватает примеров, чтобы было тупо, на уровне копи паст. Смотрите здесь: http://materializecss.com/getting-started.html
- Обязательно нужна кроссбраузерная поддержка
- Разметка несколько грязная (но это уже сто десятое дело)
Если вы эти правки сделаете, есть шанс что проект взлетит.
Так-то интересный и красивый фреймворк, но вот семантика сильно страдает, в частности кнопки.
<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>
Мне кажется использование настолько не семантической разметки для контролов — в наше время моветон.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Публикации
Мой Material Design Framework