Update content sizes

[craigcook]

We're tinkering with revising content width tokens:

$content-sm: '432px'
$content-md: '688px'
$content-lg: '928px'
$content-xl: '1152px'

[stephaniehobson]

One of these uses a 64px width grid spacer. If that's not a typo we need to document why and under what circumstances.

[stephaniehobson]

In the scenario where we have content that is restricted to a medium width but displaying on a desktop sized monitor, what is the appropriate amount of grid spacing?

Put another way: if there was a large layout 4 column component above a medium layout 2 column layout would they both have the same amount of space between columns?

[craigcook]

That's a good question. And put even another way, should the gutter width be determined by the viewport width or the content width?

My gut tells me narrower content should have narrower gutters, regardless of the viewport breakpoint. But that means columns won't always align if we're mixing containers on a page. If maintaining alignment is more important, then gutters should be set by the viewport breakpoint regardless of content width.

This is probably a question for @justinkropp and @dzingeek and it might be worth mocking it up or prototyping it both ways to see what feels right.

[stephaniehobson]

Note: this issue is still open because the grid spacing tokens haven't been added yet.

[stephaniehobson]

So what do we want to call these new tokens?

I've been using this locally:

$h-grid-xs: 64px;
$h-grid-lg: 80px;

h = horizontal
xs/lg = what break point the size takes effect at.

We could also go with $h-grid and $h-grid-lg, where one is the default and the other is modified at that media query.

... or, you know, something entirely different from this. @craigcook thoughts?

[craigcook]

Space between columns is usually called a gutter in graphic design, so we could do:

$gutter-md: 64px;
$gutter-lg: 80px;

But thinking about it more, that's probably too "jargony." I think a more jargon-neutral version would be:

$column-gap-md: 64px;
$column-gap-lg: 80px;

With the shirt-sizing convention I like to think of any "md" value as the norm and we scale either up or down from there. But with mobile-first we end up treating a small screen as the norm and only scaling up... but I don't know if that should dictate what we name our tokens. So it may not match the media query if we're using "md" tokens even on "sm" viewports, but I feel like it makes the token clearer. It's "the medium size" not "the size used on medium screens", if that makes sense.

Could we foresee a need for a smaller column gap unit? Should we add something like $column-gap-sm: 32px; just to round out the list, or is it a bad idea to make tokens until we know we need them?

[saumyasrivastava08]

can i work?