Template:RFP/start
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-67size
rfp100-100-50size
& rfp100-100-50size
rfp100-100-67size
& rfp100-100-33size
rfp100-50-33size
& rfp100-50-67size
rfp100-50-50size
& rfp100-50-50size
rfp100-50-67size
& rfp100-50-33size
rfp100-100-33size
& rfp100-50-33size
& rfp100-50-33size
rfp100-50-33size
& rfp100-50-33size
& rfp100-100-33size
The above documentation is transcluded from Template:RFP/start/doc. (edit | history)