{"id":13608691,"url":"https://github.com/CSSSR/csssr-project-template","last_synced_at":"2025-04-12T17:32:31.849Z","repository":{"id":12928168,"uuid":"15605834","full_name":"CSSSR/csssr-project-template","owner":"CSSSR","description":"[deprecated] Шаблон проекта для быстрого старта.","archived":true,"fork":false,"pushed_at":"2020-02-12T13:40:22.000Z","size":1814,"stargazers_count":528,"open_issues_count":8,"forks_count":232,"subscribers_count":110,"default_branch":"master","last_synced_at":"2024-11-07T14:41:59.763Z","etag":null,"topics":["internal"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CSSSR.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":"contributing.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-01-03T09:22:19.000Z","updated_at":"2024-10-20T16:00:14.000Z","dependencies_parsed_at":"2022-07-09T23:46:11.415Z","dependency_job_id":null,"html_url":"https://github.com/CSSSR/csssr-project-template","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CSSSR%2Fcsssr-project-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CSSSR%2Fcsssr-project-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CSSSR%2Fcsssr-project-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CSSSR%2Fcsssr-project-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CSSSR","download_url":"https://codeload.github.com/CSSSR/csssr-project-template/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248605278,"owners_count":21132141,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["internal"],"created_at":"2024-08-01T19:01:29.223Z","updated_at":"2025-04-12T17:32:26.829Z","avatar_url":"https://github.com/CSSSR.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# CSSSR Project Template\n**Шаблон проекта для быстрого старта**\n\n## Этот проект больше не поддерживается\n\nЭтот шаблон использует устаревшие технологии и больше не поддерживается. Можете использовать его как основу для вашего проекта, но мы не советуем\n\n## Старт проекта\n\n### Склонируй репозиторий и перейди в папку проекта\n```\ngit clone git@github.com:CSSSR/csssr-project-template.git new-project \u0026\u0026 cd new-project\n```\n\n### Установи модули\n\n```\nnpm i\n```\n\nили в разы в быстрее c [yarn](https://github.com/yarnpkg/yarn)\n\n```\nyarn install\n```\n\n### Запусти шаблон\n```\nnpm start\n```\n\n\n## Команды для запуска\n\n### Запуск с отслеживанием изменений\n```\nnpm start\n```\n\n### Создание нового блока\nДля создания нескольких блоков, названия нужно указывать через пробел.\n```\nnpm run make-block [имя-блока] [имя-блока]\n```\n\n### Сборка в папку `dist`\n```\nnpm run build\n```\n\n### Production cборка в папку `dist`\n```\nnpm run production\n```\n\n### Локальный сервер на другом порте\n```\nPORT=9000 npm start\n```\n\n### Уведомления об ошибках `ESLint`\n```\nNOTIFY=true npm start\n```\n\n### Расшарить локальный сервер\n```\nTUNNEL=true npm start\n```\n\n### Открыть ссылку в браузере по умолчанию\n```\nOPEN=true npm start\n```\n\n### Собрать архив из папки `dist`\n```\nnpm run zip\n```\n\n### Очистка папки `dist`\n```\nnpm run clean\n```\n\n### Деплой всего содержимого папки `dist` в ветку `dist`\n```\nnpm run deploy\n```\n\n## Git hooks\nИспользуется [husky](https://github.com/typicode/husky). Перед каждым `git push` запускается линтер.\nЕсли линтер падает с ошибкой, `git push` не пройдет. Пропустить линтинг можно, используя `git push --no-verify`.\n\n\n## Структура папок и файлов\n```\n├── app/                       # Исходники\n│   ├── blocks/                # Блоки\n│   │   └── block/             # Блок\n│   │       ├── block.jade     # Разметка блока\n│   │       ├── block.js       # Скрипт блока\n│   │       └── block.styl     # Стили блока\n│   ├── data/                  # Данные в формате JSON\n│   ├── pages/                 # Страницы\n│   │   └── index.jade         # Разметка страницы\n│   ├── icons/                 # SVG иконки для генерации векторного спрайта\n│   ├── sprites/               # PNG иконки для генерации растрового спрайта\n│   ├── resources/             # Статические файлы для копирования в dist\n│   ├── scripts/               # Скрипты\n│   │   └── app.js             # Главный скрипт\n│   └── styles/                # Стили\n│       ├── helpers/           # Помощники\n│       │   ├── fonts.styl     # Подключение шрифтов\n│       │   ├── mixins.styl    # Примеси\n│       │   ├── optimize.styl  # Сброс стилей и фиксы\n│       │   ├── svg-size.styl  # Переменные с размерами SVG иконок (автосборка)\n│       │   └── variables.styl # Переменные\n│       ├── sprites/           # Переменные с данными PNG спрайтов (автосборка)\n│       └── app.styl           # Главный стилевой файл\n├── dist/                      # Сборка (автогенерация)\n│   ├── assets/                # Подключаемые ресурсы\n│   │   ├── fonts/             # Шрифты\n│   │   ├── images/            # Изображения\n│   │   │   └── sprites/       # Спрайты (автогенерация)\n│   │   ├── scripts/           # Скрипты\n│   │   └── styles/            # Стили\n│   └── index.html             # Страница\n├── tasks/                     # Подключаемые скрипты с задачами для gulpfile.babel.js\n│   ├── copy.js                # Копирование\n│   ├── default.js             # Итоговые списки задач по умолчанию\n│   ├── deploy.js              # Деплой в ветку dist\n│   ├── icons.js               # Сборка SVG иконок в один файл\n│   ├── scripts.js             # Сборка ES2015 скриптов в Webpack\n│   ├── semver.js              # Обновление версии шаблона\n│   ├── server.js              # Запуск локального сервера\n│   ├── sprite.js              # Сборка спрайтов и CSS переменных\n│   ├── styles.js              # Сборка стилей\n│   ├── templates.js           # Сборка страниц из Jade шаблонов\n│   ├── watch.js               # Отслеживание изменений и запуск задач\n│   └── zip.js                 # Архивация папки dist\n├── .csscomb.json              # Конфигурация форматирования CSS\n├── .eslintrc                  # Конфигурация проверки JavaScript в ESLint\n├── .editorconfig              # Конфигурация настроек редактора кода\n├── .gitignore                 # Список исключённых файлов из Git\n├── browserlist                # Список версий браузеров для Autoprefixer\n├── gulpfile.babel.js          # Файл для запуска Gulp.js\n├── make-block.js              # Утилита создания новых блоков\n├── package.json               # Список модулей и прочей информации\n├── readme.md                  # Документация шаблона\n└── webpack.conf.js            # Конфигурация Webpack.js\n```\n\n\n## Как собираются и используются PNG спрайты\n\nВ шаблоне предусмотрена сборка нескольких PNG спрайтов и их данных в CSS переменные.\n\n### Добавление PNG иконок\n\nДля создания спрайта нужно добавить папку в `app/sprites` и в неё PNG иконки. Важно, чтобы иконки были с чётными высотой и шириной кратными двум. Retina иконки добавлять в эту папку рядом с обычными и в конце названия файла добавить `@2x`, например:\n```\n└── app/\n    └── sprites/\n        └── emoji/\n            ├── grinning.png\n            ├── grinning@2x.png\n            ├── joy.png\n            ├── joy@2x.png\n            ├── smile.png\n            └── smile@2x.png\n```\n\n### Сборка спрайта\n\n* В папке `dist/assets/images/sprites` появятся два спрайта: обычный и Retina с `@2x` и в `app/styles/sprites` один стилевой файл с примесями. Все файлы будут с такими же названиями, как у папки, в которой находятся его иконки. Например:\n```\n├── app/\n│    └── styles/\n│       └── sprites/\n│           └── emoji.styl\n└── dist/\n    └── assets/\n        └── images/\n            └── sprites/\n                ├── emoji.png\n                └── emoji@2x.png\n\n```\n\n* В сборочных папках останутся только актуальные спрайты и стили в случае, если удалить исходные папки с иконками.\n\n### Использование спрайтов\n\n#### Retina спрайты\n\nДля подключения иконки используется примесь `retinaSprite` со значением `$icon_group`, где `icon` это название PNG иконки, например:\n```css\n.joy\n    retinaSprite $joy_group\n```\n\nВ собранном виде в CSS добавятся обычный спрайт и медиа-запрос, чтобы отображать Retina спрайт только при необходимости и это будет выглядеть так:\n```css\n.joy {\n    background-image: url(\"../images/sprites/emoji.png\");\n    background-position: 32px 0px;\n    width: 24px;\n    height: 24px;\n}\n\n@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {\n    .joy {\n        background-image: url(\"../images/sprites/emoji@2x.png\");\n        background-size: 88px 24px;\n    }\n}\n```\n\n#### Обычные спрайты\n\nДля подключения иконки используется примесь `sprite` со значением `$icon`, где `icon` это название PNG иконки, например:\n```css\n.joy\n    sprite $joy\n```\n\nВ собранном виде в CSS добавится только обычный спрайт и это будет выглядеть так:\n```css\n.joy {\n    background-image: url(\"../images/sprites/emoji.png\");\n    background-position: 32px 0px;\n    width: 24px;\n    height: 24px;\n}\n```\n\n## [Внеси свой вклад в развитие проекта!](https://github.com/CSSSR/csssr-project-template/blob/master/contributing.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FCSSSR%2Fcsssr-project-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FCSSSR%2Fcsssr-project-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FCSSSR%2Fcsssr-project-template/lists"}