PmWiki-responsive skin

Pmwiki-dt (A simple tableless skin for PmWiki) < Skins > PmWiki2Bars   (talk | users | test page | RWD? | set as default | unset | validate: HTML, CSS)

Summary: Responsive skin shipped with PmWiki
Version: pmwiki-2.2.122
Prerequisites: PmWiki 2.2.98 or newer; post-2009, CSS3 compliant browser
Status:
Maintainer: Petko
License: GNU GPL 2+
Categories: Skins, RWD, Mobile, HTML5, PHP55, PHP72
Users: +1 (view / edit)

Description

Responsive skin adapting for small mobile screens as well as for large tablet or desktop screens, included with the default PmWiki installation.

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. Add to config.php such a line:
    $Skin = 'pmwiki-responsive';

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. It is currently enabled on most of the pages at pmwiki.org, please test as much of the site 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.

Objectives:
  • the default skin is not removed, PmWiki ships 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

The skin is a derivative from the 2016 skin and included with the default PmWiki installation. The change log can be found at 2016#relnotes until PmWiki 2.2.98 (2017-05-31) and at PmWiki.ChangeLog since then.

See also

Responsive skins:

Cookbook /
GridWorks  GridWorks - general utility css grid markup for wiki pages (Active/Stable)
ResponsiveGrid  A collection of CSS classes to help fast grid layouts (new)
Skins /
2016  Responsive skin very close to the default skin (Superseded by PmWiki-responsive)
Adapt  A mobile-friendly skin that adapts to suit the display size. (Beta)
Amber  responsive mobile-friendly skin for all devices (stable)
Mobile  Plain vanilla PmWiki responsive template that is compatible with mobile devices. (Active)
Papyrus  A simple skin, inspired by Parchment. Responsive / mobile-friendly. (maintained)
Vanilla5  Vanilla5 is a simple HTML5 compliant skin for PmWiki v2+
Vector  Clone of the Vector skin for MediaWiki (used on Wikipedia since 2010) (maintained)

Default PmWiki skin clones without tables:

Skins /
2016  Responsive skin very close to the default skin (Superseded by PmWiki-responsive)
DefaultSkinWithoutTable  This skin replaces the HTML table of the default skin with divs. (Proposed)
Notebook-NT  Simple div (no table) version of default PmWiki skin. (stable)
PmWiki-Divs  pure css based skin in the style of the pmwiki default skin (stable)
Pmwiki-dt  Simple div(no table) version of default PmWiki skin. (stable)

Contributors

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

Comments

See discussion at PmWiki-responsive-Talk

User notes +1: If you use, used or reviewed "PmWiki-responsive skin", you can add your name. These statistics appear in the Skins listings and will help newcomers browsing through the wiki.