Define general layout stuff

[craigcook]

In olden days of yore, way back in 2016, we used a 12 column floated grid system with a span() mixin to set widths based on how many columns a box should span when it floated left. We have CSS Grid now, and honestly it always felt like the 12 column system was too printerly (when do you ever have something one column wide?). We'll still need to float things for older browsers but can use grid for modern ones.

So far we've been talking about getting away from a many-column system and thinking more in terms of plain old box sizes with a few standard units like "quarter", "third", "half" etc along with standard gutter widths. We could define these as variables/tokens and possibly some mixins but we haven't really dug into the particulars yet. So let's dig into it.

[craigcook]

Parts of this are covered in #86

This issue when originally opened was deliberately vague because we didn't know everything it would entail at the time and knew it would work itself out. Well we have indeed figured out and defined a lot of the individual layout parts along the way, we just haven't documented them in this issue. That's on me.

What we've defined:

• Standard breakpoints for viewports.
• Standard content widths at those breakpoints.
• Standard units for spacing (padding and margins).
• A simple fluid grid system based on fractions (quarters and thirds).

As broad and vague as this issue is I think we've achieved the spirit of "defining general layout stuff" so I'm happy to consider this completed.