New standard mobile-first skin

[achimnol]

Build a new standard skin with mobile-first in mind.
The skin will be based on Bootstrap 3.x or later, its jQuery plugins, and Font Awesome 4.x or later.

To use this skin for mobile phones, we need to force use of the blog skin instead of "i" or "m" mode. In particular, the "m" mode for old feature-phones is considered to be deprecate.
We also need to modify Textcube's core codes that are tightly coupled with HTML rendering, such as pagination and category badges.

After all modifications, old skins may not be compatible with the new version of Textcube, but we will try to minimize backward-incompatibility.

[inureyes]

Dual renderer for paging skin block can be a backward-compatible solution.

[achimnol]

Just for memo. Considerations for a new skin specification:

• Templates including control statements such as loops and conditionals with variables. A good candidate for PHP is Twig which resembles Django/Jinja syntax.
• Special synatx to define skin-defined elements such as sidebar widgets. They are scanned when changing the skin and have persistent states like visibility and orders.
• A predefined CSS namespace for Textcube Core elements. For example, we could implement the trackback pop-up window as a Popover bootstrap component by filling its content via AJAX. In this case, internal elements should have separate CSS namespace to avoid conflicts with skin's styles.

[inureyes]

Paging is handled by library/view/paging.php. getPagingView receives paging skin fragment, parses and returns the complete html. Therefore I'll work on

• Split getPagingView into two parts: for desktop and for mobile
• Add $context->property('blog.viewmode') -> 'mobile' or 'desktop', determines at dispatch process.

[inureyes]

@achimnol I strongly agree with your opinion about CSS namespace. Currently, textcube skin support some default CSS names and ids, hardcoded in core (/skin/blog/standard/style.css uses them) without namespace. (Well, it's 10 year old code.)

Any ideas for naming? tc (textcube)? cb (codeball)? nw (needlworks)?

[inureyes]

@achimnol I'll look at your modified pagination html markup of your test page. If you can send me a simplified html ul-li pagination format, please attach it here. 👍

[achimnol]

I think tc- prefix would be fine. We also need to unify the rule namings, such as whether to use hyphens or underscores to distinguish different levels in the names. I think the "modern" practice is to use hyphens.

Additional idea for the new skin format:

• Extension of index.xml. If we adopt template engines, some skins could offer extra options such as "left sidebar" or "right sidebar" by switching a few CSS classes. We could build an option panel like Textcube plugins and make the setting values available in the context of skin templates.
• It would be more interesting if we use LESS to allow users to choose key colors of a skin, like color schemes in Microsoft Powerpoint.