layout (grid?) - where should responsibility lie for the space between components on a page?
Right now, the space between components on a page seems to be achieved by having margin-bottom
on each of the individual atoms. (Is this correct?) Therefore each individual component bears the responsibility for how much space exists between itself and the component below it on a page.
If a specific page calls for more/less margin than an atomic component has by itself, then the normal margin-bottom
needs to be overriden. Having layout responsibility being shared across multiple levels of nesting makes it a little harder to reason about what needs overriding.
Also, how would we achieve spacing between the top of a page, or the navbar, and the first component on a page (e.g. a TextField
)? The responsibility could lie with:
- the
TextField
on this specific page e.g. addingmargin-top
to thisTextField
only - adding
margin-bottom
to whatever is above it (such as the navbar) - use flexbox/grid/etc to wrap all components and use
space-around
No matter which we choose, responsibility for the spacing between the navbar and the TextField lies at the page level, but spacing between the TextField and the component below it lies with the TextField itself. Would it not be easier to reason about, if the spacing between components lived on the same level?
What do you guys think of leaving margins off each individual component & therefore leaving the responsibility for spacing between each component to the page level (& molecule level)?