BASIC
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 is structured in such a way as to eliminate any potential margin or padding entered by the native browser that hosts it in a "fill object" optic (similar to that of adobe indesign, figma or sketch). Beyond this it is to be considered that the reset directly sets the elements for their final use.
All this means that each tag has its own specific layout property applied directly by the reset of the framework ensuring extreme stability.
The reset provides that the divs, the headers, the sections and other native block structural elements are wide elements, that is... they will occupy the whole available section.
div, header, hgroup, aside, article, canvas, frameset, iframe, main, section, article, footer, form, details, picture, iframe, the table and images is all full wide block element and create a new line each time they are expressed.
If you put an element in them (excluding span), that element will tend to have the same identical properties... that is, it will occupy the maximum available space.
This particular approach, combined with the grids, allows you to set your layout as a "meter of windows" where each box has its specific location and each element can be centered and easily adapted.
The span, on the other hand, is left as an element partial.
Since v 2.7 the span has changed towards flex. This will ensure that you always center the elements while keeping their line, size and occupation constant and proportionate.
"div" and "span" alternate building a dynamic layout for on every need.
A practical example of their use is included in the basic theme tester downloadable here on github.
In this example we can better understand their phrasing: [✱ Wide&Parts] {use ctrl/⌘+click}
Another important issue to keep in mind is the management of texts and articles.
Remember that for this framework "text and layout" are two different things.
If you place a list in a text element (article) it will be in one way, vice versa in a layout element it will be in another.
To understand better and in a practical way, look at the [✱ online tester].
"mode-x" is the system with which the framework determines if the layout of viewports main will be oriented to the app. software or the native web
Since version 2.7 it has replaced the viewport-x class with a new mechanism to the advantage of stability and portability between the various types of devices (web, android, apple, other).
The topic was discussed in this section: [✱ Viewport]
In some cases it will be necessary to restart some functions of the framework.
At the current version there is a ready-to-use system to perform this action when needed: the reload.
Using the reload is extremely simple:
ui.reload("NameOfFunction")
The current functions that can be restarted are:
condingtag absolute checksize scrollers snaps anchors cards paginations tab-x tab-y spoilers videobox audiobox grid-y buttons warning outbox parallax autocrop fitheight fitup flanges grabs effectors
The framework aims to manage practically all possible layouts and ui. Although it is at an early stage it is already possible to retrieve some of the values directly from the framework object: "ui" here is a practical example:
ui.loaderslist[theindexinpageofbox]
At present it is possible to recover: warning, loaderslist, draganddrop
The framework will automatically return any anomalies trying to group them logically.
The output is similar to this:
:: [⚠ ui alert]: Title of section
⮑ the problem description and information
⮑ Link on reference page if necessary
⮑ html tag or object if necessary`
The views types. The topic: [views]
The document loader or lazy an element. The topic: [loader & lazy]