Why is the page content width 688px?

[erondpowell]

I'm taking a look at some css specs and noticed that the width of VitePress content is 688 px.
This default content width seemed quite random to me.

Is there a "design secret" reason for using 688 specifically?
versus like 650, 675 or 700?

[kiaking]

First, the numbers are always even numbers because of my preference.

The largest breakpoint is at 1440px. When window hits this width, the whole layout gets fixed.

At this point, we want 32px padding on let and right side of window. So, the actual max width for content is 1440 - 32 - 32 = 1376.

From here, we have Sidebar which is 240px. That makes 1376 - 240 = 1136. So, the main doc content area is 1136px now.

And we have Aside section (Table of contents and such) which is 224px. So the remaining doc body area is 1136 - 224 = 912px.

And then I wanted to have the same padding for left and right of the doc body, so that have the same distance to sidebar and aside. And that is max 112px. So, 912 - 112 - 112 = 688.

[erondpowell]

Wow, interesting. So it was as a result of choosing negative space and margins.

I would never have thought of it with "margins in mind first".

Is there a specific philosophy/design principle behind focusing on margins? Or also just preference? Doing 2-3 quick calculations on those numbers, I couldn't seem to identify a bootstrap style "grid" or any other "least common denominators".

(And thanks for sharing btw)

[kiaking]

Is there a specific philosophy/design principle behind focusing on margins?

Not that I'm aware of 👀 I guess it's my preference. I usually want to have a good number for the whole layout width (in this case max 1440px window size) because it's much easier for responsive design.

Doing 2-3 quick calculations on those numbers, I couldn't seem to identify a bootstrap style "grid" or any other "least common denominators".

I don't use "Number Fixed" grid system like bootstrap. I do have a grid system in my mind when I design, but I don't like them to be fixed into code because:

1. For example sidebar looks awesome with 240px in almost all window width. I don't want it to resize based on window width (would happen if we set width to something like 3/12 grid).
2. "Visually" layout is not the same as programatic number. For example, padding between texts, and padding between boxes "looks" different, even they have the exact same px of paddings. For example, padding 16px between 2 text would "look" slightly larger than padding between 16px between 1 text and 1 box. Using grid system will make it harder to adjust just a few px of these differences.

This is the same reason why I don't use atomic css like Tailwind too. Because it would make it hard to adjust very tiny design details like 1px padding.

But these are pretty much an obsession though 😅 I don't think lots of people would care so much anyway. But I think when we have time to spare, from the design perspective, I like it to be 100% controllable.

[erondpowell]

Interesting way to go about it. And I can see why the grid is sub-optimal for your style.
Anyway, thanks for taking the time to share this with me!

[Goozoon]

was thinking to open a new discussion, but let me add it rather here.

Did you see that the page width is changing when you switch from short page (no page scroll on the right) to long page (with scrolls)
If you click back and forth, you see the changes. (alpha 29)

[ZanzyTHEbar]

Continuing this thread, as i have an issue related to this exact topic.

Why is there so much white-space around the SideBar at 1440px and up widths?

We tried to fix this, by setting the --vp-layout-max-width to 2560 but this broke everything at 1080p.

On my 1440p monitor (all default CSS):

This white space on the left is highly annoying and there is no way to fix it.

[kiaking]

Because that is how this design works 👍 If you need big adjustment, just copy and paste all of theme stuff and adjust the component it self instead of trying to adjust it with CSS vars.

[ZanzyTHEbar]

What do you mean theme stuff

[erondpowell]

@ZanzyTHEbar
https://vitepress.vuejs.org/guide/theme-introduction#using-a-custom-theme
https://vitepress.vuejs.org/guide/theme-introduction#extending-the-default-theme

In your case, I'm guessing you'll want to just extend the default.

[you-hengh]

Continue this topic, I tried to modify the display area of the vitepress, because I have a 4K resolution (3840 × 2160) display, and the default vitepress display method greatly wastes the space layout, so I tried to modify it without destroying the original, as shown in the following link:

https://bddxg.top/article/project-init/%E8%84%9A%E6%89%8B%E6%9E%B6/Vite%E7%AC%94%E8%AE%B0.html

[lazarusA]

@you-hengh what did you change and how? It looks great the way you did it.

[you-hengh]

@you-hengh what did you change and how? It looks great the way you did it.

My goodness, I have modified this layout for a long time. Fortunately, I recorded my modification at that time. You can refer to the content of this link. As you can see, I am a Chinese, so you can use the translation function of your browser to view my blog.
url: https://bddxg.top/article/note/vitepress%E4%BC%98%E5%8C%96/%E4%B8%80%E4%BA%9B%E7%BB%86%E8%8A%82%E4%B8%8A%E7%9A%84%E4%BC%98%E5%8C%96.html#%E6%96%87%E6%A1%A3%E9%A1%B5%E9%9D%A2%E8%B0%83%E6%95%B4-%E5%8A%A0%E5%AE%BD

[lazarusA]

Thanks a lot!