VIEWS
Kimera CSS is approaching its peak. We will build the last parts and prepare the work for major changes and new projects steps. These steps towards the future will necessarily drastic changes of this repo. We invite everyone to download and update the packs used to avoid finding themselves with no references on their sites and apps, ex: don't rely on cdn! They will probably be lost. Thank you all.
If you like this project, you would like to click on the ★ above the github page and follow us on the official fanpage: kimera framework
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: [the basic concepts]