VIEWS
THIS REPOSITORY WILL BE UPDATED TO VERSION 2.8.X IN DAYS...
PLEASE LEAVE THE MAXIMUM CONTENT POSSIBLE ON YOUR SITES AND DO NOT USE CDNs.
THANK YOU
the framework, in the current version, has 2 types of "modality" -mode- (ex viewports concept has deprecated from 2.7, now is "mode"). However, soon, those for electron will be added.
Let's see the current elements together:
░░ WEB PAGE EXEMPLE
The mode-web is born for the direct use of the vertical scroll and considers as reference directly the body of the document, so there is no need to use the "scroll-y" class:
<!DOCTYPE html>
<html lang="XX" xml:lang="XX" xmlns="http://www.w3.org/1999/xhtml" >
<head>
....
</head>
<body class="mode-web">
// Your nav types, limiters, grids, contents...
// other outbox and modal
// included loader
</body>
</html>
The case of horizontal scrollers* is different. Although they are not actually native to the system, it is possible to construct them with slightly different structures ... of which we could advise:
<!DOCTYPE html>
<html lang="XX" xml:lang="XX" xmlns="http://www.w3.org/1999/xhtml" >
<head>
....
</head>
<body class="mode-web scroll-x">
<div> 100vw constents.... </div>
<div> 100vw constents.... </div>
<div> 100vw constents.... </div>
<span> contents.... </span>
<span> contents.... </span>
<span> contents.... </span>
....
// fixed position menu (it's an idea)
// other outbox and modal
// included loader
</body>
</html>
It is always advisable to apply a background linked to the loader to the page, this because each browser starts with its own specific color (usually #fff) that is not linked to the document. Here are some potential tips:
// a bad way (extreme)
<html style="backgroud:#myloadercolor> ... </html>
<body style="backgroud:#myloadercolor> ... </body>
// classic inside the theme
body,.loader
{
backgroud:#myloadercolor;
}
░░ CORDOVA APP EXEMPLE
The mode-app* generates a touch-friendly native-like slider. It has two sub-sections:
-
The first: encloses the controllers (pointers and possible next-view and prev-view buttons)
-
The second: all the drag / swipe views
Finally it is possible to insert dots and steps at will.
<!DOCTYPE html>
<html lang="XX" xml:lang="XX" xmlns="http://www.w3.org/1999/xhtml" >
<head>
....
</head>
<body class="mode-app">
<div class="view-controller [autostep]"> //remove autostep for unflowed pointers
<a class="pointer">A</a>
<a class="pointer">B</a>
<a class="pointer">C</a>
</div>
<div class="view-group">
<div class="view active">page contents...</div>
<div class="view">page contents...</div>
<div class="view lock">page contents...</div> // this page is undragable
<div class="view lock">page contents...</div> // this page is undragable
</div>
<a class="prev-view">prev</a> // optional
<a class="next-view">next</a> // optional
<div class="steps"></div> // optional
<div class="dots"></div> // optional
// other outbox and modal
// included loader
// other cordova libs & plugin
<body>
</html>
- prev-and next-view, really, can be applied roughly everywhere (but remember that only the current viewport is scrolling).
- autostep queues all the pointers. By clicking on one of them, the system scrolls to the pointer page, also scrolling the pointers themselves. The pointer scrolls also when scrolling the pages.
- steps and dot are two containers of visual pointers. In practice, simple position indicators.
- lock prevents page dragging. But remember that it refers only to that page and not "from that onwards".
In cordova you need to set some additional things to make sure that the app runs properly. Within the project "config.xml" file you enter:
<preference name="Fullscreen" value="true" />
<preference name="Orientation" value="portrait" />
<preference name="DisallowOverscroll" value="true" />
<preference name="WebViewBounce" value="false" />
<preference name="UIWebViewBounce" value="false" />
... wanting to anticipate something you might already set a background color for the loader
<preference name="BackgroundColor" value="#YOURCOLORPAGE&LOADER" />
Install the files and set up the document. The topic: [from head to viewports]
List and use of all the classes of the framework. The topic: [viewports classes]