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[]
{{RFP/start
|id=
|style=
}}
...
{{RFP/end}}
Parameters[]
id: The ID for the<div>that contains the entire responsive flex passage.style: Inline CSS styles for the<div>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 class 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:
rfp100-100-67size: specifies full width in both narrow and medium views and two-thirds width in wide view.rfp100-100-50size: 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:
rfp100-100-33size: specifies full width in both narrow and medium views and one-third width in wide view.rfp100-50-67size: specifies full width in narrow view, half width in medium view, and two-thirds width in wide view.rfp100-50-50size: specifies full width in narrow view and half width in both medium and wide views.rfp100-50-33size: 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.
rfp100-100-33size & rfp100-100-67sizerfp100-100-50size & rfp100-100-50sizerfp100-100-67size & rfp100-100-33sizerfp100-50-33size & rfp100-50-67sizerfp100-50-50size & rfp100-50-50sizerfp100-50-67size & rfp100-50-33sizerfp100-100-33size & rfp100-50-33size & rfp100-50-33sizerfp100-50-33size & rfp100-50-33size & rfp100-100-33sizeThe above documentation is transcluded from Template:RFP/start/doc. (edit | history)