The mobile first principle is a way to think about design for multiple screen sizes.

It has some characteristics that are valued by most new almost all css frameworks these days.

Since today mobiles have the priority, I believe pmwiki should deliver its features for mobile first as well, but most of all, mobiles too.

Since those changes don't pertain to the skin (but can be changed on the skin) because the css rules and markup are produced in the core, they should be changed there.

Since those changes won't hurt the appearance too much, but just how lines break or words break and when, at the end I believe those changes can be merged in the core without much regret when it comes to compatibility for old skins and even tweaks made inside config.php

Changes I believe that would be good to achieve are:

- text in all sections of pmwiki (.wikitext,.wikidiff ...) they all break the layout when used from small devices. The correct mixture of ingredients (css properties) have to be achieved for that. Mostly special css properties like: word-break, word-wrap and white-space. For block markup mostly.

- inputs and textarea in general break the layout -- we should have a max-width of 99.9% for PmWiki to work on cellphones.

- font-size on .wikidiff table title/header should be bigger, at least 1em for readability as they look small on smartphones

- tables break the layout -- wrap tables with a div that has x-overflow:scroll enabled

- <code class="varlink"> breaks the layout on some pages from the documentation

-- indentation breaks the layout when used with escaped and some links with pre formated text

- code,pre,.pre,.code,.varlink,.escaped,.diffmarkup ; they all break the layout -- perhaps enable x-overflow scroll in some of them, excluding "code.varlink"

- decide on how to use these css properties: word-break;word-wrap;white-space

  on pmwiki action areas (.wikitext,.wikidiff ...)

- css properties that may help are:

-- overflow; overflow-x -- word-break -- word-wrap -- white-space -- text-align -- text-align-last

Mobiles have a more vertical flow for reading pages and desktops have a wide space that can enable a display of information that is more horizontal.

Some markup on smartphones that have a more traditional role and have a horizontal flow of information or formatted text, that spans longer then smartphones viewport, would have to word-wrap/word-break, but some PmWiki admins/skin writers perhaps would not agree with it and rather would prefer to keep a horizontal flow of information.

Directions could be pointed out so they could write a line or two of css properties and /or selectors & properties, to achieve that.

There are many sites on the internet that can talk about the benefits and also problems of adopting a mobile first principle for web design, but the important for me is the fact that either one of the principles does not go against (too much at least) any of the principles or values defended by PmWiki.

I believe that PmWiki supports a wide variety of desktop browsers and versions, from old to new, and I believe it would be a good thing to extended as well this support for mobiles at the core without changing much of and breaking compatibility with what was already built and customized by users on their wiki sites.

this document is not complete yet ...

 0: 00.00 00.00 config start
 1: 00.01 00.01 config end
 2: 00.07 00.06 MarkupToHTML begin
 3: 00.14 00.13 MarkupToHTML end
 4: 00.15 00.14 MarkupToHTML begin
 5: 00.18 00.17 ReadApprovedUrls SiteAdmin.ApprovedUrls begin
 6: 00.19 00.18 ReadApprovedUrls SiteAdmin.ApprovedUrls end
 7: 00.21 00.21 MarkupToHTML end
 8: 00.21 00.21 MarkupToHTML begin
 9: 00.23 00.22 MarkupToHTML end
10: 00.24 00.23 now
Peak memory: 5,783,904 bytes