🚪 Шаблон для проекта iFrame

http://html.4enki.ru/frame/ — демо онлайн, превью для папки dist/;
http://f.4enki.ru/ — штука для тестирования вёрстки в размерах рабочих областей на сайтах-партнёрах.

Как запустить у себя?

Склонировать репозиторий, перейти в созданную папку проекта и удалить скрытую папку .git:

git clone ssh://git@gitlab.finotdel.org:30022/integra/iframe-static.git new-project && cd new-project && rm -rf ./.git

Перед первым запуском нужно установить зависимости (один раз на проект):

npm i

Режимы

Одноразовая сборка:

npm run one

Запуск живой сборки на локальном сервере:

npm run start

Сборка проекта в *.zip-архив. Архив создаётся в корне проекта; CSS- и JS-файлы в архиве собираются в двух экземплярах: минифицированный и оригинальный без комментариев:

npm run zip

Шаблонизация

Шаблоны собираются в папке app/templates/ с помощью тегов <include>. Составные части лежат в blocks/. Переменные — через @@var. Боевые файлы автоматически собираются в корне папки dist/.

Стили

Верстаются в app/styles/layout.sss (базовый стилевой файл), компилируются в dist/assets/styles/style.css. Синтаксис SugarSS.

#PostCSS

Переменные (PreCSS):

$GeneralFontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif

Вложенность (postcss-nested и postcss-nested-ancestors) для элементов и модификаторов в БЭМе; ссылки на свойства (postcss-property-lookup); миксины (postcss-mixins); @extend с помощью (postcss-extend):

// Пример того, что может быть
...
.head
  color: rgba(255,255,255,1)
  ...
.block
  ...
  background-color: rgba(0,0,0,.95)
  display: block
  width: 200px
  height: @width
  ...
  &__element
    top: center
    size: 50px
    &:hover
      ^&-part
        all: initial
        color: rgb(255, 102, 0)
    ...
  &--modifier
    @extend .head
    border: 1px solid rgba(235,126,26,.8)

PostCSS-плагины

CSSNext. Штуки из CSS4, перменные, кастомные медиа-запросы;
PreCSS;
Container Queries Prolyfill. Адаптивные контейнеры;
CSS MQPacker. Группирует медиазапросы и помещает их в конец CSS документа;
PostCSS Short. Логичные укороченные конструкции дял свойств;
PostCSS Center. Плагин для беззаботной центровки элементов;
PostCSS SVG. Работа с SVG в CSS;
PostCSS ASSETS. Магия для работы с ресурсами сайта;
PostCSS Sprites. Генерация спрайтов;
Lost Grid System. Сетка, работающая через calc();
PostCSS Initial. Сброс CSS-стилей элемента;

Графика и файлы проекта

Вектор

SVG-иконки собираются в папке app/images/svg/, в CSS:

background-image: svg-load('name.svg', '[fill]: #000000');

Растр

PNG-иконки для спрайтов собираются в папке app/images/sprites/, в CSS:

background: url('images/sprites/name.png') no-repeat 0 0;

Общий спрайт автоматически собирается в dist/assets/images/sprites/.

Изображения

Графика размещается в app/images, собираются в dist/assets/images/, в CSS:

background: resolve('name.jpg')
width: width('name.png')

Статические файлы для копирования

Статические файлы для копирования в готовую сборку размещены в app/resources, копируются в dist/assets/resources/.

Скрипты

Можно писать на es2015 — подключен и работает Babel. Включен jQuery v3.

Никаких #id для JS. Классы для JS нужно начинать с _, чтобы не мешать стили и логику в одну кучу. Исходники скриптов собираются в app/scripts/app.js, компилируются в dist/assets/scripts/scripts.js.

Сторонние скрипты и библиотеки кладутся в папку app/scripts/vendor, компилируются в dist/assets/scripts/vendor.js.

Структура папок и файлов

├── app/                              # Исходники
│   ├── images/                       # Изображения и графика
│   │   ├── _debug/                   # Картинки для отладки (Pixel-perfect)
│   │   ├── sprites/                  # Папка PNG-иконок для генерации растрового спрайта
│   │   └── svg/                      # SVG иконки
│   ├── resources                     # Статические файлы для копирования в /dist
│   │   └── robots.txt                # Роботс для поисковых систем
│   ├── scripts/                      # Скрипты
│   │   ├── vendor/                   # Сторонние скрипты и JS-библиотеки
│   │   └── app.js                    # Главный скрипт
│   ├── styles/                       # Стили
│   │   ├── _debug/                   # Стили для отладки
│   │   │   ├── _diagnostics.sss      # Быстрая диагностика
│   │   │   └── _px2px.sss            # CSS-файл Pixel-perfect
│   │   ├── base/                     # Стандратные стили
│   │   │   ├── default.sss           # Базовые стили
│   │   │   ├── form.sss              # Формы и элементы
│   │   │   ├── table.sss             # Таблицы
│   │   │   └── typo.sss              # Типографика
│   │   ├── helpers/                  # Помощники
│   │   │   ├── normalize.sss         # Сброс стилей (опционально)
│   │   │   └── variables.sss         # Переменные
│   │   └── layout.sss                # Главный стилевой файл
│   └── templates/                    # Шаблоны
│       ├── blocks/                   # Блоки
│       │   ├── _base/                # Базовые блоки для общего шаблона
│       │   │   ├── _head.html        # Разметка блока <head>
│       │   │   └── _social.html      # Open Graph и meta-теги для соцсетей
│       │   └── block/                # Блок
│       │       ├── block.html        # Разметка блока
│       │       ├── block.pcss        # Стили блока
│       └── pages/                    # Страницы
│           └── index.html            # Разметка карты сайта с прогрессом работ
├── dist/                             # Сборка проекта (автогенерация)
│   ├── assets/                       # Подключаемые ресурсы
│   │   ├── images/                   # Изображения
│   │   ├── scripts/                  # Скрипты
│   │   └── styles/                   # Стили
│   └── index.html                    # Карта сайта с прогрессом работ
├── .editorconfig                     # Конфигурационный файл IDE
├── .gitignore                        # Список исключённых файлов из Git
├── browserslist                      # Список поддерживаемых браузеров для Автопрефиксера
├── package.json                      # Список модулей и прочей информации
├── gulpfile.js                       # Конфиг Gulp.js
└── README.md                         # Документация проекта

sglazov/iframe