Template:RFP/start

From Immure Wiki
Jump to: navigation, search
Template-info.png Documentation

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.

single element with no sizing class
Narrow
Block 1
Medium
Block 1
Wide
Block 1
rfp100-100-33size & rfp100-100-67size
Narrow
Block 1
Block 2
Medium
Block 1
Block 2
Wide
Block 1
Block 2
rfp100-100-50size & rfp100-100-50size
Narrow
Block 1
Block 2
Medium
Block 1
Block 2
Wide
Block 1
Block 2
rfp100-100-67size & rfp100-100-33size
Narrow
Block 1
Block 2
Medium
Block 1
Block 2
Wide
Block 1
Block 2
rfp100-50-33size & rfp100-50-67size
Narrow
Block 1
Block 2
Medium
Block 1
Block 2
Wide
Block 1
Block 2
rfp100-50-50size & rfp100-50-50size
Narrow
Block 1
Block 2
Medium
Block 1
Block 2
Wide
Block 1
Block 2
rfp100-50-67size & rfp100-50-33size
Narrow
Block 1
Block 2
Medium
Block 1
Block 2
Wide
Block 1
Block 2
rfp100-100-33size & rfp100-50-33size & rfp100-50-33size
Narrow
Block 1
Block 2
Block 3
Medium
Block 1
Block 2
Block 3
Wide
Block 1
Block 2
Block 3
rfp100-50-33size & rfp100-50-33size & rfp100-100-33size
Narrow
Block 1
Block 2
Block 3
Medium
Block 1
Block 2
Block 3
Wide
Block 1
Block 2
Block 3