- PVSM.RU - https://www.pvsm.ru -

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

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

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

Основные особенности:

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


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

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

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

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

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

Инструкцию по добавлению картинок, CSS, скриптов и проверке производительности см. здесь [9].

Автор:

Источник [10]


Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/mobile-development/62869

Ссылки в тексте:

[1] Google Web Starter Kit: http://developers.google.com/web/starter-kit

[2] Guilp.js: http://gulpjs.com/

[3] скачать: https://github.com/google/web-starter-kit/releases/tag/v0.2.0-beta

[4] репозиторий: https://github.com/google/web-starter-kit

[5] index.html: https://github.com/google/web-starter-kit/blob/master/app/index.html

[6] basic.html: https://github.com/google/web-starter-kit/blob/master/app/basic.html

[7] gulp watch: https://www.npmjs.org/package/gulp-watch

[8] эмулятора: https://developer.chrome.com/devtools/docs/mobile-emulation

[9] здесь: https://developers.google.com/web/fundamentals/tools/build/build_site

[10] Источник: http://habrahabr.ru/post/226979/