{"id":22615710,"url":"https://github.com/respoke/style","last_synced_at":"2025-10-28T03:35:17.494Z","repository":{"id":23801855,"uuid":"27177890","full_name":"respoke/style","owner":"respoke","description":"Reusable style elements for Respoke web properties","archived":false,"fork":false,"pushed_at":"2016-06-01T19:12:50.000Z","size":213,"stargazers_count":2,"open_issues_count":0,"forks_count":2,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-02-03T10:46:24.600Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.respoke.io","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/respoke.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-11-26T13:24:46.000Z","updated_at":"2016-02-15T17:10:52.000Z","dependencies_parsed_at":"2022-08-22T05:10:59.798Z","dependency_job_id":null,"html_url":"https://github.com/respoke/style","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/respoke%2Fstyle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/respoke%2Fstyle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/respoke%2Fstyle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/respoke%2Fstyle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/respoke","download_url":"https://codeload.github.com/respoke/style/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246122247,"owners_count":20726822,"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-12-08T19:09:09.484Z","updated_at":"2025-10-28T03:35:17.416Z","avatar_url":"https://github.com/respoke.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# styles for Respoke web properties\n\nThis repo has shared styles for Respoke websites.\n\n```bash\n# this format tells NPM to use github.com/respoke/style\nnpm i --save-dev respoke/style\n```\n\n## Stylesheet usage\n\nBe sure to add the include paths to the SASS configuration in your build\nprocess. Otherwise you will need to provide the full path to the file you wish\nto import.\n\n```js\nvar sass = require('gulp-sass');\nvar respokeStyle = require('respoke-style');\n\ngulp.task('sass', function () {\n    return gulp.src('styles')\n        .pipe(sass({\n            includePaths: respokeStyle.includeStylePaths()\n        }));\n});\n```\n\n```scss\n@import 'base';\n\n.my-content {\n    color: $text;\n}\n```\n\nThe basic usage is to just include the `base.scss` file which includes all the\ncomponents, helpers, bourbon, neat, config options, and base element styles.\n(See example above).\n\nTo use Bourbon, Neat, and Respoke variables and helpers without the added cruft\nof the actual styles then just import `respoke-style.scss`.\n\n```scss\n@import 'respoke-style';\n\n.my-content {\n    color: $text;\n}\n\n.my-button {\n    @include button-dark;\n}\n```\n\n### SassDoc generation\n\nTo generate the [SassDoc](http://sassdoc.com/) run the gulp task and open the\ngenerated html file.\n\n```bash\ngulp sassdoc \u0026\u0026 open sassdoc/index.html\n```\n\n## Jade template usage\n\nTo include the provided mixins for Jade just include the mixins.jade file at the\ntop of your template.\n\n```jade\n@include node_modules/respoke-style/mixins\n\ndoctype html\nhtml\n    head\n    body\n        +navbar('dark')\n        p Some custom paragraph text\n```\n\nTo include a shared template you will need to provide the Jade helpers to the\ntemplate compilation method either globally or locally. There is a\n`renderSharedTemplate` method that will output the compiled shared template. It\ncan take an option second `locals` object to pass variables.\n\n```js\nvar jade = require('gulp-jade');\nvar respokeStyle = require('respoke-style');\n\ngulp.task('jade', function () {\n    return gulp.src('templates')\n        .pipe(jade({\n            locals: respokeStyle.templateLocals\n        }))\n});\n\n```\n\n```jade\ndoctype html\nhtml\n    head\n        != renderSharedTemplate('head')\n    body\n        p Some custom paragraph text\n\n        != renderSharedTemplate('footer')\n```\n\n## Assets\n\nThese are files you may want to reuse. You will probably want to copy them\nduring your build. See the example Gruntfile `copy` task.\n\n`./assets/`\n`./assets/images/`\n`./assets/js/`\n\n## Exported paths\n\nSee the list of exported asset paths in `./index.js`.\n\nYou can use these paths as local variables for your SCSS and Jade, or in your\nbuild script. See the example Gruntfile.\n\n```js\nvar respokeStyle = require('respoke-style');\n\nassetPaths = respokeStyle.paths.assets\nassetPaths = respokeStyle.paths.styles\nassetPaths = respokeStyle.paths.templates\n```\n\n## Your project structure\n\nWhen you copy the `./assets` to your local project, you must serve the\n`./assets/js/` folder at the root of your website such that it is at the `/js/`\npath (required by `./templates/head.jade`).\n\n## Example Gruntfile\n\nSee `./SampleGruntfileUsage.js` for an example of building the Respoke styles into one of your projects.\n\n## Style guide\n\nTo view the style guide run the gulp task and open your browser to\n`http://localhost:1236`.\n\n```bash\ngulp style-guide\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frespoke%2Fstyle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frespoke%2Fstyle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frespoke%2Fstyle/lists"}