Template:Front page/doc

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

This is a basic responsive front page design that adapts to the available width of the browser by rearranging UP TO nine sections as follows:

               Narrow     Medium       Wide
                |A|       |A| |D|    |  A  | |D|
                |B|       |B| |E|    |B| |C| | |
                |C|       |C| |G|    |  E  | | |
                |D|       |F| |H|    |  F  | |I|
                |E|       | | |I|    |G| |H| | |
                |F|
                |G|
                |H|
                |I|

LAYOUT NOTES:

  • Most sections can be left blank, but it is highly recommended that at least A and D have content.
  • Sections B and C are intended mostly for boxes with links and will automatically switch from one column in medium view to two columns in wide view. Thus, B and C should either BOTH be blank or BOTH have content. Otherwise, things will look odd in the wide display. If there isn't enough for two columns, using section A or F for the content is recommended instead.
  • Section E is a special "side-switcher" to help balance the main page between medium and wide views. In wide view, it goes left, which may be shorter due to B and C becoming two columns. In medium view, it goes right, which may be shorter due to B and C being only one column. A weakness of section E is that it needs content that adapts well to both wide and narrow columns.
  • Sections G and H are also "side-switchers", but also function like B and C in that they line up in a single column to the right in medium view, and in two columns to the left in wide view. They should also either only be BOTH blank or BOTH have content; otherwise, consider using section E.

Much of the layout and appearance is determined through styles defined in these pages:

  • MediaWiki:Hydradark.css (for the desktop view)
  • MediaWiki:Mobile.css (for the mobile view)

This is the documentation page, it should be transcluded into the main template page. See Template:Doc for more information.