Size-Spacing thinking and implementation approach in Atomic design suggested by Brad Frost in Responsive design

Question

I understand it is very abstract asking, but I am unable to visualize space( padding, margin) & size ( width, height) when following atomic design. I could understand intent of atom, molecules , organisms, but where should I keep my padding , margins, widths so that it could be scalable and responsive. At what layer component I should decide for responsive design approach and sizing related properties in atomic design?

Answer 1

The final paragraph of this section from the Atomic Design book makes it clear that

Atomic design has nothing to do with web-specific subjects like CSS or JavaScript architecture.

and

Atomic design deals with crafting user interface design systems irrespective of the technology used to create them.

But the whole point of atomic design is to be able to manage complexity, right? So we don't really want all the styling and spacing to be handled in a single CSS file at the page level, because that results in a large complex file which is hard to maintain.

I imagine that each component in the design (atoms, molecules, organisms) may need to consider styling and spacing in several ways:

• style which is intrinsic to the component and managed completely internally
• style which is controlled via explicit properties exposed by the component
• style which is automatically inherited from default values (a stylesheet) determined by a parent

I think the answer to your question is that all layers may need to consider responsive design. A search molecule consisting of an input box atom and a button atom may need to render itself differently on a narrow screen, for example. Perhaps the input box atom and the button atom don't need to consider responsive behaviour, but there might be other atoms which would need to. However, I am far from an expert in this area, having only read about Atomic Design just now for the first time.

Answer 2

Any component larger than an atom manages the relationships between other components. So the spacing between atoms within a molecule is determined by the molecule, the spacing between molecules is determined by whatever template those molecules are in, etc.

(Padding — the spacing within a component between its edges and its content — would be part of a component, even for an atom.)

In terms of responsiveness, this gets into specific technologies, which @brett-donald’s answer rightly cautions against in thinking about atomic design more generally. That said, if you’re using CSS you can use things like container queries and viewport units at any level, as appropriate.