Vector
Main

Vanilla 5 Skin

Summary: Vanilla5 is a simple HTML5 compliant skin for PmWiki v2+ Version: 1.0.7 (2015-03-32) Prerequisites: pmwiki-2.2 (earlier versions might work too, haven't tried) Status: Maintainer: Paul Wiegmans Categories: LocalWiki Download: Attach:vanilla5-1.0.7-20150323.zip Δ Users: (view / edit) Discussion:

Questions answered by this recipe

All sections are optional, you can remove those that do not apply to your recipe, and add new ones.

Description

Vanilla5 is a simple HTML5 compliant mobile-ready skin for PmWiki v2.2+

Features:

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/(approve sites))
  • uses webfonts, that work with HTTP and HTTPS.
  • has some inspiration from http://open.nasa.gov(approve sites) and http://codeplex.com(approve sites)

Layout

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.

(Site|Group).PageActions

Header (Site|Group).PageHeader
<header>

Top Menu Bar (Site|Group).NavBar
<nav>

Side Bar
(Site|Group).SideBar
<aside>


Page Content
<article>

Footer (Site|Group).PageFooter
<footer>

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").

(Site|Group).PageActions

Header (Site|Group).PageHeader
<header>

Top Menu Bar (Site|Group).NavBar
<nav>


Page Content
<article>

Side Bar
(Site|Group).SideBar
<aside>

Footer (Site|Group).PageFooter
<footer>

Each section can be turned off for display.

  • Turn off a section by special wiki markup (:noXXX:)
  • Turn off a section globally in config.php with setting SetTmplDisplay('PageXXXFmt', 0);

Following table lists the page parts, configuration pages and the corresponding wiki markup and global switch syntax to switch the part on or off.

PartConfiguration pagewiki markupconfig switch
Page ActionsSite.PageActions or any Group.PageActions page(:noaction:)SetTmplDisplay('PageActionFmt', 0);
HeaderSite.PageHeader or any Group.PageHeader page(:noheader:)SetTmplDisplay('PageHeaderFmt', 0);
Navigation BarSite.NavBar or any Group.NavBar page(:notabs:)SetTmplDisplay('PageTabsFmt', 0);
Side BarSite.SideBar or any Group.SideBar page(:noleft:)SetTmplDisplay('PageLeftFmt', 0);
Page Content-none--none--none-
FooterSite.PageFooter or any Group.PageFooter page(:nofooter:)SetTmplDisplay('PageSearchFmt', 0);
Search Bar-none-(:nosearch:)SetTmplDisplay('PageSearchFmt', 0);

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.

Browser Compatibility

Works with :

  • Internet Explorer 9, 10, 11
  • Chrome 33
  • Firefox 27
  • Safari iOS 7
  • Android 4.0 Browser

Not tested with other browsers

Installation

  • Download: Attach: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 config.php and set $Skin = 'vanilla5';

Configuration

None

Usage

None

Notes

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!

!! See also

Contributors

Comments

Demo sites

This skin is used at :

See discussion at Vanilla5Skin-Talk


edit

This is a student's notebook. I am not responsible if you copy it for homework, and it turns out to be wrong.

Backlinks

This page is Vanilla5Skin