Template:Main page/doc

From Saintapedia
Jump to navigation Jump to search

This template is used to create an IMP Main Page. It uses Module:Main page to arrange a series of Template:Main page boxes in a CSS grid.

Simple explanation

The layout is made using keywords arranged in a grid. This grid has 3 columns on desktop-width screens, 2 columns on tablet, and 1 on mobile. Each can have as many rows as you want. Each keyword represents the same section and can span multiple rows and/or columns, but must form a contiguous rectangle of any dimension (1x1, 1x2, 2x2, 2x3, etc.).

For example, the following input to desktop:

welcome welcome welcome
about links links
about contribute contribute

would produce a grid resembling the following:

welcome welcome welcome
about links links
about contribute contribute

Where welcome is the contents of Template:Main page/welcome, about is the contents of Template:Main page/about, and so on. See Template:Main page box for more information about creating your own boxes.

If you enter a keyword that does not have a corresponding template already, you'll be prompted to create one when saving or previewing the page.

For additional hints and information, see the comments that came on your main page or ask a wiki.gg staff member for help.

Technical explanation

For the CSS savvy, this section explains how it works a bit under the hood.

The input to desktop, tablet, and mobile create CSS variables which are then used as the value of grid-template-areas in media queries for screen widths >=1350px, >=990px, and <990px. The id of the boxes should be equal to the subpage name, which is then used by the module to find the template, as well as by the box templates to assign them a CSS id of mp-box-<keyword>. Since these keywords are used directly in the grid layout, they must follow the rules of <custom-ident> naming.

TemplateData

Creates an IMP Main Page.

Template parameters

This template prefers block formatting of parameters.

ParameterDescriptionTypeStatus
Desktopdesktop

The layout for wide screens

Stringrequired
Tablettablet

The layout for mid-width screens

Stringrequired
Mobilemobile

The layout for narrow screens

Stringrequired