2016 skin

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

I currently recommend the PmWiki-responsive skin which ships with recent PmWiki versions. --Petko August 18, 2017, at 12:11 PM ?

Description

Responsive skin adapting for small mobile screens as well as for large tablet or desktop screens.

Resize your browser window to see it adapt.

On a large screen, the skin looks very close to the default PmWiki skin.

On a small screen, the SideBar, the search form and the page actions are replaced with icons. Clicking on the icons open every hidden element with a fade-in animation.

The skin uses CSS3 media queries and "Reference pixel" dimensions (absolute to the root dimensions, but relative to the zoom factor of the device). Compared to the default skin,

• it uses the semantic html5 tags header, footer, main, nav
• it uses two fonts for normal text and for code (Verdana font dropped)
• most HTML elements have dedicated class or id parameters for easier styling and scripting
• the skin disables the inline CSS injected by the core, and contains its own definitions of these styles.

Installation

1. Unzip 2016-skin.zipΔ into your pmwiki/pub/skins/ directory.
2. Add to config.php such a line:
   $Skin = '2016';

Configuration

A few styles can be changed in pmwiki/pub/css/local.css. For example:

  /* Make the skin frame 50 em large and centered:*/
  #bodywrap { max-width: 50em; }

  /* Change backgrounds from light gray to light green: */
  #bodywrap, #wikileft, #wikihead-searchform, #wikicmds, .frame {
    background-color: #dfd;
  }

  /* Make larger preformatted blocks scroll in a frame */
  pre {
    border: 1px solid #ccc;
    overflow: auto;
  }

Sidebar, header, footer from wiki pages

The skin includes the page Group.SideBar or Site.SideBar as a sidebar. The skin header and footer have default content, but wiki administrators can create the page Group.SkinElements or Site.SkinElements, and place the text in the header and footer in sections:

[[#skinheader]]
Here is the text of the skin header.
[[#skinheaderend]]


[[#skinfooter]]
Here is the text of the skin footer.
[[#skinfooterend]]

The text markup in these sections will be converted by PmWiki to HTML. If Group.SkinElements contains such non-empty and non-blank sections, they will be used, otherwise those in Site.SkinElements, otherwise the default ones from the skin.

The page names can be configured, for example to disable Group skin elements, add to config.php such a line:

  $SkinElementsPages = array('{$SiteGroup}.SkinElements'); # only Site.SkinElements

These pages should probably have liberal "read" permissions: in a Group or in Site they will likely work, but not in SiteAdmin.

Usage

In mobile mode, the skin strives to leave enough space around links to avoid mistaken clicks. Also, horizontal markup example tables are replaced with vertical ones, and inline pictures are resized to 100% of the screen width if they are larger.

The skin should work fine with various combinations of (:noleft:), (:noheader:), (:nofooter:), (:notitle:) etc. in desktop and mobile modes, test them here.

The skin should work reasonably well with JavaScript disabled (including animated sidebar, search and actions).

Notes

This skin is still a work in progress. Please set this skin as default and test as much of pmwiki.org as you can, in desktop and mobile modes. Then report on the talk page any errors that need fixing or anything that needs a review. You can create pages in the Test group to demo any issues. If you find issues with existing recipes, please link to your wiki where they could be reviewed.

• the default skin will not be removed, PmWiki will ship with two skins
• as similar as practical to the default PmWiki skin in desktop mode
• improved usability (reading/writing) in mobile mode
• relatively easy to understand and adapt
  • minimal JavaScript, not required - the wiki should be readable & editable with JavaScript disabled
  • minimal HTML/CSS hacks
• target browsers: post 2009 (Firefox, Chrome, Safari, MSIE9+)

Change log / Release notes

• 20160823 Uniform widths of icons; max-width for mobile skin set to 38 em (600px, vertical for 7 inch tablets); search form widths precision.
• 20160822 Fix typo in search form method, reported by jr.
• 20160807 Set the vertical alignment via div.imgcaption and div.imgonly (PITS:01390).
• 20160729 Remove white space below vertically stacked standalone pictures, closer to the default PmWiki skin, requested by HansB. Fix the order of SkinElements pages, as documented.
• 20160728 Remove the trim() call from SkinElement, suggested by HansB. Minor optimization. The skin will now set the $SearchBoxInputType variable for HTML5.
• 20160727 Set global mobile background to white which looks nicer when large blocks of code overflow to the right. Remove light gray borders from <pre> blocks, now documented as configuration option.
• 20160721 Add License information (also GPLv2+) into SVG files.
• 20160720 Fix JavaScript warning when (:nofooter:) is used. JavaScript refactored and moved to a self-executing function.
• 20160708 Fix outdent for hanging blocks when they start with code.escaped elements.
• 20160704 Add light gray borders to <pre> blocks.
• 20160703 Make large pre-formatted texts scrollable in desktop mode.
• 20160702b Fix invalid table "align" attributes, replaced with CSS classes.
• 20160702a Increase input text size to prevent auto-zoom by phones. Fix scrollbar appeared at the bottom of #wikileft in some cases.
• 20160702 Spacing around elements in header made closer to the default skin.
• 20160701a Enable header and footer from wikipages. Increase list indenting.
• 20160701 Fix for elements with 'clear' styles, eg. [[<<]]. Various minor changes.
• 20160630 First public release, ready to be tested.

See also

Responsive skins:

Default PmWiki skin clones without tables:

Contributors

• Skin written by Petko. CSS partially based on pmwiki.css written by Pm and HaganFox.

Comments

See discussion at 2016-Talk