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.

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

Already on GitHub? Sign in to your account

馃摉 Improved documentation on modern presets #34083

Merged
merged 4 commits into from May 3, 2021

Conversation

mszylkowski
Copy link
Contributor

@mszylkowski mszylkowski commented Apr 29, 2021

Added more documentation to explain how the grid-layer presets work.

There is some confusion on:

  • What is being maximized
  • What devices are fully covered by the preset background (mobile devices -> mobile phones)
  • How the foreground layer works

Closes #34011

@mszylkowski mszylkowski requested a review from Enriqe April 29, 2021 16:11
@mszylkowski mszylkowski self-assigned this Apr 29, 2021
@mszylkowski mszylkowski added this to In progress in wg-stories Sprint via automation Apr 29, 2021
@mszylkowski mszylkowski marked this pull request as ready for review April 29, 2021 16:14
@amp-owners-bot
Copy link

amp-owners-bot bot commented Apr 29, 2021

Hey @gmajoulet, @newmuis, @Enriqe! These files were changed:

extensions/amp-story/amp-story-grid-layer.md
extensions/amp-story/img/preset_story_scaled.gif

@@ -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).

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:"

Copy link
Contributor

@CrystalOnScript CrystalOnScript left a comment

Choose a reason for hiding this comment

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

+1 to Alan's suggestions, otherwise lgtm

Copy link

@alankent alankent left a comment

Choose a reason for hiding this comment

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

LGTM! (Looks good to me!)

@mszylkowski mszylkowski merged commit 955f851 into ampproject:main May 3, 2021
wg-stories Sprint automation moved this from In progress to Done May 3, 2021
@mszylkowski mszylkowski deleted the aspectratio_docs branch May 3, 2021 17:35
rochapablo pushed a commit to rochapablo/amphtml that referenced this pull request Aug 30, 2021
* Improved documentation on modern presets

* Updated writing and gif

* Updated text

* Added warning background color
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Development

Successfully merging this pull request may close these issues.

Documentation on 2021-background preset slightly inaccurate for web stories
4 participants