Viewport is a vibrant new leaf, on the CSS branch of the DOM tree.
Viewport pages fit everywhere, on every 'new' device.
No more Bootstrap 'responsive' Clunk-Clunk-Clunk.
Notice page grid browser scroll bar's misbehaving overlay!
This is a Fluid Viewport Menu.
Viewport is supported here by IE9+ (IE6+ partial), Firefox, Chrome, Safari and Opera.

Viewport is a vibrant new leaf on a CSS branch of the DOM. Layout reveals a few bugs that make secure design of grid (column) impossible, except with very basic content.

Viewport page grid can build 3D cubes and shapes! Traditional layout in many international regions uses top-to-bottom content flow. More recently, we have enjoyed left-to-right content flow. Presently, you are on a page that allows both vertical and horizontal scrolling. We call this a 'Simple Page Grid'.

Using a page grid layout, browsers can move left-right, up-down, or with links jump between any two pages on the viewport grid, or between grid layers. Similarly, rather than building cubic layers, each 'page' in a grid of pages can grow its own trunk and branches. Grid pages do not even have to be positioned next to each other. Some layers and trees can provide tables of contents, other trees and layers, chapters and indexes, security zones. Though in our demonstration, this friendly alignment uncovers some serious data security flaws that have to be fixed.

Back here (where we are now) the grid can be any size or shape (not necessarily square). Our demonstration uses a 3x3 page grid. Grid layouts are suited to card information - such as restaurant menus, cookbook recipies, document anchors, contents, product details, newspaper articles. The power of viewport!

Things to consider - Alien influences (?) - Empty grid ... Return to Viewport units of measure



WARNING! Things to consider before deploying viewport coding technology.

This demo uses html5 element 'article' to layout 3x3 page units in the viewport as grid 1 - grid 9, coded as 9 position absolute 100vh x 100vw grid objects. Elements are highly interactive, so we are not pointing our paws at any particular element and declaring it's a problem.
1.) HTML5 element 'section' is a poor viewport layout candidate, as section style behavors are not yet ready for viewport (fluid relative) page layout. This is evidenced as section tag causing grid overflow and creation of screen margins inside viewports for IE11 agent.
Viewport Recommendation: fluid space distortion is a problem with HTML5 element 'section', and with corrupt scroll bar including scrollbar width related padding/margins and a scroll bar related 1px screen margin anomaly.
a) Normal absolute grid positioning results 1px border strip of background added to bottom or to left of coded grid layout, with or without scroll bar present. Also grid 1 horizontal overlap of grid 5 by exactly 1 scrollbar width (demonstrated by adding selector declaration 'overflow:scroll' to element 'article').
b) Wrapping the entire grid in a section element results strip of page background 2 scroll bar widths at left and bottom of grid.
c) Style body tag as 'height: 300vh; width: 300vw;' also results strip of page background 2 scroll bar widths at left and bottom of grid.
d) Placing section element inside center page unit (unit 5) results grid content right margin overflow, disappears under grid 6.
(i) grid 5 top left: no overflow / article overflow (ii) grid 9 bottom right: rogue margin fixed width of 2 window scroll bars
(i) (ii) Compounding fluidic distortion of viewport content!

2.) It is advisable to use element 'article' grid padding: article { height: 90vh; width: 90vw; padding: 5vh 5vw; }.
This will keep content away from grid unit intersection overlays (see above, 1a). In our model, only center grid (grid 'page' 5) suffers effects of this distortion in IE11, with grid 1 horizontal overlay of top left grid 5 corner by exactly 1 scroll bar width, with or without scroll bar present. Scroll bars should auto appear in each page grid unit.
3.) CSS property 'overflow' does not offer reliable CSS value 'scroll' behavior: article{overflow:scroll;} only applies scrollbar-y to first grid 1. However, scroll bar grid 1 overlays grid 5 (see above, 1a and images). With/without scroll bar styling, browser use of scrollbar in page grid ignores neighboring grids. This forces overflow dumping. Without viewport meta tag width="device-width", scrollbar overflow dump adjusts 3x3 grid to a 4x4 grid with the extra 7 grid units dumped bottom and left of legal viewport space.
4.) 'Page' content focus is not maintained on zoom, landscape/portrait shift, nor on window size change: this poor focus underscores W3C Recommendation failure of inclusion of foundation viewport behavior. On executing zoom, browser should use page grid 100vw 100vh stepping to attach zoom-focus to grid units' top left corners, on viewport dimension change (and across shared devices on data share).
5.) Viewport font-size warps as window size narrows, Just as window dimensions approach square shape: font-size increases, then continues to decrease!
Summary: Scroll bar corruption, crap focus, font-size warp. SECURITY!



Yet Another Pesky Fluidic Space Bug

Linked images may refuse HTML instruction to open in new tab (window), Spring 2015!
<a href="" target="_blank">
<img src="species8472.jpg" target="_blank" width="20%"></a>

Is this just another Can I Use misrepresentation?
CSS Designer challenge: code centered roll-over images in viewport.
Seriously, you may head on home now