Atomic Layout

Atomic Layout is a spatial distribution library for React. It uses CSS Grid to define layout areas and render them as React components. This pattern encourages the separation of elements and spacing, preventing contextual implementations and boosting maintenance of layouts. You control the spacing between the areas in a dedicated layer called Composition. Since the position and spacing is contextless that way, you achieve ultimate separation of concerns and boost maintenance of your components. To understand why Atomic Layout is beneficial for you take a look at some of the practices it encourages. What elements are rendered and what is the relation between them are now two independent paradigms in your code. Forget about CSS hacks and contextual tweaks. We build applications with composability in mind. Adopted from the design world, we, engineers, can wield the power of composition because it's an actual React component.