Amphtml: Add a generic responsive container component to AMP

[mrjoro]

Background

AMP HTML supports various layouts such as aspect-ratio-based responsive layout which is very useful. Other useful layouts such as responsive-height are also in the works.

Motivation

Currently AMP layouts are only supported on AMP elements such a amp-img, amp-carousel, etc.. but these layouts can be useful on their own.

amp-layout component will bring the power of AMP layout attribute to a generic multi-purpose container element that can be used independent of other AMP elements.

For instance:

<amp-layout class="card" layout=responsive width=2 height=1>
   This card container will always maintain its 2x1 aspect ratio!
</amp-layout>

.card {
  background-color: red;
}

Implementation strategy

• [ ] Create a new amp-layout extended component. Only allow FIXED, FIXED_HEIGHT, RESPONSIVE, FILL, FLEX_ITEM layouts (hint: isLayoutSizeDefined)
• [ ] Add validator file for validation rules.
• [ ] Add documentation
• [ ] Add example

Step by step

• [ ] Claim this issue by adding a comment below. Please only claim this bug if you plan on starting work in the next day or so.
• [ ] If you aren't too familiar with Git/GitHub, see the Getting Started End-to-End Guide for an intro to Git & GitHub, and how to get a copy of the code. You can also refer to the Quick Start Guide for the necessary setup steps with less explanation than the End-to-End guide.
• [ ] Follow the instructions for building AMP.
• [ ] Read up on How to build an AMP extension
• [ ] [Create a Git branch](https://github.com/ampproject/amphtml/blob/master/contributing/getting-started-e2e.md#create-a-git-branch) for making your changes.
• [ ] Follow the Implementation strategy from above.
• [ ] [Commit your changes](https://github.com/ampproject/amphtml/blob/master/contributing/getting-started-e2e.md#edit-files-and-commit-them) frequently.
• [ ] [Push your changes to GitHub](https://github.com/ampproject/amphtml/blob/master/contributing/getting-started-e2e.md#push-your-changes-to-your-github-fork).
• [ ] [Create a Pull Request](https://github.com/ampproject/amphtml/blob/master/contributing/getting-started-e2e.md#send-a-pull-request-ie-request-a-code-review). Mention closes Issue #10018 in the description.
• [ ] Assign @aghassemi as the reviewer
• [ ] [Respond to your reviewer's comments](https://github.com/ampproject/amphtml/blob/master/contributing/getting-started-e2e.md#respond-to-pull-request-comments) (if any).

Once approved, your changes will be merged. ⚡⚡⚡Congrats on making your first contribution to the AMP Project!⚡⚡⚡ You'll be able to see it live across the web soon!

Thanks, and we hope to see more contributions from you soon.

Questions?

If you have questions ask in this issue or on your Pull Request (mentioning @aghassemi) or see the How to get help section of the Getting Started guide.

[subhankar-panda]

Hi,
I'd love to work on this for my first OSS contribution, has it been claimed yet?

[mrjoro]

@subhankar-panda not yet, so it looks like this one is yours. :) Welcome to open source!

@aghassemi will be the best contact to answer questions you might have about the issue.

If you have any questions feel free to ask them here, or you can also reach me, @aghassemi and others on Slack (sign up if you haven't already).

I've also invited to you to join ampproject on GitHub; once you've done that we'll be able to assign this issue to you.

[mrjoro]

Hi @subhankar-panda; do you have any updates on your PR? Let us know if you need any help.

[subhankar-panda]

Hey, I finished work on it a couple of days back, I'll send the PR within the next couple of days!