embedded all the flex examples in the page and removed all the images… #37232
Conversation
… that were no longer used
dletorey
requested review from
estelle and
bsmth
and removed request for
a team and
estelle
github-actions
bot
added
Content:Learn:CSS
|
Preview URLs (comment last updated: 2024-12-18 12:33:21) |
| One issue that arises when you have a fixed width or height in your layout is that eventually your flexbox children will overflow their container, breaking the layout. Have a look at our [flexbox-wrap0.html](https://github.com/mdn/learning-area/blob/main/css/css-layout/flexbox/flexbox-wrap0.html) example and try [viewing it live](https://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox-wrap0.html) (take a local copy of this file now if you want to follow along with this example): | ||
| One issue that arises when you have a fixed width or height in your layout is that eventually your flexbox children will overflow their container, breaking the layout. In the following example we have 12 {{htmlelement("section")}}s, which don't fit so there is a horizontal scroll. | ||
|
|
||
| ```html hidden live-sample___flex-wrap_0 |
There was a problem hiding this comment.
Apologies for the drive-by, but I think this is a usability regression. In the current page there's a link to the complete source, so anyone can look at it, copy it, play with it etc. And the GitHub browser is a reasonable way of browsing source code.
In this version a user can't see this code and isn't presented with a link to it. Yes, they can see the code if they click "Play", but it's still not a good experience: the HTML is 125 lines long, and in the Play editor they can only see 6 lines at a time, it's just not possible to get an overview of what the code is doing.
In general I think hidden is a dangerous attribute to use in examples, for this reason. Users see the result, but they can't see the code that makes that result work.
Although I know GH live samples have some issues of their own, I think in cases like this, where the code is quite long, it's probably the best choice as far as users are concerned.
There was a problem hiding this comment.
While moving these examples I did find myself discussing this in my own head too.
There was a problem hiding this comment.
What would be quite cool would be if normal live samples could use external JS/CSS/HTML sources. Then, say, you could put something like flex-wrapping.html next to your index.md, and include a link to it (just like https://github.com/mdn/learning-area/blob/main/css/css-layout/flexbox/flexbox-wrap0.html but in /content), so people could see it in GitHub, but there would still only be one copy of the source, inside content.
…tent into flexbox-examples-work
|
This pull request has merge conflicts that must be resolved before it can be merged. |
|
Replaced by PR #37523 |
Description
Motivation