{"id":16860469,"url":"https://github.com/webpro/component-styleguide","last_synced_at":"2025-10-23T21:38:01.977Z","repository":{"id":28219517,"uuid":"31723745","full_name":"webpro/component-styleguide","owner":"webpro","description":"Simple styleguide framework","archived":false,"fork":false,"pushed_at":"2017-11-03T08:31:57.000Z","size":2487,"stargazers_count":121,"open_issues_count":0,"forks_count":18,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-02-27T18:27:04.842Z","etag":null,"topics":[],"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/webpro.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}},"created_at":"2015-03-05T16:32:41.000Z","updated_at":"2025-01-21T20:25:13.000Z","dependencies_parsed_at":"2022-09-04T16:51:04.712Z","dependency_job_id":null,"html_url":"https://github.com/webpro/component-styleguide","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/webpro%2Fcomponent-styleguide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpro%2Fcomponent-styleguide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpro%2Fcomponent-styleguide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpro%2Fcomponent-styleguide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webpro","download_url":"https://codeload.github.com/webpro/component-styleguide/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243846984,"owners_count":20357297,"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-13T14:24:25.410Z","updated_at":"2025-10-23T21:38:01.882Z","avatar_url":"https://github.com/webpro.png","language":"JavaScript","readme":"# Component Styleguide\n\n## Introduction\n\nSimple styleguide framework. Install [component-styleguide](https://www.npmjs.com/package/component-styleguide) into your styleguide project, and it will stay out of your way. It's inspired by [http://patternlab.io](http://patternlab.io), but is fundamentally different. And, I would say, much more flexible.\n\n## What is it?\n\nSimple. You start out with a blank project. Your codebase contains just your own HTML templates and CSS stylesheets (and JavaScript if you want to). Put your files in some (configurable) directories, and there you have it.\n\nSee [component-styleguide-example](http://github.com/webpro/component-styleguide-example) for an example setup (you could use this project as a boilerplate), and a [live running example](https://component-styleguide.now.sh).\n\nYou can use it as a development server, and/or host it somewhere as a Node service.\n\n## Example Screenshot\n\n![image](screenshot.png)\n\n## Installation Steps\n\n### 1. Install component-styleguide\n\n    npm install component-styleguide --save\n\n### 2. Structure\n\nCreate a directory structure, like this:\n\n    .\n    ├── components\n    │   ├── atoms\n    │   ├── molecules\n    │   └── organisms\n    └── data\n\n### 3. Start\n\nWrite a minimal Node script (say `index.js`):\n\n    var styleguide = require('component-styleguide');\n    styleguide();\n\nAnd run it: `node index.js`.\n\nThe styleguide is now running at [http://localhost:3000](http://localhost:3000).\n\n#### 4. Build Components\n\nPut templates and partials in the `components` directory and subdirectories (e.g. `atoms`, `molecules`, and `organisms`, but this is not mandatory). They should be files ending with `.html` and contain HTML snippets or Handlebars templates.\n\nHere is a screencast of a quick \u0026 dirty installation:\n\n![Installation](installation.gif)\n\nAnd here's the result in the browser:\n\n![Hello World](hello-world.gif)\n\n## Configuration\n\nYou can work with the default settings straight away, but you might want to customize some things. By default:\n\n* Use `atoms`, `molecules`, and `organisms`, `templates` and `pages`, and they will show up in that order and as an icon. But you can name the directories any way you like.\n* The extension `html` is expected, but you can configure any other extension.\n* If you need [stub data](#stub-data) to feed to your templates, you can put `*.json` files in the `/data` directory.\n* To use your stylesheets, put filenames in the `stylesheets` array, and make sure these files are/end up in the `/compiled` directory (also configurable).\n* Same for `scripts`.\n\nTo specify alternative settings (showing default values here):\n\n    styleguide({\n        components: './components',\n        ext: 'html',\n        data: './data',\n        staticLocalDir: './compiled',\n        staticPath: '/compiled',\n        stylesheets: ['stylesheet.css'],\n        scripts: ['bundle.js'],\n    });\n\n## Command Line Interface\n\nAlternatively, the styleguide can be started directly from the CLI without any scripting involved:\n\n    styleguide\n\nHere's an example with default settings:\n\n    styleguide --components components --ext html --data data\n\nYou would need to either install it globally (i.e. `npm install -g component-styleguide`), or use it from a `package.json` [script](https://docs.npmjs.com/misc/scripts).\n\n## Details\n\n### Handlebars\n\n[Handlebars](http://handlebarsjs.com) is used as the template engine.\n\n### Partials\n\nEach template is automatically registered as a partial (e.g. you can reuse your `{{\u003e atoms/component}}` in templates).\n\n### Stub data\n\nAll \"data\" files are concatenated into one \"context\" for the templates. E.g. `users.json` containing `[]` and `profile.json` containing `{}` will result in context data for the templates:\n\n    {\n       \"users\": [],\n       \"profile\": {}\n    }\n\nNow, the `{{#users}}` collection can be iterated over in any template.\n\nIf a there is a JSON file with the same name as the HTML file next to it, its data will be loaded\nin context data in priority over other data.\n\nIn this example, `header.html` will get data from `header.json`:\n\n```\nmolecules\n  header.html\n  header.json\n```\n\n### CSS \u0026 JS\n\nYou can organize and compile your CSS and JavaScript in any way you want, as long as they end up in e.g. `/compiled` (the `staticLocalDir`) to serve them with the components. I think it's a good idea to work directly in this folder, or compile SASS/LESS/... source files into e.g. `compiled/stylesheet.css` and configure it as `stylesheets: ['stylesheet.css']`.\n\n## Doh, yet another styleguide framework!?\n\nSince I didn't like the approach of most styleguide tools, I created something I actually enjoy to use. It stays out of my way, so I can focus on the components.\n\nSome solutions generate a styleguide from comments in the CSS. But I like to have separate templates, maybe some stub data, maybe some JavaScript. Other tools provide a boilerplate project, which may work fine at first, but it is hard to change or update the underlying styleguide framework later on.\n\nAs a Node.js dependency, features and bugs can be dealt with separately. You only need to update the `component-styleguide` dependency (`npm update`), without having to fork a repository and/or merge upstream changes, and it will happily continue to just serve your templates and static assets. Simple.\n\n## License\n\n[MIT](http://webpro.mit-license.org)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebpro%2Fcomponent-styleguide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebpro%2Fcomponent-styleguide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebpro%2Fcomponent-styleguide/lists"}