ampproject / ampproject/amp-react-prototype

Components and AMP layout rules

Open
#35 0 comments 0 reactions 0 assignees View on GitHub
TBD
Dominant language
JavaScript
Stars
36
Forks
6
PR merge metrics
No merged PRs in 30d

Description

Currently AMP elements are structured like this:

```
<- AmpElement (custom element wrapper)
<- defines layout/size
<- BaseElement (implementation)
<- adheres to the layout defined by AmpElement
```

Some of the most critical layout styles are:
- `display: block|etc` (but not "inline");
- proxies for width and height;
- `position: relative|absolute|etc` (but not "static");
- `overflow: hidden`.

React components follow AMP's `BaseElement` layer which means that they accept layout, but normally do not define their own static layout.

Besides layout, `AmpElement` is also responsible for showing placeholder and loading indicator. This is especially important since the placeholder and loading indicator are shown this way even before the `BaseElement` implementation script has been downloaded.

To still allow static layout in the React/AMP layer, we could provide `AmpLayout` component that could implement layout/placeholder/loading-indicator features via composition.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.