Template:RFP/start/doc

This template starts a responsive flex passage, a portion of an article (may be the whole article) that responsively arranges content according to the current browser width on desktop and uses a different layout on mobile that supports collapsible elements.

Usage
...

Parameters

 * : The ID for the  that contains the entire responsive flex passage.
 * : Inline CSS styles for the  that contains the entire responsive flex passage.

Arrangements
In the desktop view, there are three different content arrangements:
 * In the narrow view, content blocks are arranged in a simple, single column.
 * In the medium view, content blocks are arranged in rows containing one to two blocks.
 * In the wide view, content blocks are arranged in rows containing one to three blocks.

Content elements
Content in a responsive flex element is divided up into blocks, stacks, shelves, and sections.
 * Blocks
 * Blocks are the most basic element, the only element that should directly contain content. All other elements should just contain blocks, stacks, or shelves. See RFP block/start for more information.


 * Stacks
 * Stacks are a column of blocks that can be placed anywhere a block would go. Blocks inside a stack get resized dynamically to take up the available space. See RFP stack/start for more information.


 * Shelves
 * Shelves are similar to stacks in being a column of blocks, except that in the widest view, shelves rearrange their blocks into rows of one to two. See RFP shelf/start for more information.


 * Sections
 * Unlike the others, a section is merely conceptual, a way to think about how to arrange content in a responsive flex passage. They are any contiguous groups of blocks where, in all three views, the blocks arrange into full rows. In other words, a proper section doesn't have an empty space in any of the three views.

Element sizing
The templates for blocks, stacks, and shelves all provide a  parameter, and there are a few classes available to control the horizontal sizing in each view:
 * These sizing classes are good for shelves, stacks, and blocks:
 * : specifies full width in both narrow and medium views and two-thirds width in wide view.
 * : specifies full width in both narrow and medium views and half width in wide view.
 * These sizing classes are not recommended for shelves, but are good for stacks and blocks:
 * : specifies full width in both narrow and medium views and one-third width in wide view.
 * : specifies full width in narrow view, half width in medium view, and two-thirds width in wide view.
 * : specifies full width in narrow view and half width in both medium and wide views.
 * : specifies full width in narrow view, half width in medium view, and one-third width in wide view.
 * If no sizing classes are specified, an element will take up full width in all three views.
 * Note that these sizing classes are not intended to be used for any shelves, stacks, or blocks that are inside a shelf or stack themselves. Only the top level of elements should use these sizing classes.

Section examples
This a list of valid section arrangements that can be used to construct a responsive flex passage. Note that while the following examples just use simple blocks, stacks or shelves can be used in those spots instead for even greater flexibility.