Atomic.Fusion BestPractice

would like to build a new Demo-Page with different orientation and target audience. (Stakeholders and existing customers who are interested in a change and new customers who want to be impressed)

For this it would be great to integrate Atomic.Fusion and Fusion.BestPractice as a «showcase» for use this way.

But first I have to figure out the «Atomic.Fusion way to do».
@mficzel’s blog-article Atomic.Fusion is great, but also leaves some questions as to how this can best be implemented in practice. (a kind of Atomic.Fusion.BestPractice).

Links to public resources for study

  • Do you know some resources (git/or somewhere else) about Atomic.Fusion in Practice - to study and find bestPractice?

Next steps

Would great to use and fill this Topic as main thread to find a practical way to use Atomic.Fusion!

If resources are missing:


The Blog-Post explains the use of «mapping» and the separation of «Presentation».
There is a code expample for «Presentational components» and «Mapping components» but in section «Resource Colocation» the image shows only one Gallery.fusion file.


  • Is the separation mapping|presentation only in code-base in the same fusion-file?
  • Or how it could be done in two seperated files? Any name-conventions existing for?

Component Aggregation:

In the Blog-Post is written «Presentational components can solve this (lack of reusability on CSS and JS level) by moving from CSS and JS up to the Fusion component… Classes and scripts are used only inside of a single presentional component»


  • Do I have to do this as developer? (define component-namespaced id’s, class-names, classes and scripts)
  • Or will Atomic-Fusion Plugin looks for with some kind of magic?

Atom - Molecule - Organism - Template Neos.RealWorld Example:

I don’t have any real experience with Atomic design. There are even more question marks related to Neos.
In the image above there are folders, but I’m curious about their content and the type of partitioning of nodeTypes.


  • Do you know some other Resources: practical (public code) or maybe theoretical (but with deeper example) in a Neos-centered POV?
  • Or do you know an easy to understand breakdown-styleguide (bestPractice-Advice) of the individual NodeType-parts?

Found all for study in :

@mad there will be a Talk at the conference “Tasty Atomic.Fusion recipes for your website”