• View
• Edit
• History
• Attach
• Print

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)

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

The skin is part of the core PmWiki distribution, in the directory pmwiki/pub/skins/pmwiki-responsive. There is nothing to download or install, simply set a configuration variable:

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

• 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:

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 PmWiki-responsive-Talk