MediaWiki/Skins/Pivot and Foreground Compared
Pivot and Foreground Skins Compared
The Foreground Skin was one of the first custom skins for MediaWiki to use the Zurb Foundation CSS Framework.
Foreground development has been ongoing, and version 2.x was an upgrade to use Foundation 5.
The Foreground Project page does not showcase all of the features of Foundation used by this skin so some CSS components may be available even if they are not demonstrated.
The Foreground Skin places the menu, or Sidebar, across the top of the page. Page content width is defined by the 12-column Grid. However, when using Foreground there seems to be a considerable area of white space on both sides of the page.
The Pivot Skin was released more recently and implemented Zurb Foundation 5. The Pivot Project Page demonstrates more components than the Foundation Project page.
Pivot retains the menu, or Sidebar, on the left of the screen - as shown here, as this site is currently using Pivot.
The Pivot Skin also makes more of the page width available, with less white space than Foreground.
To change from Foreground to Pivot is quite simple, provided the page code has been upgraded to the syntax used by Foundation 5. The issues relate to the way the CSS Framework is coded, not the Skin.
Foundation 5 has already been superseded and Zurb has changed some syntax used in Foundation 6, so upgrading either Foreground or Pivot will involve checking every MediaWiki article to ensure that the content is displayed correctly.
An overview of the benefits and features of using the Foundation CSS Framework, made possible by both Foreground and Pivot skins, is provided below.
Responsive Web Design
In the article What is Responsive Web Design? the w3schools states that "Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones)."
Achieving this goal is easy when using the mobile-first CSS framework by the Zurb Foundation.
- The Foreground Skin (version 2.x) uses Foundation 5.
- The Pivot Skin also uses Foundation 5.
Zurb continues to improve it's products and Foundation 6 was released in 2018, so expect ongoing improvements in the future.
Note that there are other responsive skins for MediaWiki, and there are also other CSS frameworks - the main competitor is Bootstrap. There are several MediaWiki skins which use Bootstrap. The benefit of being a responsive skin would apply to each of these modern Skins.
Manuals and Links
What is Responsive Web Design?
Foundation 5: Getting Started
Bootstrap
Page Content Uses HTML
MediaWiki supports most HTML tags but in traditional skins supplied with MediaWiki, pages are authored using wikitext. MediaWiki was designed that way so that content authors would not need to be proficient with either HTML or cascading style sheets (CSS).
So is using HTML a benefit? I think so and prefer to write content with HTML tags included as I go - there is no word-processor style editor, so a page is developed in text and viewed as the final product when it is previewed or saved.
It is possible to write content in an HTML editor and copy and paste the content into a MediaWiki page. However, unless the Editor you use has been provided with the Foundation CSS Framework (which can be downloaded and installed) the content won't be formatted correctly.
Overall, MediaWiki developers are moving towards Skins which support HTML5 and CSS3 to produce responsive websites, and Foreground was one of the leaders in that direction; Pivot is an improvement; and others may develop this trend.
Content can be positioned using a Grid
One of the most impressive features of the Foundation CSS Framework is a 12-column grid which can be used to position content without prior knowledge of CSS.
This feature is one of the reasons I have chosen to use the Pivot Skin.
Without a Grid the simplest way to position items on a page is by using a table. That is regarded as a bad practice. A table should hold tabular content, not force positioning of page items. So, a Grid with rows and columns, the ability to offset (indent) columns, combine columns, and place buttons where you want them is a very useful feature.
The button adjacent links to a page showcasing the features of the Grid.
Access to components and styles defined by the Foundation CSS Framework
The freedom to use pre-configured items like buttons, panels and tabs without prior knowledge of CSS is definitely a benefit!
These features are described more fully in the article Foundation CSS Framework on MediaWiki.
In addition, the Foundation CSS Framework includes support for FontAwesome which is described on the FontAwesome website.
Both the Foreground Skin and the Pivot Skin therefore include support for FontAwesome.
Summary
The Foreground Skin for MediaWiki has many features which make it one of the Top 10 modern Skins. It is responsive, looks good, works well, is built on an industry-standard CSS framework, and is gaining popularity.
The Pivot Skin is built on the same CSS framework but seems to be more complete; this skin may enable more of the Zurb Foundation CSS components to be used within MediaWiki.
There are alternatives, including new skins which are also developed using the Foundation CSS Framework, or another CSS framework called Bootstrap.
For more information about skins and how to configure a skin on MediaWiki, please refer to the article A Guide for installing Skins in MediaWiki.
