jensimmons/cssremedy

Suggestion: Body centering (with code suggestion)

Offirmo opened this issue · 4 comments

Offirmo commented

Hi and thanks for the lib!

While admittedly not 100% semantic, centering the body and constraining its width is a top-rated improvement in readability. Since html is all about documents, I feel it's acceptable and welcome.

References:

Here is my suggestion (public domain), which uses modern CSS features and takes into account small and big screens:

body {
	--content-recommended-width: 65ch;
	/* max width + centering = #1 most important styling according to https://jgthms.com/web-design-in-4-minutes/#centering
	 */
	max-width: var(--content-recommended-width);
	margin: 0 max(1ch, (100vw - var(--content-recommended-width))/2); /* intelligent centering with a minimum margin for small screens */
	/* no padding needed since space is provided by this various margins:
	 * vertical: blocks have their own margin, ex. headers, paragraphs...
	 * horizontal: not needed thanks to to the intelligent centering above featuring a minimum margin
	 * see also https://www.miriamsuzanne.com/2022/07/04/body-margin-8px/
	 */
	padding: 0;
}

P.S. thanks @mirisuzanne for bringing me here through https://www.miriamsuzanne.com/2022/07/04/body-margin-8px/

BassOfBass commented

Margins can be set with @media queries for other viewports, no need to complicate it with smart solutions. No need for margin centering either, since <body> is going to be a grid for the purpose of layout.
Neither there is a point in having 100vw, since html and body are 100% screen width in this stylesheet anyway.
The biggest mistake it makes a quite big assumption about the markup, such as <body> being width-limited rather than any of its children. In case of frontend frameworks there is additional level of nesting for the root element and the markup before might or might not matter depending on specifics.

  • 👍1
Offirmo commented

Thanks @BassOfBass for giving feedback on the technical side of my suggestion.

I think my suggestions of limiting the main content's width and centering it still holds. Feel free to suggest a better implementation.

jssteinberg commented

I would say centering is unique from theme to theme, not something that should be decided in low-level ‘remedy’ code.

  • 👍4
mirisuzanne commented

This could be a great addition to a 'starter' style sheet (like a classless css framework) - but I agree it's too design-specific and opinionated for a browser default. Ideally the styles we provide here are usable baselines on the majority of sites, without needing additional overrides. While many sites use centering and explicit line-lengths in some way, it is not nearly a universal need, especially applied to the body specifically.

  • 👍2