Верстка like Metro UI

    В последнее время появилось довольно много инструментов для создания сайтов в духе Metro UI. К сожалению, лично у меня, использовать что-то из этого в реальных проектах не получилось: либо страдает качество и приходится вставлять «костыли», либо с качеством все нормально, но нет стилей для нужных компонентов приложения (например, нигде нет стилей для datepicker-а).



    Я попробовал написать свое с блэкджеком и шлюхами. Сначала это был просто набор стилей для компонентов, которые были нужны мне в первую очередь. Cейчас все становится похожим на довольно большой CSS framework.

    Я пишу об этом сюда, надеясь, что для кого-то мои наработки окажутся полезными, а я получу обратную связь.

    Стили в архиве и документация лежат здесь: milk.ecm7.ru, есть .LESS и CSS версии.


    За основу был взят Twitter Bootstrap и, соответственно, используется та же самая разметка. Старался сделать похоже не на Windows 8, а на сайты вроде microsoftstore.com, kinectforwindows.org и dev.windowsphone.com

    Буду благодарен за любые отзывы и замечания.
    Поделиться публикацией

    Похожие публикации

    Комментарии 76

      +5
      А можно пару слов об основных отличиях от тоге же Twitter Bootstrap? Чем принципиально лучше? Возможно есть толк оформить как тему к Twitter Bootstrap, а не плодить очередной css фреймворк.
        –1
        Делать тему — больше геморроя. Т.е. будут лишние стили, которые нужно переопределять и проверять, что они не проявились в самых неожиданных местах. Этим имеет смысл заниматься если планируется переключение Metro UI => Bootstrap (а такого я делать точно не буду).

        Кроме того, я не ставил целью «плодить очередной css фреймворк». Это просто мой код, который, как мне показалось, пригодится другим.
          +3
          Цели не ставили, но представили как свой css framework. По этому и закономерный вопрос чем лучше.
            –1
            можете привести причины делать тему для bootstrap?
              +4
              За основу все равно был взят bootstrap. И мне кажется что как тему поставит куда больше людей, чем рискнут использовать вместо уже проверенных фреймворков. Учитывая что пока не видно никаких преимуществ.
                –1
                Вы правы: преимущества для разработчика, а не для пользователей. Буду благодарен, если приведете хотя бы одно преимущество для пользователей темы перед отдельными стилями.
                  0
                  Кстати, на счет темы — она может сломать сайт с бутстрапом точно также, как непроверенный CSS framework — в чем разница?
                    +1
                    Тему легче откатить.
                      0
                      Не согласен — откатить можно точно также.
                    0
                    И третий вопрос: если бы было написано «с нуля», Вы бы восприняли это нормально?
                      +2
                      Не принципиально с нуля или нет. Я не услышал ответа на вопрос «чем же лучше?».
                        0
                        Видимо, мы с Вами смотрим на вопрос с разных сторон:
                        — я смотрю с позиции разработчика — у меня 2 преимущества: уменьшение объема работы + меньше потенциальных ошибок, связанных с переопределением стилей;
                        — Вы смотрите с позиции пользователя этих стилей: с Вашей стороны преимуществ одного варианта над другим я, действительно, не вижу.
                          +2
                          Вполне возможно. Начал смотреть с позиции пользователя, когда стал стартапером. Скажу честно, это было не легко. Но, за то что делитесь наработками за это отдельная благодарность, возможно кому то жизнь и обглечит.
                  +2
                  Вы правы, поменял заголовок на более спокойный. Надо было сразу так написать. Старый заголовок смотрится, как будто я что-то сделал и впариваю это всем.
                  +2
                  Гемороя это да, но все же если переопределять стили через LESS и правильно, на выходе мы получим чистенький и красивый CSS. Уже проверено. Но да, это геморой.
                +4
                Хлопаю стоя!!! Спасибо, первый нормальный метро-фреймворк!
                На остальные, к сожалению, без слез смотреть нельзя.
                • НЛО прилетело и опубликовало эту надпись здесь
                    +1
                    Если честно, в safari не проверял.

                    Сейчас посмотрел, нашел некорректное отображение в разделе «Appended inputs». А какие косяки Вы имели в виду?
                    • НЛО прилетело и опубликовало эту надпись здесь
                        +1
                        Да, извините, про Pills with dropdowns я забыл.
                        Это не только в safari происходит, а вообще во всех броузерах — не доделано.

                        Про иконки и селекты я все проверю и обязательно исправлю. Спасибо Вам!
                    +1
                    Спасибо!
                    Буду рад, если это пригодится кому-то, кроме меня.
                    +3
                    Первый более-менее адекватный metro-like css фреймверк. Thanks.
                      0
                      Смесь руско-английского слегка сбивает :)

                      Сам фреймворк очень приятен, скоро допилите до modal windows?
                        +1
                        Про русский язык — согласен. Я планирую сделать все на английском и написать нормальное описание. Пока не сделал, т.к. думаю, что важнее доделать оставшиеся пункты из списка на главной странице.

                        Я сейчас делаю Navbar и исправляю мелкие недоработки, которые периодически нахожу. Если хотите, следующими сделаю окна. Судя по скорости работы над предыдущими элементами, navbar и окна должны быть готовы на этой неделе.
                          +2
                          Спасибо. Окна и алерты было бы самое то :)
                        +3
                        Чекбоксы, радио сьежают под разными браузарами. В боевых условиях не применимо. Удачи.
                          +1
                          Жаль, что не смог Вам помочь.
                          Записал, обязательно исправлю.
                        • НЛО прилетело и опубликовало эту надпись здесь
                            +2
                            А где собственно tiles?
                              +1
                              Точно, забыл добавить в список.
                              Уже добавил.

                              (Правда, я не думаю, что это ключевой элемент интерфейса.)
                              0
                              image
                              у кнопок текст вверх съехал в хроме — это задумано или баг отображения в хроме?
                                0
                                Съехал на 1 px вверх от задуманного. Должно быть так, чтобы надпись маленькими буквами была выровнена по вертикали по центру.

                                Спасибо за Ваше замечание! Обязательно исправлю.
                                  0
                                  Если честно, не понял, о каких маленьких буквах идет речь?
                                    0
                                    О буквах в нижнем регистре.
                                +3
                                image

                                Еще с отступами в селектах что-то. Ubuntu, Firefox 16.0.2
                                  +2
                                  Да, а в целом задача создания лаконичного минималистичного интерфейса выполняется, спасибо большое, буду следить за проектом)
                                +1
                                А микрософт самостоятельно не желает выложить набор своих стилей? ну чтоб не привязыватся к бустрапам, а просто использовать стили ModernUI в собственно собираемых темах
                                  0
                                  Как бы я хотел, чтобы они выложили стили, готовые к употреблению…
                                    +1
                                    Петиций интересно нигде не собирают?
                                  0
                                  Хорошая штука, для прототипирования самое оно. Спасибо.
                                    +2
                                    Здорово!

                                    Только непонятно почему на гитхаб не выложили?
                                      0
                                      Выложу обязательно. Пока этого не сделал, т. к. нужно будет перенастраивать автоматическую выкладку на сайт.
                                        0
                                        Мне кажется, выкладку можно и руками немного поделать, а проект тем временем развиваться уже будет =)
                                        +1
                                        репозиторий на github уже появился
                                        github.com/dima117/milk

                                        также за обновлениями можно следить через твиттер
                                        twitter.com/ecm7milk
                                        +3
                                        Надеюсь фреймворк будет развиваться и дальше.
                                          0
                                          Я уже использую его в своем проекте и бросать не планирую :)
                                          0
                                          А переключение на черный Metro Style не планируется у вас?
                                            0
                                            Пока нет. Надо сначала довести до конца то, что есть сейчас на главной странице.
                                            0
                                            скажите, а тумблер on/off существует в этой парадигме и\или в этом фреймверке?
                                              0
                                              Вы имеете в виду что-то вроде этого?
                                                0
                                                Wow… однако хорошо сделанный framework у человека. Вполне составляет конкуренцию работе топикстартера. А кстати, вы рассматривали этот вариант прежде чем начали писать свой? В чём отличия и преимущества вашего?
                                                  0
                                                  Ссылка на него есть в топике.
                                                  На мой взгляд, основное отличие- metroui.org.ua похож на интерфейс Windows 8, а Milk больше похож на интерфейс сайтов MS.
                                                    0
                                                    а кстати в чем именно страдает качество и какие костыли приходиться вставлять? (кроме упомянутого datepicker)
                                                      0
                                                      Посмотрите на радио-кнопки и на стрелки у выпадающих списков, например.
                                                        0
                                                        да действительно. глянул хромом — чекбоксы не чекаются, в опере чакаются но выглядят коряво.
                                                        safari на ipad работают, но выглядят слегка корявенько (но не так плохо как в опере)
                                                          0
                                                          не могли бы сказать в какой точно версии не работает?
                                                          Спасибо.
                                                          п.с. Олтон спрашивает.
                                                            0
                                                            opera 12.11 выглядит вот так clip2net.com/s/2xdwZ

                                                            chrome 23.0.1271 (пишет что самая последняя) cheсkbox упрямо не чекаются при клике на них clip2net.com/s/2xdyO
                                                    0
                                                    Кстати, по поводу тумблеров…
                                                    Тумблер предполагает, что при его нажатии произойдет какое-то действие, а checkbox — нет (нет действия, только изменение состояния). Разница примерно такая же, как между меню (выбор пункта предполагает действие) и выпадающим списком (нет действия при выборе элемента списка). Я с трудом себе представляю сценарий на сайте, в котором действия происходят при переключении тумблера. Поэтому добавлять тумблеры в Milk пока не планирую.
                                                      0
                                                      да запросто.

                                                      отображается, скажем, поток фотографий, а тумблер переключает состояние потока «отображать только фаворитс»

                                                      очень логично применять именно тумблер(-а) на странице которые влияют на состояние текущего view на этой странице
                                                        0
                                                        Написал Вам личное сообщение.
                                                +3
                                                Выглядит отлично, спасибо за труды.
                                                А репозитория на GitHub у вашего проекта нет?
                                                  0
                                                  Сейчас нет. Будет на этой неделе.
                                                  • НЛО прилетело и опубликовало эту надпись здесь
                                                      0
                                                      Неделя была очень напряженной, планирую заняться этим завтра (т.е. в субботу).
                                                        0
                                                        репозиторий на github уже появился
                                                        github.com/dima117/milk

                                                        также за обновлениями можно следить через твиттер
                                                        twitter.com/ecm7milk
                                                      +2
                                                      репозиторий на github уже появился
                                                      github.com/dima117/milk

                                                      также за обновлениями можно следить через твиттер
                                                      twitter.com/ecm7milk
                                                        0
                                                        Спасибо
                                                      –2
                                                      Поставьте тире вместо дефисов, хотя бы на синей плашке.
                                                        +1
                                                        Готово!

                                                        Пожалуйста, когда в следующий раз будете писать кому-нибудь замечания об ошибках в тексте, делайте это в виде личного сообщения.
                                                          0
                                                          Ок, буду в личку писать. Спасибо — так гораздо лучше смотрится.
                                                        0
                                                        Пожалуйста, загрузите на github или bb. Разработка быстрее пойдет.
                                                          0
                                                          К сожалению, разработка быстрее не пошла, поэтому продолжение будет в собственном репозитории SVN, как раньше (а результаты — на сайте).
                                                          0
                                                          Жаль что проект оказался заброшен
                                                            0
                                                            Извините, что не уделял времени проекту.

                                                            Я планирую продолжить работу над ним (т.к. сам использую его), но прямо сейчас, к сожалению, нет возможности это сделать.
                                                            Вы же понимаете, что я пишу Milk в свое свободное время, и не могу для него отказаться от работы или от решения проблем моей семьи.

                                                            В первую очередь я реализовал компоненты, которые был инеобходимы мне для использования в других проектах. Сейчас появилась необходимость вновых компонентах (breadcrumbs, pagination, modal windows). Как только появится свободное время, я вернусь к работе над проектом и начну с этих компонентов.

                                                            Также я буду рад, если Вы или кто-то другой решит поучаствовать в проекте вместе со мной (код выложен на github).
                                                            0
                                                            День добрый.

                                                            Насколько реально использовать фреймворк на данный момент? Работа над ним идёт?

                                                            Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                                            Самое читаемое