TurboExtensions

Расширенные возможности стилизации средствами CSS.

Прототипирование стилей

Установить расширенение live editor for CSS (или любое другое с похожими возможностями);
Зайти в браузере на турбо-страницу;
Написать CSS для нужных компонентов.

DevServer

В качестве альтернативы можно использовать dev-server на базе node.js (8.x) & express.

Установка:

git clone https://github.com/turboext/css.git # или fork
cd css
yarn # или npm install
nvm use # если у вас установлен nvm
npm start
npm test # для локального запуска тестов

Использование:

открыть http://localhost:3000 и выбрать адрес вашей турбо-страницы, например: https://rozhdestvenskiy.ru/turbo/, или https://yandex.ru/turbo?text=https://rozhdestvenskiy.ru/;
внести изменения в hosts/*/style.css;
обновить страницу.

Ограничения

Ограничения указаны в конфиге stylelint:

нельзя использовать пользовательские шрифты;
нельзя использовать низкопроизводительную анимацию;
нельзя использовать селекторы по имени тэга;
нельзя использовать любые внешние ресурсы;
размер CSS в gzip ограничен 21KB.

На code review могут быть указаны дополнительные требования к коду.

Важно: список ограничений может меняться со временем.

Технические детали

CSS код будет обработан с помощью postcss. Настройки можно посмотреть в конфигурационном файле.
Минимальные версии поддерживаемых браузеров
- android 4
- iOS 9
- IE 11
Векторные изображения предпочтительнее растровых. Размер всех изображений должен быть оптимизирован до приемлемого уровня качества.
- Для оптимизации SVG рекомендуется использовать svgo со следующими опциями: svgo -p 2 --multipass --enable=removeDesc --enable=removeTitle --enable=sortAttrs --enable=removeViewBox --enable=removeStyleElement -i [PATH_TO_SVG].

Внесение изменений в стили

Сделать fork репозитория;
Создать директорию hosts/example.com;
В директории должно быть несколько обязательных файлов — HOSTS.yaml, OWNERS.yaml, style.css.
- HOSTS.yaml должен содержать список доменов для которых должны применяться текущие стили, например:
```
- https://www.rozhdestvenskiy.ru
- https://rozhdestvenskiy.ru
```
Протокол (http, https) обязателен. Фактически, это адрес сайта из https://webmaster.yandex.ru
- OWNERS.yaml должен содержать список логинов на https://github.com кому разрешено править стили для текущего домена, например:
```
- sbmaxx
```
Закоммитить изменения и создать PR в основной репозиторий. Желательно в тексте коммита указывать адрес сайта;
В описании PR добавьте несколько ссылок на ваши турбо-страницы;
Дождитесь создания автоматической беты. Ссылка на неё появится в описании PR через некоторое время после создания PR, проверьте на ней свои изменения;
Дождаться прохождения линтеров;
Дождаться прохождения ревью;
Изменения будут доступы в течение часа после вливания PR в master ветку.

Внесение изменений в инфраструктурную часть

Создать issue с описанием сути изменений;
Сделать branch в формате issues/<номер_issue>;
Закоммитить изменения и создать PR в основной репозиторий;
Связать PR и issue (например, c помощью комментария).

Поддержка разработчиков

https://turbosupport.slack.com, доступ по приглашениям.

lomadurov/css