Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

📖 Improved documentation on modern presets #34083

Merged
merged 4 commits into from
May 3, 2021
Merged

📖 Improved documentation on modern presets #34083

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b6a8732
Improved documentation on modern presets
mszylkowski Apr 29, 2021
e2476bf
Updated writing and gif
mszylkowski Apr 29, 2021
5b90892
Updated text
mszylkowski Apr 29, 2021
46d6a5b
Added warning background color
mszylkowski Apr 30, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions extensions/amp-story/amp-story-grid-layer.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -403,11 +403,11 @@ Example:

#### Modern aspect-ratio

Responsive presets on grid-layers maximize usable screen space and scale assets consistently.
Responsive presets on grid-layers maximize usable screen space for foreground elements and scale assets consistently.

```html
<amp-story-grid-layer preset="2021-background" template="fill">
<amp-img src="cat.jpg" alt="...">
<amp-img src="cat.jpg" layout="fill" alt="...">
</amp-story-grid-layer>
<amp-story-grid-layer preset="2021-foreground">
<h1>This will stay consistent with the bg</h1>
Expand All @@ -424,11 +424,11 @@ The background preset is mostly useful for designing layouts with both backgroun

##### Foreground

Use the `2021-foreground` preset for foreground elements. This anchors foreground layers to pin items, such as logos or footnotes, to the page corners or borders.
Use the `2021-foreground` preset for foreground elements. This layer will always be fully visible and expand to the borders either horizontally or vertically, maximizing the size without cropping. The attribute `anchor` is useful to pin foreground layers to the page corners or borders, such that elements can be positioned relative to those borders or corners (eg: logos or footnotes).
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure if technical writers would want to see "e.g.," rather than "eg:"


##### Background

Use the `2021-background` preset for the background layer. This preset covers the entire screen on all mobile devices with the background asset. It does so without letterboxing and keeps scaling consistent with the foreground elements.
Use the `2021-background` preset for the background layer. This preset covers the entire screen on all mobile phones with the background asset. It does so without letterboxing, and keeps positioning consistent with the foreground elements.
mszylkowski marked this conversation as resolved.
Show resolved Hide resolved
While this technique provides the most consistent user experience, it may crop up to 7% of one or all borders of your background. Keep this in mind when designing and picking your assets.

<div layout="container" width="3" height="2">
Expand Down