Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2018-04-14 18:52:44

Vienuolis
Member
From: Vilnius, Lithuania
Registered: 2009-06-14
Posts: 307
Website GitHub GitLab Twitter

Flex layout design

I have made an extremely clean and fully flexible design last year, although still not implemented yet. Hope it would be useful as an attractive Texpattern template example for typical website (multilingial, with search and PR news modules, for a few of service groups).

  1. One internet for all — the same design for all media, on all devices, with any display size and resolution, at any window position, by any zooming. You might want to restore or tile two windows vertically on HD and larger monitor. If maximized in full screen, it is better to view by zooming webpages, at least 150%.
  2. Open formats, HTML, CSS, RSS, XML, WCAG standards compliant, SEO friendly pages, the same for robots and users, some visually impaired people. Proved by W3.org, WebAIM.org, MSDN, Mozilla.org, Chromium.org, Google.com.
  3. Robust, light, and quick loading pages. Pingdom monitoring service surprised me by their statement, that this website is faster than 100 % of tested sites and marking its performance grade as A 100/100.

Flex design in mobile device Flex design in HD display

m.on.lt

  • Full functionality with no JavaScript automation, no Flash, no Sass language, no cookies — pure HTML + CSS only.
  • No Bootstrap, Foundation, Normalize, Reset templates, no responsive tricks — only the new standard Flex layout improvements.
  • No AMP, CDN, no remote assets, no embedded fonts, no existing theme adapted — I have put own photos and created my original sheets by hand from the scratch.
  • No separate mobile version (one template only), no print version (paper layout defined in the same CSS file), no version for the disabled, no need for reader mode (should be enough to zoom for better readability).

Shortage, incompleteness, imperfection:

  1. website is not finished yet: another language versions are still not made, there is no sitemap (although every page works as a sitemap — all links are visible everywhere), only two pages are illustrated now (the last photo is an article_image):
    m.on.lt/lt/turto-vertintojai
    m.on.lt/lt/korporacija-matininkai
  2. no ARIA marks from Schema.org, no OpenGraph, Twitter, and other social cards (not requested).

Custom Error and Search pages are designed.

Edit: sorry for my weak English.

Last edited by Vienuolis (2018-04-15 08:47:14)

Offline

#2 2018-04-14 20:21:11

Vienuolis
Member
From: Vilnius, Lithuania
Registered: 2009-06-14
Posts: 307
Website GitHub GitLab Twitter

Re: Flex layout design

Forgot general data: made in Textpattern v4.6.2 with no plugins. Hosted on my own server, HTTP served by Hiawatha.

The simplest usability and markup clarity indicator — only one ‹div› tag per page! Another single tags are ‹main›, ‹article›, ‹aside›, two or three ‹section›, ‹nav›, ‹header›, ‹footer›, ‹dfn› semantic tags.

All links are underlined, and linked headers are rather shaded. Appropriate links are tagged by rel and title attributes. URLs are semantic, with no codes.

Offline

#3 2018-04-14 21:50:36

bici
Member
From: vancouver
Registered: 2004-02-24
Posts: 2,071
Website Mastodon

Re: Flex layout design

nice. the multilingual part is still to be done i take it?


…. texted postive

Offline

#4 2018-04-15 18:26:48

bici
Member
From: vancouver
Registered: 2004-02-24
Posts: 2,071
Website Mastodon

Re: Flex layout design

Vienuolis wrote #311045:

I have made an extremely clean and fully flexible design last year, although still not implemented yet. Hope it would be useful as an attractive Texpattern template example for typical website (multilingial, with search and PR news modules, for a few of service groups).

The question is: Would this make for a useful Textpattern template. I would think that this would be very useful to have, esp. if it has been tested to work with the latest Version – TxP 4.7.

You could package it up for folks to use and test. Not sure if this can be listed centrally somewhere. the Txp community may have suggestions.


…. texted postive

Offline

#5 2018-04-15 21:09:50

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 11,250
Website GitHub

Re: Flex layout design

Hello, Themes. We’ll have a repo for them set up as soon as we can.


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

Board footer

Powered by FluxBB