Vanilla5

UselessTuesday < Skins > Vector   (talk? | users | test page | RWD? | set as default | unset | validate: HTML, CSS)

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

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.

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

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.

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: vanilla5-20180226.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!

Version 20170506

• Renamed files:
  • Standard style sheet to "standard.css";
  • Minified standard style sheet to "standard.min.css"
  • Skin PHP renamed to "skin.php"
  • Template file to "skin.tmpl".
• CSS: Restructured all standard coloring style rules and moved them to the end of "standard.css".
• CSS: Default color scheme is now gray-tone only, except for the buttons and controls in wiki edit page.
• CSS: Added style sheet "mystyle.css". If you like to write your own custom style sheet, add your own custom style rules here.
• CSS: Added 4 example style sheet files with color schemes pink, blue and green, and an example styles with background and transparent menu. They are named example-blue.css, example-green.css, example-orange.css, example-pink.css and example-background.css. To apply one of these schemes, open one in a editor, select all, copy and paste in end of "mystyle.css"
• CSS: Added separate style sheet for defining fonts, because you might want to change that, leaving minified standard.min.css as is.
• CSS: sensible default h1..h6 margins
• CSS: sensible default table borders
• Template structure: added clearfix after content block and aside.
• Template structure: moved pageFooter out of and before "last modified" block.
• Template structure: fixed wrong flow of navbar and content on small screens. repositioned 'clearfix' in template.
• Template structure: added <div class="top"> in template.
• Added author name page variable kellerfrau to page footer in template.
• Template structure: changed PageAction menu div container from class="wikicmds" to id="wikicmds" to be compliant with how things are done in the default PmWiki skin (and probably most other skins too) since I need only one PageActions menu ever.
• Template structure: fixed directive <!--/PageTabFmt--> in template at wrong level

Version 20171009

• Dist folder did not contain the correct aFarkas HTML5Shiv for legacy Internet Explorer. Fixed.

Version 20180226

• File "skin.php" was made compatible with PHP 7.2 by replacing callback actions with functions.

Thanks to Moni Kellermann.

!! See also

Contributors

• ~Paul Wiegmans

Comments

Demo sites

This skin is used at :

• https://sikkepitje.nl
• https://ict.bonhoeffer.nl
• https://www.kinhost.org/

See discussion at Vanilla5-Talk?