CLASSES
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
(⌘+F and find) // Find here the fastest help on the class you have doubts about.
This release is a pager prototype under development. Although it works, there are plans and room for improvement that will soon be applied. View exemple into [✱ tester]
The code:
<!--your products wrapper-->
<div>
<div class="align-[center] sticky-top">
<!--paginator controller-->
<span class="paginator" data-settings="[ target:paginationtest, perpage:24 ]">
<a class="first">⬖</a>
<a class="prev">❮❮</a>
<span class="list">
<!--auto-poulated-->
</span>
<a class="next">❯❯</a>
<a class="last total"> ⬗</a>
</span>
</div>
<!--paginator target grid-->
<div id="paginationtest" class="grid-x">
<!--
print your data here
exemple:
<div class="box-[33-33-50] border-02">00</div>
<div class="box-[33-33-50] border-02">01</div>
....
-->
</div>
</div>
The simplest class in the framework. Applied to a link it makes the structure full screen or not.
<a class="screenmode">fullscreen on/off</a>
The outboxes are pop-up panels, which can contain information, structures, menus and modal, applicable to the document. They are placed as last after the viewports and recalled via a link from the special target.
...everyware inside a viewport...
<a target="outbox#NAMEOFOUTBOX">
...outside a viewport...
<div class="outbox" id="NAMEOFOUTBOX">
<div class="side-center">
Contents...
</div>
</div>
as it is easy to notice, the autboxes have a direction:
<div class="outbox" id="NAMEOFOUTBOX">
<div class="side-center"> ... </div>
</div>
<div class="outbox" id="NAMEOFOUTBOX">
<div class="side-right"> ... </div>
</div>
<div class="outbox" id="NAMEOFOUTBOX">
<div class="side-left"> ... </div>
</div>
<div class="outbox" id="NAMEOFOUTBOX">
<div class="side-bottom"> ... </div>
</div>
<div class="outbox" id="NAMEOFOUTBOX">
<div class="side-top"> ... </div>
</div>
- "outbox" is basically the overlay panel;
- "side-" is the modal that appears;
- the contents (any) were placed inside.
Dialogs are native browser popups and html tags. Not being able to access the native or have a good backward compatibility for the tag, the only real solution was to create a specially designed function.
In all, there are three methods: alert, prompt, confirm [✱ see it on tester]
The technique is always the same and consists of a start function with options and a simple return callback:
ui.warning( null || optionobject, callback => { console.log("result is ", callback) })
To be more specific, therefore, there is a "warning" function within the framework that emulates, almost in all, the original versions.
Note: The system has been designed in such a way that if you tried to clear the warning panel, it would forcefully reappear. See it into details:
ui.warning({
type:'alert',
content:'Hello dev!'
}, result => {
console.log(result);
//continue/do...
})
ui.warning({
type:'confirm',
content:'Hello dev!',
accept:'yes',
decline:'no'
}, result => {
console.log(result);
//continue/do...
})
ui.warning({
type:'prompt',
content:'Hello dev!',
placeholder:'write your test data here',
accept:'YES, I UNDERSTEND',
decline:'NO, DECLINE'
}, result => {
console.log(result);
if (!result) //continue/do for decline...
else //continue/do for accept...
})
Simple hover/click customizable tooltips [✱ see it on tester]
Up, left,right,down is the, oblivius, variants.
<p> .... <span class="popover-up" data-text="amet"> <i>this is a hover popover into text :D</i> </span> .... </p>
<span class="popover-up">
<div>
<p> This is a click and complex popover exemple <a href="#">content</a> </p>
</div>
<p>CLICK ME! THIS IS MY POP!</p>
</span>
You can see in action on [✱ tester]
grid-x: Create a linear grid;
grid-y: Create a masonry grid;
Use "box-XX" class for create a content container of grid system. Use "gap-XX" class for create a space for sub "box-XX" elements for the size.
role of box rows number: only number to 01 to 100 (is %) and the concat is: "boxsizedon-[monitorandtv-desktopandtablet-smalldevice]"
The "X" grids of the framework are a succession of boxes. There is no "row" here, the system wraps the box according to the sections chosen.
For example, if we set three boxes with "box-[33-33-33]" we would have 3 columns, all 3 large ones a third of the container. In the same way, if we set the box with "box-[33-50-100]" we would have 3 columns on the desktop devices, on the 2 column mid-devices, on the 1-column (monolithic boxes) smartphones.
Exemple:
<div class="grid-x gap-10"> //grid linear whit 10px of gap on cell
<div class="box-[33-50-100]">
33% on monitors, 50% on 4:3, 100% on mobile
</div>
<div class="box-[auto-50-100]">
auto size on monitors, 50% on 4:3, 100% on mobile
</div>
<div class="box-[33-hide-hide]">
33% on monitors, hide on 4:3 and mobile
</div>
<div class="box-100">
// always wide
</div>
</div>
Layout exemple for direct tag mode:
<div class="grid-x gap-10">
<aside class="box-[33-50-100]">
...
</aside>
<main class="box-[auto-50-100]">
...
</main>
<footer class="box-100">
...
</footer>
</div>
NOTE: autoheight class is deprecated;
Grid-y works like a sister, but unlike the latter it creates a masonry, that is a set of boxes managed by vertical columns.
In this case the columns of the grid will be declared and the boxes will be automatically balanced (so they do not have a declared size but based on the number of columns). The calculation of the disparity of heights will also automatically occur, thus creating the cascading effect in "pinterest style".
Here is an structure example:
<div class="grid-y col-[04-03-01] gap-10">
<div class="box"> ... </div>
<div class="box"> ... </div>
<div class="box"> ... </div>
</div>
We often find ourselves having to split boxes vertically starting from classic layouts. For example, we might want a large box on the left and place others on the right side ... vertically. How you do it?
There are several framework approaches:
-
We can create two 50% boxes with grid-x. Then, in the second box, create another grid-x with two 100% boxes. To equalize them, in this case, we will have to help ourselves with the classes forcedmaxheight, maxheight or autostretch and the result would not always be satisfactory.
-
use grid-y. These grids were created both to create unparalleled pinterest style (masonry) frames and to split box layouts, or inside grid-x boxes, verticalizing and parifying automatically.
Exemple:
<div class="grid-x">
<div class="box-[50]">
<div style="height:300px;">
<p>1^ box... height 300px</p>
</div>
</div>
<div class="box-[50]">
<div class="grid-y col-[01] maxheight ">
<div class="box">
<p>box parified (height = 100px)</p>
</div>
<div class="box">
<p>box parified (height = 100px)</p>
</div>
<div class="box">
<p>box parified (height = 100px)</p>
</div>
</div>
</div>
</div>
autoset will try to center or justify the main content of a grid.
<div class="grid-x autostretch"></div>
autoset is deprecated from 2.8
are two simple attribute classes to combine with any element. maxheight define the css at height: 100%. forcedmaxheight forces min, max and height to 100%;
<div class="... forcedheight"></div>
<div class="... maxheight"></div>
Create a basically inner padding via media-query (only number 05,10,15... to 100), [✱ see on tester]. In proportional percentage:
media-query call
<div class="space-[xx-xx-xx]">
...
</div>
static
<div class="space-[xx]">
...
</div>
In fixed pixel:
media-query call
<div class="pad-[xx-xx-xx]">
...
</div>
static
<div class="pad-[xx]">
...
</div>
in some cases space and grid squabbles. It is advisable to know that space has, as an alternative to 00, the none
<div class="space-[100-50-none]"> ... </div>
in other cases is advisable to set a spacer in a one direction, you can use a limiter:
<div class="space-[20]-[vertical]"> ... </div>
<div class="space-[20]-[horizontal]"> ... </div>
Create a scrollable elements ✱ see on tester. Via mouse scroll these elements are self-managed for the horizontal scroll. When a box has scroll-x and scroll with the wheel, the framework will invert the mouse axis by scrolling horizontally as if it were vertical.
<div class="scroll-y> // or -x
...
</div>
or:
<div class="hide-bar-y"> //or-x
<div class="scroll-y"> //or-x
...
</div>
</div>
Another method for scrolling content is the snap [✱ see more on tester].
Taken from the concept of the mode-app, these elements have everything you need to create a basic carousel, a google-style link list or any other system with draggable slide content.
Snap-x and snap-y uses the same system that you can see in the galleries of many apps. All drag of the first element shakes the second one by its side and so on ... creating a chain of self-centering boxes.
Its new structure:
<div class="snap-x">
<span class="snaplabels">
<span>[caption or title 01]</span>
...
</span>
<div class="snaptype-wide">
<div class="snaps">
<div>
...contents page 01
</div>
...
<div class="lock">
...lock contents
</div>
</div>
</div>
<span class="dots"></span>
<a class="prev"><b> prev </b></a>
<a class="next"><b> next </b></a>
</div>
the another sample:
<div class="snaptype-blocks">
<div class="snaps">
<span>
...contents page 01 (we recommend setting the content size)
</span>
...
</div>
</div>
Let's analyze its parts:
-
If snap-x or y determine the horizontal or vertical orientation, snaptype-wide or blocks determine the type of slide.
In the first case, each snaps element will be 100%, in the second, it will respect the sizes you have given it (or those that have the content natively) and the contents line up in the center of the slider. -
Through snaplabels it is possible to define a series of reference labels with automatic scrolling.
If you wish, you can "lock" the view to avoid scrolling beyond that point (Note: the stop is valid only on the applied box, not on all starting from that)..
keep in mind that snaplabels is a modal structure very similar to absolute.
Depending on the linked parameter, it positions itself on a specific point of the snapper.
currently its placements are: "snaplabels-top","snaplabels-top-center","snaplabels-bottom","snaplabels-top-center", "snaplabels-left","snaplabels-left-center","snaplabels-right","snaplabels-right-center".
when centered, the labels align to the center of the slider. Conversely, they line up to the left.
-
.dots and steps is an additional element that creates user friendly reference dots or... steps.
-
.prev and .next are the two navigation elements (optional)
-
lastly you are wondering what that "snaps" class is. Know that it is a pivot and much more. With it which the system determines where the center is and understands if, when dragging, you are proceeding or regressing, where the alignment and other small things fall ... nothing that, however, is close to the theme and what you will touch :) right?
Dragging the cells corresponds to the sliding of each element in snaplabels but, unlike the "viewport modality", clicking or dragging a label, however, nothing will happen.
it is possible to scroll the elements automatically after N milliseconds using the attribute class autosnap-[N]
<div class="snap-x autosnap-[3000]"> ... </div>
Basically floating manager. [✱ see more on tester]
<div class="float-group">
<div class="float-left"> ... <div>
<div class="float-right"> ... </div>
</div>
Simple way for position of element respect his father if absolute, into page if it fixed or in stiky style if depened of scroll. [✱ see more on tester]
absolute:
<div //in absolute, if it isn't relative, it becomes after a check via js>
<div class="absolute-left"> ... </div>
<div class="absolute-top"> ... </div>
<div class="absolute-center"> ... </div>
<div class="absolute-bottom"> ... </div>
<div class="absolute-right"> ... </div>
and relative combos...
<div class="absolute-top-left"> ... </div>
<div class="absolute-top-right"> ... </div>
<div class="absolute-center-left"> ... </div>
<div class="absolute-center-right"> ... </div>
<div class="absolute-bottom-left"> ... </div>
<div class="absolute-bottom-right"> ... </div>
</div>
fixed:
<div class="fixed-top"> Stiky 01 </div>
stiky:
<div class="sticky-top"> Stiky 01 </div>
fit-up : overlaps an elemente to the previous one.
<div> ...main box </div>
<div class="fit-up"> overlapped on the previous box </div>
fit-height : overlaps an elemente with respect to his father.
<div> // the base box
<div class="fit-height">
overlapped on the father box
</div>
</div>
It is a simple js system that verifies if an element, in a lower resolution, bursts from the page. "table, code, pre, output" whit min-width native automatic checksize.
note: table, pre and code are already checksize
exemple:
<div class="checksize">...</div>
Class used by the framework to set fps and type of standard animation forcing the use of the gpu. If you are going to use it, remember that it will necessarily be deactivated (deleted by the html) when the css animation is finished.
<x class="gpuboost animationclassname"></x>
Limits the interface via media-query inside a viewport.
Since v 2.7 we have tried to find a new compromise between mobile, desktop and large screen sizes.
The current state the cuts is:
- < 900px (mobile/tablet)
- < 1920px (tablet/desktop)
- > 1920px (big monitor/big tv)
beyond this we have made available a particular limit that only comes into operation if an unacceptable layout threshold is exceeded: "limiter-over2k". We advise you to use it to create a containment cage if the site becomes excessively wide.
<div class="limiter-mobile">
Cut on mobile resolution
</div>
<div class="limiter-desktop">
Cut over 1366 desk resolution
</div>
<div class="limiter-bigscreen">
Cut for 21" resolution
</div>
<div class="limiter-over2k">
Cut over 2k resolution
</div>
<div class="limiter-all">
Auto cut
</div>
NOTE: .on- is deprecated, now is "viewon".
from v 2.7, after several tests, the modal class "viewon- [xxx-xxx-xxx]" was introduced.
Its job is to display or hide an element based on the resolution cuts.
An exemple:
<div class="viewon-[off-off-on]"> ... </div>
it is simply: displayThisElement-[bigscreen:off, desktop:off, mobile:on!]
░░ .hide .show \ .hidden .visible
Classes dedicated to the change of state hide/show of an element.
hide/show elements:
<div class="hide"> dsiplay:none; </div>
<div class="show"> rendered </div>
visible/hidden elements:
<div class="visible"> rendered </div>
<div class="hidden"> it exists, but not rendered </div>
Make an element not usable.
<div class="disabled" disabled>
opacity reduced. not cliccable or event
</div>
Standard way to targetting a active (or not active) status of animation or element.
<div class="view [status-active]">
this element is in active status
</div>
<div class="view [status-off]">
this element is in off status
</div>
<div class="view [status---]">
this element have inherit, end or not status
</div>
Clickable box with link or expandable to full screen.
In the clickable version the Card does nothing but check the link inside it. Clicking on the box is like clicking on the link.
You can see it on [✱ tester]
The structure:
<div class="card">
<div>
your content
</div>
<a class="hide" target="_self" href="linkurl"> go to... </a>
</div>
or more complete:
<div class="card">
<div>
<div class="autocrop" style="height:300px;">
<img src="imageonbackground.jpg" alt="" />
</div>
<span class="absolute-center align-center">
<img src="open.svg" height="100" width="100" alt="" />
</span>
</div>
<a class="hide" target="_self" href="linkurl"> go to ? </a>
</div>
In the version with content expandable to the click the Card will expand covering the entire screen. If the "auto-hide-show" attribute is present in its contents container, all the first "hidden" contents of the latter will appear automatically and sequentially to the expansion, vice versa, will collapse when it is closed.
The structure:
<div class="card">
<div class="expansive">
your content
</div>
</div>
or more complete:
<div class="card">
<div class="expander">
<div class="mask">
<!-- close button -->
<a style="width:25px; height:25px;" class="close absolute-top-right bkg-01 texttone-03">✖</a>
<!-- banner of box -->
<div class="autocrop" style="height:30vh;">
<img src="..." alt=" " />
</div>
<!-- contents group -->
<div>
<h3 class="textsize-03">
My Expansive Card!
</h3>
<p class="card-summary">
The contents box will appear and disappear with the expansion of the card
</p>
<div class="card-content">
<!-- full contnets -->
<div class="pad-[05] border-02">
<div class="hide-bar-y" style="max-height:50vh">
<div class="scroll-y">
<div class="textgroup">
<p>from hidden to show</p>
<p> .... </p>
<p> .... </p>
<p> .... </p>
<p> .... </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Remember that to animate at will you can use the Effector or refer to the active and off classes that appear based on standard animations.
However... it must be considered that, due to their particular animation (it is not possible to change from position: relative to posion: fixed with the classic css techniques) for the cards there are also "activation" and "deactivation". It may therefore be convenient to point to both in this way:
_(attention: the css will soon be aligned with the standard. check out these nomenclatures later.)_
.card>.[status-active],
.card>.transition
{
property on opening
}
.card>.[status-off],
.card>.deactivation
{
property on closing
}
Dynamic tabbed elements. [✱ see model on tester]
tabs-x: create a linear tabs;
<div class="tabs-x">
<div class="title">
<p>TAB NAME</p>
<nav>
<a> tab selector 1 </a>
<a> tab selector 2 </a>
<a> tab selector 3 </a>
<a class="close [status-active]">✖</a>
</nav>
</div>
<div class="mask">
<div class="mask">
<div class="wrap">
....
</div>
</div>
<div class="mask">
<div class="wrap">
....
</div>
</div>
<div class="mask">
<div class="wrap">
....
</div>
</div>
<div class="mask">
<div class="wrap">
</div>
</div>
</div>
</div>
tabs-y: create a vertical tabs;
<div class="tabs-y">
<div class="title">
<p> tab selector 1 </p>
<a class="close">✖</a>
</div>
<div class="mask">
<div class="wrap">
....
</div>
</div>
<div class="title [status-active]">
<p> tab selector 2 </p>
<a class="close">✖</a>
</div>
<div class="mask">
<div class="wrap">
....
</div>
</div>
<div class="title">
<p> tab selector 3 </p>
<a class="close">✖</a>
</div>
<div class="mask">
<div class="wrap">
....
</div>
</div>
</div>
Very similar to tabs, spoiler is a toggle (hide/show) collapser.
[✱ see model on tester]
A little exemple:
//spoiler-line if you wont a single wide line (smoothed details alternative)
//spoiler-tree if you wont a neasted spolers (folders navigation style)
<div class="spoiler-line">
<div class="title">
<p> <i class="icon"><svg ..."/></i> MY FOLDER </p>
</div>
<div class="mask">
<div class="wrap">
.....
</div>
</div>
</div>
A little extra:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><g><path d="M256,0C114.618,0,0,114.618,0,256s114.618,256,256,256s256-114.618,256-256S397.382,0,256,0z M256,469.333 c-117.818,0-213.333-95.515-213.333-213.333S138.182,42.667,256,42.667S469.333,138.182,469.333,256S373.818,469.333,256,469.333 z"></path><path d="M228.418,134.248c-8.331-8.331-21.839-8.331-30.17,0c-8.331,8.331-8.331,21.839,0,30.17L289.83,256l-91.582,91.582 c-8.331,8.331-8.331,21.839,0,30.17c8.331,8.331,21.839,8.331,30.17,0l106.667-106.667c8.331-8.331,8.331-21.839,0-30.17 L228.418,134.248z"></path></g></svg>
Basic css presentage progress bar.
<div class="progress-[00]"><!--bar upgrade--></div>
read more on [text management on tester ✱]
THIS SECTION IS DEPRECATED FROM 2.8.X, ACUALLY textgroup CLASS IS ONLY EXTRA INTO THEME.CSS
dynamically align via media-query.
A align move boxes around a space. B text move text align.
<div class="align-[left-right-center]">
<p> this tag is moved on left-right-center</p>
</div>
// or single:
<div class="align-[center]">
<p> this tag is moved on center </p>
</div>
// or for text alignment:
<div class="text-[center]">
<p> this text is align on center </p>
</div>
Simple truncator of sentences "for that singular line". read more on [text management on tester ✱]
<p class="ellipsis"> Lorem ipsum dolor sit amet ... <p>
Use ellipsis-child for sub box.
ellipsis-child now has an attribute that allows you to truncate the text contained in any box on multiple lines (from 1 to 50):
<div class="ellipsis-child-[4]"> //4 lines max
<p>
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet ...
<p>
</div>
Note: compared to all the others, it does not have the rule of writing the numbers in 01,02,03.
In the framework, everything that is not inserted in a "text" context (text-group or period or p or native text elements) is layout. In fact the "ul" and "ol" can change appearance from a simple bullet-based list to different types of menus / lists.
read more on [text management on tester ✱]
Exemple:
// layout list - wide mobile blocks
<div>
<ul>
<li> CONTENT... </li>
<li> CONTENT... </li>
<li> CONTENT... </li>
</ul>
</div>
// layout list - top menu style
<span>
<ul>
<li> CONTENT... </li>
<li> CONTENT... </li>
<li> CONTENT... </li>
</ul>
</span>
Almost same code, completely different results.
In the same way if placed in a text-group or period they would become classic dotted text lists.
note: In any case, to create a good menu, test the example available on the basic theme.
read more on [image management on tester ✱]
// centering and crop images
<div class="autocrop" style="heigth:XXXpx;">
<img src="url" alt="" />
</div>
/ or better:
<picture class="autocrop" style="heigth:XXXpx;">
<img src="url" alt="" />
</picture >
// hide/show image elements via media-query
<picture>
<img class="max-resolution" src="url" alt="" />
<img class="medium-resolution" src="url" alt="" />
<img class="small-resolution" src="url" alt="" />
</picture>
or...
<picture class="autocrop" style="heigth:XXXpx;">
<img class="max-resolution" src="url" alt="" />
<img class="medium-resolution" src="url" alt="" />
<img class="small-resolution" src="url" alt="" />
</picture>
The framework handles icons in several ways: as text, as an image and as an animation.
A useful model of the result obtained can be found in the [tester ✱]
An exemple of icon management:
// static exemple
<i class="icon">
<img src=.... />
</i>
// or if you wont animate or svg
<i class="icon myanimation">
<svg viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg"><path ....></path></svg>
</i>
It is to be made known that: A) the framework does not natively manage third-party animations B) even if this is already applicable, buttons have a more specific icon system
Different types of classes dedicated to video type this css ratio options. You can see more pratical exemple on: [✱ TEST OF HTML VIDEOS]
all ratio types in framework: [1:2],[1:1],[2:1],[21:9],[16:9],[9:16],[8:5],[3:2],[4:3]
standard html player
<video playsinline muted controls type="video/mp4" src="..." poster="..."></video>
customizable player:
<div class="videobox-[custom] ratio-[16:9]">
<video playsinline muted type="video/mp4" src="..." poster="..."></video>
<div class="display">
<div><p> Video Title </p></div>
<div>
<span class="maximized [status-off]"></span>
<span class="cinema [status-off]"></span>
<span class="loop [status-off]"></span>
<span class="play [status-off]"></span>
<span class="timeline">
<div class="progress-[00]"><!--buffer--></div>
<div class="progress-[00]"><!--loaded--></div>
</span>
<div class="duration">
<p>00:00:00 / 00:00:00</p>
</div>
<span class="volume [status-50] [status-off]"><div class="progress-[100]"></div></span>
</div>
</div>
</div>
background -> create a videobackground of div
<div class="videobox-[background]">
<video preload playsinline autoplay muted loop type="video/mp4" src="..." poster="..."></video>
</div>
backscreen -> create a fullscreen page video
<div class="videobox-[backscreen]">
<video preload playsinline autoplay muted loop type="video/mp4" src="..." poster="..."></video>
</div>
social -> an experimental a rapid way for include open social video (for mode exemple see the tester)
<div class="videobox-[social] ratio-[16:9]">
<video src="...."></video>
</div>
types of url accepted:
- https://www.youtube.com/watch?v=NVb5GV6lntU
- https://www.facebook.com/KimeraFramework/videos/2818375501782136
- https://instagram.com/p/vNquyLpjaZ/
- https://vimeo.com/169320822
From v 2.8.x there is the possibility to manage the audio players in a customizable way [✱ Check the tester] . This is the most complex structure you can currently reference (but you can do better):
<span class="audiobox">
<audio type="audio/mpeg" preload muted src="..."></audio>
<figure><img src="..."/></figure>
<div class="display">
<hx class="title">Title of audio</hx>
<p class="descrition">This is a description of records</p>
<div class="controls">
<div class="loop"></div>
<div class="play"></div>
<div class="timeline"></div>
<div class="volume"></div>
</div>
<div class="duration">
<p>00:00:00 / 00:00:00</p>
</div>
</div>
</span>
All anchor scrolls are animated automatically.
<a href="#my_section_name"></a> //anchor in a page
<div name="my_section_name"> //smooth scroll on target
....
</div>
"top" (undercheck on 2.8) remains the anchor to go back to the top of the page automatically calculating how much time it will take based on what has already scrolled.
<body>
.../viewport...
<div class="top">
<img src="icon" alt="on top now" />
<div>
</body>
The nav types are excellent systems to create "top menu" for the web, software or "tools & option menu" in style photoshop. It only depends on how you love to manage them via custom css
You can see in action on [✱ tester]
all this thanks to the native formatting provided by the framework that automatically equalizes the "slots" (in the example the links) and the "flanges" that activate (if you have them)
type-x = standard linear autospaced menu asset.
<nav class="type-x">
<ul>
<li><a> <img src="..." /></a></li>
<li>
<a><img src="..." /></a>
<div class="flange-bottom"> // wide flange
content...
</div>
</li>
<li>
<a> <img src="..." /> </a>
<span class="flange-bottom" style="width:xxxpx;"> // partial flange
Content...
</span>
</li>
</ul>
</nav>
type-y = standard vertical autospaced menu asset.
<nav class="type-y">
.... equal to previus exemple.
</nav>
Flange is a sub-member of the "nav type". It is used to generate a flying box that is positioned relative to the link that activates it.
The types of flanges are:
// div = wide flange, span = partial flange
// -top -right -bottom -left
<x class="flange-top"> Content... </x>
Install the files and set up the document. The topic: [from start to...]
List and use of all Ui of the framework. The topic: [viewports Ui]