Consistent spacing based on breakpoint.
Let’s say we have a paragraph with some content.
We may want to give some top and bottom margin as well as left and right padding to space it from other elements on the page. If it doesn’t look great when we drop to smaller screen sizes, we simply add a media query... or two.... or three....
Box takes care of all of that for us.
Our Stitches code would look something like this (visually, very similar to Styled-Components):
const $Paragraph = styled('p', {
box: [{ property: 'my' }, { property: 'px' }],
});
Let’s unpack this.
box takes either a single object with a property key, or an array of objects.
my and px are utilities for margin top/bottom and padding left/right. If you want to be more specific, ml, mr, pl, and pr work as well.
Remember spacing.js? Box will then map through those values and automatically calculate the padding and margin values for each breakpoint!
What if you want it to size down at a different rate? No problem - box also accepts a multiplier argument:
const $Paragraph = styled('p', {
box: { property: 'my', multiplier: 0.5 },
});
Now, box is pretty useful on it’s own, but it plays a much greater role when it comes to building pages. Check out the Pinion documentation for a deeper dive.