«Убийца Bootstrap» — Material Design Lite. Версия 1.0.0

    image

    Компания Google вышла на новый уровень в продвижении своего детища — Material Design. Выпущена версия 1.0.0 open-source проекта Material Design Lite.

    Любопытно, что MDL — это автономный проект, не привязанный к фреймворку Polymer. При этом Google отмечает, что библиотека является современной интерпретацией Polymer Paper Elements.

    image

    MDL написан на Sass, с использованием БЭМ-методологии и включает в себя множество компонентов и, благодаря отзывчивой сетке отлично проявляет себя на различных устройствах. Подробнее с библиотекой можно познакомиться на сайте проекта.
    Share post

    Similar posts

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

    More
    Ads

    Comments 86

      +97
      Никто (читать, как «мало кто») ищет Bootstrap через поисковой запрос «Twitter Bootstrap». Так что, до «убийцы» ему еще далеко.

        –1
        Да и по возможностям уступает. Так, побаловаться пока что.
        По поводу таблиц — почему сразу сортировку не сделать, примитивную хоятбы. Почему-то был уверен, что увижу ее из-коробки.
        Да и графики как на скриншоте можно было бы вразу включить.

        А так — выглядит симпотично.
          +50
          Расходимся.
            +1
            Ну вот, пришли и всё обломали))
            Мне вот одно интересно — серьёзно Google выпустили что-то с использованием БЭМ от Яндекса?
              +10
              Дело не в статистике, а в том, что Bootstrap-дизайн уже морально устарел.
              По поводу БЭМ — да, серьёзно, даже в гайдлайн включили github.com/google/material-design-lite/wiki/Understanding-BEM
                +6
                Bootstrap-дизайн уже морально устарел.

                Если вы пользовались bootstrap, как фреймворком с готовым дизайном, поздравляю, вы использовали его неправильно.
                На том же bootstrap есть реализация material design: bootswatch.com/paper
                  0
                  А как его надо использовать?
                    –16
                    Как фреймворком, отрывая руки за .row или .col-md-* в вёрстке.
                      +14
                      это же часть фреймворка, что плохого в использовании сетки?
                        +1
                        @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 я не могу даже код отформатировать.
                          0
                          А .row на что предлагаете заменять?
                            0
                            Ну это не я предлагаю, на сайте самого ангуляра есть пример .make-row() getbootstrap.com/css/#example-usage
                            Хотя я им не пользуюсь, не нравится что он вставлет margin.

                            Смысл в том, что ты используешь бетстрап как фреймворк, а вёрстка нормальная, семантическая, а не засраная бустраповскими терминами.
                        +5
                        Я наоборот, часто использую только сетку
                        +4
                        Как набор готовых абстракций для контролов. Для кнопок, сетки, алертов. Фрейморк дает огромный простор для кастомизации, а где этого не хватает, можно спокойно дописывать свое.
                        Посмотрите на expo.getbootstrap.com, ни про один сайт не скажешь сходу, что он сделан на bootstrap, по крайней мере сразу.
                        +5
                        Увы, но от Material там только «Material is the metaphor». От гайдлайна Google'а там ровным счетом ничего.
                          +6
                          Bootstrap Material Design — ещё одна реализация MD для бутстрапа.
                            0
                            Реализиция одних HTML сниппетов, через другие. Жесть.
                        +2
                        Почему бы и нет, если технология хороша?
                        +3
                        bootstrap это не только фреймворк.
                          +1
                          как и material design
                        +3
                        Может я конечно ошибаюсь, но когда нажимаешь на кнопку (http://www.getmdl.io/components/index.html#buttons-section), она не уходит вниз, а наоборот всплывает, довольно странные ощущения.
                          +2
                          Вот зашел сюда написать об этом коммент.
                          Интересно, кто там в Гугле дизайном занимается, и в каком угаре надо было придумать то, что кнопка при нажатии не нажиматься должна, а взлетать?
                            0
                            Ну ничего такой эксперимент, как на меня. Выглядит непривычно, да, но с другой стороны, почему нет?
                              0
                              Возникла гипотеза, что дизайнер, наглотавшись колес, видимо, решил, что при нажатии на кнопку должно возникать ощущение, что экран под ней проминается, а кнопка остается на месте. :)
                                +1
                                Следующий дизайнер вспомнит игру «крышечки» (bottle caps) и сделает так, чтобы при нажатии кнопки подпрыгивали и переворачивались.
                                0
                                так же как у Вольво, когда нажимаешь «аварийку» кнопка не вдавливается, а наоборот — отжимается.
                                  0
                                  Так же на Москвиче 412.
                                    0
                                    Насколько я помню, на 412 нет аварийки — их биметаллическое реле не выдержит нагрузки 4 ламп. Оно не очень выдерживает мощные лампы — начинает сильно частить.
                                      0
                                      У нас было. Но у нас 87 г.в.
                                        0
                                        Тогда это ИЖ. АЗЛК где-то в 1975-м перешел на выпуск 2140.
                                  0
                                  Оказывается, логическое объяснение все-таки есть: кнопка находится на некотором отдалении под стеклом, и когда подносишь палец к экрану, она «притягивается» к пальцу.
                                    0
                                    Дебильное какое-то объяснение. Кнопка при нажатии отжимается… это в какой вселенной такое?
                                      0
                                      Она не отжимается, она «примагничивается» к пальцу. Ну да, непривычно, но почему бы и нет?
                                        0
                                        То есть, предполагается, что у меня палец магнитный? Опять же бред.
                                          0
                                          Зачем сразу магнитный? Просто влажный и липкий :)
                                  0
                                  Там типа не совсем обычная кнопка. В том же меню слева эти фабы вполне приемлемо приподнимаются по клику.
                                    +1
                                    То что слева больше похоже на checkbox, а справа как раз вот такая странная кнопка, которая не нажимается, а отжимается.
                                  +3
                                  А мне нравится!
                                  Желаю проекту интенсивного развития ибо Bootstrap по многим параметрам несколько не устраивает.
                                    +1
                                    БЭМ — это сильно. Отсутствие структурированного подхода к CSS — один из наиболее серьезных недостатков Бутстрапа
                                      +3
                                      Есть же UIkit, в нём с такими вещами ситуация лучше, в своё время переползал с jQuery UI на TB3, по посреди дороги наткнулся на UIkit, и в итоге перешел на него.
                                        0
                                        Спасибо за наводку, что-то пропустил я это дело
                                          +3
                                          Можно кратко навскидку плюсы-минусы-почему? Были же каких-то несколько аргументов которые привели к критической массе и переползанию на другой фрейворк.
                                            +1
                                            Больше компонентов, везде есть префиксы классов (настраиваемые), вроде .uk-table вместо наглого .table, очень удобный графический кастомизатор внешнего вида вместо того убожества, которое предоставляет TB.
                                        –3
                                        Ну не знаю, бутстрап, по крайней мере, был относительно симпатичный. А дизайн гугла заканчивается на google.com (один input bar), остальные его попытки что-то там родить — тошнотное говно.
                                          +5
                                          … которое повсеместно используется.
                                          Видимо вы давно не видели в глаза смартфон.
                                            +2
                                            То, во что превратили 5-й Андроид — тихий ужас и с точки зрения эстетики, и с точки зрения юзабилити.

                                            — Активные элементы без описанных границ заставляют напрягаться с точностью позиционирования. Особенно ужасно это выглядит на стандартной клавиатуре от Гугла.
                                            — Активные элементы, качественно не отличающиеся от неактивных резко снижают интуитивность интерфейса. Заранее не зная работу интерфейса нельзя понять, какие элементы активны, какие — нет.
                                            — Скрытые меню, выдвигаемые свайпом в общем случае не позволяют догадаться об их наличии. То, что на Андроиде даже в официальных гуглоприложениях всё чаще забивают на выделенную кнопку «меню» — вообще ни в какие ворота.
                                            — Невнятные пустые дублирующиеся панели
                                            — Двойные жесты вытаскивания
                                            — Вообще, всё больший игнор быстрой и параллелизуемой первой сигнальной в пользу медленной последовательной второй сигнальной системы.
                                            —…

                                            бОльшего кошмара юзабилити, чем Material Design в Android 5 я, наверное, за последние лет 20 не встречал.
                                              0
                                              А мне нравится, сорри. Как говориться, на вкус и цвет…
                                        • UFO just landed and posted this here
                                            –1
                                            То есть зря я писал шаблон для блога в стиле Material Design :(
                                              –1
                                              О! Хорошая новость. Неплохая заготовочка. Ещё бы на Stylus переписать красиво.
                                                –13
                                                В Опере 12 почти не работает. Так что я не очень одобряю :)
                                                  +15
                                                  Неактуальные версии браузеров, никто вечно поддерживать не будет.
                                                    0
                                                    Для x64-битного линукса есть репозитории с актуальной версией
                                                    +2
                                                    Гугл как всегда хочет, чтобы плясали под его дудку; терпеть не могу material design, скоро все сайты в интернете будут выглядеть как гугл.
                                                      +2
                                                      Я бы сказал, что он неоднозначный и требует вдумчивого применения (впрочем как и любые другие вещи).

                                                      Я дизайн ненавижу, а друг фанатеет и считает «лучшим».
                                                        0
                                                        Мне больше интересно, как Гугл начнёт выглядеть как Гугл. Пока весь интернет мастурбирует на их гайды, крупного гуглового приложения или сервиса в material design днём с огнём не сыщешь.
                                                          0
                                                          Их почтовый клиент Inbox, приложение для заметок Keep, приложение для просмотра контактов, страница с настройками конфеденциальности и куча других. Постепенно все переводят.
                                                          0
                                                          а как же docs.google.com
                                                            0
                                                            a как же google+
                                                              –6
                                                              play.google.com — конечно, про этот богом забытый сайт мало кто знает, но он сделан в стиле Material и принадлежит Google
                                                            +1
                                                            мне сама концепция нравится, но сырая еще…
                                                              0
                                                              Наконец-то хоть один ui framework, авторы которого понимают как надо писать css и организовать сборку.

                                                              Давно на бутстрап не смотрел, но насколько я помню, там был гигантский монолитный css, запутанный вложенностью, засирающий глобальные стили. Т.е. нельзя было ни в существующий проект закинуть его, ни слезть с него на другой фреймворк когда уже вляпался, ни порефакторить его в приличный вид.

                                                              Здесь, на первый взгляд, всё по понятиям сделано.
                                                                +4
                                                                О Sass или Less слыхали? Там так-то исходники в них доступны.
                                                                  0
                                                                  Я в курсе. Причем здесь это?
                                                                    +2
                                                                    При «компиляции» Sass или Less и получался этот
                                                                    «гигантский монолитный css»
                                                                      –1
                                                                      Вы хотите сказать что если проект собирается препроцессором из кучи маленьких файлов то он от этого автоматически приобретает хорошую архитектуру?

                                                                      Не важно на sass или чем он там написан. В нём есть наследование. 2015 год на дворе. Каскадные стили! КАРЛ!

                                                                      Вот статья за 1999 год meyerweb.com/eric/articles/webrev/199903.html уже тогда до людей начинало доходить что С в CSS — это зло.

                                                                      Прогресс то не стоит на месте. Посмотрите вон tachyons.io уже какие чудесные вещи можно делать в CSS. Уходите срочно из этого болота бутстрапа.
                                                                  +1
                                                                  Посмотрите на bem-components:
                                                                  ru.bem.info/libs/bem-components
                                                                    +7
                                                                    Я конечно их видел. Бэм компоненты тянут с собой слишком много всякого эзотерического буллщита от яндекса, борщики какие-то и подобную муть. Гугловый фреймворк собирается галпом — это индустриальный стандарт, любой фронтэндер знает как поправить галповую сборку под себя. Я могу взять mdl вот прямо сейчас и воткнуть себе в проект хоть сбоку, хоть сверху. А не тратить годы жизни на изучение не нужного мне ибем и ймодулес а потом переписывания всего на них. Понимаете разницу в подходе? Вот я за гугловый подход.
                                                                      0
                                                                      bem-components можно тоже использовать какбутстрап:
                                                                      ru.bem.info/blog/bem-as-bootstrap
                                                                        0
                                                                        Об этом знают в мире три с половиной человека :)

                                                                        Но так то да, красиво.
                                                                        0
                                                                        Не могу не отметить, что borschik был написан не только когда ещё gulp и grant даже в проекте не было, но и когда ещё вообще фронтендеры и не думали, что им надо что-то собирать. Ну и нет там ничего такого сложного, чтобы с ним надо было как-то долго специально разбираться. Узкая тулза для конкретных случаев.
                                                                          0
                                                                          Ну и наш подход в том, чтобы предложить решение для частых задач, возникающих при разработке фронтенда: генерация HTML (как на сервере, так и на клиенте), оптимизация финального рантайма, способ писать компоненты на всех возможных технологиях, хелперы для написания js, инфраструктура для сборки документации и запуска тестов. А не тупой копипаст HTML к себе в проект и попаболь при обновлении библиотеки. Понимаете разницу в подходе?
                                                                            0
                                                                            Плюс зависимости и то, что попадает в финальный рантайм можно настраивать гибко, контролируя размер файлов проекта. А не подключать себе весь CSS и весь JS компонент.
                                                                              0
                                                                              Основная задача бутстрапа — дать возможность бэкендерам из готового набора зафигачить по-быстрому фронт без помощи дизайнера и фронтендера. Где в этом сценарии «оптимизация финального рантайма, способ писать компоненты на всех возможных технологиях, etc...»?

                                                                              Вы мне пытаетесь «продать» бэм в теме про совсем другое. Я так то ничего против full-stack бэма не имею. Жалко что им не пользуется никто.
                                                                        0
                                                                        Симпатично. Интересные эффекты при нажатии на активные элементы. Но использовать не буду, ибо всё это дело тормозит на объёмных страницах. ИМХО, веб должен «летать».
                                                                          +1
                                                                            0
                                                                            Вот да — хорошая альтернатива.
                                                                            Не навязывают темное меню-шапку, в отличие от гуглового и нормально умеет работать с таблицами, которые не числа. Гугловая либо съезжает вся куда-нибудь, либо столбцы не вертикальные.

                                                                            Понятно, что дизайн не для этого создавался, но всякие сервисные странички и статистику пока заверстать более чем тяжело.
                                                                            0
                                                                            Стиль (а сразу бросаются цвета) напоминает гугловские продукты. Аналитикс, документы, драйв и прочее. Никогда не нравился их выбор цветовой гаммы, не знаю, даже, почему. То ли мало в них насыщенности, то ли глубины цвета.
                                                                              +1
                                                                              Что бы не говорили поклонники и противники Twitter Bootstrap, у Material Design Lite есть одно преимущество перед первым. Он использует принцип Flexbox для формирования сетки. В текущей версии Бутстрапа колонки строятся по старинке: блок+float.
                                                                                0
                                                                                Я попробовал запихнуть их колонки в колонки и оно поплыло.
                                                                                  0
                                                                                  Выкидываем ~bootstrap/less/grid.less, подрубаем flexboxgrid и продолжаем писать дальше, как ни в чем не бывало.
                                                                                  0
                                                                                  Убийца — это очень грмоко.
                                                                                    0
                                                                                    В общем, я потыкал этот MDL и могу уверить, что до функционала того же Angular-material ему пока далековато — то меню вылазит за края экрана, то кнопки не «вспыхивают» по клику. Итог: побаловаться — сойдёт, применять в реальных проектах — не советую.
                                                                                      0
                                                                                      Прочитал и решил как ни будь попробовать. И вот на днях попробовал использовать для нового проекта. Очень неудобно. Бутстрап интуитивно понятен и легко запоминается, а тут чудовищные названия классов типа «mdl-layout__header», «mdl-layout__header--waterfall», «mdl-mini-footer__right-section» и т.д. В таком виде MDL я точно использовать не буду.
                                                                                        0
                                                                                        >а тут чудовищные названия классов типа «mdl-layout__header»
                                                                                        так же это БЭМ — именование классов соответствует яндексовской методологии БЭМ, и это хорошо! Они не чудовищные, они удобные, хотя бы тем, что именование классов стандартизировано, не только в этом проекте, но и во многих проектах, использующих БЭМ.

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