CSS tools are broken by the redesign

[wbamberg]

These pages: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool

...no longer fit in the space allocated to them in the page.

Long term these tools should (IMO) be supported in Yari directly, not hacked in as iframes embedding GitHub pages.

[schalkneethling]

Long term these tools should (IMO) be supported in Yari directly, not hacked in as iframes embedding GitHub pages.

That is definitely on the roadmap. I am going to look into this and see if we can at least improve the current situation. Thanks for filing @wbamberg

[wbamberg]

Any update on this?

[caugner]

I looked into the issues:

1. The Border-image generator can be fitted by (a) increasing the iframe height to 1260px (or 1240px after removing the padding-bottom from the body), and (b) reducing the width of the div#preview element, e.g. 243x243 like the subject:
2. The Box-shadow generator can be fitted by increasing the iframe height to 980px (or 960px after removing the margin-top from the body).
3. The Color picker tool can not easily be fitted, but the best would probably to convert it from its 2-column layout into a single-column layout.

PS: The tools are located in mdn/css-examples.

[caugner]

Long term these tools should (IMO) be supported in Yari directly, not hacked in as iframes embedding GitHub pages.

@wbamberg Can you elaborate what you mean by Yari supporting these tools directly?

[wbamberg]

I mean that at the moment these are (architecturally and organizationally) part of content: they're implemented using the code sample mechanism and maintained by (technically) writers. But they are not code samples, they are features of a website.

So (for example):

• they don't integrate nicely into the website design in any way (colors, fonts, layout)
• they are constrained to have content width when they would work better full width (and potentially be responsive and work on smaller screen).
• they're entirely big blocks of code, that ought to be maintained as code. Nobody in the content team has the knowledge to maintain them at the moment (see for instance https://github.com/mdn/content/issues/21582 which I doubt we are equipped to fix)

They should be treated as purely part of the website, like the homepage or the search page, maintained by engineers within Yari and presented to users as tools, not content pages. Look at how w3schools has a link to a color picker on every page, presented as a separate thing from content pages. And the picker is integrated properly into the site's design, and is responsive on smaller screens. It's so much better than what we have.

(I should add that they were IIRC done a long time ago by a GSOC person under @teoli2003 's supervision, and the person did a really great job IMO)

[Rumyra]

There is a consensus to keep these around - I believe @schalkneethling suggested the following:

• Copy from content
• Update
• Add to a separate repo where they can be served statically
• Remove from content and update links

How does that sound?

[wbamberg]

There is a consensus to keep these around - I believe @schalkneethling suggested the following:

• Copy from content

• Update

• Add to a separate repo where they can be served statically

• Remove from content and update links

How does that sound?

I'm not sure I understand this plan. The tools are already in a separate repo (at least, separate from mdn/content) - I moved them into css-examples when we markdownified MDN. When we say "Add to a separate repo where they can be served statically" - served how? As GH pages? But they are already GH pages.

Personally, as I said above, I think they should be part of yari, since otherwise it is hard to integrate them into the website design (for example, having good contrasting colours or making it responsive). But if we don't want to do that, I'm not sure how much it matters whether they are in css-examples or some other repo.

I'm not sure what "update" covers. Does it mean, fixing the breakage reported in this issue and in https://github.com/mdn/css-examples/issues/157? Does it also mean making them responsive and making the color scheme work with the MDN themes? I suppose the main thing there is to have the resources to do this work.

So I suppose there are really three options?

1. do nothing/retire them
2. make them part of Yari
3. keep them in a separate repo, built as GitHub pages, but find the time to update them so they aren't broken

So is the plan (3)? That would be OK. Certainly better than where we are now.

[Rumyra]

Yes pretty much @wbamberg - @schalkneethling I believe suggested finding community members who would like to practise their coding to update, whilst that might be the long game, I do like the idea

[estelle]

I submitted a PR to remove the tools from the sidebar; I don't think we should be promoting the tools until the issues addressed in this PR are addressed.

Note: there are some issues in css-examples for the border-image tool

[caugner]

Related:

• https://github.com/mdn/css-examples/issues/178
• https://github.com/mdn/css-examples/issues/179
• https://github.com/mdn/css-examples/issues/180
• https://github.com/mdn/css-examples/issues/181