Container component

Question

Container component

stein-rockware opened this issue 3 years ago · 0 comments

stein-rockware commented 3 years ago

Provides a simplified responsive grid behavior that is made out of 6 columns.

Provides the following edit dialog options:

Main tab
- Layout that is limited to following column split-up:
  - full-width (1)
  - half | half (3-3)
  - one-third | two-third (2-4)
  - two-third | one-third (4-2)
  - third | third | third (2-2-2)
- Background color
- Background image
- HTML ID

Provides the following page policy (aka design dialog) options:

Allowed components
Default components
Responsive
- Maximal page width in pixels (defaults to 640px)
- Breakpoint below which the layout is made linear (defaults to 480px)
Background
Styles

Requirements:

All components on the page must be placed inside a grid to ensure consistent rendering on email clients.
The grid is not allowed of being nested.
The grid has a fixed number of 6 columns and a limited number of ways to distribute them into 2 or 3 columns (see edit dialog options).

The grid would not allow being nested and would have the following breakpoints:

Above the maximal width configured in the policy (e.g., above 640px): The content doesn't further extend and is centered in the middle of the viewport.
Between the maximal width and the breakpoint width (e.g.: between 640px and 480px): The layout is stretched down to the viewport width.
Below the breakpoint width (e.g., below 480px): The layout breaks into a linear representation where the columns displayed one after the other vertically, and the content continues to be stretched down.

This typically is achieved with the following markup for an example one-third two-third ratio:

<!-- In the page head: -->
<style>
    @media screen and (max-width: 640px) {
        .layout {
            width: 100% !important;
        }
    }
    @media screen and (max-width: 480px) {
        .layout-column {
            display: block !important;
            width: 100% !important;
        }
    }
</style>

<!-- In the page body: -->
<center>
    <table class="layout" width="640" border="0" cellpadding="0" cellspacing="0" role="presentation">
        <tr>
            <td width="33.33%" class="layout-column">
                One Third
            </td>
            <td width="66.67%" class="layout-column">
                Two Third
            </td>
        </tr>
    </table>
</center>

Estimation: S (6 Days)