Questions answered by this recipe
All sections are optional, you can remove those that do not apply to your recipe, and add new ones.
Vanilla5 is a simple HTML5 compliant mobile-ready skin for PmWiki v2.2+
Vanilla5 skin on screens of width > 970px - Click to enlarge
- simple no-thrills PmWiki skin
- compliant with the HTML5 standard as of 2014.
- designed with bigger font and adaptive page layout for better viewing on a mobile devices ("responsive webdesign") using mediaqueries for display width < 970px. No need for glasses!
- uses HTML5 elements header, nav, article, section, aside and footer elements.
- provides a workaround to enable styling of HTMl5 elements for Internet Explorer prior to v9 using html5shiv.js . (https://code.google.com/p/html5shiv/)
- uses webfonts, that work with HTTP and HTTPS.
- has some inspiration from how http://open.nasa.gov was in 2014 and http://codeplex.com
The basic layout consists of a header and footer, with the main center section in-between, flanked on the left side by a fixed-width side column. The page is structured into the following sections. Each section can be configured from an associated wiki page and also made to "disappear" with special markup.
Top Menu Bar (Site|Group).NavBar
On a display with width < 970px , like a mobile device, the Side Bar collapses under the Page Content. The page width adapts to the screen width ("fluid width").
Top Menu Bar (Site|Group).NavBar
Each section can be turned off for display.
- Turn off a section by special wiki markup
- Turn off a section globally in config.php with setting
Following table lists the page parts, configuration pages and the corresponding wiki markup and global switch syntax to switch the part on or off.
|Part||Configuration page||wiki markup||config switch|
|Page Actions||Site.PageActions or any Group.PageActions page|
|Header||Site.PageHeader or any Group.PageHeader page|
|Navigation Bar||Site.NavBar or any Group.NavBar page|
|Side Bar||Site.SideBar or any Group.SideBar page|
|Footer||Site.PageFooter or any Group.PageFooter page|
The SideBar supports the use of H1 elements for heading elements and up to 2 levels of nested list elements to use as a vertical navigation list. It uses the H6 element for a menu title.
The search bar offers a search entry field and a search button. It is part of in the Side Bar.
Works with :
- Internet Explorer 9, 10, 11
- Chrome 33
- Firefox 27
- Safari iOS 7
- Android 4.0 Browser
Not tested with other browsers
- Download: vanilla5-1.0.7-20150323.zipΔ
- Unpack the zip file into your skins directory, so that all content is extracted to the directory 'vanilla5'.
- Edit your
$Skin = 'vanilla5';
Change log / Release notes
If the recipe has multiple releases, then release notes can be placed here. Note that it's often easier for people to work with "release dates" instead of "version numbers".
Version 1.0.0: 2014-04-01
- First public release
Version 1.0.5: 20140406
- Styles are now applied to textarea, that were only applied to textarea#text.
- Cleaned up extra files and unused images.
- Merged all style sheets into one.
Version 1.0.7: 2015-03-23
- The Google webfonts "ubuntu" and "lobster" were downloaded and are now served from local storage. See directory "fonts". This adds a bit more privacy.
- It uses an updated and minified version of HTML5 Shiv 3.7.3-pre.
- File vanilla5.php was modified to comply with newer PHP 5.5+ and avoiding PHP error "The /e modifier is deprecated, use preg_replace_callback. instead" - Thanks to Moni Kellermann!
This skin is used at :
- http://www.sikkepitje.nl (may change whenever I like)