Hello Neutron!

Welcome to Neutron Atomic Design Tool. These pages are automatically generated as a static site.

How to use Neutron?

To use Neutron is quite simple. At the left/right corner you may see a button, the button. To activate Neutron Navigation, you just need to press the key n or click/touch on this button.

The Neutron navigation bar consists in:

Search Button - opens the search input and find your desired pattern
Code Frame Button - opens a frame below containing your HTML and Handlebars markup, including the pattern documentation. It also shows the dependencies and reverse dependencies list.
QR Code Button - opens a lightbox with QR Code to easily load it in your mobile device.
Settings Button - opens a lightbox with basic information and settings.
Main menu including all patterns: Atoms, Molecules, Organisms, Templates, Pages

Shortcuts

Key	Description
n	Show Neutron navigation bar
f	Find patterns
c	Toggle code frame (when in a pattern)
q	Toggle QR Code window
s	Toggle settings window
m	Focus first menu item to enable keyboard navigation

To read more about Neutron, please check our README.

Neutron is attached by default in all generated pages as a standalone script, it means you must have Javascript enabled by default.

Hello Neutron!

How to use Neutron?

Shortcuts

Read More