Пользователь
587,9
рейтинг
20 июня 2014 в 16:25

Разработка → 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, скриптов и проверке производительности см. здесь.
Анатолий Ализар @alizar
карма
739,5
рейтинг 587,9
Пользователь
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (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 практически превратилась в манипуляции с командлайнами, сборками, билдами и.т.д.

    Фронт-энд уже не тот.
    • +1
      Вы ведь шутите?

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