{"id":13556081,"url":"https://github.com/jacobrask/styledocco","last_synced_at":"2025-05-15T09:08:54.619Z","repository":{"id":2573235,"uuid":"3553459","full_name":"jacobrask/styledocco","owner":"jacobrask","description":"Automatically generate a style guide from your stylesheets.","archived":false,"fork":false,"pushed_at":"2018-02-20T22:37:04.000Z","size":2504,"stargazers_count":1066,"open_issues_count":48,"forks_count":119,"subscribers_count":36,"default_branch":"master","last_synced_at":"2025-04-14T15:00:46.306Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://jacobrask.github.com/styledocco/","language":"JavaScript","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/jacobrask.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":"2012-02-26T17:22:13.000Z","updated_at":"2025-03-11T15:38:16.000Z","dependencies_parsed_at":"2022-08-30T00:40:35.958Z","dependency_job_id":null,"html_url":"https://github.com/jacobrask/styledocco","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacobrask%2Fstyledocco","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacobrask%2Fstyledocco/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacobrask%2Fstyledocco/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacobrask%2Fstyledocco/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jacobrask","download_url":"https://codeload.github.com/jacobrask/styledocco/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253401159,"owners_count":21902616,"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-08-01T12:03:36.819Z","updated_at":"2025-05-15T09:08:49.611Z","avatar_url":"https://github.com/jacobrask.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","others","Style Guide Generators :slot_machine:"],"sub_categories":["Editor's Draft :black_nib:"],"readme":"StyleDocco\n==========\n\nStyleDocco generates documentation and style guide documents from your stylesheets.\n\nStylesheet comments will be parsed through [Markdown](http://en.wikipedia.org/wiki/Markdown) and displayed in a generated HTML document. You can write HTML code prefixed with 4 spaces or between [code fences](http://github.github.com/github-flavored-markdown/) (\u003ccode\u003e```\u003c/code\u003e) in your comments, and StyleDocco show a preview with the styles applied, and displays the example HTML code. \n\nThe previews are rendered in a resizable iframes to make it easy to demonstrate responsive designs at different viewport sizes.\n\nSuggestions, feature requests and bug reports are welcome either at [GitHub](https://github.com/jacobrask/styledocco/issues) or on Twitter ([@jacobrask](https://twitter.com/jacobrask)).\n\n\nInstallation\n------------\n\nStyleDocco requires [Node.js](http://nodejs.org). After installing Node.js, run `npm install -fg styledocco` or clone this repository and run `./bin/styledocco`.\n\nStyleDocco is free and open source software, released under the [MIT license](https://raw.github.com/jacobrask/styledocco/master/LICENSE).\n\n\nUsage\n=====\n\n`styledocco [options] [STYLESHEET(S)]`\n\nOptions\n-------\n\n * `--name`, `-n`      Name of the project\n * `--out`, `-o`       Output directory *(default: \"docs\")*\n * `--preprocessor`    Custom preprocessor command. *(optional)* (ex: `--preprocessor \"~/bin/lessc\"`)\n * `--include`         Include specified CSS and/or JavaScript files in the previews. *(optional)* (ex: `--include mysite.css --include app.js`)\n * `--verbose`         Show log messages when generating the documentation. *(default: false)*\n *                     Stylesheet (or directory of stylesheets) to process.\n\nUsage examples\n--------------\n\nGenerate documentation for *My Project* in the `docs` folder, from the files in the `css` directory.\n\n`styledocco -n \"My Project\" css`\n\nGenerate documentation for *My Project* in the `mydocs` folder, from source files in the `styles` folder. Use the `--compass` option for SASS to make Compass imports available.\n\n`styledocco -n \"My Project\" -o mydocs -s mydocs --preprocessor \"scss --compass\" styles`\n\n\nSyntax\n------\n\n```css\n/* Provides extra visual weight and identifies the primary action in a set of buttons.\n\n    \u003cbutton class=\"btn primary\"\u003ePrimary\u003c/button\u003e */\n.btn.primary {\n    background: blue;\n    color: white;\n}\n```\n\nWould display the description, a rendered button as well as the example HTML code. The CSS will be applied to the preview.\n\nSee the `examples` folder for more in-depth examples.\n\nTips and tricks\n---------------\n\n * StyleDocco will automatically compile any SASS, SCSS, Less or Stylus files before they are applied to the page. You can also enter a custom preprocessor command if you want to pass custom parameters to the preprocessor.\n * If your project includes a `README.md` file, it will be used as the base for an `index.html`.\n * If you don't specify a custom name, StyleDocco will use the name from a `package.json` file if it finds one.\n * Put some whitespace before a comment block to exclude it from the documentation.\n * Level 1 headings will automatically create a new section in the documentation.\n * Add `:hover`, `:focus`, etc as class names in example code and the pseudo class styles will be applied in the preview.\n\n\nChange Log\n==========\n\nv0.6.6 - Jan 28, 2014\n---------------------\n\n * Fix failure to render iframes in new versions of Chrome (#100)\n * Make it an option to minify the code (#106)\n\nv0.6.5 - Nov 17, 2013\n---------------------\n\n * Fix failure to install on some systems (#94)\n\nv0.6.4 - Oct 07, 2013\n---------------------\n\n * Large preprocessor outputs hit the maxBuffer limit (#87)\n * Relative image path is no longer added to data: URLs (#88)\n * Replace path.exists with fs.exists (#92)\n * Can now use a backslash to separate directories on Windows (#95)\n * HTTP URLs in paths now behave correctly (#97)\n\nv0.6.3 - July 09, 2013\n----------------------\n\n * Do not add relative paths to data URLs\n\nv0.6.2 - June 30, 2013\n----------------------\n\n * Find assets recursively in Windows\n * Fail gracefully on no files error\n * Relative url() paths are now preserved\n\nv0.6.1 - August 20, 2012\n------------------------\n\n * Mute all preprocessor errors unless using verbose option\n * Don't try to preprocess SASS partials\n * Design tweaks\n\nv0.6.0 - August 15, 2012\n------------------------\n\n * Remove custom resources option, as client side scripts/styles are vital to the functionality\n * Editable, auto-updating code examples\n * Documentation-wide search\n * Page specific Table of Contents\n\nv0.5.0 - July 23, 2012\n------------------------\n\n * Render previews in sandboxed iframes\n * Resizing of iframes for responsive debugging\n * All processed CSS is included in all previews\n * Allow custom JavaScript and CSS files to be included in previews\n * Updated design with topbar instead of sidebar and new colors\n\nAcknowledgements\n================\n\nA lot of the heavy lifting in StyleDocco is done by the excellent [Marked](https://github.com/chjj/marked) module by Christopher Jeffrey. The original [Docco](https://github.com/jashkenas/docco) by Jeremy Ashkenas and [Knyle Style Sheets](https://github.com/kneath/kss) have also been sources of inspiration for StyleDocco.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjacobrask%2Fstyledocco","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjacobrask%2Fstyledocco","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjacobrask%2Fstyledocco/lists"}