Google Web Starter Kit: конструктор мобильных сайтов



    Google Web Starter Kit — конструктор и шаблоны для быстрой разработки отзывчивых мобильных сайтов, которые хорошо работают на любой платформе и почти в любом браузере (кроме самых старых). Такие сайты везде выглядят, как нативные приложения.

    Основные особенности:
    • HTML-шаблоны, оптимизированные для мобильного применения;
    • отзывчивый макет для разных мобильных устройств
    • руководство по стилю визуальных компонентов;
    • поддержка Guilp.js (по умолчанию), Node.js, Ruby и Sass.

    Для начала работы следует скачать код текущей версии Web Starter Kit 0.2.0 beta или клонировать репозиторий.

    В папке /app есть два шаблона: стандартный index.html с боковым slide-меню. Другой шаблон basic.html — более простой вариант, без макета и навигации.

    После установки Guilp.js, Node.js, Ruby и Sass можно начинать работу. Файлы приложения складываются в папку web-starter-kit/dist. Если используется Gulp, то можно посмотреть текущую версию проекта командой gulp serve. История изменений в коде сохраняется в Gulp, если предварительно запущена программа gulp watch.

    Проверять сайт на разных экранах удобно с помощью эмулятора, встроенного в Chrome DevTools.



    Инструкцию по добавлению картинок, CSS, скриптов и проверке производительности см. здесь.
    Поделиться публикацией
    Похожие публикации
    Реклама помогает поддерживать и развивать наши сервисы

    Подробнее
    Реклама
    Комментарии 16
    • +6
      Увидел картинку и сразу подумал о webview, phonegap и др не очень нативном…
      • 0
        Качаю специально, что бы под фонгапом попробовать это)
        • 0
          Скачал, рассматриваю.
          Хорошее впечатление производит, завершенности какой-то, что ли. Полноты.

          В общем первое впечатление положительное)
          • +2
            Как на счет откликов, табов или свапов?
        • +2
          Да, выглядит как-то не очень. Onsen.UI, например, выглядит намного более «нативнее».
          • +4
            Или Ionic
            • +2
              Плюсую Ionicframework. Уже даже делали реальный мобильный сайт на данном фреймворке (когда он был в альфе, сейчас бета и скоро стабильный релиз). Очень интенсивно развивается, ну и совместно с AngularJS все очень неплохо получилось.
        • +1
          Отдельное спасибо автору за скрин и показ возможности «Emulate» в хромовском Developer Tools про которое я не знал :)
          • 0
            Там бывают расхождения с мобильными девайсами, так что полностью полагаться на эмуляцию не стоит.
          • 0
            Надеюсь, что Гугл будет дальше развивать фреймворк.

            Мне очень нравится Ratchet но смущает, что он может в любой момент перестать развиватся.
            • 0
              Ratchet не обрабатывает мышиные события и в нем нет drawer menu.
              • 0
                А почему это Ratchet может перестать в любой момент развиваться?
              • +4
                Непонимаю зачем тянуть ruby только ради sass-a. Все это можно сделать средствами node.
                • 0
                  gulp-ruby-sass:
                  This is slower than gulp-sass, but more stable and feature-rich

                  Ничего не имею против Node.js, но мне лично Ruby нравится, по крайней мере, Sinatra достаточно элегантна.
                • –1
                  О господи.
                  Куда катится мир…

                  И фронт-энд испаганили до неузнаваемости.

                  Раньше — блокнот, браузер и любой редактор картинок. Это все что нужно было для разработки фронт-энда.

                  Сейчас же — обвесили всякими нодами, галпами, сассами, рубями.

                  Творческая ручная работа и трепетное отношение к F5 практически превратилась в манипуляции с командлайнами, сборками, билдами и.т.д.

                  Фронт-энд уже не тот.

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