PageFrame Prototype

define structure for site pages

PageFrames are HTML pages constructed with a page-frame container and parts that provide menus and themes:

<page-frame>, an outer flex container attached to, and covering, the viewport.
<frame-header> contains top menu with buttons: Site, Tracks, Repos, Stories, Resrcs, Blogs, Help, Pages, Pref, and Next
<main> contains sub elements: <content>, <page-TOC>, and <page-sections>
<content> holds all non-menu page content
<page-TOC> contains links to all pages in this page's thread (sequence of pages linked with Next and Prev)
<page-sections> contains links to in-page sections
<frame-footer> contains buttons Keys, About, Sections, Prev, and Next

This is intended to be a page in which content is inserted with only content related changes, e.g., lists of pages and sections. It provides links to itself for Next and Prev as placeholders for use in threads. If you comment those links out (just above <page‑frame>) you will find that Next and Prev buttons disappear from both top and bottom menus.

A PageFrame demo thread illustrates how PageFrames render page lists and section lists of various sizes.

Building PageFrame pages.

To convert an existing page to a PageFrame structure simply:

Create references to these script files in this order in existing page <head> after other script files:
- ScriptsPageFrame.js
- ScriptsPageFrameKeyboard.js
- ScriptsPageFramePages.js
and copy files to the subfolder "js". Change links in ScriptsPageFramePages.js to appropriate values for the new page's thread. You may omit the Pages script if the original page had no next and prev links.
Create references to these style files in existing page <head> after other script files:
- StylesPageFrameStructure.css
- StylesPageFrameMenus.css
- StylesPageFrameThemeDefault.css or another theme file of your choice
and copy files to the subfolder "css"
Make a copy of PageFramePrototype.html (this page) and replace everything in the <content> block with the source page's content.
If you want a new theme, make a copy of StylesPageFrameDefault.css and define the colors you want in --light and --dark.
Change the page title to some appropriate value.

To build a new page using the PageFrame structure, simply:

Copy the scripts and styles files as outlined above.
Copy the prototype with an appropriate name.
Add visible page contents in the <content> block.

You've arrived at the bottom.