# Motivation
In the era of erupting component-focused development, we often underestimate spacing as a powerful relation distributing tool. Rigid frameworks have taken place of what might have been a simple, implementation vision of spacing, and layout composition that it empowers.
Inspired by [Atomic design](http://bradfrost.com/blog/post/atomic-web-design), Atomic Layout comes in to bring developers a physical grasp over such previously empirical concepts as spacing and composition. Apart from challenging the interface development process, it also focuses on making it fast and standardized, resulting into **layout that is easy to understand and maintain**.
## Core principles
### Semantics
Atomic Layout values semantics. That's why it favors terms like "Composition" instead of "Grid", "Row", or "Column", unlike most of the other solutions.
Semantically, grid is a composition of rows and columns. In fact, any UI element is a composition of its sub-elements, making composition a far more superior and non-restricting concept than explicit grid/row/column.
Encouraging declarative layouts, Atomic Layout leverages the concept of composition over grid or flexbox, which are rather implementation details over how the layout is achieved. With Composition you express an intent and semantical combination of layout elements, not coupling them with how they are being implemented. Think of it as a `React.Component` for layout definition: it's a common pattern to declare any layout piece.
### Physical composition
In Atomic Layout Composition is a physical component you can render. It acts as a CSS Grid wrapper internally, but conceptually provides a dedicated layer to control the composition of its children.
```jsx
import { Composition } from 'atomic-layout'
{/* Areas components generated from the "areas" prop */}
{({ Icon, Text }) => (
<>
......
)}
```
### Nested composition
Any interface element can be a combination of other elements. Since we wield a composition as a physical component, we can have elements composition by nesting their respective components.
```jsx
import { Composition } from 'atomic-layout'
{/* Defining "Button" as a composition */}
const Button = () => (
{...}
)
export const CardItem = () => (
{({ Actions }) => (
<>
{/* Rendering "Button" as a composite */}
)}
)
```
### Responsive
Having responsive design has become a must in the modern web development. In fact, it is such an essential part of a layout composition that it makes no sense to decouple them. Although its usage is not obligatory, Atomic Layout comes with responsive behavior built-in. That negates the need for additional CSS to define conditional layout areas, or responsive CSS properties.
{% content-ref url="recipes/responsive-layout" %}
[responsive-layout](https://redd.gitbook.io/atomic-layout/recipes/responsive-layout)
{% endcontent-ref %}
## Comparison
Ideas encouraged by Atomic Layout may be hard to understand at first. However, by comparing it to one of the most popular frameworks for building user interfaces you can immediately get the high-level overview of what Atomic Layout is about.
### Bootstrap
In Bootstrap you have a grid system that sits on top of your page and serves as a ruler to snap the elements to. Once the amount of grid columns is specified, you start placing some components relatively to those columns.
That kind of grid cannot be applied to each individual component you render, thus forcing you to write additional CSS to implement what appears but a regular composition. This is a primary problem Atomic layout aims to resolve.
### Atomic Layout
In Atomic Layout **anything** **can be a composition and a composite at the same time**. A grid is a composition of rows and columns, and a header is a composition of logo, menu and actions.
> ### **It is like a grid that goes all the way down, to the furthest leaves of an interface tree.**
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://redd.gitbook.io/atomic-layout/motivation.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.