{"id":15285347,"url":"https://github.com/vebersol/neutron","last_synced_at":"2026-03-16T02:32:26.754Z","repository":{"id":57310452,"uuid":"59313550","full_name":"vebersol/neutron","owner":"vebersol","description":"An atomic design based system","archived":false,"fork":false,"pushed_at":"2019-08-30T19:01:46.000Z","size":6767,"stargazers_count":8,"open_issues_count":2,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-16T17:27:21.224Z","etag":null,"topics":["atomic-design","handlebars","javascript","nodejs"],"latest_commit_sha":null,"homepage":"http://vebersol.github.io/neutron/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vebersol.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":"2016-05-20T17:31:30.000Z","updated_at":"2019-11-06T13:17:59.000Z","dependencies_parsed_at":"2022-09-02T02:52:14.226Z","dependency_job_id":null,"html_url":"https://github.com/vebersol/neutron","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"purl":"pkg:github/vebersol/neutron","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vebersol%2Fneutron","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vebersol%2Fneutron/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vebersol%2Fneutron/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vebersol%2Fneutron/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vebersol","download_url":"https://codeload.github.com/vebersol/neutron/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vebersol%2Fneutron/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269527571,"owners_count":24432442,"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","status":"online","status_checked_at":"2025-08-09T02:00:10.424Z","response_time":111,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["atomic-design","handlebars","javascript","nodejs"],"created_at":"2024-09-30T15:04:17.086Z","updated_at":"2026-03-16T02:32:26.712Z","avatar_url":"https://github.com/vebersol.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Neutron Atomic Design Tool\n\nNeutron is an Atomic Design tool based in [Brad Frost's concept](http://bradfrost.com/blog/post/atomic-web-design/) it is inspired in [Patternlab](http://patternlab.io/).\n\n## Features\n\n* Navigation isn't iframe based. It creates a single, stand alone script and css that loads with your pattern, without any interference to your Scripts or CSS\n* Patterns markup: Handlebars.js\n* Easy to document your patterns with Markdown\n* Search your patterns quickly\n* Easy to customize Neutron features with your own CSS\n* Multiple CSS themes\n* QRCode generator\n* Loads your markup in Handlebars, HTML output and documentation under user action - not attached to the code\n* Add status to patterns. Default: in progress, done, deprecated\n\n## Getting Started\n\nTo run **Neutron** you just need:\n\nInstall it globally\n\n    $ npm install neutron-adt -g\n\nInstall it in your development path\n\n    $ neutron install\n\nAfter successfully load your own implementation, just run:\n\n    $ neutron run -w -s\n\nIt will compile your patterns, copy your assets and automatically load a [browsersync](https://www.browsersync.io/) server in *http://localhost:3000* and watch your changes\n\n## Tips\n\nCheck the items below to understand **Neutron's** functionalities and structure.\n\n* Write patterns - TBD\n* Document your patterns - TBD\n* Project structure - TBD\n* Keyboard shortcuts - TBD\n* Add status to a pattern - TBD\n\n### Add status to a pattern\n\nIt’s useful for team work to define the status of every particular pattern to allow/disallow usage by other team members. To add status to your pattern, simply do the following:\n\n1. Create a json file with the same name of your pattern. Example: atoms/text/headline.hbs should be atoms/text/headline.json \n2. You may include everything you need as data to your pattern and include the property **_status**. Example:\n\n    ```json\n    {\n      \"_status\": \"in-progress\",\n      \"...\": \"...\"\n    }\n    ```\n3. The standard keywords included by default are: *in-progress*, *done* and *deprecated*. The tool automatically replaces the (-) by a whitespace.\n4. To customize your own keywords, just add your *custom-keyword* as *_status* in your json file and create the following css rules to add styles:\n    ```css\n\t.neutron-custom-keyword::before {\n\t  color: /* any color */;\n\t  /* what ever you want to do */\n\t}\n\t\n\t#neutron-status .neutron-custom-keyword {\n\t\tbackground-color: /* any color */;\n\t\t/* what ever you want to do */\n\t}\n    ```\n\n### Using helpers\n\nNeutron has some native helpers:\n\n**contentFor:** It allows you to write a block in a pattern and print directly in layout through **outputFor** helper. Example [here](https://github.com/vebersol/neutron/blob/master/src/patterns/templates/ajax.hbs#L5) and [here](https://github.com/vebersol/neutron/blob/master/src/layouts/clean.hbs#L10).\n\n**outputFor:** It prints the block that has been created in contentFor.\n\n#### Creating custom helpers\n\nHandlebars suports custom helpers natively, and there's a way to create these custom helpers in Neutron. In your source folder, there might be a folder named _helpers_. All javascript files that follows the correct structure will be loaded as helpers. Check the sample file [here](https://github.com/vebersol/neutron/tree/master/src/helpers/index.js).\n\nRead in Handlebars page how to create custom helpers [here](http://handlebarsjs.com/expressions.html#helpers) and [here](http://handlebarsjs.com/block_helpers.html).\n\n## Command line\n\nNeutron has a friendly command line setup.\n\nTODO: Add more documentation.\n\n* **neutron run**: Renders your patterns, generates the navigation module and copy your assets folder.\n* **neutron run -s**: Renders your patterns, generates the navigation module, copy your assets folder and runs a server.\n* **neutron run -w**: Renders your patterns, generates the navigation module, copy your assets folder and watch your files.\n* **neutron run -w -s**: Do everything as documented above.\n* **neutron install**: Install neutron in your current path, including a dummy example.\n* **neutron install -c** Install neutron in your current path, without dummy contents. It's an empty run ready for development:\n\n## Prerequisities\n\n**Neutron** requires [node.js](https://nodejs.org/).\n\n## Running the tests\n\nTODO\n\n## Contributing\n\nPlease, contribute! We'd love to have you as a contributor! Before contribue, read the blog post [10 tips for better Pull Requests](http://blog.ploeh.dk/2015/01/15/10-tips-for-better-pull-requests/) to provide good Pull Requests.\n\n## Authors\n\n* **André Dias** - *Support in navigation module* - [andrehNSFW](https://github.com/andrehNSFW)\n* **Mateus Vahl** - *Support in core* - [mateuspv](https://github.com/mateuspv)\n* **Vinícius Ebersol** - *Initial work* - [vebersol](https://github.com/vebersol)\n\nSee also the list of [contributors](https://github.com/vebersol/neutron/graphs/contributors) and [members](https://github.com/vebersol/neutron/network/members) who participated in this project.\n\n## License\n\nThis project is licensed under the GNU GENERAL PUBLIC LICENSE - see the [LICENSE](LICENSE) file for details\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvebersol%2Fneutron","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvebersol%2Fneutron","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvebersol%2Fneutron/lists"}