/landing-base

Basic landing project with good README, gulp, sass, and ES6.

Primary LanguageCSS

Project name

TBD — To-Be-Decided WIP — Work-In-Progress

1. Ссылки на ресурсы проекта

PDF с полным дизайном по адресу TBD

Wireframe JPG 960px@2 TBD

Отдельные файлы страниц в jpeg100/png24 под размер экрана 1440px (с ретиной/без ретины) по адресу TBD

Шрифты в форматах otf, woff, woff2, ttf, eot по адресу TBD

Favicon PNG8/PNG24 512px в git по адресу design/fav512.png.

Мета-теги и ресурсы (картинки) шеринга: в git, мета-теги source/pages/meta.html, картинки в design/social.

Статические картинки (для страниц TBD) по адресу TBD

Статические фалйы (для страниц TBD) по адресу TBD

2. Краткое описание бизнес-процесса

3. Более детальное описание бизнес-процесса

3.1 Переходы между страницами

3.2 ...Отдельные страницы

4. Требования к дизайну

4.1. Шрифты, размеры, цвета

Используются следующие шрифты: TBD

Fall-back шрифты:

  • Serif: Times
  • Sans-serif: Helvetica, Verdana

Для экрана 1440px размеры шрифтов:

  • Design-version
  • TBD
  • Wireframe-version
  • большой (header) 42px
  • средний (body) 28px
  • малый (meta) 18px

Цвета:

  • фирменный голубой цвет #2497fc
  • фирменный красный #fc2424
  • темный цвет шрифта #231f20

4.2. Требования к совместимости

Сайт должен безошибочно работать и отображаться в браузерах:

  • IE 9+
  • Firefox 47+ @Mac, @Win,
  • Latest Firefox @Android, @iOS
  • Chrome 49+ @Mac, @Win,
  • Latest Chrome @Android, @iOS
  • Safari 9.1+ @Mac
  • Safari 9+ @iOS
  • Opera 40+ @Mac, @Win
  • Android Browser 4.3+ @Android
  • UC Browser for Android 11+ @Android
  • Samsung Internet 4+ @Android

4.3. Мобильные режимы, для экранов < 768px

TBD

Дизайн скейлится по ширине экрана.

4.4. Для экранов <960px

Дизайн по размеру 960px, скроллится.

4.5. Для экранов 961 - 1440px

Файл примера дизайна по адресу TBD

Дизайн скейлится по ширине экрана.

4.6. Для экранов > 1440px

Дизайн по размеру 1440px, с полями дефолтного голубого цвета.

4.7. Экстремальные ресайзы

При ширине экрана >=768px и высоте экрана менее TBDpx на сайте появляется скролл.

Мобильные режимы отображения включаются только на девайсах, на десктопе при ширине <768px скролл.

4.8. Процесс загрузки

Файл дизайна экрана загрузки по адресу TBD

До загрузки и инициализации всех ресурсов показываем экран загрузчика. Код загрузчка должен целиком содержться в файле html лендинга и отображение включаться максимально быстро. Загрузчик -- мордочка бота с крутящимися глазами. До его появления экран полностью залит фирменным голубым.

4.9. Анимации

TBD

4.10. Коды счетчиков

GA:

4.11. Page Events for GA

TBD

5. Сопряжение с backend

Все права на код принадлежат Don't Panic Inc На front-end используются следующие фреймворки и библиотеки

  • библиотека, версия, лицензия

На back-end используются следующие фреймворки и библиотеки

  • библиотека, версия, лицензия

7. Front-end build

7.1. Dependencies

First make sure node/npm is installed on your computer.
Then install modules in source:

npm install

7.2. How to Use

In the source of the project, just simply run the gulp script in your terminal:

gulp

The watcher should start right away and you can get started on editing your stylesheets and stuff. Watched dirs are: pages, scss, scripts, img, fav, fonts.

7.3. How to build

In the source of the project, just simply run the gulp script in your terminal:

gulp build

You will find results in source/dist folder.

7.4. How to Deploy

In the base of the project, find a source/dist folder. Serve the contents somewhere.

7.5. Send The Form And Files

Connection settings are saved in sourece/scripts/settings.js. Rebuild the project after you change settings.