{"id":17022925,"url":"https://github.com/solarrust/catchbitcoinfull","last_synced_at":"2026-04-09T12:04:14.999Z","repository":{"id":156252509,"uuid":"174107339","full_name":"solarrust/CatchBitcoinFull","owner":"solarrust","description":null,"archived":false,"fork":false,"pushed_at":"2019-03-13T10:52:46.000Z","size":6535,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-06-26T00:04:55.542Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","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/solarrust.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-03-06T08:50:29.000Z","updated_at":"2019-03-13T10:54:29.000Z","dependencies_parsed_at":null,"dependency_job_id":"0752df88-2783-41dc-9032-275b640fc574","html_url":"https://github.com/solarrust/CatchBitcoinFull","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/solarrust/CatchBitcoinFull","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solarrust%2FCatchBitcoinFull","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solarrust%2FCatchBitcoinFull/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solarrust%2FCatchBitcoinFull/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solarrust%2FCatchBitcoinFull/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/solarrust","download_url":"https://codeload.github.com/solarrust/CatchBitcoinFull/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solarrust%2FCatchBitcoinFull/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261973725,"owners_count":23238586,"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":[],"created_at":"2024-10-14T07:11:41.804Z","updated_at":"2025-12-30T21:24:20.455Z","avatar_url":"https://github.com/solarrust.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SP.Starter\n\n**Шаблон проекта для быстрого старта.**\n\n## Старт проекта\n\n#### 1. Установить зависимости:\n\nс помощью yarn (быстрее)\n\n```\nyarn install\n```\n\nили с помощью npm (медленнее):\n\n```\nnpm install\n```\n\n#### 2. Запустить Gulp для разработки:\n\n```\nnpm start\n```\n\n#### 3. Открыть следующий URL - [`http://localhost:9000/`](http://localhost:9000/).\n\n## Команды\n\n#### Запустить проект для разработки:\n\n```\nnpm start\n```\n\n#### Собрать проект для продакшена:\n\n```\nnpm run build\n```\n\n#### Создание архива `build.zip` для продакшена:\n\n```\nnpm run zip\n```\n\n## HTML-шаблонизатор Nunjucks\n\n[Nunjucks](https://mozilla.github.io/nunjucks/) - мощный шаблонизатор с синтаксисом а-ля jinja2, который позволяет создавать качественный, легкоподдерживаемый HTML-код.\n\nNunjucks-шаблоны находятся в `src/templates/`.\n\nДанные, которые могут быть использованы в нескольких местах, следует складывать в файл `global-data.json`, который находится в корне проекта. После этого к ним можно обращаться в шаблонах:\n\n```\n\u003cp\u003eSome title: {{ someData[0].title }}\u003c/p\u003e\n```\n\nШаблоны страниц, которые должны быть скомпилированы в папку `build/`, кладем в папку `src/templates/pages`\n\nКастомные фильтры, макросы и функции складываем в соответствующих файлах в `src/templates/lib`.\n\nТак называемые инклуды создаем в `src/templates/parts` с префиксом `_`. Например, `src/templates/parts/_sidebar.nunj`.\n\nДля эффективного применения шаблонизатора см. примеры в стартовом проекте, а также [документацию](https://mozilla.github.io/nunjucks/templating.html).\n\nДля настройки синтаксиса в редакторах (Sublime, Webstorm) скачиваем плагин для шаблонизатора Twig и настраиваем открытие файлов с расширением .nunj с подстветкой Twig по умолчанию.\n\n## Webpack Hot Module Replacement\n\nВ SP.Starter настроен [Webpack HMR](https://webpack.js.org/concepts/hot-module-replacement/). По умолчанию при изменении в JS файле происходит замена этого модуля и всех его зависимостей.\n\n\u003cb\u003eВажно!\u003c/b\u003e Для корректной работы необходимо правильно обрабатывать side-эффекты, которые генерирует ваш код.\n\nНапример, если есть код, добавляющий обработчик на событие клика:\n\n`document.body.addEventListener('click', this.someMethod);`\n\nТо прямо в коде необходимо добавить следующую инструкцию для Webpack:\n\n```\n// Удаляем обработчик события, чтобы после повторного исполнения предыдущего кода этот обработчик не был добавлен повторно.\nif (module.hot) {\n\tmodule.hot.dispose(() =\u003e {\n\t\tdocument.body.removeEventListener('click', this.someMethod);\n\t});\n}\n```\n\nВ противном случае, обработчик на клик будет добавляться при каждом обновлении, генерируемом с помощью HMR.\n\nТаким же образом надо поступать и с изменением DOM-дерева:\n\n```\nvar sideEffectNode = document.createElement(\"div\");\nsideEffectNode.textContent = \"Side Effect\";\ndocument.body.appendChild(sideEffectNode);\n```\n\nДобавляем:\n\n```\n// Удаляем \u003cdiv\u003e, добавленный в DOM, чтобы после исполнения предыдущего кода этот \u003cdiv\u003e не был добавлен повторно.\nif (module.hot) {\n  module.hot.dispose(function() {\n    sideEffectNode.parentNode.removeChild(sideEffectNode);\n  });\n}\n```\n\n## Структура SASS-файлов\n\nВ Стартере существует следующая структура SASS-файлов:\n\n```\n/sass/\n\t/lib/\t\t\t// Библиотеки и миксины\n\t/pages/\t\t\t// Стили для страниц проекта\n\t\t_main.sass\t// Стили для главной страницы\n\t/parts/\t\t\t// Части или компоненты проекта\n\t\t_controls.sass\t// Контроллы (кнопки, инпуты, чекбоксы, селекты)\n\t\t_footer.sass\t// SASS-реализация футера\n\t\t_popup.sass\t// SASS-реализация попапа\n\t_constants.sass\t\t// Переменные и константы\n\t_fonts.sass\t\t// Подключаемые шрифты\n\t_global.sass\t\t// Стили глобальных блоков\n\t_layout.sass\t\t// Стили лэйаута\n\t_reset.sass\t\t// CSS-reset и обнуление стилей\n\tscreen.sass\t\t// Основной файл, который компилируется в screen.css\n```\n\nДля каждой страницы создается отдельный файл в папке `pages`. Для каждой части или компонента создается отдельный файл в папке `parts`.\n\nВсе подключаемые файлы должны начинаться с одного подчеркивания (`_`).\n\n## Респонсив сетка из 12 колонок\n\nНа проектах можно использовать бутстрапоподобную сетку из 12 колонок.\n\nПримеры использования сетки см. в `index.nunj`, а также на [сайте бутстрапа](http://getbootstrap.com/css/#grid).\n\nЕсли нужно например сделать сетку из 10 колонок, а не из 12, то можно подправить соответствующие миксины в `_layout.sass`. Брейкпоинты можно изменять в `_variables.sass`\n\n## SVG-спрайты\n\nВ стартовом проекте настроена возможность создания SVG-спрайтов с помощью [gulp-svgstore](https://github.com/w0rm/gulp-svgstore), поэтому SVG на сайт лучше добавлять следующим способом:\n\n```\n\u003csvg\u003e\u003cuse xlink:href=\"#icon-some-vector-image\"\u003e\u003c/use\u003e\u003c/svg\u003e\n```\n\nПри этом SVG-файл `some-vector-image.svg` должен находиться в папке `src/media/svg/`. Такому элементу необходимо задать width и height в стилях. Ему также можно менять fill, stroke при условии, что в исходном файле `some-vector-image.svg` у элемента не заданы такие же атрибуты (fill и stroke).\n\n## Растровые спрайты\n\nДля создания простого спрайта из изображений нужно использовать миксин\n\n```\n+s(name)\n```\n\nСледующий миксин для спрайта под ретину. Для него необходимо использовать 2 изображения: простое и в 2 раза больше. Например: `sp.png` и `sp@2x.png`.\n\n```\n+sr(name)\n```\n\nИзображения, которые собираются в спрайт, должны быть в формате `.png` и находится в директории `media/img/sprites/`.\n\n## Инлайн картинок или SVG\n\n\u003cb\u003eВнимание!\u003c/b\u003e Изображения, которые будут инлайниться, должны находится в директории `src/media/img/inline`.\n\n### В SASS\n\nПлагин postcss-assets позволяет инлайнить изображения прямо в код в Base64 кодировке (или в виде кода в случае с SVG):\n\n```\nbackground: inline('sp.png')\n```\n\nТак же позволяет подставить размеры картинки:\n\n```\nwidth: width('sp.png')\n```\n\n```\nheight: height('sp.png')\n```\n\n```\nbackground-size: size('sp.png')\n```\n\n### В Nunjucks-шаблонах\n\n```\n\u003cimg src={% inline 'image.png' %} alt=\"Some image\" /\u003e\n```\n\n## Полезные ссылки\n\n[Синтаксис Nunjucks](https://mozilla.github.io/nunjucks/templating.html).\n\n[Сборка фронтенд-проекта с помощью Gulp](http://habrahabr.ru/post/250569/).\n\n[Адаптивная сетка Twitter Bootstrap](http://getbootstrap.com/css/#grid).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsolarrust%2Fcatchbitcoinfull","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsolarrust%2Fcatchbitcoinfull","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsolarrust%2Fcatchbitcoinfull/lists"}