📖 bento-base-carousel documentation#35645
Conversation
| Each Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles. | ||
|
|
||
| ```html | ||
| <link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/amp-base-carousel-1.0.css"> | ||
| ``` | ||
|
|
||
| Alternatively, you may also make the light-weight pre-upgrade styles available inline: | ||
|
|
||
| ```html | ||
| <style data-bento-boilerplate> | ||
| bento-base-carousel { | ||
| display: block; | ||
| overflow: hidden; | ||
| position: relative; | ||
| } | ||
| </style> | ||
| ``` |
There was a problem hiding this comment.
I think we need to mention this information in the first paragraph as well, since it must be included. Maybe:
You must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See Layout and style.
There was a problem hiding this comment.
Wait, is this untrue for P/React?
There was a problem hiding this comment.
For Preact, as long as they give explicit dimensions i.e. width and height on the component, they don't need this.
There was a problem hiding this comment.
Is the You must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See Layout and style. recommendation for the line to go under the ### Web component header?
There was a problem hiding this comment.
Thanks for the clarification - moving it under the ### Web component header is perfect
Context:
extensions/amp-base-carousel/amp-base-carousel.mdcurrently contains both AMP-specific and Bento documentation under "Standalone usage" for the1.0version ofamp-base-carousel.This PR creates a new
README.md(alternative naming suggestions welcome) file insideextensions/amp-base-carousel/1.0with two parts:Web Componentwhich takes the "Standalone usage" portions from the originalamp-base-carousel.mdPreact/React Componentwhich duplicates much of the existing documentation with minor updates with regards to casing (attributes -> props) and API differences.The purpose of this PR is to iron out formatting details across the three modes of usage, including the best way to represent documentation across usage modes. Another purpose is to provide a
README.mdfile that is completely relevant to and publishable on npm.Note: This PR does not actually rename the Bento AMP implementation of
amp-bento-carouseltobento-base-carouselorBaseCarouseltoBentoBaseCarousel. The former is handled in #34820 and the latter should be handled separately.