#SeoPult
Склонировать репозиторий:
git clone [email protected]:chenki/spt.gitПеред первым запуском нужно установить зависимости (один раз на проект):
npm i##Режимы
Одноразовая сборка:
npm run oneЗапуск живой сборки на локальном сервере:
npm run start##Шаблонизация
Шаблоны собираются в папке app/templates/ с помощью тегов <include>. Составные части лежат в blocks/. Переменные — через @@var. Боевые файлы автоматически собираются в корне папки dist/.
##Стили
Верстаются в app/styles/layout.sss (базовый стилевой файл), компилируются в dist/assets/styles/style.css.
###PostCSS
Переменные (postcss-simple-vars):
$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: white
.block
...
color: rgba(0,0,0,.95)
width: 200px
height: @width
...
&__element
all: initial
top: center
size: 50px
&:hover
^&-part
color: rgb(255, 102, 0)
...
&--modifier
@extend .head- CSSNext. Штуки из CSS4, перменные, кастомные медиа-запросы;
- SugarSS. Синтаксис Stylus со всеми штуками PostCSS;
- Container Queries Prolyfill. Адаптивные контейнеры;
- CSS MQPacker. Группирует медиазапросы и помещает их в конец CSS документа;
- PostCSS Short. Логичные укороченные конструкции дял свойств;
- PostCSS Center. Плагин для беззаботной центровки элементов;
- PostCSS SVG. Работа с SVG в CSS;
- PostCSS ASSETS. Магия для работы с ресурсами сайта;
- PostCSS Sprites. Генерация спрайтов;
- Lost Grid System. Сетка, работающая через
calc(); - PostCSS Rucksack. Полезные CSS-штуки;
- PostCSS Initial. Сброс CSS-стилей элемента;
##Графика и файлы проекта
###Вектор
SVG-иконки собираются в папке app/images/svg/, в CSS:
background-image: svg('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/fonts и app/resources, копируются в dist/assets/fonts/ и dist/assets/resources/ соответственно.
##Скрипты
Можно писать на es2015 — подключен и работает Бабель. Включен jQuery v3.
Никаких #id для JS. Классы для JS нужно начинать с _, чтобы не мешать стили и логику в одну кучу. Исходники скриптов размещаются в app/scripts/app.js, компилируются в dist/assets/scripts/scripts.js.
Сторонние скрипты и библиотеки кладутся в папку app/scripts/vendor, компилируются в dist/assets/scripts/vendor.js.
├── app/ # Исходники
│ ├── templates/ # Шаблоны
│ │ ├── base/ # Базовые блоки
│ │ │ └── _head.html # Разметка тега <head>
│ │ ├── blocks/ # Блоки
│ │ │ ├── _header # Блок шапки
│ │ │ │ ├── _header.html # Разметка шапки
│ │ │ │ └── _header.sss # Стили шапки
│ │ │ ├── _footer # Блок подвала
│ │ │ │ ├── _footer.html # Разметка подвала
│ │ │ │ └── _footer.sss # Стили подвала
│ │ │ ├── _start.html # Вводная лекция
│ │ ├── guideline.html # Типовая текстовая страница
│ │ ├── index.html # Карта сайта с прогрессом работ
│ │ └── home.html # Главная страница шаблона
│ ├── scripts/ # Скрипты
│ │ ├── vendor/ # Сторонние скрипты и JS-библиотеки
│ │ └── app.js # Главный скрипт
│ ├── styles/ # Стили
│ │ ├── base/ # Блоки
│ │ │ ├── default.sss # Базовые стили
│ │ │ └── typo.sss # Стили типографики
│ │ │ └── form.sss # Стили форм и элементов форм
│ │ │ └── table.sss # Стили для таблиц
│ │ ├── helpers/ # Блоки
│ │ │ ├── variables.sss # CSS-Переменные
│ │ │ └── normalize.sss # Сброс стилей (опционально)
│ │ └── layout.sss # Главный стилевой файл
│ ├── images/ # Картинки
│ │ ├── sprites/ # Папка PNG-иконок для генерации растрового спрайта
│ │ ├── svg/ # Папка SVG-иконок
│ │ └── test/ # Папка для тестовых картинок
│ ├── resources/ # Статические файлы для копирования в dist/
│ │ ├── manifests # Манифесты (в том числе и для Яндекс.Табло)
│ │ │ └── manifest.json # Файл манифеста
│ │ └── robots.txt # Для роботов
│ └── fonts/ # Шрифты
├── dist/ # Сборка (автогенерация)
│ ├── assets/ # Подключаемые ресурсы
│ │ ├── fonts/ # Шрифты
│ │ ├── images/ # Изображения
│ │ │ └── sprites/ # Спрайты (автогенерация)
│ │ ├── scripts/ # Скрипты
│ │ └── styles/ # Стили
│ ├── manifests # Манифесты (в том числе и для Яндекса)
│ ├── robots.txt # Файл для поисковых роботов
│ ├── index.html # Карта сайта с прогрессом работ
│ ├── guideline.html # Типовая текстовая страница
│ └── home.html # Сборка главной страницы
├── .gitignore # Список исключённых файлов из Git
├── package.json # Список модулей и прочей информации
├── gulpfile.js # Конфигурация Gulp.js
└── README.md # Документация шаблона
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent