MediaWiki/Skins/Foreground

From grantswebsite.net
< MediaWiki‎ | Skins
Revision as of 05:55, 18 July 2018 by Grant (talk | contribs)
Jump to navigation Jump to search


Foreground Skin for MediaWiki

Foreground is a responsive skin for MediaWiki which is based on the Foundation is a CSS Framework by Zurb.

This website is built with MediaWiki and uses the Foreground Skin. For example, the text here is contained in a Panel.

Benefits

If you install the Foreground Skin on MediaWiki then you will also have access to components and styles defined by Foundation 5.

Foundation is a mobile-first, responsive framework so your MediaWiki website will display correctly on a range of devices, from mobiles through to smart TVs.

Page content is written with html so it is more sophisticated than wikitext. HTML 5 and CSS 3 are supported.

Page content can be positioned using a Grid.

Other benefits and features, including support for FontAwesome, is described on the Foreground Project page.

Compatibility

Foreground version 2.1.0 was released in March 2018.

This version is compatible with MediaWiki 1.27 and higher; and requires PHP 5.6+

Foreground 2.1.0 uses the Zurb Foundation 5 Framework. Zurb has since released version 6 with an improved Grid

Upgrading From Previous Version

The previous version of Foreground was based on Foundation 4. Any problems with upgrading to the later version of Foreground will likely be caused by changes within the Foundation CSS Framework.

One of those changes that impacted one of my websites affected multiple tab sets. The code was completely different. Foreground 5 code uses list items and is simpler.

This code is the start of a multiple tab set using Foundation 4
<div class="section-container auto" data-section="data-section">
   <div class="section">
        <p class="title" data-section-title="data-section-title">Introduction</p>
        <div class="content" data-section-content="data-section-content">
                 <div class="row">
This code is the first few lines of a multiple tab set using Foundation 5
<div>
     <ul class="tabs" data-tab>
          <li class="tab-title active"><a href="#tab1">Item 1</a></li>
          <li class="tab-title"><a href="#tab2">Item 2</a></li>
          <li class="tab-title"><a href="#tab3">Item 3</a></li>
          <li class="tab-title"><a href="#tab4">Item 4</a></li>
     </ul>
</div>
<div class="tabs-content">

The complete example is provided here.

Suggestion:-

When you install the newer version of Foreground in your MediaWiki skins directory do not delete the older version - rename it and leave it there, at least temporarily.

Follow the instructions for installing the current version and test the outcome. If you have used Foundation 4 CSS components which do not display correctly then it is easy to revert to your previous version of Foreground - in your MediaWiki skins directory rename the current Foreground folder to Foreground_New, change your old version back to Foreground, and undo any other changes. Your website should operate as before.

Now that you have identified the components which are not compatible work at changing your code. Test it on another site if possible, then implement both the new skin and your new code.

Of my three current MediaWiki sites I upgraded this one first and am then applying the lessons learnt to my other sites.

Examples

To encourage use of both the Foreground Skin, and Foundation on MediaWiki, some examples of the code required to implement the CSS components is provided here: MediaWiki/Foundation.

Foundation buttons which use the <a href=" syntax will not work on MediaWiki unless you enclose the link in tags and have enabled $wgRawHtml in your LocalSettings.php file.

Links

Some useful links are provided below. Each button is the Foundation Simple Button with class .info.