{"id":13426666,"url":"https://github.com/styledown/styledown","last_synced_at":"2025-05-16T10:06:41.922Z","repository":{"id":14526843,"uuid":"17241211","full_name":"styledown/styledown","owner":"styledown","description":"Markdown-based styleguide generator","archived":false,"fork":false,"pushed_at":"2017-07-21T02:42:52.000Z","size":1200,"stargazers_count":669,"open_issues_count":23,"forks_count":59,"subscribers_count":22,"default_branch":"master","last_synced_at":"2025-05-07T16:47:10.536Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/styledown.png","metadata":{"files":{"readme":"Readme.md","changelog":"History.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-02-27T07:57:42.000Z","updated_at":"2025-01-24T02:08:29.000Z","dependencies_parsed_at":"2022-09-19T09:41:25.633Z","dependency_job_id":null,"html_url":"https://github.com/styledown/styledown","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/styledown%2Fstyledown","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/styledown%2Fstyledown/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/styledown%2Fstyledown/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/styledown%2Fstyledown/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/styledown","download_url":"https://codeload.github.com/styledown/styledown/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254509476,"owners_count":22082891,"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-07-31T00:01:40.582Z","updated_at":"2025-05-16T10:06:41.904Z","avatar_url":"https://github.com/styledown.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Style Guide Generators :slot_machine:"],"sub_categories":["Editor's Draft :black_nib:"],"readme":"Styledown\n=========\n\nWrite maintainable CSS styleguides efficiently using a Markdown.\n**[See example ▸][example]**\n\n[![Example](https://cdn.rawgit.com/styledown/styledown/81a1d9c/examples/screenshot.png)][example]\n\n[![Status](http://img.shields.io/travis/styledown/styledown/master.svg?style=flat)](https://travis-ci.org/styledown/styledown \"See test builds\")\n\nInstallation\n------------\n\n``` bash\n$ npm install -g styledown\n$ styledown --help\n```\n\n[![npm version](http://img.shields.io/npm/v/styledown.svg?style=flat)](https://npmjs.org/package/styledown \"View this project on npm\")\n\n[example]: http://cdn.rawgit.com/styledown/styledown/v1.0.2/examples/bootstrap/index.html\n\nHow it works\n------------\n\nStyledown is made to work in most web development setups. It doesn't favor any \nframework or language or any preprocessor.\n\n * [Document][doc] your CSS files with inline comments, or as a separate `.md` file.\n * Create a file with styleguide [configuration][conf].\n * Invoke `styledown *.css \u003e styleguide.html`.\n * Enjoy your styleguide! Read more about the [format][fmt].\n\n[doc]: docs/Documenting.md\n[conf]: docs/Configuration.md\n[fmt]: docs/Format.md\n\nQuickstart guide\n----------------\n\nHere's a generic guide on getting started with Styledown on any project. We're\ngonna assume that you're using Sass and that your project bundles all CSS files\ninto one file.\n\nLet's assume that your files are in `css/`, and that your final styleguide will\nbe in `public/styleguide.html`.\n\n```\n                    Example setup\n\n.----------------------.     .---------------------.\n| css/                 |     |                     |\n|     config.md        |     |  public/            |\n|     button.scss      | ==\u003e |    styleguide.html  |\n|     forms.scss       |     |                     |\n|     whatever.scss    |     |                     |\n'----------------------'     '---------------------'\n```\n\n#### Step 1: Document\n\nDocument your project's stylesheets with inline comments, or as separate `.md`\nfiles.\n\n```css\n/**\n * Component name:\n * `.your-component-here` - documentation on what your\n * component is goes here. Markdown is encouraged.\n *\n *     @example\n *     div.your-component-here\n *       h3 Sample code\n *       p goes here\n */\n\n.your-component-here {\n  display: block;\n  ...\n}\n```\n\nRead more: **[Documenting ▸](docs/Documenting.md)**\n\n#### Step 2: Configure\n\nMake a file, let's call it `config.md`. (`styledown --conf \u003e config.md`) This\nlets you define what will be in the output head/body.\n\n```markdown\n# Styleguide options\n\n### Head\n\n    link(rel=\"stylesheet\" href=\"/assets/application.css\")\n    link(rel='stylesheet' href='https://cdn.rawgit.com/styledown/styledown/v1.0.2/data/styledown.css')\n    script(src='https://cdn.rawgit.com/styledown/styledown/v1.0.2/data/styledown.js')\n\n### Body\n\n    h1 My Awesome Styleguides\n    div#styleguides(sg-content)\n```\n\nThe first one (`application.css`) should point to your project's concatenated\nstylesheets. The second and third one (`styledown.css` and `styledown.js`)\npoint to the default Styledown CSS/JS files.\n\nRead more: **[Configuration ▸](docs/Configuration.md)**\n\n#### Step 3: Build\n\nInvoke `styledown` to generate an HTML file. (Make sure that the extras.css is\npassed on the end, since anything after the \"Styleguide options\" heading is ignored.)\n\n```bash\n$ styledown css/*.css css/config.md \u003e public/styleguides.html\n```\n\n#### Enjoy!\n\nNow open `public/styleguides.html` in your browser.\n\nUsage\n-----\n\nStyledown generates `.html` styleguides. It can take CSS files or Markdown \nfiles, or a combination of the two.\n\n__Inline CSS mode:__ Parses comments from CSS files. This is what happens when \nyou pass .css, .sass, .scss, .less and .styl files.\n\n```\n$ styledown *.css \u003e styleguide.html\n```\n\n__Markdown mode:__ Takes Markdown files.\n\n```\n$ styledown *.md \u003e styleguide.html\n```\n\nMarkup format\n-------------\n\nRead more: **[Markup format ▸](docs/Format.md)**\n\n## :copyright:\n\n**Styledown** © 2013+, Rico Sta. Cruz. Released under the [MIT License].\u003cbr\u003e\nAuthored and maintained by Rico Sta. Cruz with help from [contributors].\n\n\u003e [ricostacruz.com](http://ricostacruz.com) \u0026nbsp;\u0026middot;\u0026nbsp;\n\u003e GitHub [@rstacruz](https://github.com/rstacruz) \u0026nbsp;\u0026middot;\u0026nbsp;\n\u003e Twitter [@rstacruz](https://twitter.com/rstacruz)\n\n[MIT License]: http://mit-license.org/\n[contributors]: http://github.com/styledown/styledown/contributors\n[highlight.js]: http://highlightjs.org/\n[Jade]: http://jade-lang.com/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstyledown%2Fstyledown","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstyledown%2Fstyledown","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstyledown%2Fstyledown/lists"}