MODX Docs layout

First, I’m very happy to see that the MODX Docs got a nice redesign (for a while now already), so thanks a lot for everybody putting in work there!

I wanted to ask though, why there is so much unused space. Especially tables with properties, attributes, etc. need a ton of scrolling and therefore it’s hard to get a quick glance on something.

I have a 2K Monitor and here is what it looks like to me on FF 71.0:


I’m quite confident that this is worked on already, but just in case I thought, I would bring it up.

1 Like

As I am also a person with a 2k display, I understand where you are coming from, but I would say that this is a design standard. The width of the content area / line-length matches; or comes close to, what is considered “optimal” width for easy reading / consumption.

That said, I think it would be great to add a toggle for people who don’t mind, or would prefer to have the content full width. :wink:

1 Like

Well there might be something like a “Design Standard”, but we are in 2019, screens get bigger and we are for sure out of the 4:3 aspect ratio which is aimed at here. I would not even call the Docs proper responsive as that’s supposed to go both ways. Rather inefficient and not really representing the awesome CMS it’s supposed to support here :wink:

(Sorry, don’t want to rant here, just my opinion and I hope somebody gets in here and is like “Yep, relax, we’re working on it!”)

Ease of legibility has nothing to do with the date. Nor does it have anything to do with old aspect ratios. It has to do with readability and accessibility. It’s 2019 after all.

It’s a single CSS property, how difficult can that be to toggle? :roll_eyes:

I get your point, but I still want to partially disagree. As things develop over time, also standards and the way people perceive things develop. Of course there shouldn’t be endless lines of text but especially the tables are just not very well readable…

Also I’m quite sure it wasn’t as bad in the old Docs, because I just noticed this since the redesign.

+1 for a toggle! :+1:

I think you may be talking in apples and oranges. The design standard concerning optimal line-length for readability of content relates to paragraph and heading widths, not table display widths. In wide-screen displays while we still need paragraph widths to be constrained, we can take advantage of the extra real estate by displaying tables at full width of the screen.

I haven’t looked at the CSS for the docs but I assume that ALL content is dropped into a column that has a width set. Instead that column could be allowed to expand to use the available window, and the various page elements can have rules applied to give them comfortable line-lengths – p {max-width: 45em;} or whatever works for the content.

Here’s how it might look with width constrained paragraphs in a column that expands to fill the screen. The tables are responsive so they will expand to the column width. I’ve nudged the table font-size down a bit too since I think the aim of a table is to display as much info as possible in a single glance…

In order to do this I hid the TOC column in the right – maybe that content could be absolutely positioned instead. That would allow it to remain in view as you scroll…

1 Like

It isn’t, but contributions are more than welcome.

That’s indeed how it’s currently built. Which makes allowing just tables to expand beyond the container not very straightforward. Would likely require redoing a significant part of the CSS and templates, plus extensive testing on different viewports and pages.

There’s information at DocsApp/public/template at master · modxorg/DocsApp · GitHub describing how the assets tooling/workflow is set up, and the relevant template for documentation pages is at DocsApp/templates/documentation.twig at 1f454bb001fa61e23101bea6f7d2f1258b7b2a23 · modxorg/DocsApp · GitHub, if anyone wants to dive in and send a proposal.

1 Like

At the risk of sounding completely incompetent, I did try already to set up in order to be able contribute - and failed miserably. May have another go over the holidays, but honestly it seemed too complicated.

I’m happy to help if you get stuck with setting up the app.

2 Likes

Thanks Mark! i’ll try again sometime in the next few weeks.

3 Likes