RFP block/start

Documentation

This template starts a responsive flex passage block, the most basic type of RFP element. RFP blocks are where the actual content of responsive flex passages are contained. Other elements such as stacks ({{RFP stack/start}}) and shelves ({{RFP shelf/start}}) exist only to provide different ways of arranging blocks.

Usage[]

{{RFP block/start
  |id=
  |class=
  |style=
  |heading=
  |hclass=
  |hstyle=
  |bclass=
  |bstyle=
}}
...
{{RFP block/end}}

Parameters[]

id: The ID for the <div> that contains the entire block.
class: CSS classes in addition to the rfpblock class automatically included for the <div> that contains the entire block. Useful classes include:
- The sizing classes, which should not be used on blocks inside stacks and shelves. For other blocks, unless the block should be full width in all views, one of these sizing classes should be used:
  - 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.
  - 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.
- Special case sizing classes include:
  - rfpnoresize: prevents a block inside a stack from being expanded to fill empty space. It is not recommended to use this on every box in a stack; at least one should be allowed to expand.
  - rfpkeepwide: when on a block inside a shelf, that block remains the full width of the shelf even in the wide view. Otherwise, it'd default to becoming half the shelf's width in wide view. It's important to use this only on elements that would be on the left side in wide view; otherwise, the element will fall to the next row and leave a gap.
- rfpbox: applies a standard visual style appropriate to the wiki, which may include backgrounds, borders, box shadows, and the like.
- rfpdesktopbox: same as above, except the visual style is not applied in the mobile view.
- rfpmobilebox: same as above, except the visual style is not applied in the desktop view.
- rfpmobilecollapsible: In the mobile view, turns the heading into a link that toggles the display of the block's body.
  - A heading must be specified for rfpmobilecollapsible to do anything.
    - Including links within the heading is not recommended. They work, but could be easily fatfingered while trying to collapse or expand the block.
  - expanded can be added to make expanded the default state. Otherwise, the blocks will automatically collapse after the browser signals the page is ready.
  - Mobile collapsing requires Javascript. When Javascript is off, all blocks remain expanded to keep content accessible.
- Some useful classes for alignment are available, which can also be used in hclass and bclass:
  - desktopleft, desktopcenter, and desktopright: apply the respective alignment to the block only in the desktop view.
  - mobileleft, mobilecenter, and mobileright: apply the respective alignment to the block only in the mobile view.
style: Inline CSS styles for the <div> that contains the entire block.
heading: The markup for the heading.
hclass: CSS classes in addition to the heading class automatically included for the <div> that contains the heading.
hstyle: Inline CSS styles for the <div> that contains the heading.
bclass: CSS classes in addition to the body class automatically included for the <div> that contains the body.
bstyle: Inline CSS styles for the <div> that contains the body.
The body content is then placed before {{RFP block/end}}.