Neutron is an Atomic Design tool based in Brad Frost's concept it is inspired in Patternlab.
- 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
- Patterns markup: Handlebars.js
- Easy to document your patterns with Markdown
- Search your patterns quickly
- Easy to customize Neutron features with your own CSS
- Multiple CSS themes
- QRCode generator
- Loads your markup in Handlebars, HTML output and documentation under user action - not attached to the code
- Add status to patterns. Default: in progress, done, deprecated
To run Neutron you just need:
Install it globally
$ npm install neutron-adt -g
Install it in your development path
$ neutron install
After successfully load your own implementation, just run:
$ neutron run -w -s
It will compile your patterns, copy your assets and automatically load a browsersync server in https://localhost:3000 and watch your changes
Check the items below to understand Neutron's functionalities and structure.
- Write patterns - TBD
- Document your patterns - TBD
- Project structure - TBD
- Keyboard shortcuts - TBD
- Add status to a pattern - TBD
It’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:
-
Create a json file with the same name of your pattern. Example: atoms/text/headline.hbs should be atoms/text/headline.json
-
You may include everything you need as data to your pattern and include the property _status. Example:
{ "_status": "in-progress", "...": "..." }
-
The standard keywords included by default are: in-progress, done and deprecated. The tool automatically replaces the (-) by a whitespace.
-
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:
.neutron-custom-keyword::before { color: /* any color */; /* what ever you want to do */ } #neutron-status .neutron-custom-keyword { background-color: /* any color */; /* what ever you want to do */ }
Neutron has a friendly command line setup.
TODO: Add more documentation.
- neutron run: Renders your patterns, generates the navigation module and copy your assets folder.
- neutron run -s: Renders your patterns, generates the navigation module, copy your assets folder and runs a server.
- neutron run -w: Renders your patterns, generates the navigation module, copy your assets folder and watch your files.
- neutron run -w -s: Do everything as documented above.
- neutron install: Install neutron in your current path, including a dummy example.
- neutron install -c Install neutron in your current path, without dummy contents. It's an empty run ready for development:
Neutron requires node.js.
TODO
Please, contribute! We'd love to have you as a contributor! Before contribue, read the blog post 10 tips for better Pull Requests to provide good Pull Requests.
- André Dias - Support in navigation module - andrehNSFW
- Mateus Vahl - Support in core - mateuspv
- Vinícius Ebersol - Initial work - vebersol
See also the list of contributors and members who participated in this project.
This project is licensed under the GNU GENERAL PUBLIC LICENSE - see the LICENSE file for details