Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 86
Никто (читать, как «мало кто») ищет Bootstrap через поисковой запрос «Twitter Bootstrap». Так что, до «убийцы» ему еще далеко.
Да и по возможностям уступает. Так, побаловаться пока что.
По поводу таблиц — почему сразу сортировку не сделать, примитивную хоятбы. Почему-то был уверен, что увижу ее из-коробки.
Да и графики как на скриншоте можно было бы вразу включить.
А так — выглядит симпотично.
По поводу таблиц — почему сразу сортировку не сделать, примитивную хоятбы. Почему-то был уверен, что увижу ее из-коробки.
Да и графики как на скриншоте можно было бы вразу включить.
А так — выглядит симпотично.
Расходимся.
Ну вот, пришли и всё обломали))
Мне вот одно интересно — серьёзно Google выпустили что-то с использованием БЭМ от Яндекса?
Мне вот одно интересно — серьёзно Google выпустили что-то с использованием БЭМ от Яндекса?
Дело не в статистике, а в том, что Bootstrap-дизайн уже морально устарел.
По поводу БЭМ — да, серьёзно, даже в гайдлайн включили github.com/google/material-design-lite/wiki/Understanding-BEM
По поводу БЭМ — да, серьёзно, даже в гайдлайн включили github.com/google/material-design-lite/wiki/Understanding-BEM
Bootstrap-дизайн уже морально устарел.
Если вы пользовались bootstrap, как фреймворком с готовым дизайном, поздравляю, вы использовали его неправильно.
На том же bootstrap есть реализация material design: bootswatch.com/paper
А как его надо использовать?
Как фреймворком, отрывая руки за .row или .col-md-* в вёрстке.
это же часть фреймворка, что плохого в использовании сетки?
@import "variables.less";
@import "mixins.less";
.sidebar {
.make-xs-column(2);
.make-md-column(3);
.make-lg-column(3);
.make-lg-column-offset(1);
}
<div class="sidebar"><div>
p.s. Вот благодаря таким -8 я не могу даже код отформатировать.
p.s. Вот благодаря таким -8 я не могу даже код отформатировать.
А .row на что предлагаете заменять?
Ну это не я предлагаю, на сайте самого ангуляра есть пример .make-row() getbootstrap.com/css/#example-usage
Хотя я им не пользуюсь, не нравится что он вставлет margin.
Смысл в том, что ты используешь бетстрап как фреймворк, а вёрстка нормальная, семантическая, а не засраная бустраповскими терминами.
Хотя я им не пользуюсь, не нравится что он вставлет margin.
Смысл в том, что ты используешь бетстрап как фреймворк, а вёрстка нормальная, семантическая, а не засраная бустраповскими терминами.
Я наоборот, часто использую только сетку
Как набор готовых абстракций для контролов. Для кнопок, сетки, алертов. Фрейморк дает огромный простор для кастомизации, а где этого не хватает, можно спокойно дописывать свое.
Посмотрите на expo.getbootstrap.com, ни про один сайт не скажешь сходу, что он сделан на bootstrap, по крайней мере сразу.
Посмотрите на expo.getbootstrap.com, ни про один сайт не скажешь сходу, что он сделан на bootstrap, по крайней мере сразу.
Увы, но от Material там только «Material is the metaphor». От гайдлайна Google'а там ровным счетом ничего.
Bootstrap Material Design — ещё одна реализация MD для бутстрапа.
Почему бы и нет, если технология хороша?
bootstrap это не только фреймворк.
Может я конечно ошибаюсь, но когда нажимаешь на кнопку (http://www.getmdl.io/components/index.html#buttons-section), она не уходит вниз, а наоборот всплывает, довольно странные ощущения.
Вот зашел сюда написать об этом коммент.
Интересно, кто там в Гугле дизайном занимается, и в каком угаре надо было придумать то, что кнопка при нажатии не нажиматься должна, а взлетать?
Интересно, кто там в Гугле дизайном занимается, и в каком угаре надо было придумать то, что кнопка при нажатии не нажиматься должна, а взлетать?
Ну ничего такой эксперимент, как на меня. Выглядит непривычно, да, но с другой стороны, почему нет?
Возникла гипотеза, что дизайнер, наглотавшись колес, видимо, решил, что при нажатии на кнопку должно возникать ощущение, что экран под ней проминается, а кнопка остается на месте. :)
так же как у Вольво, когда нажимаешь «аварийку» кнопка не вдавливается, а наоборот — отжимается.
Оказывается, логическое объяснение все-таки есть: кнопка находится на некотором отдалении под стеклом, и когда подносишь палец к экрану, она «притягивается» к пальцу.
Там типа не совсем обычная кнопка. В том же меню слева эти фабы вполне приемлемо приподнимаются по клику.
А мне нравится!
Желаю проекту интенсивного развития ибо Bootstrap по многим параметрам несколько не устраивает.
Желаю проекту интенсивного развития ибо Bootstrap по многим параметрам несколько не устраивает.
БЭМ — это сильно. Отсутствие структурированного подхода к CSS — один из наиболее серьезных недостатков Бутстрапа
Есть же UIkit, в нём с такими вещами ситуация лучше, в своё время переползал с jQuery UI на TB3, по посреди дороги наткнулся на UIkit, и в итоге перешел на него.
Ну не знаю, бутстрап, по крайней мере, был относительно симпатичный. А дизайн гугла заканчивается на google.com (один input bar), остальные его попытки что-то там родить — тошнотное говно.
… которое повсеместно используется.
Видимо вы давно не видели в глаза смартфон.
Видимо вы давно не видели в глаза смартфон.
То, во что превратили 5-й Андроид — тихий ужас и с точки зрения эстетики, и с точки зрения юзабилити.
— Активные элементы без описанных границ заставляют напрягаться с точностью позиционирования. Особенно ужасно это выглядит на стандартной клавиатуре от Гугла.
— Активные элементы, качественно не отличающиеся от неактивных резко снижают интуитивность интерфейса. Заранее не зная работу интерфейса нельзя понять, какие элементы активны, какие — нет.
— Скрытые меню, выдвигаемые свайпом в общем случае не позволяют догадаться об их наличии. То, что на Андроиде даже в официальных гуглоприложениях всё чаще забивают на выделенную кнопку «меню» — вообще ни в какие ворота.
— Невнятные пустые дублирующиеся панели
— Двойные жесты вытаскивания
— Вообще, всё больший игнор быстрой и параллелизуемой первой сигнальной в пользу медленной последовательной второй сигнальной системы.
—…
бОльшего кошмара юзабилити, чем Material Design в Android 5 я, наверное, за последние лет 20 не встречал.
— Активные элементы без описанных границ заставляют напрягаться с точностью позиционирования. Особенно ужасно это выглядит на стандартной клавиатуре от Гугла.
— Активные элементы, качественно не отличающиеся от неактивных резко снижают интуитивность интерфейса. Заранее не зная работу интерфейса нельзя понять, какие элементы активны, какие — нет.
— Скрытые меню, выдвигаемые свайпом в общем случае не позволяют догадаться об их наличии. То, что на Андроиде даже в официальных гуглоприложениях всё чаще забивают на выделенную кнопку «меню» — вообще ни в какие ворота.
— Невнятные пустые дублирующиеся панели
— Двойные жесты вытаскивания
— Вообще, всё больший игнор быстрой и параллелизуемой первой сигнальной в пользу медленной последовательной второй сигнальной системы.
—…
бОльшего кошмара юзабилити, чем Material Design в Android 5 я, наверное, за последние лет 20 не встречал.
То есть зря я писал шаблон для блога в стиле Material Design :(
О! Хорошая новость. Неплохая заготовочка. Ещё бы на Stylus переписать красиво.
В Опере 12 почти не работает. Так что я не очень одобряю :)
Неактуальные версии браузеров, никто вечно поддерживать не будет.
Для x64-битного линукса есть репозитории с актуальной версией
Гугл как всегда хочет, чтобы плясали под его дудку; терпеть не могу material design, скоро все сайты в интернете будут выглядеть как гугл.
Я бы сказал, что он неоднозначный и требует вдумчивого применения (впрочем как и любые другие вещи).
Я дизайн ненавижу, а друг фанатеет и считает «лучшим».
Я дизайн ненавижу, а друг фанатеет и считает «лучшим».
Мне больше интересно, как Гугл начнёт выглядеть как Гугл. Пока весь интернет мастурбирует на их гайды, крупного гуглового приложения или сервиса в material design днём с огнём не сыщешь.
Их почтовый клиент Inbox, приложение для заметок Keep, приложение для просмотра контактов, страница с настройками конфеденциальности и куча других. Постепенно все переводят.
а как же docs.google.com
a как же google+
play.google.com — конечно, про этот богом забытый сайт мало кто знает, но он сделан в стиле Material и принадлежит Google
мне сама концепция нравится, но сырая еще…
Наконец-то хоть один ui framework, авторы которого понимают как надо писать css и организовать сборку.
Давно на бутстрап не смотрел, но насколько я помню, там был гигантский монолитный css, запутанный вложенностью, засирающий глобальные стили. Т.е. нельзя было ни в существующий проект закинуть его, ни слезть с него на другой фреймворк когда уже вляпался, ни порефакторить его в приличный вид.
Здесь, на первый взгляд, всё по понятиям сделано.
Давно на бутстрап не смотрел, но насколько я помню, там был гигантский монолитный css, запутанный вложенностью, засирающий глобальные стили. Т.е. нельзя было ни в существующий проект закинуть его, ни слезть с него на другой фреймворк когда уже вляпался, ни порефакторить его в приличный вид.
Здесь, на первый взгляд, всё по понятиям сделано.
О Sass или Less слыхали? Там так-то исходники в них доступны.
Я в курсе. Причем здесь это?
При «компиляции» Sass или Less и получался этот
«гигантский монолитный css»
Вы хотите сказать что если проект собирается препроцессором из кучи маленьких файлов то он от этого автоматически приобретает хорошую архитектуру?
Не важно на sass или чем он там написан. В нём есть наследование. 2015 год на дворе. Каскадные стили! КАРЛ!
Вот статья за 1999 год meyerweb.com/eric/articles/webrev/199903.html уже тогда до людей начинало доходить что С в CSS — это зло.
Прогресс то не стоит на месте. Посмотрите вон tachyons.io уже какие чудесные вещи можно делать в CSS. Уходите срочно из этого болота бутстрапа.
Не важно на sass или чем он там написан. В нём есть наследование. 2015 год на дворе. Каскадные стили! КАРЛ!
Вот статья за 1999 год meyerweb.com/eric/articles/webrev/199903.html уже тогда до людей начинало доходить что С в CSS — это зло.
Прогресс то не стоит на месте. Посмотрите вон tachyons.io уже какие чудесные вещи можно делать в CSS. Уходите срочно из этого болота бутстрапа.
Посмотрите на bem-components:
ru.bem.info/libs/bem-components
ru.bem.info/libs/bem-components
Я конечно их видел. Бэм компоненты тянут с собой слишком много всякого эзотерического буллщита от яндекса, борщики какие-то и подобную муть. Гугловый фреймворк собирается галпом — это индустриальный стандарт, любой фронтэндер знает как поправить галповую сборку под себя. Я могу взять mdl вот прямо сейчас и воткнуть себе в проект хоть сбоку, хоть сверху. А не тратить годы жизни на изучение не нужного мне ибем и ймодулес а потом переписывания всего на них. Понимаете разницу в подходе? Вот я за гугловый подход.
bem-components можно тоже использовать какбутстрап:
ru.bem.info/blog/bem-as-bootstrap
ru.bem.info/blog/bem-as-bootstrap
Не могу не отметить, что borschik был написан не только когда ещё gulp и grant даже в проекте не было, но и когда ещё вообще фронтендеры и не думали, что им надо что-то собирать. Ну и нет там ничего такого сложного, чтобы с ним надо было как-то долго специально разбираться. Узкая тулза для конкретных случаев.
Ну и наш подход в том, чтобы предложить решение для частых задач, возникающих при разработке фронтенда: генерация HTML (как на сервере, так и на клиенте), оптимизация финального рантайма, способ писать компоненты на всех возможных технологиях, хелперы для написания js, инфраструктура для сборки документации и запуска тестов. А не тупой копипаст HTML к себе в проект и попаболь при обновлении библиотеки. Понимаете разницу в подходе?
Плюс зависимости и то, что попадает в финальный рантайм можно настраивать гибко, контролируя размер файлов проекта. А не подключать себе весь CSS и весь JS компонент.
Основная задача бутстрапа — дать возможность бэкендерам из готового набора зафигачить по-быстрому фронт без помощи дизайнера и фронтендера. Где в этом сценарии «оптимизация финального рантайма, способ писать компоненты на всех возможных технологиях, etc...»?
Вы мне пытаетесь «продать» бэм в теме про совсем другое. Я так то ничего против full-stack бэма не имею. Жалко что им не пользуется никто.
Вы мне пытаетесь «продать» бэм в теме про совсем другое. Я так то ничего против full-stack бэма не имею. Жалко что им не пользуется никто.
Симпатично. Интересные эффекты при нажатии на активные элементы. Но использовать не буду, ибо всё это дело тормозит на объёмных страницах. ИМХО, веб должен «летать».
Вот да — хорошая альтернатива.
Не навязывают темное меню-шапку, в отличие от гуглового и нормально умеет работать с таблицами, которые не числа. Гугловая либо съезжает вся куда-нибудь, либо столбцы не вертикальные.
Понятно, что дизайн не для этого создавался, но всякие сервисные странички и статистику пока заверстать более чем тяжело.
Не навязывают темное меню-шапку, в отличие от гуглового и нормально умеет работать с таблицами, которые не числа. Гугловая либо съезжает вся куда-нибудь, либо столбцы не вертикальные.
Понятно, что дизайн не для этого создавался, но всякие сервисные странички и статистику пока заверстать более чем тяжело.
Стиль (а сразу бросаются цвета) напоминает гугловские продукты. Аналитикс, документы, драйв и прочее. Никогда не нравился их выбор цветовой гаммы, не знаю, даже, почему. То ли мало в них насыщенности, то ли глубины цвета.
Что бы не говорили поклонники и противники Twitter Bootstrap, у Material Design Lite есть одно преимущество перед первым. Он использует принцип Flexbox для формирования сетки. В текущей версии Бутстрапа колонки строятся по старинке: блок+float.
Убийца — это очень грмоко.
В общем, я потыкал этот MDL и могу уверить, что до функционала того же Angular-material ему пока далековато — то меню вылазит за края экрана, то кнопки не «вспыхивают» по клику. Итог: побаловаться — сойдёт, применять в реальных проектах — не советую.
Прочитал и решил как ни будь попробовать. И вот на днях попробовал использовать для нового проекта. Очень неудобно. Бутстрап интуитивно понятен и легко запоминается, а тут чудовищные названия классов типа «mdl-layout__header», «mdl-layout__header--waterfall», «mdl-mini-footer__right-section» и т.д. В таком виде MDL я точно использовать не буду.
>а тут чудовищные названия классов типа «mdl-layout__header»
так же это БЭМ — именование классов соответствует яндексовской методологии БЭМ, и это хорошо! Они не чудовищные, они удобные, хотя бы тем, что именование классов стандартизировано, не только в этом проекте, но и во многих проектах, использующих БЭМ.
так же это БЭМ — именование классов соответствует яндексовской методологии БЭМ, и это хорошо! Они не чудовищные, они удобные, хотя бы тем, что именование классов стандартизировано, не только в этом проекте, но и во многих проектах, использующих БЭМ.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
«Убийца Bootstrap» — Material Design Lite. Версия 1.0.0